@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.create')}}" class="hover:text-orange-500" title="Vider les lignes">
                    <i class="fal fa-plus 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>

            @php
                $i = 0;
            @endphp
            <div class="card-content">
                <div class="overflow-auto" style="max-height: 30rem;">
                    <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 style="width: 5%">N° pièce</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>
                            @foreach ($operations as $operation)
                                @php
                                    $i++;
                                @endphp
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{$operation->compte_id}}</td>
                                    <td title="{{$operation->libelle_compte}}">{{substr($operation->libelle_compte,0,30)}}</td>
                                    <td>{{$operation->code_analytique}}</td>
                                    <td>{{$operation->num_piece}}</td>
                                    <td>{{$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="#" data-operation="{{App\Lib\CryptId::crypt($operation->id_oper)}}" class="btn-times text-red-500 hover:text-yellow-500">
                                            <i class="fal fa-times fa-lg mr-2"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            @if($i > 0)
                                <tr class="font-bold">
                                    <td colspan="6" class="text-right">TOTAL</td>
                                    <td class="text-right">{{App\Lib\Format::number($sum->debit)}}</td>
                                    <td class="text-right">{{App\Lib\Format::number($sum->credit)}}</td>
                                    <td></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <form id="frmEcriture" method="post" action="{{route('gt.od.trash')}}">
            @csrf
            <input type="hidden" name="operId" id="operId" value="">
        </form>
        <x-msg-box>
            <x-slot:title>Opérations divers</x-slot:title>
            <div>
                Voullez vous réelement supprimer cette écriture ?
            </div>
        </x-msg-box>
    </div>
@endsection

@section('script')
    <script>
        let btnTimes = document.querySelectorAll('.btn-times')
        btnTimes.forEach(btn => {
            btn.addEventListener('click', function(e){
                e.preventDefault();
                document.getElementById('operId').setAttribute('value', btn.getAttribute('data-operation'));
                Modal('#MsgBox', 'show');
            })
        });
        document.getElementById('btnYes').addEventListener('click', function(e){
            e.preventDefault();
            document.getElementById('frmEcriture').submit();
        })
    </script>
@endsection