@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>
                registre des clentèles
            </div>
            <div class="space-x-2 text-gray-500">
                <a href="{{route('tiers.create', 'pp')}}" class="hover:text-orange-500" title="Personne majeur">
                    <i class="fal fa-user-tie"></i>
                </a>
                <a href="{{route('tiers.create', 'pm')}}" class="hover:text-orange-500" title="Groupement">
                    <i class="fal fa-users-class"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="flex justify-end mb-3 mr-3">
                <form method="post" action="{{ route('tiers.search') }}">
                    @csrf
                    <div class="flex justify-start space-x-3 w-full">
                        @if($caisses->count() > 1)
                            <div class="flex items-center w-64">
                                <select name="caisse" class="form-control">
                                    @php $id_caisse = !empty($search->caisse) ? $search->caisse : '' @endphp
                                    <option value="">-- AGENCE --</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-64">
                            <select name="typeTiers" class="form-control">
                                @php $type_tiers = !empty($search->typeTiers) ? $search->typeTiers : '' @endphp
                                <option value="">-- TYPE CLIENTELE --</option>
                                @foreach (config('myahs.tiers') as $tiers_key=>$tiers_label)
                                    <option value="{{ $tiers_key }}" {{ $tiers_key == $type_tiers ? 'selected' : '' }} >
                                        {{ strtoupper($tiers_label) }}
                                    </option>
                                @endforeach
                            </select>
                        </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="ID Clientèle, 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">Date d'adhésion</th>
                            <th class="text-left">Type tiers</th>
                            <th class="text-left">Nom et prénoms</th>
                            <th class="text-left">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')}}" data-nom-tiers="{{ $trs->nom_tiers.' '.$trs->prenom_tiers }}"
                                            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>{{ (new DateTime($trs->date_entree))->format(Config('myahs.date_format')) }}</td>
                                    <td>{{ $trs->type_tiers == 'GP' ? 'PM' : $trs->type_tiers }}</td>
                                    <td>{{ $trs->nom_tiers.' '.$trs->prenom_tiers }}</td>
                                    <td>{{ $trs->cin }}</td>
                                    <td>{{ mb_strtoupper($trs->adresse, 'UTF-8') }}</td>
                                    <td>{{ $trs->phone }}</td>
                                    <td class="text-right">
                                        <a href="{{ route('tiers.show', [
                                            'id_tiers'  =>$trs->id_tiers,
                                            'type_tiers'=>strtolower($trs->type_tiers)]) }}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher le membre">
                                            <i class="fal fa-search-plus fa-lg"></i>
                                        </a>
                                        <a href="{{ route('tiers.edit', [
                                            'id_tiers'  =>$trs->id_tiers,
                                            'type_tiers'=>strtolower($trs->type_tiers)])}}" class="text-gray-500 hover:text-orange-500 mr-2" title="Modifier les informations">
                                            <i class="fal fa-edit fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>

                            @endforeach
                        @else
                            <tr>
                                <td colspan="10" 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>
    </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 id="titleTiers">
                        Tiers
                    </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("titleTiers").textContent = this.getAttribute('data-nom-tiers');
                document.getElementById("imgPhoto").setAttribute("src", photoSrc);
                document.getElementById("imgSignature").setAttribute("src", signatureSrc);

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

            })
        }

    </script>
@endsection