@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-open mr-1"></i>
            écriture de règlement
        </div>
        <div class="text-gray-500">
            {{-- <a href="" class="search mr-2">
                <i class="fal fa-plus fa-lg"></i>
            </a> --}}
            <a href="{{route('cp.ecriture.forget')}}" class="hover:text-orange-500">
                <i class="fal fa-trash-alt fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>

        <form id="frmEcriture" method="post" action="{{$url}}" class="w-full">
            @csrf
            <input type="hidden" name="typeEcriture" value="init">
            <input type="hidden" id="action" name="action" value="debit">
            <div class="card-content">
                <table class="table table-striped">
                    <thead>
                        <tr class="uppercase">
                            <th class="text-left">N° compte</th>
                            <th class="text-left">Code</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 style="width: 10%"></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top">
                        @php
                            $ecart = 0;
                            $sum_oper_debit = 0;
                            $sum_oper_credit = 0;
                            $sum_ecriture_debit = 0;
                            $sum_ecriture_credit = 0;
                            $last_libelle = '';
                        @endphp
                        @foreach ($operations as $id=>$operation)
                            @php
                                $sum_oper_debit += $operation->credit; //c'est l'inverse
                                $sum_oper_credit += $operation->debit;
                                // $ecart = $sum_debit - $sum_credit;
                                // $last_libelle = $ecriture->libelle;
                            @endphp
                            <tr>
                                {{-- <td class="text-left">{{(new DateTime($journal->ecriture))->format(config('myahs')['date_format'])}}</td> --}}
                                <td class="text-left">{{$operation->compte_id}}</td>
                                <td class="text-left">{{!empty($operation->code_analytique)?$operation->code_analytique:'00'}}</td>
                                <td class="text-left">{{$operation->libelle}}</td>
                                <td class="text-right">{{App\Lib\Format::number($operation->credit)}}</td>
                                <td class="text-right">{{App\Lib\Format::number($operation->debit)}}</td>
                                <td class="text-right">
                                    {{-- <a href="" class="mr-2">
                                        <i class="fal fa-edit"></i>
                                    </a> --}}
                                    @if($mod == 'mod2')
                                    <a href="{{route('cp.ecriture.destroy', $id)}}" class="mr-2 text-red-500">
                                        <i class="fal fa-close"></i>
                                    </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach

                        @foreach ($ecritures as $id=>$ecriture)
                            @php
                                $sum_ecriture_debit += $ecriture->debit;
                                $sum_ecriture_credit += $ecriture->credit;
                                $ecart = $sum_ecriture_debit - $sum_ecriture_credit;
                                // $last_libelle = $ecriture->libelle;
                            @endphp

                            @if($mod == 'mod3')
                                @if((int)$id_oper === $id)
                                    @php $action = 'edit' @endphp
                                    @include('compta.ecritures.input')
                                @endif
                            @endif

                            <tr>
                                {{-- <td class="text-left">{{(new DateTime($journal->ecriture))->format(config('myahs')['date_format'])}}</td> --}}
                                <td class="text-left">{{$ecriture->id_compte}}</td>
                                <td class="text-left">{{!empty($ecriture->code_analytique)?$ecriture->code_analytique:'00'}}</td>
                                <td class="text-left">{{$ecriture->libelle}}</td>
                                <td class="text-right">{{App\Lib\Format::number($ecriture->debit)}}</td>
                                <td class="text-right">{{App\Lib\Format::number($ecriture->credit)}}</td>
                                <td class="text-right">
                                    <a href="" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-edit fa-lg"></i>
                                    </a>
                                    @if($mod == 'mod2')
                                        <a href="{{route('cp.regul.destroy', $id)}}" class="mr-2 text-red-500">
                                            <i class="fal fa-close fa-lg"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>

                        @endforeach

                        @if($mod == 'mod2')
                            @php $action = 'create' @endphp
                            @include('compta.ecritures.input')
                        @endif

                    </tbody>
                </table>
                @php
                    $sum_debit = $sum_oper_debit + $sum_ecriture_debit;
                    $sum_credit = $sum_oper_credit + $sum_ecriture_credit;
                    $ecart = round(($sum_debit) - ($sum_credit),2);
                @endphp
                <table class="table table-hover">
                    <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_oper_debit + $sum_ecriture_debit)}}</td>
                        <td class="text-right font-bold" style="width: 15%">{{App\Lib\Format::number($sum_oper_credit + $sum_ecriture_credit)}}</td>
                        <td style="width: 10%"></td>
                    </tr>
                    @if($ecart != 0)
                    <tr>
                        <td colspan="3" class="text-right font-bold">ECART</td>
                        <td class="text-right font-bold" style="width: 15%">
                            @if($ecart < 0)
                            {{App\Lib\Format::number(abs($ecart))}}
                            @endif
                        </td>
                        <td class="text-right font-bold" style="width: 15%">
                            @if($ecart > 0)
                            {{App\Lib\Format::number($ecart)}}
                            @endif
                        </td>
                        <td style="width: 10%"></td>
                    </tr>
                    @endif
                </table>
            </div>
        </form>

        @if($ecart == 0 && $sum_debit > 0)
        <div class="flex justify-end space-x-3 mt-3">
            <button id="btnJournal" class="btn btn-warning">
                <i class="fal fa-check mr-2"></i>
                Terminer
            </button>
        </div>
        @endif

    </div>
    <x-msg-box>
        <x-slot name="title">Ecriture</x-slot>
        Voulez-vous réellement valider cette écriture ?
    </x-msg-box>
</div>

<x-form-modal>
    <x-slot name="title">
        Journal
    </x-slot>
    <form id="frmJournal" method="post" action="{{route('cp.regul.store')}}" class="w-full">
        @csrf
        <div class="space-y-4 mb-3">
                @csrf
                <input type="hidden" name="typeEcriture" value="init">
                <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>
                    <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="btnSave" 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 inputMtt = document.querySelectorAll('.inputMontant');

        let ecart = {{$ecart}}

        inputMtt.forEach(elt=>{

            elt.addEventListener('dblclick', function(e){
                e.preventDefault();
               this.setAttribute('value', ecart);
            })

        })

        $(document).ready(function() {

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

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

                let url = '{{route("cp.plancompte.compteItems")}}/'+compteIn

                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 = '{{route("cp.plancompte.compteItems")}}/'+codeAnalIn;

                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')
            $('#compteId').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');

        });

        let btnJournal = document.getElementById('btnJournal');

        if(btnJournal !== null){
            btnJournal.addEventListener('click', function(e){
                Modal('#frmModal', 'show');
            })
        }

        let btnAction = document.querySelectorAll('.btn-action');

        btnAction.forEach(btn => {

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

                let action = btn.getAttribute('data-operation');

                document.getElementById('action').setAttribute('value', action);

                if(action == 'balance'){

                    document.getElementById('frmEcriture').setAttribute('action', "{{route('cp.regul.balance')}}");

                }

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

            })

        });

        document.getElementById('btnSave').addEventListener('click', function(e){
            document.getElementById('frmJournal').submit();
        });

    </script>
@endsection