@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-balance-scale mr-1"></i>
            Balance de compte
        </div>
        <div class="text-gray-500">
            <a href="#" id="btnPeriode" class=" hover:text-orange-500 mr-2">
                <i class="fal fa-calendar-alt fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>

        <div class="flex flex-wrap">
            @foreach ($dossiers as $doc)
                <div class="w-36 mr-5 mb-5">
                    <a href="#" data-date="{{$doc->last_oper}}"
                        class="btn-balance flex flex-col justify-center items-center  bg-opacity-40 shadow-sm hover:bg-opacity-60 border py-3 rounded-md bg-orange-200 hover:bg-orange-200">
                        <div class="mb-2 text-orange-400">
                            <i class="fad fa-folder fa-2xl"></i>
                        </div>
                        <div class="text-gray-500 uppercase">
                            {{$doc->name}}
                        </div>
                        <div class="font-normal text-orange-700">
                           {{(new DateTime($doc->last_oper))->format(config('myahs.date_format'))}}
                        </div>
                    </a>
                </div>
            @endforeach
        </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="balOption" id="balOption" value="1">

                <input type="hidden" name="report" id="report" value="{{$request->report}}">

                <div class="w-full mb-3">
                    <label for="">Période actuelle</label>
                    <div class="w-full">
                        <input type="date" name="dateReference" id="dateReference" value="{{date('Y-m-d')}}" class="form-control">
                    </div>
                </div>
                <div class="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>

{{-- <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">
                Période
            </div>
            <div class="flex flex-col items-center py-3 px-5">
                <div class="mt-5 mb-5">
                    Les périodes antérieur et actuelle sont obligatoire pour calculer les mouvements ainsi que les soldes.
                </div>
                <form id="frmPeriode" method="post" action="{{route('cp.balance.store')}}" class="flex w-full">
                    @csrf
                    <input type="hidden" name="decisionId" id="decisionId">
                    <div class="flex flex-col w-full space-y-3">
                        <div>
                            <label for="dateReference">Période actuelle</label>
                            <input type="date" name="dateReference" id="dateReference" value="{{date('Y-m-d')}}" class="form-control">
                        </div>
                        <div>
                            <label for="oldPeriode">Période antérieur</label>
                            <input type="date" name="oldPeriode" id="oldPeriode" value="{{date('Y-m-d')}}" class="form-control">
                        </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>
    let btnBalance = document.querySelectorAll('.btn-balance');

    if(btnBalance.length > 0){
    
        btnBalance.forEach(btn => {

            btn.addEventListener('click', function(e){
                e.preventDefault()
                let dateBalance = btn.getAttribute('data-date')
                document.getElementById('dateReference').setAttribute('value', dateBalance)
                document.getElementById('frmBalance').submit()
            })

            
        });

    }

    document.getElementById('btnPeriode').addEventListener('click', function(e){
        e.preventDefault()
        document.getElementById('balOption').setAttribute('value','2')
        Modal('#frmPeriode', 'show')
    })

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

@endsection