@extends($layout)

@section('content')
    <div class="container mx-auto my-10 p-6 bg-white shadow-lg rounded-lg">
        @if (auth()->user()->role == 'admin')
            <h2 class="text-2xl font-semibold text-center mb-6 text-gray-700">Supervision des Candidats</h2>
        @endif

        @if (auth()->user()->role == 'company')
            <h2 class="text-2xl font-semibold text-center mb-6 text-gray-700">Listes des Profiles</h2>
        @endif

        <form method="GET" action="{{ route('admin.candidats') }}" class="mb-6 bg-gray-100 p-4 rounded-lg" id="filterForm">
            <div class="flex items-center  space-x-4">
                <div class="flex items-center bg-gray-100 mt-3 space-x-4 rounded-l-lg flex-grow shadow-sm">
                    <i class="fas fa-search text-gray-500 mr-2"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Nom, téléphone ou email" class="bg-transparent outline-none w-full text-gray-700"
                        onkeyup="submitForm()">
                </div>



                <!-- Filtres avec sélection automatique -->
                <div class="flex items-center mt-3 space-x-4">
                    <!-- Domaine -->
                    <select name="domaine" class="border px-3 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Domaine</option>
                        @foreach ($domaines as $domaine)
                            <option value="{{ $domaine }}" {{ request('domaine') == $domaine ? 'selected' : '' }}>
                                {{ ucfirst($domaine) }}
                            </option>
                        @endforeach
                    </select>

                    <!-- Éducation -->
                    <select name="education" class="border px-8 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Éducation</option>
                        @foreach ($educations as $education)
                            <option value="{{ $education }}" {{ request('education') == $education ? 'selected' : '' }}>
                                {{ ucfirst($education) }}
                            </option>
                        @endforeach
                    </select>

                    <select name="experience" class="border px-10 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Expérience</option>
                        <option value="1-3" {{ request('experience') == '1-3' ? 'selected' : '' }}>0-1 an</option>
                        <option value="3-5" {{ request('experience') == '3-5' ? 'selected' : '' }}>2-5 ans</option>
                    </select>

                    <select name="status" class="border px-6 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Actif</option>
                        <option value="blocked" {{ request('status') == 'blocked' ? 'selected' : '' }}>Bloqué</option>
                    </select>

                    <button type="button" onclick="resetFilters()"
                        class="border px-4 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </form>


        <!-- Tableau des candidats -->
        <div class="overflow-x-auto mx-auto py-2">
            <table class="w-full border-collapse bg-white shadow-md rounded-lg">
                <thead class="bg-gray-200 text-gray-600">
                    <tr>
                        <th class="p-3 text-left">Photo</th>
                        <th class="p-3 text-left">Nom</th>
                        <th class="p-3 text-left">Email</th>
                        <th class="p-3 text-left">Téléphone</th>
                        <th class="p-3 text-left">Domaine</th>
                        <th class="p-3 text-left">Expérience</th>
                        <th class="p-3 text-left">Éducation</th>
                        @if (auth()->user()->role == 'admin')
                            <th class="p-3 text-left">Statut</th>
                        @endif
                        <th class="p-3 text-left">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($candidats as $candidat)
                    @if (auth()->user()->role != 'company' || $candidat->visibility == 'public')
                        <tr class="border-b hover:bg-gray-100 transition">
                            <td class="p-3">
                                <img src="{{ $candidat->profile_picture ? asset('storage/' . $candidat->profile_picture) : asset('default-profile.png') }}"
                                    class="w-10 h-10 rounded-full">
                            </td>
                            <td class="p-3 text-gray-800">{{ $candidat->first_name }} {{ $candidat->last_name }}</td>
                            <td class="p-3 text-gray-800">{{ $candidat->user->email }}</td>
                            <td class="p-3 text-gray-800">{{ $candidat->phone }}</td>
                            <td class="p-3 text-gray-800">{{ $candidat->domaine }}</td>
                            <td class="p-3 text-gray-800">{{ $candidat->experience }}</td>
                            <td class="p-3 text-gray-800">{{ $candidat->education }}</td>
                            @if (auth()->user()->role == 'admin')
                                <td class="p-3">
                                    @if ($candidat->user->status == 'blocked')
                                        <span class="px-3 py-1 text-sm text-red-600 bg-red-100 rounded-lg">Bloqué</span>
                                    @elseif ($candidat->user->status == 'active')
                                        <span class="px-3 py-1 text-sm text-green-600 bg-green-100 rounded-lg">Actif</span>
                                    @endif
                                </td>
                            @endif
                            <td class="p-3 space-x-2">
                                <a href="{{ route('candidates.show', $candidat->id) }}"
                                    class="text-blue-600 hover:text-blue-800" title="Voir">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if (auth()->user()->role == 'admin')
                                    @if ($candidat->user->status == 'active')
                                        <a href="#"
                                            onclick="event.preventDefault(); showBlockModal('{{ $candidat->user->id }}', '{{ route('admin.toggleBlockUser', $candidat->user->id) }}')"
                                            class="text-red-600 hover:text-red-800" title="blocker">
                                            <i class="fas fa-user-lock"></i>
                                        </a>
                                    @elseif ($candidat->user->status == 'blocked')
                                        <a href="#"
                                            onclick="event.preventDefault(); showUnblockModal('{{ $candidat->user->id }}', '{{ route('admin.toggleBlockUser', $candidat->user->id) }}')"
                                            class="text-green-600 hover:text-green-800" title="Débloquer">
                                            <i class="fas fa-user-check"></i>
                                        </a>
                                    @endif
                                    <a href="#" onclick="event.preventDefault(); showModal('{{ $candidat->id }}')"
                                        class="text-red-600 hover:text-red-900" style="text-decoration: none;"
                                        title="Supprimer">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                @endif
                            </td>
                        </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>


        @if (auth()->user()->role == 'admin')
    <!-- Modal de confirmation pour Bloquer -->
    <div class="modal fade" id="blockModal" tabindex="-1" role="dialog" aria-labelledby="blockModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="blockModalLabel">Confirmation de blocage</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir bloquer ce candidat ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-danger" id="confirmBlockButton">Bloquer</button>
                </div>
            </div>
        </div>
    </div>

        <!-- Modal de confirmation pour Débloquer -->
        <div class="modal fade" id="unblockModal" tabindex="-1" role="dialog" aria-labelledby="unblockModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="unblockModalLabel">Confirmation de déblocage</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Êtes-vous sûr de vouloir débloquer cce candidat ?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-success" id="confirmUnblockButton">Débloquer</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de confirmation pour suppression -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Confirmation de suppression</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Êtes-vous sûr de vouloir supprimer ce candidat ?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="cancelDeleteButton"
                            data-bs-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteButton">Supprimer</button>
                    </div>
                </div>
            </div>
        </div>
@endif
    </div>





    <script>
        function submitForm() {
            document.getElementById('filterForm').submit();
        }

        // function openSuspendModal(url, name) {
        //         document.getElementById('candidateName').innerText = name;
        //         document.getElementById('confirmSuspendButton').setAttribute('href', url);
        //         var suspendModal = new bootstrap.Modal(document.getElementById('suspendModal'));
        //         suspendModal.show();
        //     }
        // Fonction pour afficher le modal de blocage
        function showBlockModal(userId, blockUrl) {
            const confirmBlockButton = document.getElementById('confirmBlockButton');

            confirmBlockButton.onclick = function() {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = blockUrl;
                form.style.display = 'none';

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';
                form.appendChild(csrfToken);

                document.body.appendChild(form);
                form.submit();
            };

            $('#blockModal').modal('show');
        }

        // Fonction pour afficher le modal de déblocage
        function showUnblockModal(userId, unblockUrl) {
            const confirmUnblockButton = document.getElementById('confirmUnblockButton');

            confirmUnblockButton.onclick = function() {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = unblockUrl;
                form.style.display = 'none';

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';
                form.appendChild(csrfToken);

                document.body.appendChild(form);
                form.submit();
            };

            $('#unblockModal').modal('show');
        }

        function resetFilters() {
            document.querySelectorAll('#filterForm input, #filterForm select').forEach(element => {
                element.value = '';
            });
            document.getElementById('filterForm').submit();
        }

        document.addEventListener("DOMContentLoaded", function() {
            // Attendre que le DOM soit complètement chargé
            let modalElement = document.getElementById("deleteModal");
            let modal = new bootstrap.Modal(modalElement);

            // Vérification si les éléments existent
            let confirmButton = document.getElementById("confirmDeleteButton");
            let cancelButton = document.getElementById("cancelDeleteButton");

            if (!confirmButton || !cancelButton) {
                console.error("Erreur : Les boutons de confirmation ou d'annulation sont manquants.");
                return;
            }

            // Fonction pour afficher le modal
            window.showModal = function(candidatId) {
                if (!candidatId) {
                    console.error("Erreur : L'ID du candidat est manquant.");
                    return;
                }

                // Définir l'ID du candidat dans le bouton
                confirmButton.setAttribute("data-candidat-id", candidatId);

                // Afficher le modal
                modal.show();
            };

            // Fermeture avec le bouton "Annuler"
            cancelButton.addEventListener("click", function() {
                modal.hide();
            });

            // Action lorsque l'on clique sur "Supprimer"
            confirmButton.addEventListener("click", function() {
                let candidatId = confirmButton.getAttribute("data-candidat-id");

                if (!candidatId) {
                    console.error("Erreur : ID du candidat non trouvé.");
                    return;
                }

                // Effectuer la requête DELETE
                fetch(`/admin/candidats/${candidatId}/supprimer`, {
                        method: "DELETE",
                        headers: {
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                                .getAttribute("content"),
                            "Content-Type": "application/json"
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            window.location.reload(); // Recharge la page après suppression
                        } else {
                            alert("Erreur lors de la suppression.");
                        }
                    })
                    .catch(error => {
                        console.error("Erreur:", error);
                        alert("Erreur de communication.");
                    });
            });
        });
    </script>
@endsection