@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-table mr-1"></i>
            Bilan et compte de résultat
        </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="etat-fi">

                <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>


@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