@extends('layouts.app')


@section('content')
    <div class="card w-2/3">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-sack-dollar mr-1"></i>
                Initialisation du mobile money
            </div>
            <div class="text-gray-500 space-x-2">
                <a href="{{route('gt.mobile.create', ['guichet'=>$employe->id_employe])}}" class="hover:text-orange-500">
                    <i class="fal fa-plus fa-lg"></i>
                </a>
                <a href="{{route('gt.encaisse.index')}}" class="hover:text-orange-500">
                    <i class="fal fa-list fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="card-content mb-3 ">

                <table class="table-simple">
                    <thead>
                        <tr>
                            <th>Psce</th>
                            <th>Nom et prénom</th>
                            <th class="text-center">Profil</th>
                            <th class="text-center">Type coffre</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{$employe->caisse_id}} </td>
                            <td>{{$employe->nom_employe}} {{$employe->prenom_employe}}</td>
                            <td class="text-center">{{$employe->profil}} </td>
                            <td class="text-center">{{$employe->type_coffre}} </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            @php
                $frmDisplay = false;

                if($mod == 'mod2'){
                    $frmDisplay = true;
                }

                if($mod == 'mod3' && !empty($operateurMobile)){

                    $frmDisplay = true;

                }

            @endphp

            @if($frmDisplay)

            <div class="mb-3 border-b border-t py-3">
                <div></div>
                <form id="frmCaisse" method="post" action="{{$url}}">
                    @csrf
                    <input type="hidden" name="guichet" value="{{$employe->id_employe}}">
                    <input type="hidden" name="caisseId" value="{{$employe->caisse_id}}">

                    @if(!empty($mobile_init->id_oper))
                        <input type="hidden" name="operId" value="{{$mobile_init->id_oper}}">
                    @endif

                    <div class="flex justify-end space-x-3">
                        <div class="flex flex-1 space-x-3">
                            <div class="w-1/4">
                                @if($mod == 'mod2')
                                    <select name="mobile" id="" class="form-control">
                                        @foreach ($mobiles as $key=>$mobile)
                                            <option value="{{$key}}">{{$mobile}}</option>
                                        @endforeach
                                    </select>
                                @endif
                                @if($mod == 'mod3')
                                    @php
                                        $mobileCode = '';
                                        $mobileLabel = '';
                                        if(!empty($mobile_init->mobile)){

                                            $mobileCode =  $mobile_init->mobile;

                                            $mobileLabel = $mobiles_all[$mobile_init->mobile];

                                        }
                                    @endphp
                                    <input type="hidden" name="mobile" value="{{$mobileCode}}"/>
                                    <input type="text" name="mobileLabel" value="{{$mobileLabel}}" class="form-control" readonly/>
                                @endif
                            </div>
                            <div class="flex flex-1">
                                @php $dateOper = !empty($mobile_init->date_oper) ? $mobile_init->date_oper : date('Y-m-d') @endphp
                                <input type="date" name="dateOper" value="{{!empty($dateOper)?$dateOper:old('dateOper')}}" class="form-control">
                            </div>
                            <div class="w-1/4">
                                @php $numMobile = !empty($mobile_init->phone) ? $mobile_init->phone : '' @endphp
                                <input type="text" name="numMobile" value="{{!empty($numMobile)?$numMobile:old('numMobile')}}" class="form-control">
                            </div>
                            <div class="w-1/4">
                                @php $montant = !empty($mobile_init->debit) ? $mobile_init->debit : '' @endphp
                                <input type="text" name="montant" value="{{!empty($montant)?$montant:old('montant')}}" class="form-control">
                            </div>
                        </div>
                        <div>
                            @if($mod == 'mod2')
                            <button id="btnAdd" type="button" data-nature="debit" class="btn btn-warning btn-regul">
                                <i class="fal fa-level-down-alt"></i>
                                Ajouter
                            </button>
                            @endif
                            @if($mod== 'mod3')
                            <button id="btnAdd" type="button" data-nature="debit" class="btn btn-warning btn-regul">
                                <i class="fal fa-edit"></i>
                                Modifier
                            </button>
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            @endif

            <div class="card-content">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Opérateur</th>
                            <th class="text-center">Date</th>
                            <th class="text-center">N° Moblie</th>
                            <th class="text-right">Solde Initial</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($caissettes as $caissette)
                            <tr>
                                <td></td>
                                <td>{{key_exists($caissette->mobile, $mobiles_all)?$mobiles_all[$caissette->mobile]:''}}</td>
                                <td class="text-center">{{(new DateTime($caissette->date_oper))->format(config('myahs.date_format'))}}</td>
                                <td class="text-center">{{$caissette->phone}}</td>
                                <td class="text-right">{{ App\Lib\Format::number($caissette->debit)}}</td>
                                <td class="text-right">
                                    <a href="{{route('gt.mobile.edit',
                                        ['guichet'=>$employe->id_employe,
                                         'mobile'=>$caissette->mobile])}}" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-edit fa-lg"></i>
                                    </a>
                                    <a href="#" data-guichet="{{$employe->id_employe}}"
                                        data-url="{{route('gt.mobile.destroy',['operId'=>$caissette->id_oper])}}" class="text-gray-500 hover:text-orange-500 mr-2 btn-delete">
                                        <i class="fal fa-trash-alt fa-lg"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <form id="frmDelete" method="post" action="">
                @csrf
                <input type="hidden" name="guichet" id="guichet">
            </form>
        </div>
    </div>
    <x-msg-box>
        <x-slot name="title">
            Mobile money
        </x-slot>
        Voulez vous réellement enregistrer ?
    </x-msg-box>
@endsection

@section('script')
    <script src="{{asset('js/bavy.js')}}"></script>

    <script>

        let frmCaisse = document.getElementById("frmCaisse");

        let frmAction = 'frmCaisse';

        if(frmCaisse !== null){

            // document.getElementById("frmCaisse").addEventListener("submit", function(e){
            //     e.preventDefault();
            // });

        }

        let btnAdd = document.getElementById("btnAdd");

        if(btnAdd !== null){

            btnAdd.addEventListener("click", function(e){

                e.preventDefault();

                Modal("#MsgBox", "show");

            })

        }

        // document.getElementById("btnYes").addEventListener("click", function(e){
        //     e.preventDefault();
        //     document.getElementById("frmCaisse").submit();
        // });

        let btnDelete = document.querySelectorAll('.btn-delete');

        btnDelete.forEach(btn => {

            btn.addEventListener('click', function(e){
                e.preventDefault();

                frmAction = 'frmDelete';

                document.getElementById('frmDelete').setAttribute('action', btn.getAttribute('data-url'));

                document.getElementById('guichet').setAttribute('value', btn.getAttribute('data-guichet'));

                Modal('#MsgBox', 'show');

            })

        })

        document.getElementById('btnYes').addEventListener('click', function(e){

            if(frmAction == 'frmDelete'){
                document.getElementById('frmDelete').submit();
            }

            if(frmAction == 'frmCaisse'){
                document.getElementById('frmCaisse').submit();
            }

        })

    </script>

@endsection