{{-- <div>
    {{-- Close your eyes. Count to one. That is how long forever feels. --}}
    {{-- <div class="container">
        <!-- Modal -->
        <div class="modal fade" wire:ignore.self id="confirmationModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update</h5>
                        <button type="button" wire:click="closeModal()" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="form-label" for="name">Nom</label>
                                    <input class="form-control" type="name" wire:model="user.name">
                                    @error('user.name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="email" class="form-label">Email</label>
                                    <input class="form-control" type="email" wire:model="user.email">
                                    @error('user.email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" wire:click="closeModal()" class="btn btn-secondary"
                            data-dismiss="modal">Close</button>
                        <button type="button" wire:click.prevent="editUser()" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end Modal -->
        @error('gerants')
            <p class="text-danger">{{ $message }}</p>
        @enderror
        {{-- If auth user is "gerant" of the company --}}
        {{-- @if (auth()->user()->hasRole(['super-admin', 'admin']) || $authUser != null)
            <div class="card">
                <div class="card-header">
                    <p class="text-lg">Resources humaines </p>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-row">
                            <div class="form-group col-12 col-md-12">
                                @error('unique')
                                    <h4 class="text-danger"> {{ $message }} </h4>
                                @enderror
                                <label for="establishment">Gerant</label>
                                <div class="row">
                                    <div class="col">
                                        <input wire:model="gerant" type="email" class="form-control"
                                            placeholder="email">
                                    </div>
                                    @error('gerant')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror
                                    <div class="col-12 col-md-auto">
                                        <button wire:click.prevent="addGerant"
                                            class="btn btn-secondary p-1">Ajouter</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-12 col-md-12">
                                <label for="establishment">Suppléant</label>
                                <div class="row">
                                    <div class="col">
                                        <input wire:model="suppleant" type="email" class="form-control"
                                            placeholder="email">
                                    </div>
                                    @error('suppleant')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror

                                    <div class="col-12 col-md-auto">
                                        <button wire:click.prevent="addSuppleant"
                                            class="btn btn-secondary p-1">Ajouter</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-12 col-md-12">
                                <label for="establishment">Lecteur </label>
                                <div class="row">
                                    <div class="col">
                                        <input wire:model="lecteur" type="email" class="form-control"
                                            placeholder="email">
                                    </div>
                                    @error('lecteur')
                                        <p class="text-danger"> {{ $message }} </p>
                                    @enderror

                                    <div class="col-12 col-md-auto">
                                        <button wire:click.prevent="addLecteur"
                                            class="btn btn-secondary p-1">Ajouter</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <p>Coordonnées des responsables </p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @forelse($users as $user)
                                <div class="col-6">
                                    <div class="card">
                                        <div class="card-header">
                                            @if ($user->pivot)
                                                <b>{{ $user->pivot->role }} </b>
                                            @endif
                                            @if ($authUser->pivot->role === 'gerant')
                                                <div class="float-right">
                                                    <button wire:click.prevent="openModal({{ $user->id }})"
                                                        class="btn btn-primary btn-sm"><i class="fa fa-edit"></i>
                                                        Modi</button>
                                                    <button wire:click.prevent="delete({{ $user->id }})"
                                                        class="btn btn-danger btn-sm"><i class="fa fa-trash"></i>
                                                        Supp</button>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title">{{ $user->name }} </h5>
                                            <p class="card-text">Téléphone professionnel: </p>
                                            <p class="card-text">Téléphone fixe: </p>
                                            <p class="card-text">Téléphone personnel (en cas d'urgence) :</p>
                                            <p class="card-text">Addresse mail : {{ $user->email }}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p class="text-lg">ce document n'a pas d'utilisateur</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            window.addEventListener('openModal', event => {
                $("#confirmationModal").modal('show');
            })
            window.addEventListener('closeModal', event => {
                $("#confirmationModal").modal('hide');
            })
        </script>
    </div>

</div>  --}}
<div>

    <div class="container">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Resources humaines
                    <div class="float-right">
                        <button type="button" wire:click="create" class="btn btn-primary">Ajouter</button>
                    </div>
                </div>
                <div class="card-body">
                    @livewire('tables.company-staff-table', ['company_id' => $company->id])

                </div>
            </div>

        </div>

        <script>
            window.addEventListener('openModal', event => {
                $("#employeeModal").modal('show');
            })
            window.addEventListener('closeModal', event => {
                $("#employeesModal").modal('hide');
            })
            window.addEventListener('openEditModal', event => {
                $("#EditEmployeesModal").modal('show');
            })
            window.addEventListener('closeEditModal', event => {
                $("#EditEmployeesModal").modal('hide');
            })
        </script>

        <!-- Modal -->    {{-- 
COORDONNEES DES RESPONSABLES
Gérant
Nom :
Azerty
Prénom :
Pam
01 02 03 04
Téléphone professionnel :
05
Fixe :
Téléphone personnel (en cas
d'urgence) :
06 02 03 04 05
Adresse mail :
exemple1@souslespalmiers.fr
Suppléant
Nom :
Qwerty
Prénom :
Dam
04 05 06 09
Téléphone professionnel :
08
Fixe :
Téléphone personnel (en cas
06 05 06 09
d'urgence) :
08
Adresse mail :
exemple2@souslespalmiers.fr
Code postale :
Existence d’un registre de sécurité : ☐ Oui ☐ Non
Existence d’un document unique : ☐ Oui ☐ Non --}}
        <div class="modal fade" wire:ignore.self id="employeesModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Nouvel Employe</h5>
                        <button type="button" wire:click="closeModal()" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input class="form-control" type="text" wire:model="name">
                                </div>
                                @error('name')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input class="form-control" type="mail" wire:model="email">
                                </div>
                                @error('email')
                                    <span class="error">{{ $message }}</span>
                                @enderror

                                <div class="form-group">
                                    <label for="phone_number">Phone Number</label>
                                    <input class="form-control" type="mail" wire:model="phone_number">
                                </div>
                                @error('phone_number')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" wire:click="closeModal()" class="btn btn-secondary"
                            data-dismiss="modal">Close</button>
                        <button type="button" wire:click.prevent="saveEmployee()"
                            class="btn btn-primary">Sauvegarder</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" wire:ignore.self id="EditEmployeesModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Employee</h5>
                    <button type="button" wire:click="closeEditModal()" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input class="form-control" type="text" wire:model="name">
                            </div>
                            @error('name')
                                <span class="error">{{ $message }}</span>
                            @enderror
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input class="form-control" type="mail" wire:model="email">
                            </div>
                            @error('email')
                                <span class="error">{{ $message }}</span>
                            @enderror

                            <div class="form-group">
                                <label for="phone_number">Phone Number</label>
                                <input class="form-control" type="mail" wire:model="phone_number">
                            </div>
                            @error('phone_number')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" wire:click="closeEditModal()" class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
                    <button type="button" wire:click.prevent="editEmployee()"
                        class="btn btn-primary">Sauvegarder</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>