@extends('layouts.entreprise_base')
@section('content')
<div class="container mx-auto my-10 p-6  shadow-lg rounded-lg">

        <div class="flex justify-between items-center mb-6">
            <a href="{{ url()->previous() }}" class="flex items-center text-blue-500 hover:text-blue-700 mb-4">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
            <h1 class="text-3xl font-bold text-gray-900">Liste des Offres d'emplois</h1>
            <a href="{{ route('offres.create') }}"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Nouvelle Offre
            </a>
        </div>

        <form method="GET" action="{{ route('offres.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="">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="desactivé" {{ request('status') == 'desactivé' ? 'selected' : '' }}>desactivé
                        </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-gray-500 text-white hover:bg-gray-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 d'affichage des entreprises -->
        <div class="overflow-x-auto mx-auto py-2">
            <table class="w-full border-collapse bg-white shadow-md rounded-lg">
                <!-- En-têtes de colonne -->
                <thead class="bg-gray-200 text-gray-600">
                    <tr class="bg-gray-200">
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Titre du poste</th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Domaine</th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Education
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Type de Contrat
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Lieu</th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Date Publication
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Date Limite
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Document
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Vue
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700"><i
                                class="fa-solid fa-user"></i>
                        </th>
                        <th class="px-2 py-2 border border-gray-300 text-left font-medium text-gray-700">Status
                        </th>
                        <th class="px-2 py-2 border  border-gray-300 text-left font-medium text-gray-700">Actions
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Boucle pour afficher chaque offre -->
                    @foreach ($offres as $offre)
                        <tr class="hover:bg-gray-50">
                            <td class="p-3 border border-gray-300">{{ $offre->titre }}</td>
                            <td class="p-3 border border-gray-300">{{ $offre->categorie }}</td>
                            <td class="p-3 border border-gray-300">{{ $offre->education }}</td>
                            <td class="p-3 border border-gray-300">{{ $offre->type_contrat }}</td>
                            <td class="p-3 border border-gray-300">{{ $offre->lieu }}</td>
                            <td class="p-3 border border-gray-300">
                                {{ \Carbon\Carbon::parse($offre->created_at)->format('d-m-Y') }}</td>
                            <td class="p-3 border border-gray-300">
                                {{ \Carbon\Carbon::parse($offre->date_limite)->format('d-m-Y') }}</td>
                            <td class="p-3 border border-gray-300">
                                @if ($offre->document)
                                    <a href="{{ asset('storage/' . $offre->document) }}" class="text-indigo-600 underline"
                                        target="_blank">Voir doc</a>
                                @endif
                            </td>
                            <td class="p-3 border border-gray-300">{{ $offre->views }}</td>
                            <td class="p-3 border border-gray-300">{{ $offre->postulations->count() }}</td>
                            <td class="p-3 border border-gray-300">
                                @if ($offre->status === 'brouillon')
                                    <p class=" text-red-500">brouillon</p>
                                @else
                                    <button
                                        @if ($offre->status === 'expired') onclick="expiredModal('{{ $offre->id }}', '{{ $offre->titre }}')"
                                        
                                    @else 
                                        onclick="showToggleModal('{{ $offre->id }}', '{{ $offre->status }}')" @endif
                                        class="text-blue-600 hover:text-blue-800">
                                        @if ($offre->status === 'actif')
                                            <i class="fas fa-toggle-on text-blue-500" title="Active"></i>
                                        @elseif ($offre->status === 'désactivé')
                                            <i class="fas fa-toggle-off text-gray-500" title="desactivé"></i>
                                        @elseif ($offre->status === 'expired')
                                            <i class="fas fa-toggle-off text-red-500" title="expiré"></i>
                                        @endif
                                    </button>
                                @endif
                            </td>

                            <td class="p-3 border border-gray-300 space-x-2">

                                <a href="{{ route('offres.show', $offre->id) }}"
                                    class="text-green-600 hover:text-green-800"  title="Voir">
                                    <i class="fas fa-eye"></i>
                                </a>
                                
                                <a href="{{ route('offres.edit', $offre->id) }}"
                                    class="text-yellow-600 hover:text-yellow-800"  title="Modifier">
                                    <i class="fas fa-edit"></i></a>
                                <a href="#" data-dialog-target="deleteModal-{{ $offre->id }}"
                                    class="ml-4 text-red-600 hover:text-red-900" style="text-decoration: none;"
                                    id="deleteLink-{{ $offre->id }}"
                                    onclick="showModal(event, '{{ $offre->id }}')">
                                    <i class="fas fa-trash-alt"  title="Supprimer"></i> <!-- Icône de la corbeille -->
                                </a>

                                <form id="delete-form-{{ $offre->id }}"
                                    action="{{ route('offres.destroy', $offre->id) }}" method="POST"
                                    style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>


                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @include('layouts.pagination')
  
    {{-- <div class="mt-4">
                {{ $offres->links() }}
            </div> --}}

    <div id="deleteModal" tabindex="-1" aria-hidden="true"
        class="hidden overflow-y-auto overflow-x-hidden fixed  top-0   justify-center">
        <div class="relative p-4 w-full max-w-md h-full md:h-auto mt-10">
            <!-- Modal content -->
            <div class="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">

                <svg class="text-gray-400 dark:text-gray-500 w-11 h-11 mb-3.5 mx-auto" aria-hidden="true"
                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                        clip-rule="evenodd"></path>
                </svg>
                <p class="mb-4 text-gray-500 dark:text-gray-300">Êtes-vous sûr de vouloir supprimer cette entreprise ?</p>
                <div class="flex justify-center items-center space-x-4">
                    <button data-modal-toggle="deleteModal" type="button"
                        class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                        Annuler
                        <span class="sr-only">Close modal</span>
                    </button>
                    <button type="submit"
                        class="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900">
                        Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="toggleModal" tabindex="-1" aria-hidden="true"
        class="hidden fixed top-0 left-0 w-full h-full flex justify-center items-center bg-gray-800 bg-opacity-50">
        <div class="bg-white rounded-lg shadow-lg p-6 max-w-sm">
            <h3 class="text-lg font-bold mb-4">Confirmer l'action</h3>
            <p class="text-gray-600 mb-4">Voulez-vous vraiment <span id="toggleAction"></span> cette offre ?</p>
            <div class="flex justify-end space-x-4">
                <button onclick="closeModal()"
                    class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded">Annuler</button>
                <form id="toggleForm" method="POST" class="inline">
                    @csrf
                    <button type="submit"
                        class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">Confirmer</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="expiredModal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center">
        <div class="bg-white text-red-600 p-6 rounded shadow-lg w-1/3">
            <h2 class="text-lg font-bold mb-4">Offre Expirée</h2>
            <p id="modalMessage" class="mb-4"></p>
            <div class="flex justify-end">
                <a id="editLink" href="#"
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Modifier l'Offre</a>
                <button onclick="closeModal1()"
                    class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded">Annuler</button>
            </div>
        </div>
    </div>

</div>

    <script>
        function expiredModal(offreId, titre) {
            const modal = document.getElementById('expiredModal');
            const message = document.getElementById('modalMessage');
            const editLink = document.getElementById('editLink');

            message.textContent = `L'offre "${titre}" est expirée. Veuillez la modifier avant de l'activer.`;
            editLink.href = `/offres/${offreId}/edit`;

            modal.classList.remove('hidden');
        }

        function closeModal1() {
            const modal = document.getElementById('expiredModal');
            modal.classList.add('hidden');
        }

        function toggleOfferStatus(offreId) {
            // Appeler l'API pour basculer le statut (similaire à l'exemple précédent)
        }
    </script>
    <script>
        function showModal(event, offreId) {
            event.preventDefault(); // Empêche le comportement par défaut du lien

            // Récupère le modal spécifique pour cette offre
            const modal = document.getElementById('deleteModal');

            // Affiche le modal
            modal.style.display = 'block';

            // Configure le bouton "Oui, je suis sûr" pour soumettre le formulaire associé
            const confirmButton = modal.querySelector('button[type="submit"]');
            confirmButton.onclick = function() {
                document.getElementById('delete-form-' + offreId).submit();
            };
        }

        // Fermer le modal lorsque le bouton "No, cancel" est cliqué
        document.addEventListener("DOMContentLoaded", function() {
            const closeButton = document.querySelector('[data-modal-toggle="deleteModal"]');
            closeButton.addEventListener('click', function() {
                const modal = document.getElementById('deleteModal');
                modal.style.display = 'none';
            });
        });
    </script>

    <script>
        function showToggleModal(offreId, statut) {
            // Mettre à jour le texte de l'action
            const actionText = statut === 'actif' ? 'désactiver' : 'activer';
            document.getElementById('toggleAction').textContent = actionText;

            // Mettre à jour l'action du formulaire
            const form = document.getElementById('toggleForm');
            form.action = `/offres/${offreId}/reactivate`;

            // Afficher le modal
            const modal = document.getElementById('toggleModal');
            modal.style.display = 'flex';
        }


        function closeModal() {
            const modal = document.getElementById('toggleModal');
            modal.style.display = 'none';
        }
    </script>

    <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