@extends('layouts.entreprise_base')

@section('content')
<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 Appels d'Offres</h1>
    <a href="{{ route('offres-appels.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Nouvel Appel
    </a>
</div>

<form method="GET" action="{{ route('offres-appels.index') }}" class="mb-4 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-lg flex-grow shadow-sm p-2">
            <i class="fas fa-search text-gray-500 mr-2"></i>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Titre du 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()">
    
        <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>
</form>

<table class="w-full border-collapse bg-white shadow-md rounded-lg">
    <thead class="bg-gray-200 text-gray-600">
        <tr>
            <th class="px-4 py-2 border">Titre</th>
            <th class="px-4 py-2 border">Lieu</th>
            <th class="px-4 py-2 border">Date Limite</th>
            <th class="px-4 py-2 border">Description</th>
            <th class="px-4 py-2 border">Document</th>
            <th class="px-2 py-2 border">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($offres as $offre)
        <tr class="hover:bg-gray-50">
            <td class="p-3 border">{{ $offre->titre }}</td>
            <td class="p-3 border">{{ $offre->lieu }}</td>
            <td class="p-3 border {{ now()->gt($offre->date_limite) ? 'text-red-500' : '' }}">
                {{ $offre->date_limite }}
            </td>
            <td class="p-3 border">{{ Str::limit($offre->description, 30, '...') }}</td>
            <td class="p-3 border">
                @if ($offre->document)
                    <a href="{{ asset('storage/' . $offre->document) }}" class="text-indigo-600 underline" target="_blank">Voir document</a>
                @endif
            </td>
            <td class="p-3 border flex space-x-3">
                <a href="{{ route('offres-appels.show', $offre->id) }}" class="text-green-600 hover:text-green-800">
                    <i class="fas fa-eye"></i>
                </a>
                <a href="{{ route('offres-appels.edit', $offre->id) }}" class="text-yellow-600 hover:text-yellow-800">
                    <i class="fas fa-edit"></i>
                </a>
                <button onclick="openDeleteModal({{ $offre->id }})" class="text-red-600 hover:text-red-800">
                    <i class="fas fa-trash-alt"></i>
                </button>

                <!-- Formulaire de suppression caché -->
                <form id="delete-form-{{ $offre->id }}" action="{{ route('offres-appels.destroy', $offre->id) }}" method="POST" class="hidden">
                    @csrf
                    @method('DELETE')
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@include('layouts.pagination')
<!-- Modal de confirmation -->
<div id="deleteModal" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center hidden">
    <div class="bg-white p-6 rounded shadow-lg text-center">
        <p class="mb-4 text-gray-700">Êtes-vous sûr de vouloir supprimer cette offre ?</p>
        <button onclick="closeDeleteModal()" class="bg-gray-500 text-white px-4 py-2 rounded-lg">Annuler</button>
        <button id="confirmDelete" class="bg-red-600 text-white px-4 py-2 rounded-lg">Supprimer</button>
    </div>
</div>

<script>
    let deleteId = null;

    function openDeleteModal(id) {
        deleteId = id;
        document.getElementById('deleteModal').classList.remove('hidden');
    }

    function closeDeleteModal() {
        deleteId = null;
        document.getElementById('deleteModal').classList.add('hidden');
    }

    document.getElementById('confirmDelete').addEventListener('click', function () {
        if (deleteId) {
            document.getElementById(`delete-form-${deleteId}`).submit();
        }
    });

    function resetFilters() {
            document.querySelectorAll('#filterForm input, #filterForm select').forEach(element => {
                element.value = '';
            });
            document.getElementById('filterForm').submit();
        }

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