@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>
            opérations divers
        </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></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="w-full">
            <form id="frmEcriture" method="post" action="{{$url}}">
                @csrf
                <input type="hidden" id="action" name="action" value="debit">
                @include('guichet.regularisation.input')
            </form>
        </div>
        <div class="card-content">
            <table class="table table-striped">
                <thead>
                    <tr class="uppercase">
                        <th class="text-left">N° compte</th>
                        <th class="text-left">Libellé de compte</th>
                        <th class="text-left">Code</th>
                        <th class="text-left">Description</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;
                        $sumDebit = 0;
                        $sumCredit = 0;

                        $i = 0;
                    @endphp

                    @foreach ($operations as $id=>$operation)

                        @php

                            $sumDebit += $operation->debit;
                            $sumCredit += $operation->credit;
                            $ecart = $sumDebit - $sumCredit ;

                            $i++;

                        @endphp

                            <tr>
                                {{-- <td class="text-left">{{(new DateTime($journal->ecriture))->format(config('myahs')['date_format'])}}</td> --}}
                                <td class="text-left">{{$operation->id_compte}}</td>
                                <td class="text-left">
                                    @if(key_exists($operation->id_compte, $plans))
                                        {{$plans[$operation->id_compte]}}
                                    @endif
                                </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->debit)}}</td>
                                <td class="text-right">{{App\Lib\Format::number($operation->credit)}}</td>
                                <td class="text-right">
                                    <a href="{{route('gt.regul.create',['edit'=>$id])}}" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-edit fa-lg mr-2"></i>
                                    </a>
                                    {{-- <a href="{{route('cp.ecriture.edit.row',$id)}}" class="text-gray-500 hover:text-orange-500 mr-2">
                                        <i class="fal fa-edit fa-lg mr-2"></i>
                                    </a> --}}
                                    @if($mod == 'mod2')
                                    <a href="{{route('gt.regul.destroy', $id)}}" class="mr-2 text-red-500 hover:text-red-600">
                                        <i class="fal fa-times fa-lg mr-2"></i>
                                    </a>
                                    @endif
                                </td>
                            </tr>

                    @endforeach
                    @if($i == 0)
                        <tr>
                            <td colspan="7" class="text-center">Ajouter l'écriture</td>
                        </tr>
                    @else
                        <tr class="font-bold">
                            <td colspan="4" 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(round($sumDebit,2) != round($sumCredit,2))
                            <tr class="font-bold">
                                <td colspan="4" class="font-bold text-right">ECART</td>
                                <td class="text-right">
                                    @if($sumDebit < $sumCredit)
                                    <span class="text-red-500">{{App\Lib\Format::number(abs($sumDebit - $sumCredit))}}</span>
                                    @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
                    @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>
    <x-msg-box>
        <x-slot name="title">Ecriture</x-slot>
        Voulez-vous réellement supprimer toutes les lignes ?
    </x-msg-box>
</div>

@endsection

@section('script')
<script>

    // document.getElementById('btnClear').addEventListener('click', function(e){
    //     Modal('#MsgBox', 'show');
    // });

    document.getElementById('btnYes').addEventListener('click', function(e){
        document.getElementById('frmForget').submit();
    })

    $(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);

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

        })

    });

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

    if(btnSave != undefined){

        btnSave.addEventListener('click', function(e){
            Modal("#MsgBox", 'show');
        });

    }

    let btnYes = document.getElementById('btnYes');
    if(btnYes != undefined){
        btnYes.addEventListener('click', function(e){
            document.getElementById('frmRegul').submit();
        });
    }

</script>
@endsection