@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-font-case mr-1"></i>]
            Lettrage
        </div>
        <div class="text-gray-500">
            {{-- <a href="" 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>
        <form method="post" action="{{route('cp.lettre.search')}}" class="w-full">
            @csrf
            <div class="flex justify-end space-x-3 w-full mb-3">
                {{-- <div class="flex items-center w-44">
                    <select name="caisse" class="form-control">
                        @php $id_caisse = !empty($search->caisse) ? $search->caisse : '' @endphp
                        <option value="">-- CAISSE --</option>
                        @foreach ($caisses as $caisse)
                            <option value="{{ $caisse->id_caisse }}" {{ $caisse->id_caisse == $id_caisse ? 'selected' : '' }} >
                                {{ $caisse->id_caisse }}
                            </option>
                        @endforeach
                    </select>
                </div> --}}
                <div class="flex items-center space-x-2 w-1/3">
                    <select name="compte" class="form-control">
                        @php $id_compte = !empty($search->compte) ? $search->compte : '' @endphp
                        <option value="">-- N° COMPTE --</option>
                        @foreach ($comptes as $compte)
                            <option value="{{ $compte->id_compte }}" {{ $compte->id_compte == $id_compte ? 'selected' : '' }} >
                                {{ $compte->id_compte }} - {{ substr(mb_strtoupper($compte->libelle_compte,'UTF-8'),0,40) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-warning">
                        <i class="fal fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
        <div class="card-content">
            <table class="table table-hove">
                <thead>
                    <tr class="uppercase">
                        <th style="width: 5%"></th>
                        <th class="text-left" style="width: 10%">Date</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%">Lettrage</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="7"></td>
                    </tr>
                </tbody>
            </table>
            <div class="overflow-auto" style="max-height: 30rem;">
                <table class="table table-hover table-striped">
                    <tbody style="vertical-align: top;">
                        @php
                            $i = 0;
                        @endphp
                        @foreach ($operations as $operation)
                            @php
                                $i++;
                            @endphp
                            <tr>
                                <td style="width: 5%">
                                    <input type="checkbox" class="checkbox" name="reguls[]" id="regul_{{$operation->id_oper}}"
                                        value="{{$operation->id_oper}}"
                                        data-debit="{{$operation->debit}}"
                                        data-credit="{{$operation->credit}}">
                                </td>
                                <td class="text-left" style="width: 10%">{{(new DateTime($operation->date_oper))->format(config('myahs')['date_format'])}}</td>
                                <td class="text-left">{{mb_strtoupper($operation->libelle,'UTF-8')}}</td>
                                <td class="text-right" style="width: 15%">{{App\Lib\Format::number($operation->debit)}}</td>
                                <td class="text-right" style="width: 15%">{{App\Lib\Format::number($operation->credit)}}</td>
                                <td class="text-right" style="width: 15%">
                                    {{$operation->lettrage}}
                                </td>
                                <td class="text-right" style="width: 5%">
                                    <a href="{{route('cp.ecriture.show', $operation->journal_id)}}" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-book-open 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 class="flex justify-between mt-3">
            <div id="ecartLettrage"></div>
            <div>
                <button id="btnRegul" style="display:none" class="btn btn-warning">
                    <i class="fal fa-edit mr-1"></i>
                    Regulariser l'Ecart
                </button>
                <button id="btnLettrage" class="btn btn-warning">
                    <i class="fal fa-pen mr-1"></i>
                    Lettrer
                </button>
            </div>
        </div>
    </div>
</div>

<div>
    <form id="frmLettrage" method="post" action="{{route('cp.lettre.cart')}}" class="w-full">
        @csrf
        <input type="hidden" name="caisse" value="{{!empty($search->caisse)?$search->caisse:''}}">
        <input type="hidden" name="inputLettrage" id="inputLettrage">
    </form>
</div>

<x-form-modal>
    <x-slot name="title">
        Régularisation d'écart
    </x-slot>
    <form id="frmRegul" method="post" action="{{route('cp.ecart.cart')}}" class="w-full">
        @csrf
        <input type="hidden" name="caisse" value="{{!empty($search->caisse)?$search->caisse:''}}">
        <input type="hidden" name="compteId" value="{{!empty($search->compte)?$search->compte:''}}">
        <input type="hidden" name="typeEcriture" value="regul">
        <input type="hidden" name="lettrages" id="lettrages">
        <div class="space-y-4 mb-3">
                <div>
                    <label for="" class="text-sm text-gray-500">Type de journal</label>
                    <select name="typeJournal" class="form-control text-gray-600">
                        <option value="">-- Sélectionner le type de journal --</option>
                        @foreach (App\Lib\Combobox::natureJournal() as $id_nature=>$libelle)
                            <option value="{{ $id_nature }}" {{ $id_nature == old('typeJournal') ? 'selected' : '' }} >
                                {{ $libelle }}
                            </option>
                        @endforeach
                    </select>

                </div>
                <div>
                    <div class="text-sm text-gray-500">
                        Date
                    </div>
                    <div>
                        <input type="date" name="dateJournal" value="{{ !empty(old('dateJournal')) ? old('dateJournal') : date('Y-m-d') }}" class="form-control" required>
                        @error('dateJournal')
                            <span class="text-red-500 text-sm">{{$message}}</span>
                        @enderror
                    </div>
                </div><div>
                    <label for="" class="text-sm text-gray-500">Type de journal</label>
                    <select name="typeJournal" class="form-control text-gray-600">
                        <option value="">-- Sélectionner le type de journal --</option>
                        @foreach (App\Lib\Combobox::natureJournal() as $id_nature=>$libelle)
                            <option value="{{ $id_nature }}" {{ $id_nature == old('typeJournal') ? 'selected' : '' }} >
                                {{ $libelle }}
                            </option>
                        @endforeach
                    </select>

                </div>
                <div>
                    <div class="text-sm text-gray-500">
                        Libellé
                    </div>
                    <div>
                        <input type="text" name="libelle" value="{{old('libelle')}}" class="form-control" required>
                        @error('libelle')
                            <span class="text-red-500 text-sm">{{$message}}</span>
                        @enderror
                    </div>
                </div>
        </div>
    </form>
    <x-slot name="footer">
        <div class="flex justify-end space-x-3">
            <button id="btnRegulEcart" class="btn btn-warning">
                <i class="fal fa-save fa-lg mr-2"></i>
                Enregistrer
            </button>
            <button class="btn btn-dark btn-modal-close">
                <i class="fal fa-times fa-lg mr-1"></i>
                Annuler
            </button>
        </div>
    </x-slot>
</x-form-modal>
@endsection

@section('script')

    <script>

        let lettrage = document.querySelectorAll('.checkbox');
        let sumDebit = 0;
        let sumCredit = 0;

        lettrage.forEach(check => {

            check.addEventListener('click', function(e){

                checkValue();

            })

        });

        document.getElementById('btnRegul').addEventListener('click', function(e){

            let checkBoxNotNUll = collection();

            document.getElementById('lettrages').setAttribute('value', checkBoxNotNUll.join(';'));

            Modal("#frmModal", "show");
        });

        document.getElementById('btnRegulEcart').addEventListener('click', function(e){
             document.getElementById('frmRegul').submit();
        })

        function collection(){

            let checkOper = document.querySelectorAll('.checkbox');

            let checkBoxList = [];
            let checkBoxNotNUll = [];

            for (let i = 0; i < checkOper.length; i++) {

                let element = checkOper[i];

                if(element.checked == true){
                    checkBoxList[i] = element.getAttribute('value');
                }
            }
            let i = 0;
            checkBoxList.forEach(elt => {
                if(elt !== undefined){
                    checkBoxNotNUll[i] = elt;
                }
                i++;
            });

            return checkBoxNotNUll;

        }

        function checkValue(){

            let checkOper = document.querySelectorAll('.checkbox');

            let checkBoxList = [];
            let checkBoxNotNUll = [];

            for (let i = 0; i < checkOper.length; i++) {

                let element = checkOper[i];

                if(element.checked == true){
                    checkBoxList[i] = {
                        'status' : element.getAttribute('value'),
                        'debit' : !isNaN(element.getAttribute('data-debit')) ? element.getAttribute('data-debit') : 0,
                        'credit' : !isNaN(element.getAttribute('data-credit')) ? element.getAttribute('data-credit') : 0,
                    };
                }
            }

            let i = 0;

            let sumDebit = 0;
            let sumCredit = 0;
            let ecart = 0;

            checkBoxList.forEach(elt => {
                if(elt.status !== undefined){
                    sumDebit += parseFloat(elt.debit);
                    sumCredit += parseFloat(elt.credit);
                }
                i++;
            });

            ecart = sumDebit - sumCredit;

            // if((sumDebit + sumCredit) > 0 && ecart == 0){

            //    document.getElementById('btnRegul').style.display = 'none';
            //    document.getElementById('btnLettrage').style.display = 'block';

            // }else{

            //     document.getElementById('btnRegul').style.display = 'block';
            //     document.getElementById('btnLettrage').style.display = 'none';

            // }

            document.getElementById('ecartLettrage').textContent = 'Ecart = ' + (new Intl.NumberFormat("fr-FR").format(ecart));

        }

        document.getElementById('btnLettrage').addEventListener('click', function(e){

            document.getElementById('inputLettrage').setAttribute('value', collection().join(';'));

            document.getElementById('frmLettrage').submit();

        })

    </script>
@endsection