@extends('layouts.app')

@section('title', 'Audits')
@section('page-title', 'Audits')

@section('content')
<x-page-card title="Journal des audits">
    {{-- Filtres --}}
    <div class="mb-4 p-4 rounded-xl bg-slate-50 border border-slate-200">
        <form method="GET" action="{{ route('audits.index') }}">
            <div class="flex flex-col sm:flex-row sm:items-end gap-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 flex-1">
                    <div>
                        <label for="type" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Type d'action</label>
                        <select id="type" name="type" class="form-input w-full text-sm">
                            <option value="">Tous les types</option>
                            <option value="create" @selected(request('type') === 'create')>Création</option>
                            <option value="update" @selected(request('type') === 'update')>Modification</option>
                            <option value="delete" @selected(request('type') === 'delete')>Suppression</option>
                            <option value="login" @selected(request('type') === 'login')>Connexion</option>
                        </select>
                    </div>
                    <div>
                        <label for="periode" class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Période</label>
                        <select id="periode" name="periode" class="form-input w-full text-sm">
                            <option value="">Tout</option>
                            <option value="today" @selected(request('periode') === 'today')>Aujourd'hui</option>
                            <option value="week" @selected(request('periode') === 'week')>Cette semaine</option>
                            <option value="month" @selected(request('periode') === 'month')>Ce mois</option>
                        </select>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row gap-2 sm:shrink-0">
                    <button type="submit" class="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" 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" />
                        </svg>
                        Filtrer
                    </button>
                    @if(request()->hasAny(['type', 'periode']))
                        <a href="{{ route('audits.index') }}" class="px-4 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Réinitialiser
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    <div class="overflow-x-auto -mx-4 sm:mx-0">
            <table class="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date / Heure</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Utilisateur</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Action</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Module</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Détails</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($audits as $audit)
                        @php
                            $event = $audit->event ?? $audit->description ?? '';
                            $actionLabel = match ($event) {
                                'created' => 'Création',
                                'updated' => 'Modification',
                                'deleted' => 'Suppression',
                                'restored' => 'Restauration',
                                'login' => 'Connexion',
                                default => $event ?: '—',
                            };
                            $actionClass = match ($event) {
                                'created' => 'bg-emerald-100 text-emerald-700',
                                'updated' => 'bg-blue-100 text-blue-700',
                                'deleted' => 'bg-red-100 text-red-700',
                                'restored' => 'bg-amber-100 text-amber-700',
                                'login' => 'bg-slate-100 text-slate-600',
                                default => 'bg-slate-100 text-slate-700',
                            };
                            $details = $audit->subject?->reference ?? $audit->subject?->nom ?? $audit->description ?? '—';
                        @endphp
                        <tr class="hover:bg-slate-50/50">
                            <td class="px-4 py-3 text-slate-600 text-sm">
                                {{ $audit->created_at?->format('d/m/Y H:i') ?? '—' }}
                            </td>
                            <td class="px-4 py-3 font-medium text-slate-800">
                                {{ $audit->causer?->name ?? $audit->causer?->email ?? 'Système' }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $actionClass }}">
                                    {{ $actionLabel }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-600 text-sm">
                                {{ $audit->subject_type ? class_basename($audit->subject_type) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500 text-sm">
                                {{ $details }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-slate-500 text-sm">
                                Aucun audit pour les critères sélectionnés.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @if($audits->hasPages())
        <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-3 border-t border-slate-200 pt-4 px-4 sm:px-0">
            <p class="text-sm text-slate-500">
                Affichage de <span class="font-medium">{{ $audits->firstItem() }}</span> à <span class="font-medium">{{ $audits->lastItem() }}</span> sur <span class="font-medium">{{ $audits->total() }}</span> audits
            </p>
            {{ $audits->links() }}
        </div>
    @endif
</x-page-card>
@endsection