@extends('layouts.app')

@section('content')
<div class="w-full">
    <div class="card">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-user-tag mr-1"></i>
                Revenant
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            {{-- <div class="flex justify-end mb-3 mr-3">
                <form method="post" action="">
                    @csrf
                    <div class="flex justify-start space-x-3 w-full">
                        <div class="flex items-center w-44">
                            <select name="caisse" class="form-control">
                                @php $id_caisse = !empty($search->caisse) ? $search->caisse : '' @endphp
                                <option value="">-- CAISSE --</option>
                                @foreach ($caisses as $caisse)
                                    <option value="{{ $caisse->id_caisse }}" {{ $caisse->id_caisse == $id_caisse ? 'selected' : '' }} >
                                        {{ $caisse->id_caisse }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex items-center space-x-2 w-64">
                            <input type="date" name="dateProfil" value="{{ !empty($search->dateProfil) ? $search->dateProfil : date('Y-m-d') }}" class="form-control"/>
                        </div>
                        <div class="flex items-center space-x-2 w-96">
                            <input type="text" name="nom_cin" value="{{ !empty($search->nom_cin) ? $search->nom_cin : '' }}" class="form-control" placeholder="Folio, Nom, Prénom, CIN"/>
                        </div>
                        <div class="">
                            <button type="submit" class="btn btn-warning">
                                <i class="fal fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div> --}}
            <div class="card-content">
                <table class="table table-striped table-hover text-sm">
                    <thead>
                        <tr>
                            <td></td>
                            <th class="text-left">Guichet</th>
                            <th class="text-left">Folio</th>
                            <th class="text-left">Nom et prénoms</th>
                            <th class="text-center">CIN</th>
                            <th class="text-left">Adresse</th>
                            <th class="text-left">Téléphone</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top">
                        @if(count($tiers)>0)
                            @foreach ($tiers as $trs)
                                <tr>
                                    <td class="align-content: center">
                                        @php
                                            $photo = !empty($trs->photo) ? App\Lib\Image::get(env('IMG_TIERS').DIRECTORY_SEPARATOR.$trs->photo) : "";
                                            $signature = !empty($trs->signature) ?  App\Lib\Image::get(env('IMG_SIGNATURE').DIRECTORY_SEPARATOR.$trs->signature) : "";
                                        @endphp
                                        <img 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-8 h-8">
                                    </td>
                                    <td>{{ $trs->caisse_id }}</td>
                                    <td>{{ $trs->id_tiers }}</td>
                                    <td>{{ $trs->nom_tiers.' '.$trs->prenom_tiers }}</td>
                                    <td  class="text-center">{{ $trs->cin }}</td>
                                    <td>{{ $trs->adresse }}</td>
                                    <td>{{ $trs->phone }}</td>
                                    <td class="text-right">
                                        <a href="{{ route('tiers.show', [
                                            'type_tiers'    =>strtolower($trs->type_tiers),
                                            'id_tiers'  =>$trs->id_tiers,
                                            'revenant'=>'1']) }}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher le membre">
                                            <i class="fal fa-search-plus fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>

                            @endforeach
                        @else
                            <tr>
                                <td colspan="8" class="text-center">
                                    <span class="text-gray-800">La liste est vide</span>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="flex justify-between mt-3">
                <div></div>
                @if(count($tiers)>0)
                    <div class="pagination">
                        {{ $tiers->links() }}
                    </div>
                @endif
            </div>
        </div>
        <div class="flex justify-end">
            <div class="font-body text-sm italic text-gray-600">
                @if(count($tiers)>0)
                    Ce tableau présente la liste des revenant en attente de réactivation.
                @endif
            </div>
        </div>
        <form id="frmRevanant" method="post" action="{{route('tiers.revenant.store')}}">
            @csrf
            <input type="hidden" name="folio" id="folio">
        </form>
    </div>
</div>
<div id="photoTiers" class="modal hidden justify-center fixed w-full h-full top-0 left-0 z-50 bg-black bg-opacity-80">
    <div class="w-2/5 pt-56">
        <div class="rounded-lg border border-gray-300 bg-white py-3">
            <div class="border-b border-gray-300 px-5 font-semibold">
                <div class="flex justify-between py-2">
                    <div>
                        Photo d'identité
                    </div>
                    <div>
                        <a href="#" class="btn-modal-close">
                            <i class="fal fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between py-3 px-5">
                <div>
                    <img id="imgPhoto" src="" alt="" class="border-4 rounded-lg shadow-md border-white w-80 h-80">
                </div>
                <div>
                    <img id="imgSignature" src="" class="border-4 rounded-lg shadow-md border-white w-80 h-80">
                </div>
            </div>
        </div>
    </div>
</div>
<x-msg-box>
    <x-slot name="title">Revenant</x-slot>
    Voulez vous réllement réactiver le compte de ce membre ?
</x-msg-box>
@endsection

@section('script')
    <script>

        let imgPhotos = document.querySelectorAll(".img-photo");

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

            imgPhotos[i].addEventListener("click", function(e){

                e.preventDefault();

                photoSrc = this.getAttribute("src");
                signatureSrc = this.getAttribute("data-signature");

                document.getElementById("imgPhoto").setAttribute("src", photoSrc);
                document.getElementById("imgSignature").setAttribute("src", signatureSrc);

                Modal("#photoTiers", "show");

            })
        }

        let btnRevenant = document.querySelectorAll('.btn-revenant');

        btnRevenant.forEach(revenant => {

            revenant.addEventListener('click', function(e){

                document.getElementById('folio').setAttribute('value', revenant.getAttribute('data-folio'));

                Modal('#MsgBox', 'show');

            });
        });

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

    </script>
@endsection