@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-address-book mr-1"></i>
                {{$title}}
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="flex justify-end mb-3 mr-3">
                <form method="post" action="{{ route('tiers.dems.search') }}">
                    @csrf
                    <div class="flex justify-start space-x-3 w-full">
                        @if($caisses->count() > 1)
                            <div class="flex items-center w-48">
                                <select name="caisse" class="form-control">
                                    @php $id_caisse = !empty($search->caisse) ? $search->caisse : '' @endphp
                                    <option value="">-- GUICHET --</option>
                                    @foreach ($caisses as $caisse)
                                        <option value="{{ $caisse->id_caisse }}" {{ $caisse->id_caisse == $id_caisse ? 'selected' : '' }} >
                                            {{ $caisse->id_caisse }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        <div class="flex items-center w-48">
                            <select name="decision" class="form-control uppercase">
                                @php $id_decision = !empty($search->decision) ? $search->decision : '' @endphp
                                <option value="">-- DECISION --</option>
                                @foreach ($decisions as $key=>$decision)
                                    <option value="{{ $key }}" {{ $key == $id_decision ? 'selected' : '' }} >
                                        {{ $decision }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex items-center space-x-2 w-48">
                            <input type="text" name="year" value="{{ !empty($search->year) ? $search->year : '' }}" class="form-control" placeholder="Année de la demande"/>
                        </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="flex space-x-2">
                            <button type="submit" class="btn btn-warning">
                                <i class="fal fa-search"></i>
                            </button>
                            <a href="{{route('forget', 'tiers   ')}}" class="block btn btn-warning-alt" title="Effacer la recherche">
                                <i class="fal fa-eraser"></i>
                            </a>
                        </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-left">Téléphone</th>
                            <th class="text-left">Motif</th>
                            <th class="text-center">Décision</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>{{ $trs->phone }}</td>
                                    <td>{{ $trs->description_motif }}</td>
                                    <td class="text-center">
                                        @php
                                            $text_color = 'text-gray-700';
                                            if($trs->decision == 'O'){
                                                $text_color = 'text-green-500';
                                            }
                                            if($trs->decision == 'N'){
                                                $text_color = 'text-yellow-500';
                                            }
                                            if($trs->decision == 'D'){
                                                $text_color = 'text-red-500';
                                            }
                                        @endphp
                                        <span class="{{$text_color}} font-bold">
                                            {{ key_exists($trs->decision,$decisions)?mb_strtoupper($decisions[$trs->decision],'UTF-8'):$trs->decision }}
                                        </span>
                                    </td>
                                    <td class="text-right">
                                        <a href="{{ route('tiers.dems.show', [
                                            'id_demande'  =>$trs->id_demande]) }}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher le membre">
                                            <i class="fal fa-search-plus fa-lg"></i>
                                        </a>

                                        {{-- @if($trs->decision == 'E')
                                        @else
                                            <a href="{{ route('tiers.dems.show', [
                                                'id_demande'  =>$trs->id_demande,]) }}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher le membre">
                                                <i class="fal fa-search-plus fa-lg"></i>
                                            </a>
                                        @endif

                                        @if($trs->decision == 'E')
                                            <a href="{{ route('tiers.dems.show', [
                                                'id_demande'  =>$trs->id_demande,
                                                'action'=>'4'])}}" class="text-gray-500 hover:text-orange-500 mr-2" title="Annuler la demission">
                                                <i class="fal fa-times fa-lg"></i>
                                            </a>
                                        @endif --}}

                                    </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>

            @if(count($tiers)>0)
            <div class="pagination mt-3">
                {{ $tiers->links() }}
            </div>
            @endif
            <div class="flex justify-end">
                <div class="font-body text-sm italic text-gray-600">
                    @if(count($tiers)>0)
                        @if(!empty($decision))
                            Ce tableau présente la liste des demandes de démission en attente de validation.
                        @else
                            Ce tableau présente la liste des demandes de démission.
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </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>
@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");

            })
        }

    </script>
@endsection