@extends('layouts.app')

@section('title', 'Audit')
@section('header', 'Journal d\'audit')

@section('content')
<div class="mb-4">
    <form method="GET" class="flex gap-2">
        <input type="text" name="search" id="search-input" placeholder="Rechercher..." value="{{ request('search') }}" class="flex-1 px-3 py-2 border rounded">
        <select name="type_evenement" class="px-3 py-2 border rounded">
            <option value="">Tous les types</option>
            <option value="PERSONNE_CREE" @selected(request('type_evenement') === 'PERSONNE_CREE')>Personne créée</option>
            <option value="COMPTE_CREE" @selected(request('type_evenement') === 'COMPTE_CREE')>Compte créé</option>
            <option value="ACCES_ATTRIBUE" @selected(request('type_evenement') === 'ACCES_ATTRIBUE')>Accès attribué</option>
            <option value="ACCES_RETIRE" @selected(request('type_evenement') === 'ACCES_RETIRE')>Accès retiré</option>
            <option value="PROFIL_ATTRIBUE" @selected(request('type_evenement') === 'PROFIL_ATTRIBUE')>Profil attribué</option>
            <option value="PROFIL_RETIRE" @selected(request('type_evenement') === 'PROFIL_RETIRE')>Profil retiré</option>
            <option value="SYNCHRONISATION_TERMINEE" @selected(request('type_evenement') === 'SYNCHRONISATION_TERMINEE')>Sync terminée</option>
            <option value="SYNCHRONISATION_EN_ECHEC" @selected(request('type_evenement') === 'SYNCHRONISATION_EN_ECHEC')>Sync échouée</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">Filtrer</button>
        <a href="{{ route('admin.audit.index') }}" id="reset-btn" class="reset-link px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300 {{ request('search') ? 'visible' : '' }}">Reset</a>
    </form>
</div>

@php $returnUrl = request()->fullUrl(); @endphp

<div class="bg-white rounded shadow overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50"><tr>
            <x-sortable-header field="created_at" label="Date" />
            <x-sortable-header field="type_evenement" label="Type" />
            <th class="px-4 py-3 text-left">Utilisateur</th>
            <x-sortable-header field="cible_type" label="Cible" />
            <x-sortable-header field="motif" label="Motif" />
            <th class="px-4 py-3 text-right">Actions</th>
        </tr></thead>
        <tbody>
            @forelse ($logs as $log)
            <tr class="border-t hover:bg-gray-50">
                <td class="px-4 py-3 text-xs whitespace-nowrap">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                <td class="px-4 py-3">{{ str_replace('_', ' ', $log->type_evenement) }}</td>
                <td class="px-4 py-3">{{ $log->utilisateur->name ?? 'Système' }}</td>
                <td class="px-4 py-3">{{ $log->cible_type }}#{{ $log->cible_id }}</td>
                <td class="px-4 py-3 max-w-xs truncate">{{ $log->motif ?? '—' }}</td>
                <td class="px-4 py-3 text-right">
                    <a href="{{ route('admin.audit.show', ['auditLog' => $log, 'return' => $returnUrl]) }}" class="text-blue-600 hover:text-blue-800" title="Détail">
                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    </a>
                </td>
            </tr>
            @empty <tr><td colspan="6" class="px-4 py-6 text-center text-gray-500">Aucun événement.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $logs->withQueryString()->links() }}</div>

@push('scripts')
<style>
.reset-link { opacity: 0.4; pointer-events: none; cursor: default; }
.reset-link.visible { opacity: 1; pointer-events: auto; cursor: pointer; }
</style>
<script>
document.getElementById('search-input')?.addEventListener('input', function() {
    document.getElementById('reset-btn').classList.toggle('visible', this.value.trim() !== '');
});
</script>
@endpush
@endsection