@extends('layouts.app')
@section('title', 'Audit Trail')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Audit Trail</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Audit Trail</h1>
        <p class="page-subtitle">Permanent, tamper-proof log of all actions in this company</p>
    </div>
    <span class="badge bg-danger text-white px-3 py-2">
        <i class="bi bi-shield-lock me-1"></i>Read Only
    </span>
</div>

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('admin.audit-trail') }}" class="row g-2 align-items-end">
            <div class="col-6 col-md-3">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Module</label>
                <select name="module" class="form-select form-select-sm">
                    <option value="">All Modules</option>
                    @foreach($modules as $mod)
                        <option value="{{ $mod }}" {{ request('module')===$mod ? 'selected':'' }}>{{ ucfirst($mod) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Action</label>
                <select name="action" class="form-select form-select-sm">
                    <option value="">All Actions</option>
                    @foreach($actions as $act)
                        <option value="{{ $act }}" {{ request('action')===$act ? 'selected':'' }}>
                            {{ ucwords(str_replace('_',' ',$act)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">From</label>
                <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">To</label>
                <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
            </div>
            <div class="col-6 col-md-1">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search"></i></button>
            </div>
            <div class="col-6 col-md-1">
                <a href="{{ route('admin.audit-trail') }}" class="btn btn-outline-secondary btn-sm w-100">Clear</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-journal-text me-2"></i>Activity Log</span>
        <span class="text-muted" style="font-size:12px">{{ number_format($logs->total()) }} records</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" style="font-size:12.5px">
                <thead>
                    <tr>
                        <th style="width:150px">Time</th>
                        <th>User</th>
                        <th>Action</th>
                        <th>Module</th>
                        <th>Record</th>
                        <th>Description</th>
                        <th>IP</th>
                        <th style="width:50px">Detail</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                    <tr>
                        <td class="text-muted">
                            {{ $log->created_at->format('d M Y') }}<br>
                            <span style="font-size:11px">{{ $log->created_at->format('H:i:s') }}</span>
                        </td>
                        <td>
                            <div style="font-size:12px">{{ $log->user_type === 'super_admin' ? 'Super Admin' : 'User #'.$log->user_id }}</div>
                        </td>
                        <td>
                            @php
                                $colors = ['login'=>'#d1e7dd|#0a3622','logout'=>'#e9ecef|#495057','create'=>'#cfe2ff|#084298',
                                    'update'=>'#fff3cd|#664d03','delete'=>'#f8d7da|#842029','post'=>'#d1e7dd|#0a3622',
                                    'approve'=>'#d1e7dd|#0a3622','reject'=>'#fff3cd|#664d03','password_reset'=>'#cfe2ff|#084298',
                                    'failed_login'=>'#f8d7da|#842029','status_change'=>'#fff3cd|#664d03','lock'=>'#f8d7da|#842029'];
                                [$bg,$fg] = explode('|', $colors[$log->action] ?? '#e9ecef|#495057');
                            @endphp
                            <span class="badge" style="background:{{ $bg }};color:{{ $fg }};font-size:11px">
                                {{ ucwords(str_replace('_',' ',$log->action)) }}
                            </span>
                        </td>
                        <td class="text-muted">{{ $log->module }}</td>
                        <td>{{ $log->record_id ? '#'.$log->record_id : '—' }}</td>
                        <td style="max-width:220px">
                            <span title="{{ $log->description }}">{{ \Illuminate\Support\Str::limit($log->description, 55) }}</span>
                        </td>
                        <td><code style="font-size:11px">{{ $log->ip_address }}</code></td>
                        <td>
                            @if($log->old_values || $log->new_values)
                            <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#detailModal"
                                    data-old="{{ json_encode($log->old_values, JSON_PRETTY_PRINT) }}"
                                    data-new="{{ json_encode($log->new_values, JSON_PRETTY_PRINT) }}"
                                    data-desc="{{ $log->description }}">
                                <i class="bi bi-eye"></i>
                            </button>
                            @else
                                —
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="bi bi-journal display-6 d-block mb-2"></i>
                            No audit records match the selected filters.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($logs->hasPages())
        <div class="px-4 py-3 border-top">{{ $logs->withQueryString()->links() }}</div>
        @endif
    </div>
</div>

{{-- Detail Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="font-size:15px"><i class="bi bi-journal-text me-2 text-primary"></i>Change Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3" id="modalDesc" style="font-size:13px"></p>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="form-label" style="font-size:12px;font-weight:700;color:#E74C3C">BEFORE</div>
                        <pre id="oldVal" class="p-3 rounded" style="background:#fff5f5;font-size:11.5px;max-height:280px;overflow:auto;border:1px solid #f8d7da"></pre>
                    </div>
                    <div class="col-6">
                        <div class="form-label" style="font-size:12px;font-weight:700;color:#27AE60">AFTER</div>
                        <pre id="newVal" class="p-3 rounded" style="background:#f0fff4;font-size:11.5px;max-height:280px;overflow:auto;border:1px solid #d1e7dd"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('detailModal').addEventListener('show.bs.modal', function(e) {
    const b = e.relatedTarget;
    document.getElementById('oldVal').textContent  = b.dataset.old || 'null';
    document.getElementById('newVal').textContent  = b.dataset.new || 'null';
    document.getElementById('modalDesc').textContent = b.dataset.desc || '';
});
</script>
@endpush