@extends('layouts.home')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@section('content')
<div class="container mx-auto p-6" x-data="modalController()">

    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-md mb-4">
        <strong class="font-bold">Succès!</strong> <span>{{ session('success') }}</span>
    </div>
    @endif

    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Mes Candidatures</h2>

    <!-- Recherche + Filtre -->
    <div class="flex items-center space-x-4 mb-4">
        <input type="text" id="search" placeholder="Rechercher..." class="border p-2 w-2/3 rounded-md" onkeyup="filterCandidatures()">
        <select id="filterStatus" class="w-1/3 p-2 border rounded-md">
            <option value="all">Toutes</option>
            <option value="accepte">Acceptées</option>
            <option value="en_attente">En attente</option>
            <option value="rejete">Rejetées</option>
        </select>
    </div>

               

    <div class="overflow-x-auto bg-white shadow-lg rounded-lg">
        <table class="min-w-full bg-white border border-gray-200 rounded-lg" id="candidaturesTable">
            <thead>
                <tr class="bg-gray-100">
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">Offre</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">Date</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">Statut</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($candidatures as $candidature)
                <tr class="border-b hover:bg-gray-50" data-status="{{ $candidature->status }}">
                     <td class="px-6 py-4 text-gray-800">
                        <a href="{{ route('candidats.show', $candidature->offre->id) }}" class="text-blue-500 hover:underline">
                            {{ $candidature->offre->titre }}
                        </a>
                    </td>
                    
                    <td class="px-6 py-4 text-sm text-gray-600">{{ $candidature->created_at->format('d/m/Y') }}</td>
                    <td class="px-6 py-4 text-sm">
                        @if($candidature->status == 'accepte')
                            @if(optional($candidature->entretien)->date)
                                <span class="text-green-600"><i class="fas fa-check-circle"></i> Acceptée avec entretien</span>
                            @else
                                <span class="text-green-600"><i class="fas fa-check-circle"></i> Acceptée</span>
                            @endif
                        @elseif($candidature->status == 'en_attente')
                            <span class="text-yellow-600"><i class="fas fa-hourglass-half"></i> En attente</span>
                        @else
                            <span class="text-red-600"><i class="fas fa-times-circle"></i> Rejetée</span>
                        @endif
                    </td>
                    
                <td class="px-6 py-6">
                        <button class="text-blue-500 hover:underline"
                        @click="openModal({
                            offre: '{{ $candidature->offre->titre ?? 'N/A' }}',
                            entreprise: '{{ $candidature->offre->entreprise->nom ?? 'N/A' }}',
                            status: '{{ $candidature->status }}',
                            date_postulation: '{{ $candidature->created_at->format('d/m/Y') }}',
                        
                            date_entretien: '{{ optional($candidature->entretien)->date ? \Carbon\Carbon::parse($candidature->entretien->date)->format('d/m/Y') . 
                            (optional($candidature->entretien)->time ? " à " . $candidature->entretien->time : '') 
                            : 'Non prévu' }}'
    })">
    Voir Détails
                        </button>

                        @if($candidature->status == 'en_attente')
                        <form action="{{ route('postulation.destroy', $candidature->id) }}" method="POST" id="deleteForm{{ $candidature->id }}" class="hidden">
                            @csrf
                            @method('DELETE')
                        </form>
                        <button onclick="confirmDelete({{ $candidature->id }})" class="ml-2 text-red-500 hover:underline">Retirer</button>
                    @endif
                    

                        
                     
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-4 justify-center">
            {{ $candidatures->links() }}
        </div>
        
        <!-- Modal -->
    <div x-show="showModal" x-transition.opacity.duration.300ms class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4">
        <div class="bg-white w-full max-w-md p-6 rounded-lg shadow-lg relative">
            <!-- Bouton de fermeture -->
            <button @click="showModal = false" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
                ✖
            </button>

            <h2 class="text-xl font-bold mb-4 text-center text-gray-700">Détails de la Candidature</h2>

            <div class="border-t border-gray-300 py-4">
                <table class="w-full text-sm">
                    <tbody>
                        <tr>
                            <td class="font-semibold text-gray-600 py-2">Offre :</td>
                            <td class="text-gray-800" x-text="selectedCandidature?.offre ?? 'Non défini'"></td>
                        </tr>
                        <tr>
                            <td class="font-semibold text-gray-600 py-2">Entreprise :</td>
                            <td class="text-gray-800" x-text="selectedCandidature?.entreprise ?? 'Non défini'"></td>
                        </tr>
                        <tr>
                            <td class="font-semibold text-gray-600 py-2">Statut :</td>
                            <td class="text-gray-800">
                                <span class="px-2 py-1 rounded "
                                    :class="{
                                        'bg-yellow-500': selectedCandidature?.status === 'en_attente',
                                        'bg-green-500': selectedCandidature?.status === 'accepte',
                                        'bg-red-500': selectedCandidature?.status === 'jejete'
                                    }" 
                                    x-text="selectedCandidature?.status ?? 'Non défini'">
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="font-semibold text-gray-600 py-2">Date de Postulation :</td>
                            <td class="text-gray-800" x-text="selectedCandidature?.date_postulation ?? 'Non défini'"></td>
                        </tr>
                        
                        <template x-if="selectedCandidature?.date_entretien">
                            <tr>
                                <td class="font-semibold text-gray-600 py-2">Date d'Entretien :</td>
                                <td class="text-gray-800" x-text="selectedCandidature.date_entretien"></td>
                            </tr>
                        </template>                        
                        
                    </tbody>
                </table>
            </div>

            <!-- Bouton de fermeture -->
            <div class="mt-6 flex justify-end">
                <button @click="showModal = false" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">Fermer</button>
            </div>
        </div>
    </div>

<!-- Modal de Confirmation -->
<div id="confirmModal" class="hidden fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
    <div class="bg-white p-6 rounded-lg shadow-lg w-100">
        <h5 class="text-xl font-semibold text-gray-800">Confirmation</h5>
        <p class="mt-4 text-gray-600">Voulez-vous vraiment retirer cette candidature ?</p>
        <div class="mt-6 flex justify-end space-x-3">
            <button class="px-4 py-2 bg-gray-300 rounded" onclick="hideConfirmModal()">Annuler</button>
            <button class="px-4 py-2 bg-red-500 text-white rounded" id="deleteButton">Supprimer</button>
        </div>
    </div>
</div>

</div>

<script>
document.getElementById('filterStatus').addEventListener('change', function () {
    let status = this.value;
    document.querySelectorAll('#candidaturesTable tbody tr').forEach(row => {
        row.style.display = (status === 'all' || row.dataset.status === status) ? '' : 'none';
    });
});

function filterCandidatures() {
    let input = document.getElementById("search").value.toLowerCase();
    document.querySelectorAll("#candidaturesTable tbody tr").forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(input) ? "table-row" : "none";
    });
}

function confirmDelete(id) {
    // Afficher le modal
    document.getElementById("confirmModal").classList.remove("hidden");

    // Ajouter un événement de clic sur le bouton de suppression
    document.getElementById("deleteButton").onclick = function() {
        // Soumettre le formulaire
        document.getElementById("deleteForm" + id).submit();
    };
}

function hideConfirmModal() {
    // Masquer le modal
    document.getElementById("confirmModal").classList.add("hidden");
}

document.addEventListener('alpine:init', () => {
    Alpine.data('modalController', () => ({
        showModal: false,
        selectedCandidature: {},
        openModal(data) {
            this.selectedCandidature = data;
            this.showModal = true;
        }
    }));
});

function printCandidature(id) {
        let content = document.getElementById("candidatureTable").outerHTML;
        let win = window.open('', '', 'width=800,height=600');
        win.document.write('<html><head><title>Impression</title></head><body>');
        win.document.write(content);
        win.document.write('</body></html>');
        win.document.close();
        win.print();
    }

</script>

@endsection