@extends('layouts.app')

@section('content')
<div class="card w-4/5">
    <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="{{route('cp.balance.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="{{route('cp.balance.export')}}" 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.balance.bilan', [
                        'etat'  =>'actif',
                        'periode'   =>$periode
                    ])}}" class="{{ $actif }} rounded-t-md px-3 py-1 text-md inline-block">actif</a>
                    <a href="{{route('cp.balance.bilan', [
                        'etat'  =>'passif',
                        'periode'   =>$periode
                    ])}}" class="{{$passif}} rounded-t-md px-3 py-1 text-md inline-block" >passif</a>
                    <a href="{{route('cp.balance.result', [
                        'etat'  =>'result',
                        'periode'   =>$periode
                    ])}}" class="{{$result}} rounded-t-md px-3 py-1 text-md inline-block">résultat</a>
                </div>
                <div class="text-orange-500 font-bold">
                    @if(!empty($agence->id_agence))
                        BALANCE CONSOLIDE {{$agence->nom_agence}}
                    @endif

                    @if(!empty($caisse->id_caisse))
                        BALANCE GUICHET {{$caisse->id_caisse}}
                    @endif

                </div>
                <div>
                    {{(new DateTime($search->oldPeriode))->format(config('myahs.date_format'))}} - {{(new DateTime($search->dateReference))->format(config('myahs.date_format'))}}
                </div>
            </div>

            @include("compta.balance.$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="caisseId" id="caisseId" value="{{$search->caisseId}}">
            <div class="w-full space-y-3">
                <div>Veuillez renseigner la date référence pour la balance</div>
                <div class="w-full">
                    <input type="date" name="dateReference" 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("frmBalance").addEventListener("submit", function(e){
        e.preventDefault();
    });

    document.getElementById("btnPeriode").addEventListener("click", function(e){
        e.preventDefault();
        Modal("#frmPeriode", "show");
        document.getElementById("btnValider").focus();
    })
    document.getElementById("btnValider").addEventListener("click", function(e){
        e.preventDefault();
        document.getElementById("frmBalance").submit();
    });
</script>

@endsection