@extends('layouts.app')
@section('title','Audit Logs - NGBVD')

@section('content')
<style>
/* Local fallback so the page changes even where the main stylesheet is cached */
.ngbvd-settings-shell .ngbvd-form-card{border:0;border-radius:18px;box-shadow:0 14px 36px rgba(15,23,42,.08);overflow:hidden;background:#fff}.ngbvd-settings-shell .card-block{padding:22px}.ngbvd-page-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff,#fff8ea);border:1px solid #efe4ca;border-radius:18px;padding:18px 20px;margin-bottom:18px;box-shadow:0 10px 28px rgba(15,23,42,.05)}.ngbvd-kicker{display:block;color:#9a6514;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:4px}.ngbvd-page-title{margin:0;color:#1f2937;font-weight:800}.ngbvd-page-subtitle{margin:4px 0 0;color:#64748b}.ngbvd-page-actions{display:flex;gap:8px;flex-wrap:wrap}.ngbvd-settings-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.ngbvd-settings-pill{border:1px solid #eadfca;background:#fff;border-radius:999px;padding:8px 12px;color:#5f4b25;font-weight:700}.ngbvd-card-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #eef2f7;padding-bottom:14px;margin-bottom:14px}.ngbvd-card-heading h4{margin:0;color:#1f2937;font-weight:800}.ngbvd-card-heading p{margin:5px 0 0;color:#64748b}.ngbvd-card-icon{width:44px;height:44px;border-radius:14px;background:rgba(181,126,30,.12);color:#9a6514;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}.ngbvd-modern-table thead th{background:#f8fafc;color:#334155;border-bottom:1px solid #e5e7eb;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.ngbvd-modern-table td{vertical-align:middle;border-top:1px solid #edf2f7}.ngbvd-badge{border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:4px}.ngbvd-badge-success{background:#ecfdf3;color:#166534}.ngbvd-badge-danger{background:#fef2f2;color:#991b1b}.ngbvd-badge-muted{background:#f1f5f9;color:#475569}.ngbvd-action-btn{border:0;border-radius:999px;padding:7px 11px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:6px}.ngbvd-action-btn.view{background:#eef6ff;color:#075985}.ngbvd-action-btn.view:hover{background:#dbeafe;color:#075985}.ngbvd-filter-panel{position:sticky;top:90px}.ngbvd-info-card{display:flex;gap:10px;background:#fff8ea;border:1px solid #f0dfbc;border-radius:14px;padding:12px;color:#5e4a1f}.ngbvd-modal .modal-content{border:0;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25);overflow:hidden}.ngbvd-modal .modal-header{background:linear-gradient(135deg,#fff8ea,#fff);border-bottom:1px solid #efe4ca}.ngbvd-detail-grid label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;font-weight:800;margin-bottom:2px}.ngbvd-detail-grid p{font-weight:700;color:#1f2937;word-break:break-word}.ngbvd-code-panel{border:1px solid #e7edf5;border-radius:14px;overflow:hidden;background:#0f172a}.ngbvd-code-panel-title{padding:10px 14px;background:#f8fafc;color:#334155;font-weight:800;border-bottom:1px solid #e7edf5}.ngbvd-code-panel pre{margin:0;padding:14px;color:#dbeafe;white-space:pre-wrap;max-height:280px;overflow:auto}.ngbvd-empty-state{display:flex;flex-direction:column;align-items:center;gap:7px;color:#64748b}.ngbvd-empty-state i{font-size:32px;color:#b57e1e}@media(max-width:991px){.ngbvd-page-header{display:block}.ngbvd-page-actions{margin-top:12px}.ngbvd-filter-panel{position:static}}
</style>

<div class="ngbvd-settings-shell">
    <div class="ngbvd-page-header">
        <div>
            <span class="ngbvd-kicker">Governance & Accountability</span>
            <h2 class="ngbvd-page-title">System Audit Logs</h2>
            <p class="ngbvd-page-subtitle">Track user activity, access attempts, administrative actions and sensitive data events.</p>
        </div>
        <div class="ngbvd-page-actions">
            <a class="btn ngbvd-btn-soft" href="{{ url('/audit/logs') }}"><i class="ti-reload"></i> Refresh</a>
            <a class="btn ngbvd-btn-primary" href="{{ url('/audit/logs/export') }}"><i class="ti-download"></i> Export CSV</a>
        </div>
    </div>

    <div class="ngbvd-settings-tabs">
        <span class="ngbvd-settings-pill"><i class="ti-shield"></i> Access & Permission Events</span>
        <span class="ngbvd-settings-pill"><i class="ti-user"></i> User Activity</span>
        <span class="ngbvd-settings-pill"><i class="ti-server"></i> System Actions</span>
    </div>

    <div class="row">
        <div class="col-lg-8 mb-3">
            <div class="card ngbvd-form-card">
                <div class="card-block">
                    <div class="ngbvd-card-heading">
                        <div>
                            <h4>Activity Register</h4>
                            <p>Click <strong>View</strong> to open the audit record in a modal without leaving this page.</p>
                        </div>
                        <span class="ngbvd-card-icon"><i class="ti-clipboard"></i></span>
                    </div>

                    <div class="ngbvd-table-wrapper">
                        <table class="table table-hover ngbvd-modern-table" data-datatable="false">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>User</th>
                                    <th>Module</th>
                                    <th>Action</th>
                                    <th>Method</th>
                                    <th>Status</th>
                                    <th class="text-right">Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse($logs as $log)
                                @php
                                    $status = strtolower($log->status ?? 'recorded');
                                    $badgeClass = $status === 'success' ? 'ngbvd-badge-success' : (in_array($status, ['failed','denied','error']) ? 'ngbvd-badge-danger' : 'ngbvd-badge-muted');
                                    $modalId = 'auditLogModal'.$log->id;
                                @endphp
                                <tr>
                                    <td><strong>{{ optional($log->created_at)->format('d M Y') }}</strong><br><small class="text-muted">{{ optional($log->created_at)->format('H:i:s') }}</small></td>
                                    <td><strong>{{ $log->user_email ?: 'System' }}</strong><br><small class="text-muted">{{ $log->role ?: 'Role not captured' }}</small></td>
                                    <td><span class="ngbvd-badge ngbvd-badge-muted">{{ $log->module ?: 'General' }}</span></td>
                                    <td>{{ $log->action ?: 'Activity' }}</td>
                                    <td><code>{{ $log->method ?: 'N/A' }}</code></td>
                                    <td><span class="ngbvd-badge {{ $badgeClass }}">{{ ucfirst($status) }}</span></td>
                                    <td class="text-right"><button type="button" class="ngbvd-action-btn view" data-toggle="modal" data-target="#{{ $modalId }}"><i class="ti-eye"></i> View</button></td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="text-center py-4"><div class="ngbvd-empty-state"><i class="ti-clipboard"></i><strong>No audit records found</strong><span>System activity will appear here once users interact with protected functions.</span></div></td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-3">
            <div class="card ngbvd-form-card ngbvd-filter-panel">
                <div class="card-block">
                    <div class="ngbvd-card-heading">
                        <div>
                            <h4>Filter Audit Logs</h4>
                            <p>Search by module, action, user or status.</p>
                        </div>
                        <span class="ngbvd-card-icon"><i class="ti-filter"></i></span>
                    </div>
                    <form method="GET" action="{{ url('/audit/logs') }}">
                        <div class="form-group"><label>Module</label><input class="form-control" name="module" value="{{ request('module') }}" placeholder="e.g. dataentry, integrations"></div>
                        <div class="form-group"><label>Action</label><input class="form-control" name="action" value="{{ request('action') }}" placeholder="e.g. create, update, denied"></div>
                        <div class="form-group"><label>User / Email</label><input class="form-control" name="user" value="{{ request('user') }}" placeholder="Search user email"></div>
                        <div class="form-group"><label>Status</label><select class="form-control" name="status" data-no-selectize="true"><option value="">All statuses</option>@foreach(['success'=>'Success','failed'=>'Failed','denied'=>'Denied','recorded'=>'Recorded'] as $value => $label)<option value="{{ $value }}" {{ request('status') === $value ? 'selected' : '' }}>{{ $label }}</option>@endforeach</select></div>
                        <button class="btn ngbvd-btn-primary btn-block"><i class="ti-filter"></i> Apply Filters</button>
                        <a href="{{ url('/audit/logs') }}" class="btn ngbvd-btn-soft btn-block mt-2"><i class="ti-close"></i> Clear Filters</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@foreach($logs as $log)
    @php $modalId = 'auditLogModal'.$log->id; @endphp
    <div class="modal fade ngbvd-modal" id="{{ $modalId }}" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div><span class="ngbvd-kicker">Audit Record</span><h5 class="modal-title">{{ $log->module ?: 'System Activity' }} / {{ $log->action ?: 'Activity' }}</h5></div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="row ngbvd-detail-grid">
                        <div class="col-md-4"><label>User</label><p>{{ $log->user_email ?: 'System' }}</p></div>
                        <div class="col-md-4"><label>Date / Time</label><p>{{ optional($log->created_at)->format('d M Y H:i:s') }}</p></div>
                        <div class="col-md-4"><label>Status</label><p>{{ ucfirst($log->status ?? 'recorded') }} @if($log->response_code) / {{ $log->response_code }} @endif</p></div>
                        <div class="col-md-4"><label>Method</label><p>{{ $log->method ?: 'N/A' }}</p></div>
                        <div class="col-md-4"><label>IP Address</label><p>{{ $log->ip_address ?: 'Not captured' }}</p></div>
                        <div class="col-md-4"><label>Role</label><p>{{ $log->role ?: 'Not captured' }}</p></div>
                        <div class="col-md-12"><label>Requested Resource</label><p>{{ $log->url ?: 'Not captured' }}</p></div>
                        <div class="col-md-12"><label>User Agent</label><p>{{ $log->user_agent ?: 'Not captured' }}</p></div>
                    </div>
                    <div class="ngbvd-code-panel mt-3"><div class="ngbvd-code-panel-title">Request Payload</div><pre>{{ $log->request_payload ?: 'No payload captured for this activity.' }}</pre></div>
                </div>
                <div class="modal-footer"><button type="button" class="btn ngbvd-btn-soft" data-dismiss="modal"><i class="ti-close"></i> Close</button></div>
            </div>
        </div>
    </div>
@endforeach
@endsection
