@extends('layouts.entreprise_base')

@section('content')
<div class="container mx-auto p-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">Liste des Entretiens</h1>

    @if($entretiens->isEmpty())
        <p class="text-gray-500 text-center">Aucun entretien programmé pour le moment.</p>
    @else
        <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
            <table class="min-w-full bg-white border border-gray-200">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="text-left py-3 px-4 border">Candidat</th>
                        <th class="text-left py-3 px-4 border">Offre</th>
                        <th class="text-left py-3 px-4 border">Date</th>
                        <th class="text-left py-3 px-4 border">Heure</th>
                        <th class="text-left py-3 px-4 border">Statut</th>
                        <th class="text-left py-3 px-4 border">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($entretiens as $entretien)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="py-3 px-4 border">{{ $entretien->postulation->candidate->first_name }}  {{ $entretien->postulation->candidate->last_name }}</td>
                            <td class="py-3 px-4 border">{{ $entretien->postulation->offre->titre }}</td>
                            <td class="py-3 px-4 border">{{ \Carbon\Carbon::parse($entretien->date)->format('d/m/Y') }}</td>
                            <td class="py-3 px-4 border">{{ \Carbon\Carbon::parse($entretien->time)->format('H:i') }}</td>
                            <td class="py-3 px-4 border">
                                <span class="px-2 py-1 rounded-md text-white 
                                    {{ $entretien->status == 'prévu' ? 'bg-yellow-500' : 
                                        ($entretien->status == 'terminé' ? 'bg-green-500' : 'bg-red-500') }}">
                                    {{ ucfirst($entretien->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-4 border">
                                <button 
                                    onclick="openModal('{{ $entretien->id }}', '{{ $entretien->date }}', '{{ $entretien->time }}', '{{ $entretien->message }}')"
                                    class="text-blue-500 hover:underline">Voir</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

{{-- Modal pour voir/modifier/annuler un entretien --}}
<div id="entretienModal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg w-96">
        <h2 class="text-xl font-bold mb-4">Détails de l'entretien</h2>
        <form id="editEntretienForm" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" name="id" id="entretienId">

             {{-- Date --}}
             <label for="date" class="block text-sm font-medium text-gray-700">Date planification</label>
             <strong  class="w-full p-2 border rounded-lg mb-3">{{ $entretien->created_at}}</strong>
 
            {{-- Date --}}
            <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
            <input type="date" id="entretienDate" name="date" class="w-full p-2 border rounded-lg mb-3">

            {{-- Heure --}}
            <label for="time" class="block text-sm font-medium text-gray-700">Heure</label>
            <input type="time" id="entretienTime" name="time" class="w-full p-2 border rounded-lg mb-3">

            {{-- Message --}}
            {{-- <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
            <textarea id="entretienMessage" name="message" class="w-full p-2 border rounded-lg mb-3"></textarea> --}}

            {{-- Actions dans le modal --}}
            <div class="flex justify-between">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Modifier</button>
                <button type="button" onclick="cancelEntretien()" class="bg-red-500 text-white px-4 py-2 rounded-lg">Annuler</button>
                <button type="button" onclick="closeModal()" class="bg-gray-500 text-white px-4 py-2 rounded-lg">Fermer</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openModal(id, date, time, message) {
        document.getElementById('entretienId').value = id;
        document.getElementById('entretienDate').value = date;
        document.getElementById('entretienTime').value = time;
        // document.getElementById('entretienMessage').value = message || '';

        document.getElementById('editEntretienForm').action = `/entretiens/${id}`;
        document.getElementById('entretienModal').classList.remove('hidden');
    }

    function closeModal() {
        document.getElementById('entretienModal').classList.add('hidden');
    }

    function cancelEntretien() {
        let id = document.getElementById('entretienId').value;
        if (confirm("Voulez-vous vraiment annuler cet entretien ?")) {
            fetch(`/entretiens/${id}/cancel`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({})
            }).then(response => response.json())
              .then(data => {
                  alert(data.message);
                  location.reload();
              })
              .catch(error => {
                  alert("Erreur lors de l'annulation.");
                  console.error(error);
              });
        }
    }
</script>
@endsection