@extends('layouts.app')

@section('content')
<div class="w-4/5">
    <div class="card">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-address-book mr-1"></i>
                balance des comptes
            </div>
            <div class="space-x-2 text-gray-500">
                {{-- <a href="" class="hover:text-orange-500" title="Ajouter un nouveau utilisateur">
                    <i class="fal fa-plus fa-lg"></i>
                </a> --}}
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="card-content mb-3">
                <table class="table">
                    <tr>
                        <td>ID Agence</td>
                        <td class="text-center">Dénomination</td>
                        <td class="text-center">Localité</td>
                        <td class="text-center">Téléphone</td>
                        <td></td>
                    </tr>
                    <tr class="font-bold">
                        <td>{{$agence->id_agence}}</td>
                        <td class="text-center">{{$agence->nom_agence}}</td>
                        <td class="text-center">{{$agence->localite}}</td>
                        <td class="text-center">{{$agence->phone}}</td>
                        <td class="text-right">
                            <a href="#" data-caisse="{{$agence->id_agence}}"
                                class="balance text-orange-400 hover:text-orange-600 mr-2" title="Balance mensuel">
                                <i class="fad fa-folder fa-lg"></i>
                            </a>
                            <a href="#" data-caisse="{{$agence->id_agence}}"
                                class="balance-barcielle text-cyan-600 hover:text-cyan-500 mr-2" title="Balance périodique">
                                <i class="fad fa-calendar-alt fa-lg"></i>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="card-content">
                <table class="table table-striped table-hover text-sm">
                    <thead>
                        <tr>
                            <th class="text-left">ID Caisse</th>
                            <th class="text-left">Dénomination</th>
                            <th class="text-left">Localité</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top">
                        @php
                            $i = 0;
                        @endphp
                        @foreach ($caisses as $caisse)
                            @php
                                $i++;
                            @endphp
                            <tr class="uppercase">
                                <td>{{ $caisse->id_caisse }}</td>
                                <td>{{ $caisse->nom_caisse }}</td>
                                <td>{{ $caisse->localite }}</td>
                                <td class="text-right">
                                    <a href="#" data-caisse="{{$caisse->id_caisse}}"
                                        class="balance text-orange-400 hover:text-orange-600 mr-2" title="Balance mensuel">
                                        <i class="fad fa-folder fa-lg"></i>
                                    </a>
                                    <a href="#" data-caisse="{{$caisse->id_caisse}}"
                                        class="balance-barcielle text-cyan-600 hover:text-cyan-500 mr-2" title="Balance périodique">
                                        <i class="fad fa-calendar-alt fa-lg"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        @if($i == 0)
                            <tr>
                                <td colspan="9" class="text-center">
                                    <span class="text-gray-800">La liste est vide</span>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <x-form-modal :frmModal="'frmPeriode'">
        <x-slot:title>Période</x-slot:title>
        <div class="w-full">
            <form id="frmBalance" method="post" action="{{route('cp.balance.store')}}">
                @csrf
                <input type="hidden" name="caisseId" id="caisseId">
                <input type="hidden" name="balOption" id="balOption" value="1">
                <div class="w-full mb-3">
                    <label for="">Période actuelle</label>
                    <div class="w-full">
                        <input type="date" name="dateReference" value="{{date('Y-m-d')}}" class="form-control">
                    </div>
                </div>
                <div class="hidden date-balplle w-full">
                    <label for="">Période antérieur</label>
                    <div class="w-full">
                        <input type="date" name="dateBefore" value="{{date('Y-m-d')}}" class="form-control">
                    </div>
                </div>
            </form>
        </div>
        <x-slot:footer>
            <div class="flex justify-center items-center w-full">
                <button id="btnValider" class="btn btn-warning">
                    <i class="fal fa-check mr-2"></i>
                    Valider
                </button>
            </div>
        </x-slot:footer>
    </x-form-modal>
</div>
@endsection

@section('script')
    <script>

        let balance = document.querySelectorAll('.balance');
        let balPlle = document.querySelectorAll('.balance-barcielle');

        balance.forEach(elt => {
            elt.addEventListener('click', function(e){
                e.preventDefault()
                let guichet = elt.getAttribute('data-caisse')
                document.getElementById('caisseId').setAttribute('value', guichet)
                document.getElementById('balOption').setAttribute('value', 1)
                document.querySelector('.date-balplle').classList.add("hidden")
                Modal('#frmPeriode', 'show')
            })
        });
        balPlle.forEach(pple => {
            pple.addEventListener('click', function(e){
                e.preventDefault()
                let guichet = pple.getAttribute('data-caisse')
                document.getElementById('caisseId').setAttribute('value', guichet)
                document.getElementById('balOption').setAttribute('value', 2)
                document.querySelector('.date-balplle').classList.remove("hidden")
                Modal('#frmPeriode', 'show')
                console.log(guichet)
            })
        });

        document.getElementById('btnValider').addEventListener('click', function(){
            document.getElementById('frmBalance').submit();
        })

    </script>
@endsection