@extends('layouts.app')


@section('content')
    <div class="card w-full">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">

                <i class="{{$object_nature->icon}} fa-lg mr-2"></i>

                {{$object_nature->title}}

            </div>
            <div class="text-gray-500 space-x-2">
                <a href="{{route('gt.transaction.guichet')}}" class="hover:text-orange-500" title="Encaissement">
                    <i class="fal fa-book-open fa-lg"></i>
                </a>
                <a href="{{route('gt.transaction.create', 'ef')}}" class="hover:text-orange-500" title="Encaissement">
                    <i class="fal fa-sack-dollar fa-lg"></i>
                </a>
                <a href="{{route('gt.transaction.create', 'sf')}}" class="hover:text-orange-500" title="Décaissement">
                    <i class="fal fa-sack fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>

            <div class="flex italic text-sm text-orange-700 space-x-5">
                <div>
                    Réf :  <span class="font-semibold">{{$journal->id_journal}}</span>
                </div>
                <div>
                    Date :  <span class="font-semibold">{{(new DateTime($journal->date_oper))->format(config('myahs.date_format'))}}</span>
                </div>
            </div>

            @if(in_array($guichet->type_coffre, ['C','R']))
                <x-caissette :journal="$journal" :sumBilletage="$sumBilletage"></x-caissette>
            @endif

            @if($guichet->type_coffre == 'M')
            <x-mobile-money
                :employe="$employe"
                :dateOper="$dateOper"></x-mobile-money>
            @endif

            <div class="card-content">

                @if(in_array($guichet->type_coffre, ['C','R']))
                    @include('guichet.transaction.caissette')
                    @include('guichet.transaction.tableCaissette')
                @endif

            </div>
            @if(count($planComptes)==0)
                <div class="flex mt-3 border rounded-md px-5 py-2 mb-5 shadow-md border-orange-400 bg-orange-100 text-orange-800">
                    La liste des comptes de transactions est nécessaire. Veuillez signaler le responsable de la comptabilité.
                </div>
            @endif
            @if(count($operations)>0)
            <div class="flex justify-end space-x-3 mt-3">
                <button  id="btnSave" class="msg-box-show btn btn-warning">
                    <i class="fal fa-save mr-1"></i>
                    Enregistrer
                </button>

                <a href="#" class="inline-block btn btn-dark">
                    <i class="fal fa-times mr-1"></i>
                    Annuler
                </a>

            </div>
            @endif
        </div>
    </div>
    <div id="MsgBox" class="modal hidden justify-center fixed w-full h-full top-0 left-0 z-50 bg-black bg-opacity-80">
        <div class="w-2/5 pt-56">
            <div class="rounded-lg border border-gray-300 bg-white py-3 text-gray-700">
                <div id="msgTitle" class="border-b border-gray-300 px-5 font-semibold">
                    Transaction
                </div>
                <div class="flex items-center py-3 px-5">
                    @php
                        if($nature == 'at'){
                            $nature = 'sf';
                        }
                        if($nature == 'vt'){
                            $nature = 'ef';
                        }
                    @endphp
                    <form id="frmCaisse" method="post" action="{{$urlStore}}" class="flex w-full">
                        @csrf
                        <input type="hidden" name="journalId" id="journalId" value="{{$journal->id_journal}}">
                        <input type="hidden" name="nature" id="nature" value="{{$nature}}">
                        <div class="flex flex-col w-full space-y-3">
                            <div class="flex flex-col w-full">
                                <div>Réf opération</div>
                                <div>
                                    <input type="text" name="piece" class="form-control" placeholder="Réf pièce comptable">
                                </div>
                            </div>
                            <div class="flex flex-col w-full">
                                <div>Saisir le libellé de cette écriture</div>
                                <div>
                                    <input type="text" name="motif" class="form-control" placeholder="Libellé de l'écriture">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="flex items-center justify-end space-x-4 border-t border-gray-300 mt-5 px-5 pt-2">
                    <button id="btnYes" class="btn btn-warning">
                        <i class="fal fa-check mr-1"></i>
                        Valider
                    </button>
                    <button id="btnNo" class="btn btn-dark btn-modal-close">
                        <i class="fal fa-check mr-2"></i>
                        Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
<script>

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

    let btnSave = document.getElementById('btnSave');

    if(btnSave != undefined){

        btnSave.addEventListener("click", function(e){
            e.preventDefault();
            Modal("#MsgBox", "show");
        })

    }

    // document.querySelector(".msg-box-show").addEventListener("click", function(e){
    //     e.preventDefault();
    //     Modal("#MsgBox", "show");
    // })
    
</script>
@endsection