@extends('admin.layouts.admin')

@section('title', 'Cahiers des charges - Admin KONTIXX')
@section('page-title', 'Cahiers des charges')
@section('page-description', 'Gérez toutes les soumissions de cahiers des charges')

@section('content')
<div class="space-y-3 sm:space-y-4">
    {{-- FILTRES --}}
    <div class="card-premium rounded-xl p-4">
        <form method="GET" action="{{ route('admin.cdc.index') }}" class="flex flex-col md:flex-row items-end gap-4">
            <div class="flex-1 w-full">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Rechercher</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Entreprise, email, secteur..."
                        class="input-premium w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="w-full md:w-48">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Statut</label>
                <select name="is_read" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Tous</option>
                    <option value="0" {{ request('is_read') === '0' ? 'selected' : '' }}>Non lus</option>
                    <option value="1" {{ request('is_read') === '1' ? 'selected' : '' }}>Lus</option>
                </select>
            </div>
            <div class="flex gap-3 w-full md:w-auto">
                <button type="submit" class="btn-premium px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                    Filtrer
                </button>
                @if(request()->hasAny(['search', 'is_read']))
                    <a href="{{ route('admin.cdc.index') }}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-all duration-300 font-semibold flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        Réinitialiser
                    </a>
                @endif
            </div>
        </form>
    </div>

    {{-- LISTE DES SOUMISSIONS --}}
    <div class="card-premium rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Entreprise</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Chef de projet</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Secteur</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Date</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Statut</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($submissions as $submission)
                        <tr class="hover:bg-blue-50/50 transition-colors duration-200 {{ !$submission->is_read ? 'bg-blue-50/30' : '' }}">
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold mr-3">
                                        {{ strtoupper(substr($submission->company_name ?? 'N', 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="text-sm font-semibold text-gray-900">{{ $submission->company_name ?? 'Non renseigné' }}</div>
                                        <div class="text-xs text-gray-500">{{ $submission->company_city ?? '' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">
                                    {{ $submission->project_manager_firstname }} {{ $submission->project_manager_lastname }}
                                </div>
                                <div class="text-xs text-gray-500">{{ $submission->project_manager_email }}</div>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <span class="px-3 py-1.5 text-xs font-semibold bg-gray-100 text-gray-800 rounded-lg">{{ $submission->activity_sector ?? 'N/A' }}</span>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                {{ $submission->created_at->format('d/m/Y') }}
                                <div class="text-xs text-gray-400">{{ $submission->created_at->format('H:i') }}</div>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @if($submission->is_read)
                                    <span class="px-3 py-1.5 text-xs font-bold rounded-full bg-gray-100 text-gray-800 border border-gray-200">Lu</span>
                                @else
                                    <span class="px-3 py-1.5 text-xs font-bold rounded-full bg-blue-100 text-blue-800 border border-blue-200 flex items-center">
                                        <span class="w-2 h-2 bg-blue-600 rounded-full mr-2 animate-pulse"></span>
                                        Non lu
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                <div class="flex items-center space-x-2">
                                    <a href="{{ route('admin.cdc.show', $submission->id) }}" class="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors font-semibold text-xs">
                                        Voir
                                    </a>
                                    <form action="{{ route('admin.cdc.toggleRead', $submission->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" class="px-3 py-1.5 bg-gray-50 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors font-semibold text-xs">
                                            {{ $submission->is_read ? 'Non lu' : 'Lu' }}
                                        </button>
                                    </form>
                                    <form action="{{ route('admin.cdc.destroy', $submission->id) }}" method="POST" class="inline" onsubmit="return confirm('Supprimer cette soumission ?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="px-3 py-1.5 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-colors font-semibold text-xs">
                                            Supprimer
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center">
                                <div class="flex flex-col items-center">
                                    <svg class="w-12 h-12 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <p class="text-gray-500 font-medium">Aucune soumission trouvée</p>
                                    <p class="text-sm text-gray-400 mt-1">Essayez de modifier vos filtres</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
            {{ $submissions->links() }}
        </div>
    </div>
</div>
@endsection