@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>
            Bilan et compte de résultat
        </div>
        <div class="text-gray-500">
            <a href="{{route('cp.etatfi.create')}}" class=" hover:text-orange-500 mr-2">
                <i class="fal fa-folder fa-lg"></i>
            </a>
            <a href="#" id="btnPeriode" class=" hover:text-orange-500 mr-2">
                <i class="fal fa-calendar-alt fa-lg"></i>
            </a>
            <a href="{{route('cp.balance.pdf')}}" class=" hover:text-orange-500 mr-2">
                <i class="fal fa-print fa-lg"></i>
            </a>
            <a href="" class=" text-green-600 hover:text-orange-500">
                <i class="fal fa-file-excel fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>

        <div class="card-content">

            <div class="flex justify-between uppercase space-x-4 font-semibold text-gray-700 border-b-2 border-cyan-700 pl-4">
                <div>
                    @php
                        $onglet_actif = "bg-cyan-700 text-white text-opacity-70";
                        $onglet_inactif = "border border-cyan-800 border-opacity-20 text-cyan-700 hover:bg-opacity-90 bg-cyan-100 bg-opacity-60 border-b-0 ";
                        // $actif = $passif = $result = $onglet_inactif;
                        $actif = $class_compte == 'actif' ? $onglet_actif : $onglet_inactif;
                        $passif = $class_compte == 'passif' ? $onglet_actif : $onglet_inactif;
                        $result = $class_compte == 'result' ? $onglet_actif : $onglet_inactif;
                    @endphp
                    <a href="{{route('cp.etatfi.bilan', [
                        'etat'  =>'actif',
                        'periode'   =>$periode
                    ])}}" class="{{ $actif }} rounded-t-md px-3 py-1 text-md inline-block">actif</a>
                    <a href="{{route('cp.etatfi.bilan', [
                        'etat'  =>'passif',
                        'periode'   =>$periode
                    ])}}" class="{{$passif}} rounded-t-md px-3 py-1 text-md inline-block" >passif</a>
                    <a href="{{route('cp.etatfi.result', [
                        'etat'  =>'result',
                        'periode'   =>$periode
                    ])}}" class="{{$result}} rounded-t-md px-3 py-1 text-md inline-block">résultat</a>
                </div>
                <div>
                    {{(new DateTime($debutPeriode))->format(config('myahs.date_format'))}} - {{(new DateTime($finPeriode))->format(config('myahs.date_format'))}}
                </div>
            </div>

            @include("compta.etatfi.$view")

        </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="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>

@endsection

@section('script')
<script>    

    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