@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .monitor-card {
        border: 1px solid rgba(99,102,241,.12) !important;
        box-shadow: 0 10px 30px rgba(15,23,42,.16);
        transition: all .25s ease;
    }

    .monitor-card:hover {
        border-color: rgba(99,102,241,.22) !important;
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .monitor-table {
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(148,163,184,.08);
        margin-bottom: 0;
    }

    .monitor-table thead.table-dark th {
        background: rgba(255,255,255,.03) !important;
        border-bottom: 1px solid rgba(148,163,184,.08);
        color: #94a3b8;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: 1rem;
        white-space: nowrap;
    }

    .monitor-table tbody td {
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
        vertical-align: middle;
        color: #e2e8f0;
    }

    .monitor-table tbody tr {
        transition: all .2s ease;
    }

    .monitor-table tbody tr:hover {
        background: rgba(255,255,255,.025);
    }

    .monitor-table .text-truncate {
        max-width: 260px;
    }

    .log-id {
        font-weight: 700;
        color: #c7d2fe;
    }

    .log-label {
        font-size: .68rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 4px;
    }

    .log-value {
        color: #f8fafc;
        font-weight: 500;
    }

    .table-empty {
        padding: 3rem 1rem !important;
        color: #94a3b8 !important;
        font-weight: 500;
    }

    .form-control,
    .form-select,
    .input-group-text {
        background: rgba(255,255,255,.03) !important;
        border-color: rgba(148,163,184,.08) !important;
        color: #e2e8f0 !important;
    }

    .form-control::placeholder {
        color: #64748b;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(99,102,241,.45) !important;
        box-shadow: 0 0 0 .2rem rgba(99,102,241,.14);
    }

    .form-select option {
        background: #0f172a;
        color: #fff;
    }

    .pagination .page-link {
        background: rgba(255,255,255,.03);
        border-color: rgba(148,163,184,.08);
        color: #cbd5e1;
        min-width: 40px;
        text-align: center;
    }

    .pagination .page-item.active .page-link {
        background: #696cff;
        border-color: #696cff;
        color: #fff;
    }

    .pagination .page-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .badge-soft-primary {
        background: rgba(99,102,241,.14);
        color: #c7d2fe;
    }

    .badge-soft-danger {
        background: rgba(239,68,68,.14);
        color: #fca5a5;
    }

    .badge-soft-success {
        background: rgba(34,197,94,.14);
        color: #86efac;
    }

    .badge-soft-warning {
        background: rgba(245,158,11,.14);
        color: #fcd34d;
    }

    .monitor-tabs {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .monitor-tab {
        padding: .7rem 1rem;
        border-radius: 14px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(148,163,184,.08);
        color: #cbd5e1;
        font-size: .82rem;
        font-weight: 600;
        transition: all .2s ease;
    }

    .monitor-tab.active {
        background:
            linear-gradient(
                135deg,
                rgba(99,102,241,.18),
                rgba(59,130,246,.12)
            );
        border-color: rgba(99,102,241,.24);
        color: #fff;
    }

    .monitor-tab:hover {
        background: rgba(255,255,255,.05);
        color: #fff;
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card monitor-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:260px;
                height:260px;
                background:
                radial-gradient(
                    circle,
                    rgba(99,102,241,.16) 0%,
                    transparent 72%
                );
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-3">

            <div>
                <h5 class="mb-1 text-white fw-semibold">
                    Monitoring Logs
                </h5>

                <small class="text-body-secondary">
                    Activity, Fraud, Security, dan Session monitoring
                </small>
            </div>

            <div class="monitor-tabs">

                <div class="monitor-tab {{ $tab === 'activity' ? 'active' : '' }}">
                    Activity
                </div>

                <div class="monitor-tab {{ $tab === 'fraud' ? 'active' : '' }}">
                    Fraud
                </div>

                <div class="monitor-tab {{ $tab === 'security' ? 'active' : '' }}">
                    Security
                </div>

                <div class="monitor-tab {{ $tab === 'sessions' ? 'active' : '' }}">
                    Sessions
                </div>

            </div>

        </div>

    </div>

    {{-- FILTER --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card monitor-card mb-4">

        <div class="card-body">

            <form method="GET"
                  action="{{ route('admin.logs.activity') }}"
                  class="row g-3">

                <div class="col-12 col-md-3">

                    <select name="tab" class="form-select">

                        <option value="activity" {{ $tab === 'activity' ? 'selected' : '' }}>
                            Activity Logs
                        </option>

                        <option value="fraud" {{ $tab === 'fraud' ? 'selected' : '' }}>
                            Fraud Logs
                        </option>

                        <option value="security" {{ $tab === 'security' ? 'selected' : '' }}>
                            Security Logs
                        </option>

                        <option value="sessions" {{ $tab === 'sessions' ? 'selected' : '' }}>
                            User Sessions
                        </option>

                    </select>

                </div>

                <div class="col-12 col-md">

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti tabler-search"></i>
                        </span>

                        <input type="text"
                               name="search"
                               class="form-control"
                               value="{{ $search }}"
                               placeholder="Search logs...">

                    </div>

                </div>

                <div class="col-6 col-md-2">

                    <select name="per_page" class="form-select">

                        @foreach([10,20,50,100] as $size)

                            <option value="{{ $size }}"
                                {{ (int)$perPage === $size ? 'selected' : '' }}>

                                {{ $size }}/page

                            </option>

                        @endforeach

                    </select>

                </div>

                <div class="col-6 col-md-auto d-grid d-md-flex gap-2">

                    <button class="btn btn-primary" type="submit">
                        Filter
                    </button>

                    <a href="{{ route('admin.logs.activity') }}"
                       class="btn btn-label-secondary">

                        Reset

                    </a>

                </div>

            </form>

        </div>

    </div>

    @php
        $pager = $tab === 'activity'
            ? $activityLogs
            : ($tab === 'fraud'
                ? $fraudLogs
                : ($tab === 'security' ? $securityLogs : $sessions));

        $start = max(1, $pager->currentPage() - 2);
        $end = min($pager->lastPage(), $pager->currentPage() + 2);
    @endphp

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card monitor-card">

        <div class="card-body p-0">

            <div class="table-responsive">

                @if($tab === 'activity')

                    <table class="table monitor-table align-middle text-nowrap">

                        <thead class="table-dark">

                            <tr>
                                <th>ID</th>
                                <th>Log Name</th>
                                <th>Event</th>
                                <th>Description</th>
                                <th>Subject</th>
                                <th>Causer</th>
                                <th>Created</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($activityLogs as $l)

                                <tr>

                                    <td>
                                        <span class="log-id">
                                            #{{ $l->id }}
                                        </span>
                                    </td>

                                    <td>
                                        <span class="badge badge-soft-primary">
                                            {{ $l->log_name }}
                                        </span>
                                    </td>

                                    <td>{{ $l->event }}</td>

                                    <td class="text-truncate">
                                        {{ $l->description }}
                                    </td>

                                    <td>
                                        {{ $l->subject_type }}#{{ $l->subject_id }}
                                    </td>

                                    <td>
                                        {{ $l->causer_type }}#{{ $l->causer_id }}
                                    </td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($l->created_at)->format('Y-m-d H:i:s') }}
                                    </td>

                                </tr>

                            @empty

                                <tr>
                                    <td colspan="7" class="text-center table-empty">
                                        No activity logs
                                    </td>
                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                @endif

                @if($tab === 'fraud')

                    <table class="table monitor-table align-middle text-nowrap">

                        <thead class="table-dark">

                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>IP</th>
                                <th>Device Hash</th>
                                <th>Event</th>
                                <th>Risk</th>
                                <th>Exploit</th>
                                <th>Created</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($fraudLogs as $l)

                                <tr>

                                    <td>
                                        <span class="log-id">
                                            #{{ $l->id }}
                                        </span>
                                    </td>

                                    <td>{{ $l->username ?? ('UID#'.$l->user_id) }}</td>

                                    <td>{{ $l->ip_address }}</td>

                                    <td class="text-truncate">
                                        {{ $l->device_hash }}
                                    </td>

                                    <td>{{ $l->event }}</td>

                                    <td>

                                        <span class="badge badge-soft-warning">
                                            {{ $l->risk_score }}
                                        </span>

                                    </td>

                                    <td>

                                        @if((int)$l->exploit_flag === 1)

                                            <span class="badge bg-danger">
                                                YES
                                            </span>

                                        @else

                                            <span class="badge bg-success">
                                                NO
                                            </span>

                                        @endif

                                    </td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($l->created_at)->format('Y-m-d H:i:s') }}
                                    </td>

                                </tr>

                            @empty

                                <tr>
                                    <td colspan="8" class="text-center table-empty">
                                        No fraud logs
                                    </td>
                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                @endif

                @if($tab === 'security')

                    <table class="table monitor-table align-middle text-nowrap">

                        <thead class="table-dark">

                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>IP</th>
                                <th>Event Type</th>
                                <th>Endpoint</th>
                                <th>Method</th>
                                <th>Risk</th>
                                <th>Status</th>
                                <th>HTTP</th>
                                <th>Created</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($securityLogs as $l)

                                <tr>

                                    <td>
                                        <span class="log-id">
                                            #{{ $l->id }}
                                        </span>
                                    </td>

                                    <td>{{ $l->username ?? ('UID#'.$l->user_id) }}</td>

                                    <td>{{ $l->ip_address }}</td>

                                    <td>{{ $l->event_type }}</td>

                                    <td class="text-truncate">
                                        {{ $l->endpoint }}
                                    </td>

                                    <td>{{ $l->method }}</td>

                                    <td>

                                        <span class="badge badge-soft-warning">
                                            {{ $l->risk_score }}
                                        </span>

                                    </td>

                                    <td>

                                        <span class="badge badge-soft-primary">
                                            {{ $l->status }}
                                        </span>

                                    </td>

                                    <td>{{ $l->http_status }}</td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($l->created_at)->format('Y-m-d H:i:s') }}
                                    </td>

                                </tr>

                            @empty

                                <tr>
                                    <td colspan="10" class="text-center table-empty">
                                        No security logs
                                    </td>
                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                @endif

                @if($tab === 'sessions')

                    <table class="table monitor-table align-middle text-nowrap">

                        <thead class="table-dark">

                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Session ID</th>
                                <th>Device</th>
                                <th>IP</th>
                                <th>Last Activity</th>
                                <th>Online</th>
                                <th>Updated</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($sessions as $l)

                                <tr>

                                    <td>
                                        <span class="log-id">
                                            #{{ $l->id }}
                                        </span>
                                    </td>

                                    <td>{{ $l->username ?? ('UID#'.$l->user_id) }}</td>

                                    <td class="text-truncate">
                                        {{ $l->session_id }}
                                    </td>

                                    <td>{{ $l->device }}</td>

                                    <td>{{ $l->ip_address }}</td>

                                    <td>{{ $l->last_activity }}</td>

                                    <td>

                                        @if((int)$l->is_online === 1)

                                            <span class="badge bg-success">
                                                Online
                                            </span>

                                        @else

                                            <span class="badge bg-danger">
                                                Offline
                                            </span>

                                        @endif

                                    </td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($l->updated_at)->format('Y-m-d H:i:s') }}
                                    </td>

                                </tr>

                            @empty

                                <tr>
                                    <td colspan="8" class="text-center table-empty">
                                        No session logs
                                    </td>
                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                @endif

            </div>

        </div>

        <div class="card-body">

            <div class="d-flex justify-content-center overflow-auto">

                <ul class="pagination pagination-rounded mb-0 flex-nowrap">

                    <li class="page-item {{ $pager->onFirstPage() ? 'disabled' : '' }}">

                        <a class="page-link" href="{{ $pager->url(1) }}">
                            <i class="ti tabler-chevrons-left"></i>
                        </a>

                    </li>

                    <li class="page-item {{ $pager->onFirstPage() ? 'disabled' : '' }}">

                        <a class="page-link" href="{{ $pager->previousPageUrl() }}">
                            <i class="ti tabler-chevron-left"></i>
                        </a>

                    </li>

                    @for ($i = $start; $i <= $end; $i++)

                        <li class="page-item {{ $i == $pager->currentPage() ? 'active' : '' }}">

                            <a class="page-link" href="{{ $pager->url($i) }}">
                                {{ $i }}
                            </a>

                        </li>

                    @endfor

                    <li class="page-item {{ !$pager->hasMorePages() ? 'disabled' : '' }}">

                        <a class="page-link" href="{{ $pager->nextPageUrl() }}">
                            <i class="ti tabler-chevron-right"></i>
                        </a>

                    </li>

                    <li class="page-item {{ !$pager->hasMorePages() ? 'disabled' : '' }}">

                        <a class="page-link" href="{{ $pager->url($pager->lastPage()) }}">
                            <i class="ti tabler-chevrons-right"></i>
                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>
@endsection