@extends('admin.layouts.app')

@section('title', 'Gestion des Sessions')
@section('header', 'Sessions')

@section('content')
    <div class="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800 dark:text-white">Sessions</h2>
            <p class="text-slate-500 dark:text-slate-400 text-sm">Gestion des réponses aux questionnaires</p>
        </div>
        <div class="flex gap-2">
            <!-- Add any global actions here if needed -->
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 mb-6 transition-all">
        <div class="p-4 border-b border-slate-100 dark:border-slate-700/50 flex items-center justify-between cursor-pointer" onclick="document.getElementById('filterPanel').classList.toggle('hidden')">
             <h3 class="font-semibold text-slate-700 dark:text-slate-200 flex items-center gap-2">
                <i class="fas fa-filter text-slate-400"></i> Filtres
             </h3>
             <i class="fas fa-chevron-down text-slate-400 text-sm"></i>
        </div>
        <div id="filterPanel" class="{{ request()->anyFilled(['agency', 'questionnaire', 'status', 'date_from', 'date_to']) ? '' : 'hidden' }} p-4">
            <form action="{{ route('admin.sessions.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                <!-- Agency Filter -->
                @if(!auth()->user()->isAgency())
                <div class="space-y-1">
                    <label for="agency" class="text-xs font-semibold text-slate-500 uppercase">Agence</label>
                    <select name="agency" id="agency" class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm px-3 py-2 text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="" class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Toutes</option>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}" {{ request('agency') == $tenant->id ? 'selected' : '' }} class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">
                                {{ $tenant->id }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @endif
    
                <!-- Questionnaire Filter -->
                <div class="space-y-1">
                    <label for="questionnaire" class="text-xs font-semibold text-slate-500 uppercase">Questionnaire</label>
                    <select name="questionnaire" id="questionnaire" class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm px-3 py-2 text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="" class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Tous</option>
                        @foreach($questionnaires as $q)
                            <option value="{{ $q->id }}" {{ request('questionnaire') == $q->id ? 'selected' : '' }} class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">
                                {{ $q->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
    
                <!-- Status Filter -->
                <div class="space-y-1">
                    <label for="status" class="text-xs font-semibold text-slate-500 uppercase">Statut</label>
                    <select name="status" id="status" class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm px-3 py-2 text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="" class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Tous</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }} class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Brouillon</option>
                        <option value="submitted" {{ request('status') == 'submitted' ? 'selected' : '' }} class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Soumis</option>
                        <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }} class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200">Confirmé</option>
                    </select>
                </div>
    
                <!-- Dates -->
                <div class="space-y-1">
                    <label class="text-xs font-semibold text-slate-500 uppercase">Période</label>
                    <div class="flex gap-2">
                        <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm px-2 py-2 text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-blue-500">
                        <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm px-2 py-2 text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
    
                <!-- Actions -->
                <div class="flex items-end gap-2">
                    <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors shadow-sm">
                        Filtrer
                    </button>
                    <a href="{{ route('admin.sessions.index') }}" class="bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600 py-2 px-3 rounded-lg transition-colors" title="Réinitialiser">
                        <i class="fas fa-undo"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Table Container -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                    <tr>
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">ID</th>
                        @if(!auth()->user()->isAgency())
                            <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Agence</th>
                        @endif
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Client</th>
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Questionnaire</th>
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Statut</th>
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Date</th>
                        <th class="py-4 px-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    @forelse($sessions as $session)
                        <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-700/30 transition-colors">
                            <td class="py-4 px-6">
                                <span class="font-mono text-xs font-medium text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded" title="{{ $session->uuid }}">
                                    {{ substr($session->uuid, 0, 8) }}
                                </span>
                            </td>
                            @if(!auth()->user()->isAgency())
                                <td class="py-4 px-6">
                                    <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
                                        {{ $session->tenant_id ?? '-' }}
                                    </span>
                                </td>
                            @endif
                            <td class="py-4 px-6">
                                @if($session->client)
                                    <div class="flex flex-col">
                                        <span class="text-sm font-medium text-slate-800 dark:text-white">{{ $session->client->first_name }} {{ $session->client->last_name }}</span>
                                        <span class="text-xs text-slate-500">{{ $session->client->email }}</span>
                                    </div>
                                @else
                                    <span class="text-sm text-slate-500 italic">Invité</span>
                                @endif
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-slate-800 dark:text-white">{{ $session->questionnaire->name ?? 'Inconnu' }}</span>
                                    <span class="text-xs text-slate-500">{{ $session->questionnaire->product->name ?? '-' }}</span>
                                </div>
                            </td>
                            <td class="py-4 px-6">
                                @php
                                    $statusClasses = [
                                        'draft' => 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
                                        'submitted' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
                                        'confirmed' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
                                    ];
                                    $statusLabels = [
                                        'draft' => 'Brouillon',
                                        'submitted' => 'Soumis',
                                        'confirmed' => 'Confirmé',
                                    ];
                                @endphp
                                <span class="px-2.5 py-1 rounded-full text-xs font-bold uppercase {{ $statusClasses[$session->status] ?? $statusClasses['draft'] }}">
                                    {{ $statusLabels[$session->status] ?? ucfirst($session->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-slate-600 dark:text-slate-400">
                                {{ $session->created_at->format('d/m/Y') }}
                                <div class="text-[10px] text-slate-400">{{ $session->created_at->format('H:i') }}</div>
                            </td>
                            <td class="py-4 px-6 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.sessions.show', $session->id) }}" class="text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" title="Voir les détails">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <form action="{{ route('admin.sessions.destroy', $session->id) }}" method="POST" onsubmit="return confirm('Supprimer définitivement cette session ?');" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 transition-colors" title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ !auth()->user()->isAgency() ? 7 : 6 }}" class="py-12 text-center text-slate-500 dark:text-slate-400">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-folder-open text-4xl mb-3 opacity-20"></i>
                                    <p>Aucune session trouvée.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/30">
            {{ $sessions->links() }}
        </div>
    </div>
@endsection