@extends('admin.layouts.app')

@section('title', 'Activity Log Details')

@section('content')

<style>
    /* ============================================
       ACTIVITY LOG DETAILS - PREMIUM UI
    ============================================ */

    .log-detail-wrapper {
        padding: 0 4px;
    }

    /* ============================================
       BREADCRUMB
    ============================================ */
    .breadcrumb-nav {
        margin-bottom: 18px;
    }

    .breadcrumb-custom {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 13px;
        color: #6B7280;
        flex-wrap: wrap;
    }

    .breadcrumb-custom li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .breadcrumb-custom li a {
        color: #6B7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s ease;
    }

    .breadcrumb-custom li a:hover {
        color: #C1121F;
    }

    .breadcrumb-custom li a i {
        font-size: 14px;
    }

    .breadcrumb-custom li::after {
        content: "/";
        color: #D1D5DB;
        margin-left: 4px;
    }

    .breadcrumb-custom li:last-child::after {
        display: none;
    }

    .breadcrumb-custom li.active {
        color: #C1121F;
        font-weight: 600;
    }

    /* ============================================
       PAGE HEADER
    ============================================ */
    .page-header-custom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 24px;
    }

    .page-header-custom h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1A1A2E;
        margin: 0 0 2px;
    }

    .page-header-custom p {
        margin: 0;
        color: #6B7280;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .page-header-custom p i {
        color: #C1121F;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background: rgba(193, 18, 31, 0.06);
        border-color: rgba(193, 18, 31, 0.2);
        color: #C1121F;
        transform: translateX(-2px);
    }

    /* ============================================
       DETAIL CARD - PREMIUM
    ============================================ */
    .detail-card {
        background: #FFFFFF;
        border-radius: 18px;
        border: 1px solid #E8E8E8;
        padding: 32px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
    }

    .detail-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    }

    /* ============================================
       DETAIL TABLE - PREMIUM
    ============================================ */
    .detail-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        color: #4A5568;
    }

    .detail-table tr {
        border-bottom: 1px solid #F0F0F0;
        transition: all 0.3s ease;
    }

    .detail-table tr:hover {
        background: rgba(193, 18, 31, 0.02);
    }

    .detail-table tr:last-child {
        border-bottom: none;
    }

    .detail-table th {
        padding: 14px 18px;
        text-align: left;
        font-weight: 600;
        font-size: 13px;
        color: #1A1A2E;
        width: 180px;
        background: #F8F9FA;
        white-space: nowrap;
        border-radius: 8px 0 0 8px;
    }

    .detail-table th i {
        color: #C1121F;
        margin-right: 8px;
        font-size: 15px;
    }

    .detail-table td {
        padding: 14px 18px;
        color: #4A5568;
        word-break: break-word;
    }

    .detail-table td strong {
        color: #1A1A2E;
    }

    /* ============================================
       USER AVATAR
    ============================================ */
    .user-avatar-small {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar-small .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #C1121F, #780000);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        flex-shrink: 0;
        box-shadow: 0 2px 12px rgba(193, 18, 31, 0.15);
    }

    /* ============================================
       ACTION BADGES - PREMIUM
    ============================================ */
    .badge-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
        letter-spacing: 0.3px;
    }

    .badge-action i {
        font-size: 14px;
    }

    .badge-action.create {
        background: rgba(34, 197, 94, 0.1);
        color: #22C55E;
        border: 1px solid rgba(34, 197, 94, 0.15);
    }

    .badge-action.update {
        background: rgba(245, 158, 11, 0.1);
        color: #F59E0B;
        border: 1px solid rgba(245, 158, 11, 0.15);
    }

    .badge-action.delete {
        background: rgba(220, 38, 38, 0.1);
        color: #DC2626;
        border: 1px solid rgba(220, 38, 38, 0.15);
    }

    .badge-action.default {
        background: #F3F4F6;
        color: #6B7280;
        border: 1px solid #E8E8E8;
    }

    /* ============================================
       METHOD BADGE
    ============================================ */
    .badge-method {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 14px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
    }

    .badge-method.get {
        background: #DBEAFE;
        color: #2563EB;
    }

    .badge-method.post {
        background: #DCFCE7;
        color: #16A34A;
    }

    .badge-method.put {
        background: #FEF3C7;
        color: #D97706;
    }

    .badge-method.delete {
        background: #FEE2E2;
        color: #DC2626;
    }

    .badge-method.default {
        background: #F3F4F6;
        color: #6B7280;
    }

    /* ============================================
       CODE STYLING
    ============================================ */
    .detail-table td code {
        background: #F8F9FA;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-family: 'Courier New', monospace;
        color: #1A1A2E;
        border: 1px solid #E8E8E8;
        display: inline-block;
        max-width: 100%;
        word-break: break-all;
    }

    .detail-table td code.text-break {
        word-break: break-all;
    }

    /* ============================================
       SECTION DIVIDER
    ============================================ */
    .section-divider {
        border: none;
        border-top: 2px solid #E8E8E8;
        margin: 28px 0;
        position: relative;
    }

    .section-divider::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, #C1121F, #780000);
        border-radius: 2px;
    }

    /* ============================================
       SECTION TITLE
    ============================================ */
    .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .section-title i {
        font-size: 20px;
        color: #C1121F;
        background: rgba(193, 18, 31, 0.08);
        padding: 8px;
        border-radius: 10px;
    }

    .section-title h5 {
        font-size: 16px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    /* ============================================
       COMPARE TABLE - PREMIUM
    ============================================ */
    .compare-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        color: #4A5568;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #F0F0F0;
    }

    .compare-table thead {
        background: linear-gradient(135deg, #F8F9FA, #F3F4F6);
    }

    .compare-table thead th {
        padding: 12px 18px;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #6B7280;
        border-bottom: 2px solid #E8E8E8;
    }

    .compare-table tbody td {
        padding: 12px 18px;
        border-bottom: 1px solid #F0F0F0;
        vertical-align: middle;
    }

    .compare-table tbody tr {
        transition: all 0.3s ease;
    }

    .compare-table tbody tr:hover {
        background: rgba(193, 18, 31, 0.02);
    }

    .compare-table tbody tr:last-child td {
        border-bottom: none;
    }

    .compare-table .field-name {
        font-weight: 600;
        color: #1A1A2E;
        font-size: 13px;
    }

    .compare-table .field-name i {
        color: #6B7280;
        margin-right: 6px;
        font-size: 14px;
    }

    .compare-table .old-value {
        color: #DC2626;
        background: #FEF2F2;
        padding: 4px 12px;
        border-radius: 6px;
        display: inline-block;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        border: 1px solid #FECACA;
        max-width: 100%;
        word-break: break-word;
    }

    .compare-table .new-value {
        color: #16A34A;
        background: #F0FDF4;
        padding: 4px 12px;
        border-radius: 6px;
        display: inline-block;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        border: 1px solid #BBF7D0;
        max-width: 100%;
        word-break: break-word;
    }

    .compare-table .empty-value {
        color: #9CA3AF;
        font-style: italic;
    }

    /* ============================================
       JSON PREVIEW - PREMIUM
    ============================================ */
    .json-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 8px;
    }

    .json-box {
        background: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #E8E8E8;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .json-box:hover {
        border-color: rgba(193, 18, 31, 0.15);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    }

    .json-box .json-box-header {
        padding: 10px 16px;
        background: #F8F9FA;
        border-bottom: 1px solid #E8E8E8;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .json-box .json-box-header .json-label {
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .json-box .json-box-header .json-label.old {
        color: #DC2626;
    }

    .json-box .json-box-header .json-label.new {
        color: #16A34A;
    }

    .json-box .json-box-header .json-label i {
        font-size: 14px;
    }

    .json-preview {
        padding: 16px 20px;
        font-size: 13px;
        font-family: 'Courier New', monospace;
        color: #1A1A2E;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 350px;
        overflow-y: auto;
        background: #0D1117;
        color: #E6EDF3;
        margin: 0;
        border-radius: 0;
        line-height: 1.6;
    }

    .json-preview::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .json-preview::-webkit-scrollbar-track {
        background: #1C2128;
    }

    .json-preview::-webkit-scrollbar-thumb {
        background: #C1121F;
        border-radius: 10px;
    }

    /* ============================================
       EMPTY STATE
    ============================================ */
    .empty-state-compare {
        text-align: center;
        padding: 40px 20px;
        color: #6B7280;
    }

    .empty-state-compare i {
        font-size: 48px;
        color: #D1D5DB;
        opacity: 0.4;
        display: block;
        margin-bottom: 12px;
    }

    .empty-state-compare h5 {
        color: #1A1A2E;
        font-size: 16px;
        margin-bottom: 4px;
    }

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 992px) {
        .detail-card {
            padding: 24px;
        }

        .detail-table th {
            width: 140px;
            padding: 12px 14px;
            font-size: 12px;
        }

        .detail-table td {
            padding: 12px 14px;
            font-size: 13px;
        }

        .json-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }

    @media (max-width: 768px) {
        .detail-card {
            padding: 18px;
            border-radius: 14px;
        }

        .page-header-custom {
            flex-direction: column;
            align-items: flex-start;
        }

        .page-header-custom h1 {
            font-size: 20px;
        }

        .detail-table {
            font-size: 13px;
        }

        .detail-table th {
            width: 100px;
            font-size: 11px;
            padding: 10px 12px;
            display: block;
            width: 100%;
            background: transparent;
            border-bottom: none;
            padding-bottom: 2px;
        }

        .detail-table td {
            font-size: 13px;
            padding: 10px 12px;
            display: block;
            width: 100%;
            padding-top: 2px;
            border-bottom: 1px solid #F0F0F0;
        }

        .detail-table tr {
            display: block;
            padding: 8px 0;
        }

        .detail-table tr:last-child td {
            border-bottom: none;
        }

        .detail-table th i {
            font-size: 13px;
        }

        .badge-action {
            font-size: 11px;
            padding: 4px 12px;
        }

        .badge-method {
            font-size: 11px;
            padding: 2px 10px;
        }

        .user-avatar-small .avatar {
            width: 30px;
            height: 30px;
            font-size: 12px;
        }

        .compare-table {
            font-size: 13px;
        }

        .compare-table thead th,
        .compare-table tbody td {
            padding: 8px 12px;
        }

        .compare-table .old-value,
        .compare-table .new-value {
            font-size: 12px;
            padding: 3px 10px;
        }

        .json-preview {
            font-size: 12px;
            padding: 12px 16px;
            max-height: 250px;
        }

        .section-title h5 {
            font-size: 14px;
        }

        .btn-back {
            font-size: 12px;
            padding: 6px 14px;
        }
    }

    @media (max-width: 576px) {
        .detail-card {
            padding: 12px 14px;
            border-radius: 12px;
            border: none;
            box-shadow: none;
        }

        .page-header-custom h1 {
            font-size: 18px;
        }

        .detail-table th {
            font-size: 10px;
            padding: 6px 8px;
        }

        .detail-table td {
            font-size: 12px;
            padding: 6px 8px;
        }

        .badge-action {
            font-size: 10px;
            padding: 3px 10px;
        }

        .badge-action i {
            font-size: 11px;
        }

        .badge-method {
            font-size: 10px;
            padding: 2px 8px;
        }

        .detail-table td code {
            font-size: 11px;
            padding: 3px 8px;
        }

        .compare-table {
            font-size: 12px;
        }

        .compare-table thead th,
        .compare-table tbody td {
            padding: 6px 10px;
        }

        .compare-table .field-name {
            font-size: 12px;
        }

        .compare-table .old-value,
        .compare-table .new-value {
            font-size: 11px;
            padding: 2px 8px;
        }

        .json-preview {
            font-size: 11px;
            padding: 10px 12px;
            max-height: 200px;
        }

        .section-divider {
            margin: 20px 0;
        }

        .section-title {
            margin-bottom: 12px;
        }

        .section-title i {
            font-size: 16px;
            padding: 6px;
        }

        .section-title h5 {
            font-size: 13px;
        }

        .user-avatar-small .avatar {
            width: 26px;
            height: 26px;
            font-size: 10px;
        }

        .json-grid {
            gap: 12px;
        }
    }
</style>

<!-- ============================================
   HTML CONTENT
============================================ -->

<div class="log-detail-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li><a href="{{ route('admin.dashboard') }}"><i class="bi bi-house-door"></i> Dashboard</a></li>
            <li><a href="{{ route('admin.activity-logs.index') }}"><i class="bi bi-clock-history"></i> Activity Logs</a></li>
            <li class="active">Log Details</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Activity Log Details</h1>
            <p><i class="bi bi-file-earmark-text"></i> View detailed information about this activity</p>
        </div>
        <a href="{{ route('admin.activity-logs.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Logs
        </a>
    </div>

    <!-- ===== DETAIL CARD ===== -->
    <div class="detail-card">

        <!-- ===== DETAIL TABLE ===== -->
        <table class="detail-table">
            <tr>
                <th><i class="bi bi-person"></i> User</th>
                <td>
                    <div class="user-avatar-small">
                        <div class="avatar">{{ substr($activityLog->admin->name ?? 'U', 0, 2) }}</div>
                        {{ $activityLog->admin->name ?? '-' }}
                    </div>
                </td>
            </tr>
            <tr>
                <th><i class="bi bi-grid"></i> Module</th>
                <td><strong>{{ $activityLog->module }}</strong></td>
            </tr>
            <tr>
                <th><i class="bi bi-tag"></i> Action</th>
                <td>
                    @if($activityLog->action == 'Create')
                    <span class="badge-action create"><i class="bi bi-check-circle"></i> Create</span>
                    @elseif($activityLog->action == 'Update')
                    <span class="badge-action update"><i class="bi bi-pencil"></i> Update</span>
                    @elseif($activityLog->action == 'Delete')
                    <span class="badge-action delete"><i class="bi bi-trash"></i> Delete</span>
                    @else
                    <span class="badge-action default">{{ $activityLog->action }}</span>
                    @endif
                </td>
            </tr>
            <tr>
                <th><i class="bi bi-file-earmark"></i> Record Name</th>
                <td><strong>{{ $activityLog->record_name }}</strong></td>
            </tr>
            <tr>
                <th><i class="bi bi-file-text"></i> Description</th>
                <td>{{ $activityLog->description }}</td>
            </tr>
            <tr>
                <th><i class="bi bi-geo-alt"></i> IP Address</th>
                <td><code>{{ $activityLog->ip_address }}</code></td>
            </tr>
            <tr>
                <th><i class="bi bi-arrow-up"></i> Method</th>
                <td>
                    <span class="badge-method {{ strtolower($activityLog->method) }}">
                        {{ $activityLog->method }}
                    </span>
                </td>
            </tr>
            <tr>
                <th><i class="bi bi-link"></i> URL</th>
                <td><code class="text-break">{{ $activityLog->url }}</code></td>
            </tr>
            <tr>
                <th><i class="bi bi-browser"></i> Browser</th>
                <td>{{ $activityLog->user_agent }}</td>
            </tr>
            <tr>
                <th><i class="bi bi-clock"></i> Created At</th>
                <td><strong>{{ $activityLog->created_at->format('d M Y h:i A') }}</strong></td>
            </tr>
        </table>

        <!-- ===== SECTION DIVIDER ===== -->
        <hr class="section-divider">

        <!-- ===== DATA COMPARISON ===== -->
        <div class="section-title">
            <i class="bi bi-arrow-left-right"></i>
            <h5>Data Comparison</h5>
        </div>

        @if($activityLog->action == 'Update')
        <div class="table-responsive">
            <table class="compare-table">
                <thead>
                    <tr>
                        <th width="220">Field</th>
                        <th>Old Value</th>
                        <th>New Value</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($activityLog->new_data as $key => $value)
                    @php
                    $oldValue = $activityLog->old_data[$key] ?? '';
                    @endphp
                    @if($oldValue != $value)
                    <tr>
                        <td class="field-name">
                            <i class="bi bi-chevron-right"></i>
                            {{ ucwords(str_replace('_', ' ', $key)) }}
                        </td>
                        <td>
                            <span class="old-value">
                                {{ is_array($oldValue) ? json_encode($oldValue) : ($oldValue ?: '') }}
                            </span>
                        </td>
                        <td>
                            <span class="new-value">
                                {{ is_array($value) ? json_encode($value) : ($value ?: '') }}
                            </span>
                        </td>
                    </tr>
                    @endif
                    @empty
                    <tr>
                        <td colspan="3">
                            <div class="empty-state-compare">
                                <i class="bi bi-arrow-left-right"></i>
                                <h5>No Changes Detected</h5>
                                <p>No field changes were found in this update.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @else
        <div class="json-grid">
            <div class="json-box">
                <div class="json-box-header">
                    <span class="json-label old"><i class="bi bi-arrow-left"></i> Old Data</span>
                </div>
                <pre class="json-preview">{{ json_encode($activityLog->old_data, JSON_PRETTY_PRINT) }}</pre>
            </div>
            <div class="json-box">
                <div class="json-box-header">
                    <span class="json-label new"><i class="bi bi-arrow-right"></i> New Data</span>
                </div>
                <pre class="json-preview">{{ json_encode($activityLog->new_data, JSON_PRETTY_PRINT) }}</pre>
            </div>
        </div>
        @endif

    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        console.log('✅ Activity Log Details loaded successfully!');
    });
</script>

@endsection