@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-file-search fa-lg mr-1"></i>
                Tous les Tiers
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="w-full mb-3 mr-3">
                <form method="post" action="{{ route('tiers.all.search') }}">
                    @csrf
                    <div class="flex justify-end space-x-3 w-full">
                        <div class="w-1/3 space-x-2">
                            <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">Caisse</th>
                            <th class="text-left">Folio</th>
                            <th class="text-left">Type tiers</th>
                            <th class="text-left">Nom et prénoms</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->type_tiers }}</td>
                                    <td>{{ $trs->nom_tiers.' '.$trs->prenom_tiers }}</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.all.show',$trs->id_tiers)}}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher sa situation">
                                            <i class="fal fa-id-card 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>

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