@extends('layouts.admin')

@section('title', 'Audit Logs')
@section('page-title', 'Audit Logs')

@push('styles')
    <style>
        .audit-logs-card {
            overflow: hidden;
        }

        .audit-logs-toolbar {
            flex-wrap: wrap;
        }

        .audit-logs-table {
            table-layout: fixed;
            min-width: 960px;
        }

        .audit-logs-table th,
        .audit-logs-table td {
            vertical-align: middle;
        }

        .audit-log-check-cell {
            width: 56px;
            min-width: 56px;
            padding-left: 1rem !important;
            padding-right: .75rem !important;
            text-align: center;
        }

        .audit-log-route-cell {
            width: 280px;
        }

        .audit-log-url {
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
    </style>
@endpush

@section('content')
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="card shadow-sm audit-logs-card">
        <div class="card-header bg-white">
            <form class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small text-muted" for="search">Search</label>
                    <input class="form-control" name="search" value="{{ request('search') }}" placeholder="Search event, route, URL, or IP">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted" for="date_from">From Date</label>
                    <input class="form-control" id="date_from" name="date_from" type="date" value="{{ request('date_from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted" for="date_to">To Date</label>
                    <input class="form-control" id="date_to" name="date_to" type="date" value="{{ request('date_to') }}">
                </div>
                <div class="col-md-auto">
                    <button class="btn btn-outline-secondary">Filter</button>
                    <a href="{{ route('admin.audit-logs.index') }}" class="btn btn-link">Reset</a>
                </div>
            </form>
        </div>

        <form method="POST" action="{{ route('admin.audit-logs.bulk-destroy') }}" onsubmit="return confirmAuditLogDelete();">
            @csrf
            @method('DELETE')

            <div class="audit-logs-toolbar d-flex justify-content-between align-items-center gap-3 px-3 py-2 border-bottom">
                <span class="text-muted small">{{ $logs->total() }} entries found</span>
                <button class="btn btn-danger btn-sm" type="submit">Delete Selected</button>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 audit-logs-table">
                    <thead>
                        <tr>
                            <th class="audit-log-check-cell">
                                <input class="form-check-input" type="checkbox" id="select-all-audit-logs">
                            </th>
                            <th>Time</th>
                            <th>User</th>
                            <th>Event</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>IP</th>
                            <th>Route</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $log)
                            <tr>
                                <td class="audit-log-check-cell">
                                    <input class="form-check-input audit-log-checkbox" type="checkbox" name="ids[]" value="{{ $log->id }}">
                                </td>
                                <td>{{ $log->created_at->format('d M Y H:i') }}</td>
                                <td>
                                    {{ $log->user?->name ?: 'Guest' }}
                                    @if($log->user?->email)
                                        <small class="text-muted d-block">{{ $log->user->email }}</small>
                                    @endif
                                </td>
                                <td>{{ $log->event }}</td>
                                <td><span class="badge text-bg-secondary">{{ $log->method }}</span></td>
                                <td><span class="badge text-bg-{{ $log->status_code >= 400 ? 'danger' : 'success' }}">{{ $log->status_code }}</span></td>
                                <td>{{ $log->ip_address }}</td>
                                <td class="small audit-log-route-cell">
                                    {{ $log->route_name ?: '-' }}
                                    <span class="text-muted d-block audit-log-url">{{ $log->url }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5 text-muted">No audit logs found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>

        <div class="card-footer bg-white">
            {{ $logs->links() }}
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('select-all-audit-logs')?.addEventListener('change', function () {
            document.querySelectorAll('.audit-log-checkbox').forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });

        function confirmAuditLogDelete() {
            if (!document.querySelector('.audit-log-checkbox:checked')) {
                alert('Please select at least one audit log entry to delete.');
                return false;
            }

            return confirm('Delete selected audit log entries? This action cannot be undone.');
        }
    </script>
@endpush