@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.od.index')}}" class="hover:text-orange-500" title="Achat">
                <i class="fal fa-book-open fa-lg"></i>
            </a>
            <a href="{{route('gt.od.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 mb-3">
            @include('guichet.oper_divers.input')
        </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, $listeComptes))
                                        {{mb_strtoupper(substr($listeComptes[$operation->id_compte],0,30), 'utf8')}}
                                    @else
                                        {{$operation->id_compte}}
                                    @endif
                                </td>
                                <td class="text-left">
                                    {{key_exists($operation->code_analytique, $listeCodes)?$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.od.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.od.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-check mr-2"></i>
                    Terminer
                </button>
            </div>
        @endif
        {{-- <form id="frmRegul" method="post" action="{{route('gt.od.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> --}}

    <x-form-modal :frmModal="'modalOperDivers'">

        <x-slot:title>Opérations divers</x-slot:title>

        <div class="flex items-center w-full py-3 px-5">
            <form id="frmOperDivers" method="post" action="{{route('gt.od.store')}}" class="flex w-full">
                @csrf
                <input type="hidden" name="journalId" id="journalId" value="{{$journal->id_journal}}">
                <div class="flex flex-col w-full space-y-3">
                    <div class="flex flex-col w-full">
                        <div class="mb-3">Pour enregistrer cette écriture veuillez renseigner la référence de la pièce comptable manuelle.</div>
                        <div>
                            <input type="text" name="piece" class="form-control" placeholder="Réf pièce comptable">
                        </div>
                    </div>
                    {{-- <div class="flex flex-col w-full">
                        <div>Saisir le libellé de cette écriture</div>
                        <div>
                            <input type="text" name="motif" class="form-control" placeholder="Libellé de l'écriture">
                        </div>
                    </div> --}}
                </div>
            </form>
        </div>

        <x-slot:footer>
            <div class="flex flex-1 justify-center space-x-3">                
                <button id="btnYes" class="btn btn-warning">
                    <i class="fal fa-save mr-1"></i>
                    Enregistrer
                </button>
                <button id="btnNo" class="btn btn-dark btn-modal-close">
                    <i class="fal fa-times mr-2"></i>
                    Annuler
                </button>
            </div>
        </x-slot:footer>
    </x-form-modal>

</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();
    })

    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("#modalOperDivers", 'show');
        });

    }

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

</script>
@endsection