@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-donate mr-1"></i>
                Droit d'adhésion
            </div>
            <div>
                <a href="#" class="text-green-500 hover:text-green-600" title="Télécharger">
                    <i class="fal fa-file-excel fa-lg mr-2"></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.droit.search') }}">
                    @csrf
                    <div class="flex justify-start space-x-3 w-full">
                        <div class="flex items-center w-36">
                            <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>
                        <div class="flex items-center space-x-2 w-80">
                            <input type="text" name="name" value="{{ !empty($search->name) ? $search->name : '' }}" class="form-control" placeholder="ID, 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">Caisse</th>
                            <th class="text-left">Folio</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 class="text-right">part social</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top">
                        @if(count($partsocial)>0)
                            @foreach ($partsocial as $part)
                                <tr>
                                    <td class="align-content: center">
                                        @php
                                            $photo = !empty($part->photo) ? App\Lib\Image::get(env('IMG_TIERS').DIRECTORY_SEPARATOR.$part->photo) : "";
                                            $signature = !empty($part->signature) ?  App\Lib\Image::get(env('IMG_SIGNATURE').DIRECTORY_SEPARATOR.$part->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>{{ $part->caisse_id }}</td>
                                    <td>{{ $part->id_tiers }}</td>
                                    <td>{{ $part->nom_tiers.' '.$part->prenom_tiers }}</td>
                                    <td>{{ mb_strtoupper($part->adresse, 'UTF-8') }}</td>
                                    <td>{{ $part->phone }}</td>
                                    <td class="text-right">{{ App\Lib\Format::number($part->droit) }}</td>
                                    <td class="text-right">
                                        <a href="{{route('tiers.part.show', $part->id_tiers)}}" class="text-gray-500 hover:text-orange-500 mr-2" title="Afficher le membre">
                                            <i class="fal fa-file-spreadsheet fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>

                            @endforeach
                            <tr class="font-bold">
                                <td colspan="6" class="text-right">TOTAL</td>
                                <td class="text-right">{{ App\Lib\Format::number(!empty($sumPart->solde)?$sumPart->solde:0) }}</td>
                                <td></td>
                            </tr>
                        @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($partsocial)>0)
                <div class="pagination">
                    {{ $partsocial->links() }}
                </div>
                @endif
            </div>
        </div>
        <div class="flex justify-end">
            <div class="font-body text-sm italic text-gray-600">
                @if(count($partsocial)>0)
                    Ce tableau présente la liste des part sociaux de membres.
                @else
                    Cliquer sur le bouton Recherche pour afficher la liste.
                @endif
            </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