@extends('layouts.app')
@section('title', 'Activity Logs')

@push('stylesheets')
<link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
<style>
/* ── Layout / Page ────────────────────────────────── */
.activity-page { max-width: 100%; }
.activity-page .card { border: none; border-radius: 12px; box-shadow: 0 2px 14px rgba(15,23,42,.06); overflow: hidden; }
.activity-page .card-header { background: linear-gradient(180deg,#fafbfc 0%,#fff 100%) !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; padding: .6rem 1rem !important; }

/* ── Page tabs ────────────────────────────────────── */
.activity-page-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e5e7eb; padding: 0 1rem; background: #f8fafc; }
.activity-page-tab { padding: .6rem 1rem; font-size: .8rem; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; user-select: none; }
.activity-page-tab:hover { color: #069494; }
.activity-page-tab.active { color: #069494; border-bottom-color: #069494; }
.activity-page-tab i { margin-right: .3rem; font-size: .7rem; }

/* ── Quick filter pills ──────────────────────────── */
.activity-qf { display: flex; flex-wrap: wrap; align-items: stretch; }
.activity-qf .btn { display: none; font-size: .75rem; font-weight: 500; padding: .3rem .7rem; border-radius: 50px; border: 1px solid #dce1e8; color: #4b5563; background: #fff; transition: all .15s; margin: 0 .25rem .3rem 0; white-space: nowrap; align-items: center; line-height: 1; }
.activity-qf .btn i { font-size: .7rem; margin-right: .25rem; }
.activity-qf .btn:hover { border-color: #069494; color: #069494; background: #f0fdfa; }
.activity-qf .btn.active { border-color: #069494; background: #069494; color: #fff; }
.activity-qf .btn[data-tab].visible { display: flex; }

/* ── Filter row ──────────────────────────────────── */
.activity-filters .form-control-sm, .activity-filters .custom-select-sm { font-size: .78rem; min-height: 31px; }

/* ── Toolbar ─────────────────────────────────────── */
.activity-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-left: auto; }
.activity-toolbar .btn { font-size: .75rem; }
.activity-toolbar .btn-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #dce1e8; background: #fff; color: #4b5563; cursor: pointer; transition: all .15s; }
.activity-toolbar .btn-icon:hover { border-color: #069494; color: #069494; background: #f0fdfa; }
.activity-toolbar .btn-icon.active { border-color: #069494; background: #069494; color: #fff; }

/* ── Table ────────────────────────────────────────── */
.activity-table-wrap { position: relative; min-height: 200px; }
.activity-table { width: 100%; font-size: .78rem; margin-bottom: 0; }
.activity-table thead th { background: #f8fafc !important; border-bottom: 2px solid #e5e7eb !important; color: #374151; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .5rem !important; white-space: nowrap; cursor: pointer; user-select: none; }
.activity-table thead th:hover { color: #069494; }
.activity-table thead th.sorted { color: #069494; }
.activity-table thead th .sort-indicator { display: inline-block; width: .7rem; margin-left: .2rem; opacity: .4; }
.activity-table thead th.sorted .sort-indicator { opacity: 1; }
.activity-table tbody td { padding: .45rem .5rem !important; vertical-align: middle; border-bottom: 1px solid #f1f3f5; }
.activity-table tbody tr { transition: background .1s; }
.activity-table tbody tr:hover { background: #f0fdfa !important; }
.activity-table tbody tr.clickable { cursor: pointer; }
.activity-table .col-action { white-space: nowrap; }
.activity-table .badge-action { font-size: .68rem; font-weight: 500; padding: .15em .55em; border-radius: 50px; }
.activity-table .text-muted-small { font-size: .68rem; color: #9ca3af; }
.activity-table .mono { font-family: 'Times New Roman', Times, serif; font-size: .7rem; }

/* ── Stored data tags ────────────────────────────── */
.store-tag { display: inline-block; font-size: .62rem; padding: 0 .35rem; border-radius: 4px; margin-right: .15rem; line-height: 1.5; }

/* ── Loading overlay ──────────────────────────────── */
.activity-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.75); z-index: 10; border-radius: 0 0 12px 12px; }
.activity-loading .spinner-border { width: 2rem; height: 2rem; color: #069494; }
.activity-loading span { margin-top: .5rem; font-size: .8rem; color: #6b7280; }

/* ── Empty state ──────────────────────────────────── */
.activity-empty { text-align: center; padding: 3rem 1rem; }
.activity-empty .empty-icon { font-size: 2.5rem; color: #d1d5db; margin-bottom: .75rem; }
.activity-empty h6 { color: #4b5563; font-weight: 600; }
.activity-empty p { color: #9ca3af; font-size: .82rem; max-width: 28rem; margin: 0 auto; }

/* ── Error state ──────────────────────────────────── */
.activity-error { text-align: center; padding: 2rem 1rem; }
.activity-error .alert { display: inline-block; text-align: left; }

/* ── Pagination ───────────────────────────────────── */
.activity-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0 0; font-size: .78rem; }
.activity-pagination .info { color: #6b7280; }
.activity-pagination .pages { display: flex; gap: .15rem; }
.activity-pagination .page-item a.page-link { padding: .2rem .55rem; font-size: .75rem; border-radius: 6px !important; border: 1px solid #e5e7eb; color: #4b5563; background: #fff; }
.activity-pagination .page-item.active a.page-link { background: #069494; border-color: #069494; color: #fff; }
.activity-pagination .page-item a.page-link:hover { background: #f0fdfa; border-color: #069494; color: #069494; }
.activity-pagination .per-page select { font-size: .75rem; padding: .15rem .5rem; border: 1px solid #e5e7eb; border-radius: 6px; color: #4b5563; }

/* ── Drawer (offcanvas right) ─────────────────────── */
.activity-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1065; opacity: 0; pointer-events: none; transition: opacity .25s; }
.activity-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.activity-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px,100vw - 16px); background: #fff; z-index: 1070; transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.08); }
.activity-drawer.open { transform: translateX(0); }
.activity-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; min-height: 56px; }
.activity-drawer-header h5 { margin: 0; font-weight: 600; font-size: .95rem; }
.activity-drawer-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: none; background: transparent; cursor: pointer; color: #6b7280; }
.activity-drawer-close:hover { background: #f3f4f6; color: #111; }
.activity-drawer-body { flex: 1; overflow-y: auto; padding: 0; background: #f8fafc; display: flex; flex-direction: column; }

/* ── Drawer tabs ─────────────────────────────────── */
.drawer-tabs { display: flex; border-bottom: 1px solid #e5e7eb; background: #fff; flex-shrink: 0; padding: 0 1rem; }
.drawer-tab { padding: .6rem .85rem; font-size: .78rem; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; user-select: none; }
.drawer-tab:hover { color: #069494; }
.drawer-tab.active { color: #069494; border-bottom-color: #069494; }
.drawer-tab-content { display: none; flex: 1; overflow-y: auto; padding: 1rem; }
.drawer-tab-content.active { display: block; }

.activity-drawer-body .detail-section { background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; padding: .75rem 1rem; margin-bottom: .75rem; }
.activity-drawer-body .detail-section h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: .5rem; }
.activity-drawer-body .detail-row { display: flex; padding: .25rem 0; font-size: .78rem; }
.activity-drawer-body .detail-label { width: 30%; flex-shrink: 0; color: #6b7280; font-weight: 500; }
.activity-drawer-body .detail-value { flex: 1; color: #111827; word-break: break-word; }
.activity-drawer-body .detail-value pre { font-size: .72rem; max-height: 240px; overflow: auto; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: .5rem; margin: 0; }

.summary-hero { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .65rem; }
.summary-headline { font-size: 1rem; font-weight: 600; color: #111827; line-height: 1.35; margin: 0 0 .35rem; }
.summary-sub { font-size: .82rem; color: #4b5563; line-height: 1.4; margin: 0 0 .85rem; }
.summary-fail-banner { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .65rem .75rem; margin: 0 0 .85rem; }
.summary-fail-banner .k { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b91c1c; margin-bottom: .25rem; }
.summary-fail-banner .v { display: block; font-size: .86rem; font-weight: 500; color: #7f1d1d; line-height: 1.4; word-break: break-word; }
.summary-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.summary-fact { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: .55rem .7rem; min-width: 0; }
.summary-fact.full { grid-column: 1 / -1; }
.summary-fact .k { display: block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: .2rem; }
.summary-fact .v { display: block; font-size: .84rem; font-weight: 500; color: #111827; line-height: 1.35; word-break: break-word; }
.summary-fact .v .muted { font-weight: 400; color: #6b7280; font-size: .78rem; }
.summary-glance { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #f1f5f9; }
.summary-glance-row { display: flex; gap: .5rem; padding: .35rem 0; font-size: .8rem; border-bottom: 1px solid #f8fafc; }
.summary-glance-row:last-child { border-bottom: 0; }
.summary-glance-label { width: 38%; flex-shrink: 0; color: #6b7280; font-weight: 500; }
.summary-glance-value { flex: 1; color: #111827; word-break: break-word; }
.summary-glance-value .from { color: #9ca3af; }
.activity-desc-cell .desc-main { font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-desc-cell .desc-sub { color: #6b7280; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
@media (max-width: 520px) {
  .summary-fact-grid { grid-template-columns: 1fr; }
}

/* ── Column picker dropdown ────────────────────────── */
.col-picker-menu { max-height: 300px; overflow-y: auto; padding: .5rem .6rem; min-width: 200px; border-radius: 10px !important; box-shadow: 0 8px 30px rgba(0,0,0,.12) !important; border: 1px solid #e5e7eb !important; }
.col-picker-menu .custom-control { margin-bottom: .15rem; padding-left: 1.75rem; }
.col-picker-menu .custom-control .custom-control-label { font-size: .78rem; cursor: pointer; line-height: 1.6; }
.col-picker-menu .custom-control .custom-control-label::before { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1.5px solid #d1d5db; top: .15rem; left: -1.4rem; }
.col-picker-menu .custom-control .custom-control-label::after { width: 1.1rem; height: 1.1rem; top: .15rem; left: -1.4rem; }
.col-picker-menu .custom-control-input:checked ~ .custom-control-label::before { background-color: #069494; border-color: #069494; }
.col-picker-menu .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .15rem rgba(6,148,148,.25); }
.col-picker-menu .dropdown-header { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; padding: .3rem .2rem .4rem; margin: 0; border-bottom: 1px solid #f1f3f5; }
.col-picker-menu .dropdown-divider { margin: .25rem 0; border-color: #f1f3f5; }
.col-picker-menu .dropdown-item { font-size: .75rem; padding: .35rem .4rem; border-radius: 5px; }
.col-picker-menu .dropdown-item:hover { background: #f0fdfa; color: #069494; }
.col-picker-menu::-webkit-scrollbar { width: 5px; }
.col-picker-menu::-webkit-scrollbar-track { background: transparent; }
.col-picker-menu::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.col-picker-menu::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Stats bar ────────────────────────────────────── */
.activity-stats { display: flex; flex-wrap: wrap; gap: .2rem .4rem; }
.activity-stats .stat-tag { font-size: .62rem; padding: 0 .4rem; border-radius: 4px; background: #f3f4f6; color: #6b7280; }

/* ── Tab-specific filter visibility ────────────────── */
.activity-filters [data-log-tab] { display: none; }
.activity-filters [data-log-tab].visible { display: block; }

/* ── Responsive ───────────────────────────────────── */
@media(max-width:768px) {
  .activity-drawer { width: 100vw !important; }
  .activity-pagination { flex-direction: column; align-items: flex-start; }
  .activity-pagination .pages { order: -1; }
}
</style>
@endpush

@section('page-header')
<x-layouts.breadcrumbs title="Activity Logs" icon="fa-history" :items="['Dashboard' => route('dashboard'), 'Activity Logs' => null]" />
@endsection

@section('contents')
<x-layouts.page-wrapper title="Activity Logs" :breadcrumbs="['Dashboard' => route('dashboard'), 'Activity Logs' => null]">
    <div class="col-md-12 activity-page">
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between" style="padding:.6rem 1rem !important;">
                <div class="d-flex align-items-center">
                    <small style="font-size:.78rem;color:#6b7280;font-weight:500;" id="activityTotalLabel">Loading...</small>
                </div>
                <div class="activity-toolbar">
                    <button class="btn-icon" id="btnGroupDrafts" title="Group draft saves">
                        <i class="fas fa-layer-group" style="font-size:.75rem;"></i>
                    </button>
                    <button class="btn-icon" id="btnRefresh" title="Refresh (R)">
                        <i class="fas fa-sync-alt" style="font-size:.75rem;"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn-icon dropdown-toggle" data-toggle="dropdown" title="Columns">
                            <i class="fas fa-columns" style="font-size:.75rem;"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right col-picker-menu" id="colPickerMenu">
                            <h6 class="dropdown-header" style="font-size:.7rem;text-transform:uppercase;">Visible Columns</h6>
                            <div id="colPickerItems"></div>
                            <div class="dropdown-divider"></div>
                            <button class="dropdown-item small" type="button" id="btnResetColumns">Reset defaults</button>
                        </div>
                    </div>
                    <button class="btn-icon" id="btnExportCsv" title="Export CSV">
                        <i class="fas fa-download" style="font-size:.75rem;"></i>
                    </button>
                </div>
            </div>

            <div class="activity-page-tabs" id="pageTabs">
                <span class="activity-page-tab active" data-log-tab="activity"><i class="fas fa-clipboard-list"></i>Activity Log</span>
                <span class="activity-page-tab" data-log-tab="request"><i class="fas fa-sign-in-alt"></i>Request Log</span>
                <span class="activity-page-tab" data-log-tab="security"><i class="fas fa-shield-alt"></i>Security Log</span>
            </div>

            <div class="card-body p-3">
                {{-- Quick Filters --}}
                <div class="activity-qf mb-2" id="quickFilters">
                    <button class="btn visible" data-tab="activity" data-qf="24h"><i class="far fa-clock"></i> Last 24h</button>
                    <button class="btn visible" data-tab="activity" data-qf="7d"><i class="far fa-calendar-alt"></i> 7 days</button>
                    <button class="btn visible" data-tab="activity" data-qf="30d"><i class="far fa-calendar-alt"></i> 30 days</button>
                    <button class="btn visible" data-tab="activity" data-qf="mine"><i class="fas fa-user"></i> My activity</button>
                    <button class="btn visible" data-tab="activity" data-qf="create"><i class="fas fa-plus-circle"></i> Created</button>
                    <button class="btn visible" data-tab="activity" data-qf="update"><i class="fas fa-edit"></i> Updated</button>
                    <button class="btn visible" data-tab="activity" data-qf="delete"><i class="fas fa-trash-alt"></i> Deleted</button>
                    <button class="btn visible" data-tab="activity" data-qf="clear"><i class="fas fa-undo"></i> Reset</button>

                    <button class="btn" data-tab="request" data-qf="24h"><i class="far fa-clock"></i> Last 24h</button>
                    <button class="btn" data-tab="request" data-qf="7d"><i class="far fa-calendar-alt"></i> 7 days</button>
                    <button class="btn" data-tab="request" data-qf="30d"><i class="far fa-calendar-alt"></i> 30 days</button>
                    <button class="btn" data-tab="request" data-qf="mine"><i class="fas fa-user"></i> My activity</button>
                    <button class="btn" data-tab="request" data-qf="login"><i class="fas fa-sign-in-alt"></i> Login</button>
                    <button class="btn" data-tab="request" data-qf="logout"><i class="fas fa-sign-out-alt"></i> Logout</button>
                    <button class="btn" data-tab="request" data-qf="visited"><i class="fas fa-eye"></i> Visited</button>
                    <button class="btn" data-tab="request" data-qf="clear"><i class="fas fa-undo"></i> Reset</button>

                    <button class="btn" data-tab="security" data-qf="24h"><i class="far fa-clock"></i> Last 24h</button>
                    <button class="btn" data-tab="security" data-qf="7d"><i class="far fa-calendar-alt"></i> 7 days</button>
                    <button class="btn" data-tab="security" data-qf="30d"><i class="far fa-calendar-alt"></i> 30 days</button>
                    <button class="btn" data-tab="security" data-qf="mine"><i class="fas fa-user"></i> My activity</button>
                    <button class="btn" data-tab="security" data-qf="failed_login"><i class="fas fa-exclamation-triangle"></i> Failed Login</button>
                    <button class="btn" data-tab="security" data-qf="permission_denied"><i class="fas fa-ban"></i> Permission Denied</button>
                    <button class="btn" data-tab="security" data-qf="suspicious"><i class="fas fa-user-secret"></i> Suspicious</button>
                    <button class="btn" data-tab="security" data-qf="clear"><i class="fas fa-undo"></i> Reset</button>
                </div>

                {{-- Filter Panel --}}
                <div class="activity-filters">
                    <div class="row no-gutters" style="gap:.5rem;">
                        <div class="flex-grow-1" style="min-width:160px;flex:2 1 180px;">
                            <input type="text" class="form-control form-control-sm" id="filterSearch" placeholder="Search logs... (press / to focus)">
                        </div>
                        <div style="min-width:120px;flex:1 1 130px;">
                            <select class="custom-select custom-select-sm" id="filterAction">
                                <option value="">All Actions</option>
                            </select>
                        </div>
                        <div style="min-width:120px;flex:1 1 130px;">
                            <select class="custom-select custom-select-sm" id="filterModule">
                                <option value="">All Areas</option>
                            </select>
                        </div>
                        <div style="min-width:130px;flex:1 1 150px;">
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control form-control-sm" id="filterDateRange" placeholder="Date range">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary btn-sm" type="button" id="btnClearDate"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <div style="min-width:120px;flex:1 1 130px;">
                            <select class="custom-select custom-select-sm" id="filterUser">
                                <option value="">All Users</option>
                                @foreach($users ?? [] as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div style="min-width:80px;flex:0 0 90px;" data-log-tab="activity" class="visible">
                            <input type="number" class="form-control form-control-sm" id="filterRecordId" placeholder="Record #">
                        </div>
                        <div style="min-width:120px;flex:1 1 130px;" data-log-tab="request">
                            <select class="custom-select custom-select-sm" id="filterMethod">
                                <option value="">All Methods</option>
                                <option value="GET">GET</option>
                                <option value="POST">POST</option>
                                <option value="PUT">PUT</option>
                                <option value="PATCH">PATCH</option>
                                <option value="DELETE">DELETE</option>
                            </select>
                        </div>
                        <div style="min-width:100px;flex:0 1 110px;" data-log-tab="request">
                            <select class="custom-select custom-select-sm" id="filterStatusCode">
                                <option value="">All Status</option>
                                <option value="200">200 OK</option>
                                <option value="201">201 Created</option>
                                <option value="302">302 Redirect</option>
                                <option value="400">400 Bad Request</option>
                                <option value="401">401 Unauthorized</option>
                                <option value="403">403 Forbidden</option>
                                <option value="404">404 Not Found</option>
                                <option value="422">422 Unprocessable</option>
                                <option value="500">500 Server Error</option>
                            </select>
                        </div>
                        <div style="min-width:80px;flex:0 0 90px;">
                            <input type="number" class="form-control form-control-sm" id="filterLogId" placeholder="Log #">
                        </div>
                    </div>
                </div>

                {{-- Table Area --}}
                <div class="activity-table-wrap mt-3" id="activityTableWrap">
                    <div class="table-responsive">
                        <table class="table activity-table" id="activityTable">
                            <thead>
                                <tr id="activityTableHead"></tr>
                            </thead>
                            <tbody id="activityTableBody"></tbody>
                        </table>
                    </div>
                    <div class="activity-loading" id="activityLoading" style="display:none;">
                        <div class="spinner-border" role="status"></div>
                        <span>Loading activity logs...</span>
                    </div>
                    <div class="activity-empty" id="activityEmpty" style="display:none;">
                        <div class="empty-icon"><i class="fas fa-inbox"></i></div>
                        <h6>No activity logs found</h6>
                        <p>Try adjusting your filters or date range to see results.</p>
                        <button class="btn btn-sm btn-outline-primary mt-2" id="btnResetFromEmpty">Reset filters</button>
                    </div>
                    <div class="activity-error" id="activityError" style="display:none;">
                        <div class="alert alert-danger d-inline-flex align-items-center">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span id="activityErrorMsg">Failed to load activity logs.</span>
                            <button class="btn btn-sm btn-outline-danger ml-2" id="btnRetryLoad">Retry</button>
                        </div>
                    </div>
                    <div class="activity-pagination" id="activityPagination" style="display:none;">
                        <div class="info"><span id="pageInfo"></span></div>
                        <div class="d-flex align-items-center">
                            <div class="per-page d-flex align-items-center" style="margin-right:.5rem;">
                                <small class="text-muted" style="margin-right:.3rem;">Per page:</small>
                                <select id="perPageSelect">
                                    <option value="10">10</option>
                                    <option value="20" selected>20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <nav><ul class="pagination pagination-sm mb-0" id="paginationLinks"></ul></nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-layouts.page-wrapper>

{{-- Detail Drawer --}}
<div class="activity-drawer-overlay" id="drawerOverlay"></div>
<div class="activity-drawer" id="detailDrawer">
    <div class="activity-drawer-header">
        <h5><i class="fas fa-info-circle mr-1" style="color:#069494;"></i> Activity Detail</h5>
        <button class="activity-drawer-close" id="drawerClose"><i class="fas fa-times"></i></button>
    </div>
    <div class="activity-drawer-body" id="drawerBody">
        <div class="drawer-tabs" id="drawerTabs">
            <span class="drawer-tab active" data-tab="summary">Summary</span>
            <span class="drawer-tab" data-tab="details">Details</span>
            <span class="drawer-tab" data-tab="technical">Developer</span>
        </div>
        <div class="drawer-tab-content active" id="drawerTabSummary"></div>
        <div class="drawer-tab-content" id="drawerTabDetails"></div>
        <div class="drawer-tab-content" id="drawerTabTechnical"></div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script>
    window.PMS_ACTIVITY_LOGS_CURRENT_USER_ID = {{ $currentUserId ?? 'null' }};
    window.PMS_PC_FORMS_URL = @json(url('pc-forms'));
    window.PMS_PC_FORMS_CREATE_URL = @json(route('pc-forms.create'));
    window.PMS_ACTIVITY_LOGS_FILTER_DATA = {
        activity: {
            actions: {!! json_encode($activityActions ?? []) !!},
            modules: {!! json_encode($activityModules ?? []) !!}
        },
        request: {
            actions: {!! json_encode($requestActions ?? []) !!},
            modules: {!! json_encode($requestModules ?? []) !!}
        },
        security: {
            events: {!! json_encode($securityEvents ?? []) !!}
        }
    };
</script>
<script src="{{ asset('assets/js/activity-logs.js') }}"></script>
@endpush