@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 comptable
        </div>
        <div class="text-gray-500">
            <a id="btnClear" href="#" class="search">
                <i class="fal fa-trash-alt fa-lg hover:text-orange-500"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>
        @if($errors->any())
            <x-error-msg>
                <span class="font-bold text-yellow-600">Erreurs : </span>{{implode(', ', $errors->all())}}
            </x-error-msg>
        @endif
        <div class="w-full">
            <form id="frmEcriture" method="post" action="{{$url}}">
                @csrf
                <input type="hidden" id="action" name="action" value="debit">
                @include('compta.ecritures.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 ($ecritures as $id=>$ecriture)

                        @php

                            $sumDebit += $ecriture->debit;
                            $sumCredit += $ecriture->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">{{$ecriture->id_compte}}</td>
                                <td class="text-left">
                                    @if(key_exists($ecriture->id_compte, $plans))
                                        {{$plans[$ecriture->id_compte]}}
                                    @endif
                                </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="{{route('cp.ecriture.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('cp.ecriture.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(round($sumDebit,2) == round($sumCredit,2) && $sumDebit > 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
        @php
            $saveUpdate = !empty($journal->id_journal)?route('cp.ecriture.saveUpdate', $journal->id_journal):'';
        @endphp
        <form id="frmForget" method="post" action="{{route('cp.ecriture.forget')}}">
            @csrf
        </form>
    </div>
    <x-msg-box>
        <x-slot name="title">Ecriture</x-slot>
        Voulez-vous réellement supprimer toutes les lignes ?
    </x-msg-box>
</div>

<x-form-modal>
    <x-slot name="title">
        Journal
    </x-slot>
    <form id="frmJournal" method="post" action="{{route('cp.ecriture.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>

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

                if(action == 'balance'){

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

                }

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

            })

        });

        // document.getElementById('btnOperation').addEventListener('click',function(e){
        //     e.preventDefault()
        //     document.getElementById('frmEcriture').submit();
        // })

        // document.getElementById('btnBalance').addEventListener('click', function(e){
        //      document.getElementById('frmEcriture').setAttribute('action', "{{route('cp.ecriture.balance')}}");
        //      document.getElementById('frmEcriture').submit();
        // })

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

    </script>
@endsection