@extends('layouts.app')


@section('content')
    <div class="card w-full">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">

                @switch($type_oper)
                    @case("adhesion")
                        <i class="fal fa-file-signature mr-1"></i>
                        adhésion
                        @break
                    @case("demission")
                        <i class="fal fa-hand-holding-usd mr-1"></i>
                        demission
                        @break
                    @case("part")
                        <i class="fal fa-hand-holding-usd mr-1"></i>
                        part social
                        @break
                    @default
                @endswitch
            </div>
            <div class="space-x-2 text-gray-600">
                <a href="#" class="search hover:text-orange-500">
                    <i class="fal fa-search fa-lg"></i>
                </a>
                <a href="#" class="hover:text-orange-500" title="Clôturer le journal">
                    <i class="fal fa-lock-alt fa-lg"></i>
                </a>
                <a href="{{route('gt.adhesion.guichet', ['list'=>'on'])}}" class="hover:text-orange-500">
                    <i class="fal fa-book-open fa-lg"></i>
                </a>
                <a href="#" class="hover:text-orange-500">
                    <i class="fal fa-print 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>

            <div class="card-content">
                @include("guichet.partsocial.$type_oper")
            </div>


            @if(count($operations) > 0)

                <div class="card-content">
                    <table class="table mt-4 mb-4">
                        <tr class="text-gray-400 text-sm">
                            <th></th>
                            <th class="text-left">ID Tiers</th>
                            <th class="text-left">Nom et prénoms</th>
                            <th class="text-center">CIN/PI</th>
                            <th class="text-right">Retrait</th>
                            <th class="text-right">Dépôt</th>
                            <th class="text-right">Droit</th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>
                                @php
                                    $photo = !empty($lastOperation->photo)?App\Lib\Image::get(env('IMG_TIERS').DIRECTORY_SEPARATOR.$lastOperation->photo):"";
                                    $signature = !empty($lastOperation->signature)?App\Lib\Image::get(env('IMG_SIGNATURE').DIRECTORY_SEPARATOR.$lastOperation->signature):"";
                                @endphp
                                <img id="imgIdentite" src="{{!empty($photo)?$photo:asset('img/user.png')}}"
                                data-signature="{{!empty($signature)?$signature:asset('img/signature.jpg')}}"
                            alt="img" class="img-photo border cursor-pointer rounded-full shadow-md border-white w-10 h-10">
                            </td>
                            <td>{{$lastOperation->id_tiers}}</td>
                            <td>{{$lastOperation->nom_tiers}} {{$lastOperation->prenom_tiers}}</td>
                            <td class="text-center">{{$lastOperation->cin}}</td>
                            <td class="text-right">{{App\Lib\Format::number($lastOperation->debit)}}</td>
                            <td class="text-right">{{App\Lib\Format::number($lastOperation->credit)}}</td>
                            <td class="text-right">{{App\Lib\Format::number($lastOperation->droit)}}</td>
                            <td class="text-right">
                                <a href="#" class="btn-search mr-2" data-folio="{{$lastOperation->id_tiers}}" title="Liste des comptes">
                                    <i class="fal fa-search fa-lg"></i>
                                </a>
                                <a href="" class="mr-2" title="Afficher les écritures">
                                    <i class="fal fa-file-spreadsheet fa-lg"></i>
                                </a>
                                <a href="" class="mr-2 text-gray-500 hover:text-gray-700">
                                    <i class="fal fa-print fa-lg"></i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="card-content">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr class="text-gray-400 text-sm">
                                <th class="text-left">ID Tiers</th>
                                <th class="text-left">Nom et prénoms</th>
                                <th class="text-center">CIN/PI</th>
                                <th class="text-right">Retrait</th>
                                <th class="text-right">Dépôt</th>
                                <th class="text-right">Droit</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                            @php $i = 0 @endphp
                                @foreach ($operations as $operation)
                                    <tr>
                                        <td>{{$operation->id_tiers}}</td>
                                        <td>{{$operation->nom_tiers}} {{$operation->prenom_tiers}}</td>
                                        <td class="text-center">{{$operation->cin}}</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">{{App\Lib\Format::number($operation->droit)}}</td>
                                        <td class="text-right">
                                            <a href="#" class="btn-search mr-2" data-folio="{{$operation->id_tiers}}" title="Liste des comptes">
                                                <i class="fal fa-search fa-lg"></i>
                                            </a>
                                            <a href="{{route('tiers.part.show', $operation->id_tiers)}}" class="mr-2" title="Afficher les écritures">
                                                <i class="fal fa-file-spreadsheet fa-lg"></i>
                                            </a>
                                            <a href="" class="mr-2 text-gray-500 hover:text-gray-700">
                                                <i class="fal fa-print fa-lg"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="pagination">
                    {{ $operations->links() }}
                </div>

            @endif

        </div>
    </div>

    @if(!empty($tiers->id_tiers))
        <x-tiers-modal :tiers="$tiers"></x-tiers-modal>
    @endif

    <x-form-modal>
        <x-slot name="title">
            <div class="flex justify-between w-full">
                Recherche
            </div>
        </x-slot>
            <form id="frmSearch" method="post" action="{{$url_guichet}}" class="w-full">
                @csrf
                <div class="flex items-center space-x-3">
                    <div class="w-full">
                        <input type="text" id="folio" name="folio" value="{{$journal->caisse_id}}" class="form-control" placeholder="Folio">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-warning">
                            <i class="fal fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        <x-slot name="footer">

        </x-slot>
    </x-form-modal>

@endsection

@section('script')
    <script>
        document.querySelector(".search").addEventListener("click", function(e){
            Modal("#frmModal", "show");
            let searchFolio = document.getElementById("folio")
                searchFolio.focus();
                searchFolio.selectionStart = searchFolio.value.length;
        })

        let btnSearch = document.querySelectorAll(".btn-search");

        for (let i = 0; i < btnSearch.length; i++) {

            btnSearch[i].addEventListener('click', function(e){

                document.getElementById("folio").setAttribute('value', this.dataset.folio);

                document.getElementById("frmSearch").submit();

            });

        }

        let imgTiers = document.getElementById('imgIdentite')

        if(imgTiers != undefined){
            imgTiers.addEventListener('click', function(){
                Modal('#photoTiers', 'show');
            })
        }

    </script>
@endsection