@extends('layouts.app')

@section('content')
<div class="card w-full">
    <div class="card-head">
        <div class="font-semibold text-cyan-900 uppercase">
            <i class="fal fa-book mr-1"></i>
            Grand livre
        </div>
        <div class="text-gray-500">
            <a href="#" id="btnExcel" class="hover:text-orange-500">
                <i class="fal fa-download fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>

        <div class="flex justify-end mb-2">

            <form method="post" action="{{route('cp.grdlibre.search')}}" class="w-full">
                @csrf
                <div class="flex justify-end space-x-3 w-full">
                    <div class="flex items-center space-x-2 w-1/3">
                        <input type="text" name="numCompte" value="{{ !empty($search->numCompte) ? $search->numCompte :'' }}" class="form-control" placeholder="N° compte, Libellé"/>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-warning">
                            <i class="fal fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>

        </div>
        <div class="card-content">
            <table class="table table-hove">
                <thead>
                    <tr class="">
                        <th class="text-left" style="width: 10%">N° compte</th>
                        <th class="text-left">Libellé</th>
                        <th class="text-right" style="width: 15%">Débit</th>
                        <th class="text-right" style="width: 15%">Crédit</th>
                        <th class="text-right" style="width: 15%">Solde</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6"></td>
                    </tr>
                </tbody>
            </table>
            <div class="overflow-auto" style="max-height: 30rem;">
                <table class="table table-hover table-striped">
                    <tbody style="vertical-align: top;">
                        @foreach ($comptes as $compte)
                            @php

                                $solde = $compte->sum_debit - $compte->sum_credit;

                                if($compte->classe == 'result' && substr($compte->id_compte,0,1) == '7'){
                                    $solde = -1*$solde;
                                }

                                if($compte->classe == 'passif'){
                                    $solde = -1*$solde;
                                }

                            @endphp
                            <tr>
                                <td class="text-left" style="width: 10%">{{$compte->id_compte}}</td>
                                <td class="text-left">{{mb_strtoupper($compte->libelle_compte,'UTF-8')}}</td>
                                <td class="text-right" style="width: 15%">{{App\Lib\Format::number($compte->sum_debit)}}</td>
                                <td class="text-right" style="width: 15%">{{App\Lib\Format::number($compte->sum_credit)}}</td>
                                <td class="text-right" style="width: 15%">
                                    @if($solde >= 0)
                                        {{App\Lib\Format::number($solde)}}
                                    @else
                                        <span class="text-red-500">({{App\Lib\Format::number($solde)}})</span>
                                    @endif
                                </td>
                                <td class="text-right" style="width: 5%">
                                    <a href="{{route('cp.grdlibre.show', $compte->id_compte)}}" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-book fa-lg"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{-- <table class="table">
                <tr>
                    <td colspan="3" class="text-right font-bold">TOTAL</td>
                    <td class="text-right font-bold" style="width: 15%">{{App\Lib\Format::number($sum_debit)}}</td>
                    <td class="text-right font-bold" style="width: 15%">{{App\Lib\Format::number($sum_credit)}}</td>
                    <td style="width: 5%"></td>
                </tr>
            </table> --}}
        </div>
    </div>
</div>
<x-form-modal>
    <x-slot name="title">
        Impression
    </x-slot>
    <div class="w-full">
        <form id="frmPrint" method="post" action="{{route('cp.grdlivre.download')}}">
            @csrf
            <div class="w-full space-y-3 mt-10">
                
                <input type="hidden" name="caisse" value="{{session('caisse-employe')}}">

                <div class="flex w-full justify-between space-x-3">
                    <div class="w-1/2">
                        <x-label>Date début</x-label>
                        <div>
                            <input type="date" name="dateDebut" value="{{date('Y-m-d')}}" class="form-control">
                        </div>
                    </div>
                    <div class="w-1/2">
                        <x-label>Date fin</x-label>
                        <div>
                            <input type="date" name="dateFin" value="{{date('Y-m-d')}}" class="form-control">
                        </div>
                    </div>
                </div>
                <div>
                    <x-label>Compte</x-label>
                    <div>
                        <select name="compte" id="" class="form-control">
                            <option value="actif">ACTIF</option>
                            <option value="passif">PASSIF</option>
                            <option value="charge">CHARGES</option>
                            <option value="produit">PRODUIT</option>
                        </select>
                    </div>
                </div>
                <div>
                    <x-label>Format</x-label>
                    <div>
                        <select name="format" id="" class="form-control">
                            <option value="csv">CSV (Excel)</option>
                            <option value="pdf">PDF</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <x-slot name="footer">

        <div class="flex justify-center space-x-3 mt-3">
            <button id="printer" class="btn btn-warning">
                <i class="fal fa-download mr-2"></i>
                Exporter
            </button>
        </div>

    </x-slot>
</x-form-modal>
@endsection

@section('script')
    <script>

        document.getElementById('btnExcel').addEventListener('click', function(e){
            e.preventDefault();
            Modal("#frmModal", 'show');
        });

        document.getElementById('printer').addEventListener('click', function(e){
            e.preventDefault();
            document.getElementById("frmPrint").submit();
        });

    </script>
@endsection