@extends('admin.layouts.master')

@section('title', 'سجل النشاط')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
<style>
/* ═══════════════════════════════════════════
   Activity Logs – Custom Styles
═══════════════════════════════════════════ */

/* ── Stat Cards ── */
.stat-card {
    border: none;
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,.12) !important;
}
.stat-card .stat-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.stat-card .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}
.stat-card .stat-label {
    font-size: .8rem;
    opacity: .75;
}

/* ── Filter Panel ── */
.filter-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px 20px 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.filter-panel .filter-title {
    font-size: .78rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-panel .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}
.filter-panel .form-select,
.filter-panel .form-control {
    font-size: .85rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* ── Table Tweaks ── */
#logs-table th {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    background: #f8f9fa;
    vertical-align: middle;
}
#logs-table td {
    font-size: .85rem;
    vertical-align: middle;
}
#logs-table td.desc-cell {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: #f0f4ff !important; }

/* ── Action Badges ── */
.badge-action {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .3px;
}

/* ── Detail Modal ── */
.modal-header-log {
    background: linear-gradient(135deg, #1a1f71 0%, #3b5bdb 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}
.diff-table { font-size: .82rem; }
.diff-table .field-name {
    font-weight: 700;
    color: #495057;
    width: 35%;
    white-space: nowrap;
}
.diff-old { color: #e03131; background: #fff5f5; padding: 2px 6px; border-radius: 4px; }
.diff-new { color: #2f9e44; background: #ebfbee; padding: 2px 6px; border-radius: 4px; }
.diff-unchanged { color: #495057; }
.meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.meta-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 14px;
}
.meta-item .meta-key {
    font-size: .72rem;
    color: #868e96;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.meta-item .meta-val {
    font-size: .9rem;
    font-weight: 700;
    color: #212529;
    margin-top: 2px;
}

/* ── Timeline Dot (optional) ── */
.timeline-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
</style>
@endsection

@section('content')
<div class="pc-container">
<div class="pc-content">

    {{-- ══════════════════════════════════════════
         Page Header
    ══════════════════════════════════════════ --}}
    <div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h4 class="mb-0 fw-bold">
                <i class="ti ti-history me-2 text-primary"></i>سجل النشاط
            </h4>
            <p class="text-muted small mb-0 mt-1">تتبع وتحليل جميع العمليات التي تمت على النظام</p>
        </div>
        <div class="d-flex gap-2">
            <button id="btn-export-excel" class="btn btn-success btn-sm">
                <i class="ti ti-file-spreadsheet me-1"></i>Excel
            </button>
            <button id="btn-export-csv" class="btn btn-outline-secondary btn-sm">
                <i class="ti ti-file-text me-1"></i>CSV
            </button>
        </div>
    </div>

    {{-- ══════════════════════════════════════════
         Stats Cards
    ══════════════════════════════════════════ --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                        <i class="ti ti-plus"></i>
                    </div>
                    <div>
                        <div class="stat-value text-primary" id="stat-create">—</div>
                        <div class="stat-label text-muted">عمليات إضافة</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                        <i class="ti ti-edit"></i>
                    </div>
                    <div>
                        <div class="stat-value text-warning" id="stat-update">—</div>
                        <div class="stat-label text-muted">عمليات تعديل</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                        <i class="ti ti-trash"></i>
                    </div>
                    <div>
                        <div class="stat-value text-danger" id="stat-delete">—</div>
                        <div class="stat-label text-muted">عمليات حذف</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon bg-info bg-opacity-10 text-info">
                        <i class="ti ti-list"></i>
                    </div>
                    <div>
                        <div class="stat-value text-info" id="stat-total">—</div>
                        <div class="stat-label text-muted">إجمالي السجلات</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════
         Filter Panel
    ══════════════════════════════════════════ --}}
    <div class="filter-panel">
        <div class="filter-title">
            <i class="ti ti-filter"></i> خيارات التصفية
        </div>
        <div class="row g-2 align-items-end">
            @if(auth()->user()->isSuperAdmin())
            <div class="col-6 col-md-2">
                <label class="form-label">الفرع</label>
                <select id="f-branch" class="form-select form-select-sm">
                    <option value="">الكل</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-6 col-md-2">
                <label class="form-label">المستخدم</label>
                <select id="f-user" class="form-select form-select-sm">
                    <option value="">الكل</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">نوع الحدث</label>
                <select id="f-action" class="form-select form-select-sm">
                    <option value="">الكل</option>
                    @foreach($actions as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">من تاريخ</label>
                <input id="f-from" type="date" class="form-control form-control-sm">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">إلى تاريخ</label>
                <input id="f-to" type="date" class="form-control form-control-sm">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">بحث حر</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ti ti-search"></i></span>
                    <input id="f-search" type="text" class="form-control" placeholder="وصف / IP ...">
                </div>
            </div>
            <div class="col-12 col-md-2">
                <button id="f-reset" class="btn btn-outline-danger btn-sm w-100">
                    <i class="ti ti-refresh me-1"></i>إعادة تعيين
                </button>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════
         DataTable Card
    ══════════════════════════════════════════ --}}
    <div class="card shadow-sm" style="border-radius:12px; overflow:hidden;">
        <div class="card-header bg-white d-flex align-items-center justify-content-between py-3 px-4 border-bottom">
            <h6 class="mb-0 fw-bold text-dark">
                <i class="ti ti-table me-2 text-primary"></i>قائمة السجلات
            </h6>
            <span class="badge bg-primary rounded-pill" id="badge-count">...</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="logs-table" class="table table-hover align-middle mb-0 w-100">
                    <thead>
                        <tr>
                            <th class="ps-4">#</th>
                            <th>التاريخ والوقت</th>
                            <th>الفرع</th>
                            <th>المستخدم</th>
                            <th>الحدث</th>
                            <th>الهدف</th>
                            <th>الوصف</th>
                            <th>عنوان IP</th>
                            <th class="text-center">التفاصيل</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div>{{-- .pc-content --}}
</div>{{-- .pc-container --}}

{{-- ══════════════════════════════════════════
     Detail Modal
══════════════════════════════════════════ --}}
<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content" style="border-radius:12px; border:none;">

            <div class="modal-header modal-header-log px-4 py-3">
                <div class="d-flex align-items-center gap-3">
                    <div id="modal-icon-wrap" class="timeline-icon bg-white bg-opacity-20 text-white">
                        <i id="modal-action-icon" class="ti ti-file-description"></i>
                    </div>
                    <div>
                        <h5 class="modal-title mb-0 fw-bold" id="modal-title">تفاصيل الحدث</h5>
                        <small id="modal-subtitle" class="opacity-75"></small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body px-4 py-3">

                {{-- Meta Grid --}}
                <div class="meta-grid mb-4" id="modal-meta"></div>

                {{-- Changes Diff --}}
                <div id="diff-section" class="d-none">
                    <h6 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
                        <i class="ti ti-git-diff text-warning"></i>التغييرات
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-borderless diff-table">
                            <thead>
                                <tr class="border-bottom">
                                    <th class="field-name text-muted" style="font-size:.75rem">الحقل</th>
                                    <th style="font-size:.75rem; color:#e03131">القيمة القديمة</th>
                                    <th style="font-size:.75rem; color:#2f9e44">القيمة الجديدة</th>
                                </tr>
                            </thead>
                            <tbody id="diff-tbody"></tbody>
                        </table>
                    </div>
                </div>

                {{-- New Values Only (create) --}}
                <div id="new-section" class="d-none">
                    <h6 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
                        <i class="ti ti-plus-circle text-success"></i>البيانات المُضافة
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-borderless diff-table">
                            <thead>
                                <tr class="border-bottom">
                                    <th class="field-name text-muted" style="font-size:.75rem">الحقل</th>
                                    <th style="font-size:.75rem; color:#2f9e44">القيمة</th>
                                </tr>
                            </thead>
                            <tbody id="new-tbody"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Old Values Only (delete) --}}
                <div id="old-section" class="d-none">
                    <h6 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
                        <i class="ti ti-trash text-danger"></i>البيانات المحذوفة
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-borderless diff-table">
                            <thead>
                                <tr class="border-bottom">
                                    <th class="field-name text-muted" style="font-size:.75rem">الحقل</th>
                                    <th style="font-size:.75rem; color:#e03131">القيمة</th>
                                </tr>
                            </thead>
                            <tbody id="old-tbody"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Description --}}
                <div id="desc-section" class="mt-3 p-3 bg-light rounded-3 d-none">
                    <p class="mb-0 small text-muted">
                        <i class="ti ti-notes me-1"></i>
                        <span id="modal-description"></span>
                    </p>
                </div>

            </div>

            <div class="modal-footer border-0 px-4 pb-3 pt-0">
                <button type="button" class="btn btn-light btn-sm px-4" data-bs-dismiss="modal">إغلاق</button>
            </div>

        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

<script>
$(function () {

    /* ══════════════════════════════
       Helpers
    ══════════════════════════════ */
    const actionConfig = {
        create:              { badge: 'bg-success',               icon: 'ti-plus',          label: 'إضافة'          },
        update:              { badge: 'bg-warning text-dark',     icon: 'ti-edit',          label: 'تعديل'          },
        delete:              { badge: 'bg-danger',                icon: 'ti-trash',         label: 'حذف'            },
        renew:               { badge: 'bg-info text-dark',        icon: 'ti-refresh',       label: 'تجديد'          },
        collect:             { badge: 'bg-primary',               icon: 'ti-cash',          label: 'تحصيل'          },
        login:               { badge: 'bg-secondary',             icon: 'ti-login',         label: 'تسجيل دخول'     },
        status_change:       { badge: 'bg-dark',                  icon: 'ti-toggle-left',   label: 'تغيير حالة'     },
        create_notification: { badge: 'bg-purple text-white',     icon: 'ti-bell',          label: 'إنشاء إشعار'    },
    };

    function getActionCfg(action) {
        return actionConfig[action] ?? { badge: 'bg-light text-dark', icon: 'ti-dots', label: action };
    }

    function makeBadge(action) {
        const cfg = getActionCfg(action);
        return `<span class="badge badge-action ${cfg.badge}">${cfg.label}</span>`;
    }

    function prettyVal(v) {
        if (v === null || v === undefined) return '<em class="text-muted">—</em>';
        if (typeof v === 'boolean') return v ? '<span class="diff-new">✓ نعم</span>' : '<span class="diff-old">✗ لا</span>';
        return String(v);
    }

    /* ══════════════════════════════
       DataTable Init
    ══════════════════════════════ */
    const dt = $('#logs-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.activity-logs.data") }}',
            data: function (d) {
                d.branch_id   = $('#f-branch').val() ?? '';
                d.action      = $('#f-action').val();
                d.user_id     = $('#f-user').val();
                d.from_date   = $('#f-from').val();
                d.to_date     = $('#f-to').val();
                d.search_text = $('#f-search').val();
            }
        },
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json'
        },
        dom: 'Brtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Excel',
                className: 'd-none',
                filename: 'activity-logs-{{ now()->format("Ymd") }}',
                title: 'سجل النشاط'
            },
            {
                extend: 'csvHtml5',
                text: 'CSV',
                className: 'd-none',
                filename: 'activity-logs-{{ now()->format("Ymd") }}'
            },
        ],
        columns: [
            {
                data: 'id', name: 'id',
                className: 'ps-4 text-muted fw-bold',
                width: '4%',
                render: d => `<span class="text-muted">#${d}</span>`
            },
            {
                data: 'created_at', name: 'created_at',
                width: '13%',
                render: function(d) {
                    if (!d) return '—';
                    const dt = new Date(d);
                    const date = dt.toLocaleDateString('ar-EG', { year:'numeric', month:'short', day:'numeric' });
                    const time = dt.toLocaleTimeString('ar-EG', { hour:'2-digit', minute:'2-digit' });
                    return `<div class="small fw-bold">${date}</div>
                            <div class="small text-muted">${time}</div>`;
                }
            },
            {
                data: 'branch_name', name: 'branch.name',
                defaultContent: '—',
                width: '9%',
                render: d => d && d !== '—'
                    ? `<span class="badge bg-light text-dark border small"><i class="ti ti-building me-1"></i>${d}</span>`
                    : '<span class="text-muted">—</span>'
            },
            {
                data: 'user_name', name: 'user.name',
                defaultContent: '—',
                width: '12%',
                render: function(d) {
                    if (!d || d === '—') return '<span class="text-muted">—</span>';
                    const initials = d.split(' ').map(w => w[0]).slice(0,2).join('');
                    return `<div class="d-flex align-items-center gap-2">
                                <div class="avatar avatar-s rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                                     style="width:30px;height:30px;font-size:.75rem;flex-shrink:0">${initials}</div>
                                <span class="small fw-semibold">${d}</span>
                            </div>`;
                }
            },
            {
                data: 'action_badge', name: 'action',
                orderable: false, searchable: false,
                width: '9%',
                render: d => d   // already HTML from controller
            },
            {
                data: 'subject_label', name: 'subject_type',
                defaultContent: '—',
                width: '10%',
                render: d => d && d !== '—'
                    ? `<span class="badge bg-primary bg-opacity-10 text-primary small">${d}</span>`
                    : '<span class="text-muted">—</span>'
            },
            {
                data: 'description', name: 'description',
                defaultContent: '—',
                className: 'desc-cell',
                width: '22%',
                render: function(d) {
                    if (!d || d === '—') return '<span class="text-muted">—</span>';
                    return `<span title="${d}" class="small">${d}</span>`;
                }
            },
            {
                data: 'ip_address', name: 'ip_address',
                defaultContent: '—',
                width: '9%',
                render: d => d && d !== '—'
                    ? `<code class="small bg-light px-2 py-1 rounded">${d}</code>`
                    : '<span class="text-muted">—</span>'
            },
            {
                data: null,
                orderable: false, searchable: false,
                width: '7%',
                className: 'text-center',
                render: function(row) {
                    return `<button class="btn btn-sm btn-outline-primary btn-details rounded-pill px-3"
                                    data-row='${JSON.stringify(row).replace(/'/g,"&#39;")}'>
                                <i class="ti ti-eye me-1"></i>عرض
                            </button>`;
                }
            },
        ],
        order: [[0, 'desc']],
        drawCallback: function(settings) {
            const info = this.api().page.info();
            $('#badge-count').text(info.recordsTotal.toLocaleString('ar-EG'));
            loadStats();
        },
        rowCallback: function(row) {
            $(row).addClass('row-clickable');
        }
    });

    /* ══════════════════════════════
       Stats Counter
    ══════════════════════════════ */
    function loadStats() {
        $.getJSON('{{ route("admin.activity-logs.stats") }}', {
            branch_id: $('#f-branch').val() ?? '',
            from_date: $('#f-from').val(),
            to_date:   $('#f-to').val(),
        }, function(res) {
            animateCount('#stat-create', res.create ?? 0);
            animateCount('#stat-update', res.update ?? 0);
            animateCount('#stat-delete', res.delete ?? 0);
            animateCount('#stat-total',  res.total  ?? 0);
        });
    }

    function animateCount(sel, target) {
        const el = $(sel);
        const start = parseInt(el.text()) || 0;
        $({ n: start }).animate({ n: target }, {
            duration: 600,
            easing: 'swing',
            step: function() { el.text(Math.ceil(this.n).toLocaleString('ar-EG')); },
            complete: function() { el.text(target.toLocaleString('ar-EG')); }
        });
    }

    /* ══════════════════════════════
       Filters
    ══════════════════════════════ */
    $('#f-branch, #f-action, #f-user').on('change', function() { dt.draw(); });
    $('#f-from, #f-to').on('change', function() { dt.draw(); });
    $('#f-search').on('keyup input', debounce(function() { dt.draw(); }, 400));
    $('#f-reset').on('click', function() {
        $('#f-branch, #f-action, #f-user').val('');
        $('#f-from, #f-to, #f-search').val('');
        dt.draw();
    });

    function debounce(fn, delay) {
        let t;
        return function() { clearTimeout(t); t = setTimeout(fn, delay); };
    }

    /* ══════════════════════════════
       Export Buttons
    ══════════════════════════════ */
    $('#btn-export-excel').on('click', function() { dt.button(0).trigger(); });
    $('#btn-export-csv').on('click', function()   { dt.button(1).trigger(); });

    /* ══════════════════════════════
       Detail Modal
    ══════════════════════════════ */
    $('#logs-table').on('click', '.btn-details', function(e) {
        e.stopPropagation();
        const row = $(this).data('row');
        openDetailModal(row);
    });

    // also click anywhere on the row
    $('#logs-table').on('click', 'tr', function() {
        const btn = $(this).find('.btn-details');
        if (btn.length) btn.trigger('click');
    });

    function openDetailModal(row) {
        const action = row.action ?? '';
        const cfg    = getActionCfg(action);

        // Header
        $('#modal-title').text('تفاصيل الحدث – ' + cfg.label);
        $('#modal-subtitle').text(row.created_at ?? '');
        $('#modal-action-icon').attr('class', 'ti ' + cfg.icon);

        // Meta
        const meta = [
            { key: 'الحدث',        val: `<span class="badge badge-action ${cfg.badge}">${cfg.label}</span>` },
            { key: 'المستخدم',     val: row.user_name    ?? '—' },
            { key: 'الفرع',        val: row.branch_name  ?? '—' },
            { key: 'الهدف',        val: row.subject_label ?? '—' },
            { key: 'عنوان IP',     val: row.ip_address   ?? '—' },
            { key: 'التاريخ',      val: row.created_at   ?? '—' },
        ];
        $('#modal-meta').html(
            meta.map(m =>
                `<div class="meta-item">
                    <div class="meta-key">${m.key}</div>
                    <div class="meta-val">${m.val}</div>
                </div>`
            ).join('')
        );

        // Description
        if (row.description) {
            $('#modal-description').text(row.description);
            $('#desc-section').removeClass('d-none');
        } else {
            $('#desc-section').addClass('d-none');
        }

        // Values
        const oldVals = tryParse(row.old_values);
        const newVals = tryParse(row.new_values);

        $('#diff-section, #new-section, #old-section').addClass('d-none');
        $('#diff-tbody, #new-tbody, #old-tbody').html('');

        if (oldVals && newVals) {
            // Show diff
            const allKeys = new Set([...Object.keys(oldVals), ...Object.keys(newVals)]);
            allKeys.forEach(k => {
                const ov = oldVals[k] ?? null;
                const nv = newVals[k] ?? null;
                const changed = JSON.stringify(ov) !== JSON.stringify(nv);
                $('#diff-tbody').append(`
                    <tr class="${changed ? 'table-warning' : ''}">
                        <td class="field-name">${translateField(k)}</td>
                        <td><span class="${changed ? 'diff-old' : 'diff-unchanged'}">${prettyVal(ov)}</span></td>
                        <td><span class="${changed ? 'diff-new' : 'diff-unchanged'}">${prettyVal(nv)}</span></td>
                    </tr>`);
            });
            $('#diff-section').removeClass('d-none');

        } else if (newVals && !oldVals) {
            Object.entries(newVals).forEach(([k, v]) => {
                $('#new-tbody').append(`
                    <tr>
                        <td class="field-name">${translateField(k)}</td>
                        <td><span class="diff-new">${prettyVal(v)}</span></td>
                    </tr>`);
            });
            $('#new-section').removeClass('d-none');

        } else if (oldVals && !newVals) {
            Object.entries(oldVals).forEach(([k, v]) => {
                $('#old-tbody').append(`
                    <tr>
                        <td class="field-name">${translateField(k)}</td>
                        <td><span class="diff-old">${prettyVal(v)}</span></td>
                    </tr>`);
            });
            $('#old-section').removeClass('d-none');
        }

        new bootstrap.Modal('#detailModal').show();
    }

    function tryParse(val) {
        if (!val || val === '-') return null;
        if (typeof val === 'object') return val;
        try { return JSON.parse(val); } catch { return null; }
    }

    /* ── Field Name Translator ── */
    const fieldMap = {
        id:'المعرف', name:'الاسم', email:'البريد الإلكتروني', password:'كلمة المرور',
        phone:'الهاتف', mobile:'الجوال', address:'العنوان', status:'الحالة',
        branch_id:'الفرع', company_id:'الشركة', customer_id:'العميل',
        created_at:'تاريخ الإنشاء', updated_at:'تاريخ التعديل', deleted_at:'تاريخ الحذف',
        is_active:'مفعل', active:'نشط', is_under_company:'تابع لشركة',
        full_name:'الاسم الكامل', national_id:'الهوية', customer_type:'نوع العميل',
        plate_number:'رقم اللوحة', chassis_number:'رقم الهيكل', model_year:'سنة الصنع',
        brand:'الماركة', color:'اللون', vehicle_kind:'نوع المركبة',
        permit_number:'رقم التصريح', permit_status:'حالة التصريح',
        start_date:'تاريخ البدء', end_date:'تاريخ الانتهاء', due_date:'تاريخ الاستحقاق',
        total_amount:'المبلغ الإجمالي', paid_amount:'المبلغ المدفوع', remaining_amount:'المبلغ المتبقي',
        notes:'ملاحظات', job_title:'المسمى الوظيفي', nationality:'الجنسية',
        person_name:'اسم الشخص', passport_no:'رقم الجواز', driver_grade:'درجة السائق',
    };
    function translateField(k) {
        return fieldMap[k] ? `<span class="text-secondary">${fieldMap[k]}</span> <small class="text-muted">(${k})</small>` : k;
    }

    // Initial load
    loadStats();
});
</script>
@endsection