@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-file-signature fa-lg mr-2"></i>

                Régularisation des opérations

            </div>
            <div class="text-gray-500 space-x-2">
                <a href="{{route('gt.regul.index')}}" class="hover:text-orange-500" title="Achat">
                    <i class="fal fa-book-open fa-lg"></i>
                </a>
                <a href="{{route('gt.regul.forget')}}" class="hover:text-orange-500" title="Vider les lignes">
                    <i class="fal fa-trash-alt fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>

            <div class="flex italic text-sm text-orange-700 space-x-5">
                <div>
                    Réf :  <span class="font-semibold">{{$journal->id_journal}}</span>
                </div>
                <div>
                    Date :  <span class="font-semibold">{{(new DateTime($journal->date_oper))->format(config('myahs.date_format'))}}</span>
                </div>
            </div>

            <x-caissette :journal="$journal" :sumBilletage="$sumBilletage"></x-caissette>

            <div class="card-content">
                <form id="frmCart" method="post" action="{{$url}}">
                    @csrf
                    <input type="hidden" name="journalId" value="{{$journal->id_journal}}">
                    <input type="hidden" name="natureOper" id="natureOper" value="debit">
                    <div class="flex text-red-500 text-sm">
                        @if(count($errors->all()))
                            {{implode(', ',str_replace('.','',$errors->all()))}}
                        @endif
                    </div>
                    <div class="flex space-x-3">
                        <div class="w-1/5">
                            <div>
                                @php $numCompte = !empty($rowEdit->numCompte) ? $rowEdit->numCompte : '' @endphp
                                <input type="text" name="numCompte" id="numCompte" value="{{ !empty($numCompte) ? $numCompte : old('numCompte')}}" class="form-control"  placeholder="N° Compte">
                            </div>
                            <div id="planCompte" style="width: 35rem" class="hidden bg-gray-200 border border-gray-300 shadow-md px-3 py-3">
                                <div class="flex w-full font-semibold border-b-2 border-gray-400">
                                    <div class="w-24 px-1">
                                        N° compte
                                    </div>
                                    <div class="flex flex-1 px-1">
                                        Libellé
                                    </div>
                                </div>
                                <div id="planCompteItems" class="px-1 overflow-auto" style="max-height: 10rem">
                                    <ul>
                                        @foreach ($plan_comptes as $plan_compte)
                                            <li class="hidden">
                                                <a href="{{$plan_compte->id_compte}}#" data-compte="{{$plan_compte->id_compte}}"
                                                    title="{{$plan_compte->libelle_compte}}"
                                                    class="item-compte hidden hover:text-orange-500 text-sm">
                                                    <span class="w-24">{{$plan_compte->id_compte}}</span>
                                                    <span>{{substr($plan_compte->libelle_compte,0,30)}} @if(strlen($plan_compte->libelle_compte)>30)...@endif</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="w-1/5">
                            <div>
                                @php $codeAnal = !empty($rowEdit->numCompte) ? $rowEdit->codeAnal : '' @endphp
                                <input type="text" name="codeAnal" id="codeAnalId" value="{{ !empty($codeAnal) ? $codeAnal : old('codeAnal')}}" class="form-control" placeholder="Code analytique">
                            </div>
                            <div id="codeAnalytique" style="width: 35rem" class="hidden bg-gray-200 border border-gray-300 shadow-md px-3 py-3">
                                <div class="flex w-full font-semibold border-b-2 border-gray-400">
                                    <div class="w-24 px-1">
                                        Code
                                    </div>
                                    <div class="flex flex-1 px-1">
                                        Libellé
                                    </div>
                                </div>
                                <div id="codeAnalytiqueItems" class="px-1 overflow-auto" style="max-height: 10rem">
                                    <ul>
                                        @foreach ($code_analytiques as $code)
                                            <li class="hidden py-1">
                                                <a href="{{$code->id_analytique}}#" data-code-anal="{{$code->id_analytique}}" class="item-code-anal hidden text-sm">
                                                    <span class="w-24">{{$code->id_analytique}}</span>
                                                    <span>{{ucwords(strtolower(substr($code->libelle_analytique,0,50)))}} @if((strlen($code->libelle_analytique)>50))...@endif</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-1">
                            @php $libelle = !empty($rowEdit->numCompte) ? $rowEdit->libelle : '' @endphp
                            <input type="text" name="libelle" id="" value="{{ !empty($libelle) ? $libelle : old('libelle')}}" class="form-control" placeholder="Libellé">
                        </div>
                        <div class="w-1/5">
                            @php $montant = !empty($rowEdit->numCompte) ? $rowEdit->debit + $rowEdit->credit : '' @endphp
                            <input type="text" name="montant" id="" value="{{ !empty($montant) ? $montant : old('montant')}}" class="form-control" placeholder="Montant">
                        </div>
                        <div>
                            <button type="button" data-nature="debit" class="btn btn-warning btn-regul">Débit</button>
                            <button type="button" data-nature="credit" class="btn btn-warning-alt btn-regul">Crédit</button>
                        </div>
                    </div>
                </form>
                <table class="table table-hover table-striped mt-3">
                    <thead>
                        <tr>
                            <th style="width: 5%">#</th>
                            <th style="width: 10%">N° Compte</th>
                            <th>Libellé compte</th>
                            <th style="width: 15%">Code</th>
                            <th>Libellé</th>
                            <th style="width: 15%" class="text-right">Débit</th>
                            <th style="width: 15%" class="text-right">Crédit</th>
                            <th style="width: 5%"></th>
                        </tr>
                    </thead>
                    <tbody>

                        @php
                            $sumDebit = 0;
                            $sumCredit = 0;
                            $i = 0;
                        @endphp

                        @if(count($operations)>0)
                            @foreach ($operations as $id=>$operation)
                                @php
                                    $i++;
                                    $sumDebit += $operation->debit;
                                    $sumCredit += $operation->credit;
                                @endphp
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{$operation->numCompte}}</td>
                                    @php $libelle_compte = key_exists($operation->numCompte, $plans)?$plans[$operation->numCompte]:'' @endphp
                                    <td title="{{$libelle_compte}}">{{substr($libelle_compte,0,30)}}</td>
                                    @php $libelle_analytique = key_exists($operation->codeAnal, $codes)?$codes[$operation->codeAnal]:'' @endphp
                                    <td title="{{$libelle_analytique}}">{{$operation->codeAnal}}</td>
                                    <td title="{{substr($operation->libelle,0,40)}}">{{substr($operation->libelle,0,40)}}</td>
                                    <td class="text-right">{{App\Lib\Format::number($operation->debit)}}</td>
                                    <td class="text-right">{{App\Lib\Format::number($operation->credit)}}</td>
                                    <td class="text-right">
                                        <a href="{{route('gt.regul.exchange',$id)}}" class="text-cyan-600 hover:text-range-500 mr-2" title="Echanger">
                                            <i class="fad fa-exchange-alt fa-lg"></i>
                                        </a>
                                        <a href="{{route('gt.regul.create',['edit'=>$id])}}" class="text-gray-500 hover:text-range-500 mr-2" title="Modifier">
                                            <i class="fal fa-edit fa-lg"></i>
                                        </a>
                                        <a href="{{route('gt.regul.destroy',$id)}}" class="text-red-500 hover:text-range-500 mr-2" title="Supprimer">
                                            <i class="fal fa-times fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            <tr class="font-bold">
                                <td colspan="5" class="font-bold text-right">TOTAL</td>
                                <td class="text-right">{{App\Lib\Format::number($sumDebit)}}</td>
                                <td class="text-right">{{App\Lib\Format::number($sumCredit)}}</td>
                                <td></td>
                            </tr>
                            @if($sumDebit != $sumCredit)
                                <tr class="font-bold">
                                    <td colspan="5" class="font-bold text-right">ECART</td>
                                    <td class="text-right">
                                        @if($sumDebit < $sumCredit)
                                            {{App\Lib\Format::number(abs($sumDebit - $sumCredit))}}
                                        @endif
                                    </td>
                                    <td class="text-right">
                                        @if($sumDebit > $sumCredit)
                                            <span class="text-red-500">{{App\Lib\Format::number(abs($sumDebit - $sumCredit))}}</span>
                                        @endif
                                    </td>
                                    <td></td>
                                </tr>
                            @endif
                        @else
                            <tr>
                                <td colspan="8" class="text-center">Aucun compte n'a été sélectionné</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            @if($sumDebit == $sumCredit && count($operations) > 0)
                <div class="flex justify-end space-x-3 mt-3">
                    <button id="btnSave" class="btn btn-warning">
                        <i class="fal fa-save mr-2"></i>
                        Enregistrer
                    </button>
                </div>
            @endif
            <form id="frmRegul" method="post" action="{{route('gt.regul.store')}}">
                @csrf
                <input type="hidden" name="journalId" value="{{$journal->id_journal}}">
            </form>
        </div>
    </div>


    <x-msg-box>
        <x-slot name="title">Régularisation</x-slot>
        Voulez-vous réellement enregister ces écritures comptables ?
    </x-msg-box>

@endsection

@section('script')
<script>

    // document.getElementById("frmCaisse").addEventListener("submit", function(e){
    //     e.preventDefault();
    // });

    let btnRegul = document.querySelectorAll('.btn-regul')

    btnRegul.forEach(btn => {

        btn.addEventListener('click', function(e){
            e.preventDefault();
            document.getElementById('natureOper').setAttribute('value', btn.getAttribute('data-nature'));
            document.getElementById('frmCart').submit();
        })

    })

    let btnSave = document.getElementById("btnSave");

    if(btnSave !== null){
        btnSave.addEventListener("click", function(e){
            Modal("#MsgBox", "show");
        });
    }

    document.getElementById("btnYes").addEventListener("click", function(e){
        e.preventDefault();
        document.getElementById("frmRegul").submit();
    });


    $(document).ready(function() {


        $("#numCompte").keyup(function(){

            let compteIn = $('#numCompte').val();

            let url = '';

            let selectHref = 'a[data-compte^="'+compteIn+'"]';

            let compteItem = document.querySelectorAll('#planCompteItems  > ul > li > ' + selectHref)

            $('#planCompte').addClass('absolute');

            $('#planCompte').removeClass('hidden');

            let li = document.querySelectorAll('#planCompteItems  > ul > li');

            let liContent = document.querySelectorAll('#planCompteItems  > ul > li a');

            li.forEach(items=>{
                items.classList.remove("flex");
                items.classList.add("hidden");
            })

            liContent.forEach(content=>{
                content.classList.remove("flex");
                content.classList.add("hidden");
            })

            compteItem.forEach(function(element){

                itemParent = element.parentElement;

                element.classList.add("flex");
                element.classList.remove("hidden");

                itemParent.classList.add("flex");
                itemParent.classList.remove("hidden");
            });

        }).focus(function(){
            $('#codeAnalytique').addClass('hidden');
        });

        $("#codeAnalId").keyup(function(){

            let codeAnalIn = $('#codeAnalId').val();

            let url = '';

            let selectHref = 'a[data-code-anal^="'+codeAnalIn+'"]';

            let codeItem = document.querySelectorAll('#codeAnalytiqueItems  > ul > li > ' + selectHref)

            $('#codeAnalytique').addClass('absolute');

            $('#codeAnalytique').removeClass('hidden');

            let li = document.querySelectorAll('#codeAnalytiqueItems  > ul > li');

            let liContent = document.querySelectorAll('#codeAnalytiqueItems  > ul > li a');

            li.forEach(items=>{
                items.classList.remove("flex");
                items.classList.add("hidden");
            })

            liContent.forEach(content=>{
                content.classList.remove("flex");
                content.classList.add("hidden");
            })

            codeItem.forEach(function(element){

                itemParent = element.parentElement;

                element.classList.add("flex");
                element.classList.remove("hidden");

                itemParent.classList.add("flex");
                itemParent.classList.remove("hidden");
            });

        }).focus(function(){
                $('#planCompte').addClass('hidden');
            });

        $(".item-compte").click(function(e){
            e.preventDefault();
            let numCompte = this.getAttribute('data-compte')
            $('#numCompte').val(numCompte);
            $('#planCompte').addClass('hidden');

        });

        $(".item-code-anal").click(function(e){
        e.preventDefault();
        let codeAnal = this.getAttribute('data-code-anal')
        $('#codeAnalId').val(codeAnal);
        $('#codeAnalytique').addClass('hidden');

        });

    });




</script>
@endsection