{{-- @php
    print_r($users);
    exit;
@endphp --}}
<div id="addGes" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel">Ajouter un gestionnaire</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addGesForm" action="{{ route('voiture.addGest') }}" method="POST">
                    @csrf
                    <input type="hidden" value="{{ $voiture->voiture_key }}" id="v_identifiant" name="v_identifiant">
                    <div class="mb-3">
                        <label for="nom" class="form-label">Nom</label>
                        <input type="text" id="nom" name="nom" class="form-control" />
                        <div class="error-message text-danger" id="nom-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="prenom" class="form-label">Prénoms</label>
                        <input type="text" id="prenom" name="prenom" class="form-control" />
                        <div class="error-message text-danger" id="prenom-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email" name="email" class="form-control" />
                        <div class="error-message text-danger" id="email-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="r_identifiant" class="form-label">Rôle</label>
                        <select name="r_identifiant" id="r_identifiant" class="form-control">
                            <option value="">Choisissez un rôle</option>
                            @foreach ($ges_roles as $role)
                                <option value="{{ $role->role_key }}">{{ $role->designation }}</option>
                            @endforeach
                        </select>
                        <div class="error-message text-danger" id="r_identifiant-error"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success save-tab-action">Ajouter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div id="deleteGes" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <form action="{{ route('voiture.deleteGest') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myModalLabel">Supprimer ce gestionnaire</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="ma_identifiant" id="ma_identifiant">
                    <input type="hidden" value="{{ $voiture->voiture_key }}" id="v_identifiant" name="v_identifiant">
                    <p>Vous êtes sur le point de supprimer ce gestionnaire. Si c'est le cas, veuillez confirmer, sinon annuler.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-danger save-tab-action">Oui, supprimer !</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- @php
    print_r
@endphp --}}
<div class="row">
    <div class="col-lg-12">
        <div class="car">
            <div class="car-body">
                <div class="row mb-2">
                    <div class="col-md-12">


                        <div style="width:100%; padding:15px; margin:0" id="successMessageContainer"></div>
                        @if ($is_proprio == 1)
                        <div class="mb-3">
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#addGes" class="btn btn-success waves-effect waves-light"><i
                                    class="mdi mdi-plus mr-2"></i> Ajouter un gestionnaire</a>
                        </div>
                         @endif



                    </div>
{{--ç
                    <div class="col-md-6">
                        <div class="form-inline float-md-right mb-3">
                            <div class="search-box ml-2">
                                <div class="position-relative">
                                    <input type="text" class="form-control rounded bg-light border-0"
                                        placeholder="Search...">
                                    <i class="mdi mdi-magnify search-icon"></i>
                                </div>
                            </div>

                        </div>
                    </div> --}}


                </div>
                <!-- end row -->
                <div class="table-responsive mb-4">
                    <table class="table table-centered table-nowrap table-check mb-0">
                        <thead>
                            <tr>

                                <th scope="col">Nom</th>
                                <th scope="col">Email</th>
                                <th scope="col">Role</th>
                                {{-- <th scope="col">E</th>
                                <th scope="col">Role</th> --}}
                                <th scope="col" style="width: 200px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user )
                            <tr>

                                <td>
                                    {{ $user->nom }}


                                </td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    @if ($user->can_update == 1)
                                        <div style="display: flex; align-items: center;">
                                            <select name="r_identifiant"  data-ma-identifiant="{{ $user->ma_identifiant }}" id="identifiant" onchange="selectRole(this)" class="form-control" style="width: auto;">
                                                @foreach ($ges_roles as $r)
                                                    <option value="{{ $r->role_key }}" {{ $user->role == $r->designation ? 'selected' : '' }}>
                                                        {{ $r->designation }}
                                                    </option>
                                                @endforeach
                                            </select>

                                            {{-- @if ($user->etat == 0) --}}
                                                <span style="margin-left: 10px; color: grey; font-size: 14px;">({{ $user->etat_name }})</span>
                                            {{-- @endif --}}
                                        </div>
                                    @else
                                        <span style="color: grey; pointer-events: none; opacity: 0.6;">
                                            {{ $user->role }}
                                        </span>
                                    @endif
                                </td>



                                <td>
                                    <ul class="list-inline mb-0">

                                        @if ($user->can_update == 1)
                                        <li class="list-inline-item">
                                            <a href="javascript:void(0);" data-key="{{ $user->ma_identifiant }}" data-toggle="modal" data-target="#deleteGes" class="px-2 text-danger delete_gest">
                                                <i class="uil uil-trash font-size-18"></i>
                                            </a>
                                        </li>
                                    @endif


                                    </ul>
                                </td>
                            </tr>

                            @endforeach



                        </tbody>
                    </table>
                </div>
                <div class="row mt-4">
                    <div class="col-sm-6">
                        <div>
                            <p class="mb-sm-0">Showing 1 to 10 of 12 entries</p>
                        </div>
                    </div>
                    {{-- <div class="col-sm-6">
                        <div class="float-sm-right">
                            <ul class="pagination mb-sm-0">
                                <li class="page-item disabled">
                                    <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a>
                                </li>
                                <li class="page-item">
                                    <a href="#" class="page-link">1</a>
                                </li>
                                <li class="page-item active">
                                    <a href="#" class="page-link">2</a>
                                </li>
                                <li class="page-item">
                                    <a href="#" class="page-link">3</a>
                                </li>
                                <li class="page-item">
                                    <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .error-border {
        border: 2px solid red !important;
    }
    .error-message {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        min-height: 1.5rem; /* Réserve l'espace pour éviter les sauts de mise en page */
    }
</style>

<script>
    document.getElementById('addGesForm').addEventListener('submit', function(event) {
        // Réinitialiser les bordures et messages d'erreur
        const inputs = document.querySelectorAll('#addGesForm input, #addGesForm select');
        inputs.forEach(input => input.classList.remove('error-border'));
        document.querySelectorAll('.error-message').forEach(error => error.textContent = '');

        // Champs à valider
        const nom = document.getElementById('nom').value.trim();
        const prenom = document.getElementById('prenom').value.trim();
        const email = document.getElementById('email').value.trim();
        const role = document.getElementById('r_identifiant').value;

        let isValid = true;

        // Vérifier chaque champ
        if (!nom) {
            document.getElementById('nom').classList.add('error-border');
            document.getElementById('nom-error').textContent = 'Le nom est requis.';
            isValid = false;
        }
        if (!prenom) {
            document.getElementById('prenom').classList.add('error-border');
            document.getElementById('prenom-error').textContent = 'Le prénom est requis.';
            isValid = false;
        }
        if (!email) {
            document.getElementById('email').classList.add('error-border');
            document.getElementById('email-error').textContent = 'L\'email est requis.';
            isValid = false;
        }
        if (!role) {
            document.getElementById('r_identifiant').classList.add('error-border');
            document.getElementById('r_identifiant-error').textContent = 'Veuillez choisir un rôle.';
            isValid = false;
        }

        // Empêcher la soumission si un champ est vide
        if (!isValid) {
            event.preventDefault();
        }
    });
</script>


<script>
    $(document).on('click', '.delete_gest', function(e) {
        e.preventDefault();


        var ma_identifiant = $(this).data('key');

        $('#ma_identifiant').val(ma_identifiant); // attention il faut que #ma_identifiant existe dans ton HTML
    });

    // $(document).ready(function () {




    // });

    </script>