@extends('layouts.admin_base')
<!-- Liens vers Bootstrap CSS et JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
@section('content')

    <div class="container mx-auto my-10 p-6  shadow-lg rounded-lg">
        <h2 class="text-2xl font-semibold text-center mb-6 text-gray-700">Supervision des Offres</h2>

        <form method="GET" action="{{ route('offresAdmin.index') }}" class="mb-$ 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="titre de poste "
                        class="bg-transparent outline-none w-full text-gray-700" onkeyup="submitForm()">
                </div>
                <input type="text" name="lieu" value="{{ request('lieu') }}" placeholder="Lieu de poste"
                    class="border px-3 py-2 rounded-lg mt-3" onkeyup="submitForm()">



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

                    <select name="type_contrat" class="border px-4 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Type de contrat</option>
                        <option value="CDI" {{ request('type_contrat') == 'CDI' ? 'selected' : '' }}>CDI</option>
                        <option value="CDD" {{ request('type_contrat') == 'CDD' ? 'selected' : '' }}>CDD</option>
                        <option value="Stage" {{ request('type_contrat') == 'Stage' ? 'selected' : '' }}>Stage</option>
                        <option value="Freelance" {{ request('type_contrat') == 'Freelance' ? 'selected' : '' }}>Freelance
                        </option>
                    </select>

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


                    <select name="status" class="border px-2 py-2 rounded-lg" onchange="submitForm()">
                        <option value="">Status</option>
                        <option value="actif" {{ request('status') == 'actif' ? 'selected' : '' }}>Actif</option>
                        <option value="modération" {{ request('status') == 'modération' ? 'selected' : '' }}>En modération
                        </option>
                        <option value="suspendu" {{ request('status') == 'suspendu' ? 'selected' : '' }}>Suspendu</option>
                        <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expiré</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 offres -->
        <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 class="bg-gray-200">
                        <th class="py-3 px-4 text-left">Titre</th>
                        <th class="py-3 px-2 text-left">Entreprise</th>
                        <th class="py-3 px-2 text-left">Type de contrat</th>
                        <th class="py-3 px-4 text-left">Lieu</th>
                        <th class="py-3 px-2 text-left">Catégorie</th>
                        <th class="py-3 px-16 text-left">Date limite</th>
                        <th class="py-3 px-2 text-left">Salaire</th>
                        <th class="py-3 px-2 text-left">Éducation</th>
                        <th class="py-3 px-2 text-left">Expérience</th>
                        <th class="py-3 px-2 text-left">Statut</th>
                        <th class="py-3 px-1 text-left">Vues</th>
                        <th class="py-3 px-2 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($offres as $offre)
                    <tr class="border-b hover:bg-gray-100 transition">
                            <td class="py-2 px-4">{{ $offre->titre }}</td>
                            <td class="py-2 px-2">{{ $offre->Entreprise->nom }}</td>
                            <td class="py-2 px-2">{{ $offre->type_contrat }}</td>
                            <td class="py-2 px-4">{{ $offre->lieu }}</td>
                            <td class="py-2 px-2">{{ $offre->categorie }}</td>
                            <td class="py-2 px-16">{{ \Carbon\Carbon::parse($offre->date_limite)->format('d-m-Y') }}</td>
                            <td class="py-2 px-2">{{ $offre->salaire ?? 'Non précisé' }}</td>
                            <td class="py-2 px-2">{{ $offre->education ?? 'Non précisé' }}</td>
                            <td class="py-2 px-2">{{ $offre->experience ?? 'Non précisé' }}</td>
                            <td class="py-2 px-2">
                                <span
                                    class="font-semibold {{ $offre->status === 'actif' ? 'text-green-500' : 'text-red-500' }}">
                                    {{ ucfirst($offre->status) }}
                                </span>
                            </td>
                            <td class="py-2 px-1">{{ $offre->views }}</td>
                            <td class="py-2 px-4 flex space-x-4 items-center justify-center">
                                <!-- Bouton Voir plus -->
                                <a href="{{ route('candidats.show', $offre->id) }}"
                                    class=" text-blue-500 py-2 px-3   ">
                                    <i class="fas fa-eye"></i>
                                </a>
                            
                                <!-- Bouton Suspendre avec icône -->
                                @if ($offre->status === 'actif')
                                    <button type="button"
                                        class=" text-yellow-600 py-2 px-3"
                                        data-bs-toggle="modal" data-bs-target="#suspendModal{{ $offre->id }}">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </button>
                            
                                    <!-- Modale Suspendre -->
                                    <div class="modal fade" id="suspendModal{{ $offre->id }}" tabindex="-1"
                                        aria-labelledby="suspendModalLabel{{ $offre->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="suspendModalLabel{{ $offre->id }}">Confirmer la suspension</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Êtes-vous sûr de vouloir suspendre cette offre ? Cette action peut être réversible.
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                                    <form action="{{ route('admin.offres.signaler', $offre->id) }}" method="POST">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-warning">Suspendre</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                                @elseif($offre->status === 'expired' || $offre->status === 'suspendu')
                                    <button type="button"
                                        class=" text-red-500 py-2 px-3 "
                                        data-bs-toggle="modal" data-bs-target="#deleteModal{{ $offre->id }}">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                    
                                
                                    <!-- Modale Supprimer -->
                                    <div class="modal fade" id="deleteModal{{ $offre->id }}" tabindex="-1"
                                        aria-labelledby="deleteModalLabel{{ $offre->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="deleteModalLabel{{ $offre->id }}">Confirmer la suppression</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Êtes-vous sûr de vouloir supprimer cette offre ? Cette action est irréversible.
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                                    <form action="{{ route('admin.offres.supprimer', $offre->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger">Supprimer</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- @if ($offre->status === 'suspendu')
                                    <button type="button" class="text-green-500 py-2 px-3" data-bs-toggle="modal" data-bs-target="#reactivateModal{{ $offre->id }}">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                
                                    <!-- Modale de Réactivation -->
                                    <div class="modal fade" id="reactivateModal{{ $offre->id }}" tabindex="-1" aria-labelledby="reactivateModalLabel{{ $offre->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="reactivateModalLabel{{ $offre->id }}">Confirmer la réactivation</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Êtes-vous sûr de vouloir réactiver cette offre ? Elle redeviendra visible pour les candidats.
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                                    <form action="{{ route('admin.offres.reactiver', $offre->id) }}" method="POST">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-success">Réactiver</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                 --}}
                                 
                            </td>
                                                      


                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

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


        function resetFilters() {
            document.querySelectorAll('#filterForm input, #filterForm select').forEach(element => {
                element.value = '';
            });
            document.getElementById('filterForm').submit();
        }
     // Assurer l'initialisation correcte des modales Bootstrap
     document.addEventListener("DOMContentLoaded", function () {
        var modals = document.querySelectorAll('.modal');
        modals.forEach(function (modalElement) {
            var modal = new bootstrap.Modal(modalElement);
            
            // Optionnel : Réinitialiser la modale lorsqu'elle est fermée
            modalElement.addEventListener('hidden.bs.modal', function () {
                var forms = modalElement.querySelectorAll("form");
                forms.forEach(form => form.reset());
            });
        });
    });
</script>

@endsection