@extends('layouts.home')

@section('content')
<main class="p-4">

<!-- 🔎 Barre de recherche et filtres -->
<div class="flex flex-wrap gap-2 mb-4 container mx-auto">
    <input type="text" id="searchInput" placeholder="Rechercher..." class="bg-gray-100 p-2 rounded-lg flex-1 min-w-[150px]">
    <input type="text" id="lieuInput" placeholder="Lieu..." class="bg-gray-100 p-2 rounded-lg flex-1 min-w-[150px]">
    
    <select id="typeContratSelect" class="bg-gray-100 p-2 rounded-lg flex-1 min-w-[150px]">
        <option value="">Type de contrat</option>
        <option value="CDI">CDI</option>
        <option value="CDD">CDD</option>
        <option value="Stage">Stage</option>
    </select>

    <select id="educationSelect" class="bg-gray-100 p-2 rounded-lg flex-1 min-w-[150px]">
        <option value="">Niveau d'éducation</option>
        <option value="Licence">Licence</option>
        <option value="Master">Master</option>
        <option value="Doctorat">Doctorat</option>
    </select>
</div>

<!-- Résultats AJAX -->
<div id="resultsContainer" class="mt-6 container mx-auto space-y-4"></div>

@auth
    @if(auth()->user()->role === 'candidate')
    <!-- 🟦 Bascule Recommandées / Toutes -->
    <div class="flex gap-4 mt-8 mb-4 container mx-auto">
        <button id="btnRecommandees" class="tab-btn bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            Offres Recommandées
        </button>
        <button id="btnToutes" class="tab-btn bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition">
            Toutes les Offres
        </button>
    </div>

    <!-- ✅ Recommandées -->
    <section id="sectionRecommandees" class="bg-white shadow rounded-lg p-4 container mx-auto">
        <h2 class="text-xl font-semibold mb-4">Offres Recommandées</h2>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 px-4 mt-6">
            <aside class="col-span-1 h-[calc(100vh-200px)] overflow-y-auto space-y-4" id="liste-recommandees">
                @foreach ($offres_recommandees as $offre)
                <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition cursor-pointer offre-item" data-id="{{ $offre->id }}">
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">{{ $offre->titre }}</h3>
                    <p class="text-sm text-gray-500 mb-2">{{ $offre->entreprise->nom }} — {{ $offre->lieu ?? 'Lieu non spécifié' }}</p>
                    <div class="flex justify-between items-center text-xs text-gray-400 mb-2">
                        <span><i class="fas fa-calendar-alt mr-1"></i>{{ $offre->created_at->diffForHumans() }}</span>
                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full">{{ $offre->type_contrat ?? 'CDI' }}</span>
                    </div>
                    <p class="text-gray-700 text-sm">{{ Str::limit($offre->description, 100, '...') }}</p>
                    <div class="flex flex-wrap mt-2 gap-1">
                        @foreach ($offre->competences ?? [] as $skill)
                            <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">{{ $skill->nom }}</span>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </aside>

            <!-- Détails Recommandées -->
            <section class="col-span-2 bg-white p-2 rounded-lg  h-[calc(100vh-200px)] overflow-y-auto" id="details-recommandees">
                <p class="text-gray-500">Cliquez sur une offre pour voir les détails ici...</p>
            </section>
        </div>
    </section>
    @endif
@endauth

<!-- ✅ Toutes les Offres (toujours visible) -->
<section id="sectionToutes" class="container mx-auto @auth @if(auth()->user()->role === 'candidate') hidden @endif @endauth">
    <h2 class="text-xl font-semibold mb-4">Offres D'emplois</h2>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 px-4 mt-6">
        <aside class="col-span-1 h-[calc(100vh-200px)] overflow-y-auto space-y-4" id="liste-toutes">
            @foreach ($offreE->take(10) as $offre)
            <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition cursor-pointer offre-item" data-id="{{ $offre->id }}">
                <h3 class="text-xl font-semibold text-gray-800 mb-1">{{ $offre->titre }}</h3>
                <p class="text-sm text-gray-500 mb-2">{{ $offre->entreprise->nom }} — {{ $offre->lieu ?? 'Lieu non spécifié' }}</p>
                <div class="flex justify-between items-center text-xs text-gray-400 mb-2">
                    <span><i class="fas fa-calendar-alt mr-1"></i>{{ $offre->created_at->diffForHumans() }}</span>
                    <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full">{{ $offre->type_contrat ?? 'CDI' }}</span>
                </div>
                <p class="text-gray-700 text-sm">{{ Str::limit($offre->description, 100, '...') }}</p>
                <div class="flex flex-wrap mt-2 gap-1">
                    @foreach ($offre->competences ?? [] as $skill)
                        <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">{{ $skill->nom }}</span>
                    @endforeach
                </div>
            </div>
            @endforeach
        </aside>

        <!-- Détails Toutes -->
        <section class="col-span-2 bg-white p-2 rounded-lg  h-[calc(100vh-200px)] overflow-y-auto" id="details-toutes">
            <p class="text-gray-500">Cliquez sur une offre pour voir les détails ici...</p>
        </section>
    </div>
</section>

<!-- JS: Bascule et AJAX Détails -->
<script>
$(document).ready(function () {
    var selectedOffreId = null;

    $('#btnRecommandees').click(function () {
        $('#sectionRecommandees').show();
        $('#sectionToutes').hide();
        $(this).addClass('bg-blue-600 text-white').removeClass('bg-gray-200 text-gray-700');
        $('#btnToutes').removeClass('bg-blue-600 text-white').addClass('bg-gray-200 text-gray-700');
    });

    $('#btnToutes').click(function () {
        $('#sectionRecommandees').hide();
        $('#sectionToutes').show();
        $(this).addClass('bg-blue-600 text-white').removeClass('bg-gray-200 text-gray-700');
        $('#btnRecommandees').removeClass('bg-blue-600 text-white').addClass('bg-gray-200 text-gray-700');
    });

    $(document).on('click', '.offre-item', function () {
        var offreId = $(this).data('id');
        var url = `${BASE_URL}/offress/${offreId}`;

        selectedOffreId = offreId;

        $('.offre-item').removeClass('ring-2 ring-blue-600 bg-blue-50');
        $(this).addClass('ring-2 ring-blue-600 bg-blue-50');

        let container = $('#sectionRecommandees').is(':visible') ? '#details-recommandees' : '#details-toutes';
        $(container).html('<p class="text-gray-400">Chargement...</p>');

        $.ajax({
            url: url,
            type: 'GET',
            success: function (data) {
                $(container).html(data);
            },
            error: function () {
                $(container).html('<p class="text-red-500">Erreur de chargement.</p>');
            }
        });
    });
});
</script>

<!-- JS: Filtrage Local (complété) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const lieuInput = document.getElementById('lieuInput');
    const typeContratSelect = document.getElementById('typeContratSelect');
    const educationSelect = document.getElementById('educationSelect');

    function filterOffers() {
        const searchValue = searchInput.value.toLowerCase();
        const lieuValue = lieuInput.value.toLowerCase();
        const contratValue = typeContratSelect.value.toLowerCase();
        const educationValue = educationSelect.value.toLowerCase();

        document.querySelectorAll('.offre-item').forEach(function(offer) {
            const titre = offer.querySelector('h3')?.textContent.toLowerCase() || '';
            const lieu = offer.querySelector('p.text-sm')?.textContent.toLowerCase() || '';
            const contrat = offer.querySelector('span.bg-blue-100')?.textContent.toLowerCase() || '';
            const description = offer.querySelector('p.text-gray-700')?.textContent.toLowerCase() || '';

            const matchSearch = titre.includes(searchValue) || description.includes(searchValue);
            const matchLieu = lieu.includes(lieuValue);
            const matchContrat = contrat.includes(contratValue);
            const matchEducation = !educationValue || description.includes(educationValue);

            if (matchSearch && matchLieu && matchContrat && matchEducation) {
                offer.style.display = 'block';
            } else {
                offer.style.display = 'none';
            }
        });
    }

    searchInput.addEventListener('input', filterOffers);
    lieuInput.addEventListener('input', filterOffers);
    typeContratSelect.addEventListener('change', filterOffers);
    educationSelect.addEventListener('change', filterOffers);
});
</script>

</main>
@endsection