@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-users-class mr-1"></i>
                Guichetiers actifs
            </div>
            <div>
                <a href="{{route('gt.caissier')}}" class="text-gray-500 hover:text-orange-500" title="Ajouter un nouveau guichetier">
                    <i class="fal fa-plus fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="card-content">
                <table class="table table-hover text-sm">
                    <thead>
                        <tr>
                            <td></td>
                            <th class="text-left">Login</th>
                            <th class="text-left">Nom et prénoms</th>
                            <th class="text-center">Type coffre</th>
                            <th class="text-left">Caisse</th>
                            <th class="text-left">Profil</th>
                            <th class="text-center">Mode de saisie</th>
                            <th class="text-center">Weekend</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody style="vertical-align: top">
                        @if($employes->count()>0)
                            @foreach ($employes as $employe)
                                @php
                                    $config = !empty($employe->config) ? json_decode($employe->config) : (object)[];
                                @endphp
                                <tr>
                                    <td>
                                        <img src="{{asset('img/user.png')}}" alt="" class="w-10 h-10 rounded-full shadow-md border border-gray-100">
                                    </td>
                                    <td class="uppercase">{{ $employe->id_employe }}</td>
                                    <td>{{ $employe->nom_employe.' '.$employe->prenom_employe }}</td>
                                    <td class="text-center">{{ $employe->type_coffre }}</td>
                                    <td>{{ $employe->caisse_id }}</td>
                                    <td>{{ $employe->profil }}</td>
                                    <td class="text-center">{{ !empty($config->mode_saisie) ? $config->mode_saisie : '' }}</td>
                                    <td class="text-center">{{ !empty($config->weekend) ? implode(' - ',$config->weekend) : '' }}</td>
                                    <td class="text-right">
                                        <a href="{{route('gt.edit', $employe->id_employe)}}" class="text-success text-gray-500 hover:text-orange-500 mr-2" title="Configurer le guichet">
                                            <i class="fal fa-cog fa-lg"></i>
                                        </a>
                                        <a href="#" data-guichet="{{$employe->id_employe}}" class="text-warning text-gray-500 hover:text-orange-500 mr-2 rm-guichet" title="Fermer le guichet">
                                            <i class="fal fa-trash-alt 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($employes->count()>0)
            <div class="felx justify-between mt-3">
                <div class="pagination">
                    {{ $employes->links() }}
                </div>
            </div>
            @endif


            <form id="frmGuichet" method="post" action="{{route('gt.destroy')}}">
                @csrf
                @method('DELETE')
                <input type="hidden" id="folio" name="folio">
            </form>

        </div>
        <div class="flex justify-end">
            <div class="font-body text-sm italic text-gray-600">
                @if($employes->count()>0)
                    Ce tableau présente la liste des ciassiers(ères) actifs.
                @endif
            </div>
        </div>
    </div>
</div>
<x-msg-box>
    <x-slot name="title">
        Opération
    </x-slot>
    Voulez vous réellement valider cette opération ?
</x-msg-box>
@endsection
@section('script')
<script>
    //

    let rmGuichet = document.querySelectorAll(".rm-guichet");

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

        rmGuichet[i].addEventListener("click", function(e){
            e.preventDefault();

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

            let gt = this.getAttribute('data-guichet');

            document.getElementById('folio').setAttribute('value', gt);

        })

    }

    document.getElementById("btnYes").addEventListener("click", function(e){
        e.preventDefault();
        document.getElementById("frmGuichet").submit();
    });
</script>
@endsection