@extends('template.desktop.app')

@section('title', 'Adjustment Saldo Aktor')

@push('styles')
    <style>
        :root {
            --primary: #dc2626;
            --primary-hover: #b91c1c;
            --primary-light: #fca5a5;
            --primary-lighter: #fecaca;
            --primary-bg: #fef2f2;
            --success: #16a34a;
            --success-bg: #f0fdf4;
            --warning: #ea580c;
            --warning-bg: #fff7ed;
            --info: #0284c7;
            --info-bg: #f0f9ff;
            --gray-50: #fafafa;
            --gray-100: #f5f5f5;
            --gray-200: #e5e5e5;
            --gray-300: #d4d4d4;
            --gray-400: #a3a3a3;
            --gray-500: #737373;
            --gray-600: #525252;
            --gray-700: #404040;
            --gray-800: #262626;
            --gray-900: #171717;
        }

        body {
            background: var(--gray-50);
        }

        /* Page Header */
        .page-header {
            background: var(--primary);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            color: white;
        }

        .page-header h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 6px;
            color: white;
        }

        .page-header p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            margin: 0;
            font-weight: 400;
        }

        /* Responsive Page Header */
        @media (max-width: 768px) {
            .page-header {
                padding: 20px;
            }

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

            .page-header p {
                font-size: 13px;
            }
        }

        /* Card */
        .content-card {
            border-radius: 12px;
            border: 1px solid var(--gray-200);
            background: white;
        }

        /* Actor Card */
        .actor-card {
            border-radius: 10px;
            border: 1px solid var(--gray-200);
            padding: 20px;
            margin-bottom: 12px;
            background: white;
            transition: all 0.2s ease;
        }

        .actor-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08);
        }

        /* Responsive Actor Card */
        @media (max-width: 768px) {
            .actor-card {
                padding: 16px;
            }
        }

        .actor-avatar {
            width: 56px;
            height: 56px;
            min-width: 56px;
            border-radius: 10px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 700;
            color: white;
        }

        @media (max-width: 768px) {
            .actor-avatar {
                width: 48px;
                height: 48px;
                min-width: 48px;
                font-size: 20px;
            }
        }

        .balance-badge {
            background: var(--success);
            color: white;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 16px;
            white-space: nowrap;
        }

        .balance-badge.empty {
            background: var(--gray-400);
        }

        @media (max-width: 768px) {
            .balance-badge {
                padding: 8px 12px;
                font-size: 14px;
            }
        }

        .type-badge {
            padding: 4px 12px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .type-badge.pusat {
            background: var(--info);
            color: white;
        }

        .type-badge.mitra {
            background: var(--warning);
            color: white;
        }

        .type-badge.distributor {
            background: var(--primary);
            color: white;
        }

        .info-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--gray-600);
            font-size: 14px;
        }

        .info-row i {
            color: var(--primary);
            font-size: 16px;
            width: 18px;
        }

        @media (max-width: 768px) {
            .info-row {
                font-size: 13px;
            }

            .info-row i {
                font-size: 14px;
            }
        }

        .info-label {
            font-weight: 600;
            color: var(--gray-700);
            min-width: 80px;
        }

        /* Controls */
        .search-wrapper {
            position: relative;
            width: 100%;
        }

        @media (min-width: 576px) {
            .search-wrapper {
                max-width: 350px;
            }
        }

        .search-control {
            background: white;
            border-radius: 10px;
            border: 2px solid var(--gray-200);
            padding: 10px 16px 10px 42px;
            transition: all 0.2s ease;
            width: 100%;
        }

        .search-control:focus {
            border-color: var(--primary);
            outline: none;
        }

        .search-wrapper i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary);
            font-size: 18px;
        }

        .select-control {
            background: white;
            border-radius: 10px;
            border: 2px solid var(--gray-200);
            padding: 10px 16px;
            font-weight: 600;
            color: var(--gray-700);
            transition: all 0.2s ease;
        }

        .select-control:focus {
            border-color: var(--primary);
        }

        @media (max-width: 576px) {
            .select-control {
                width: 100%;
            }
        }

        /* Buttons */
        .btn-adjustment {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .btn-adjustment:hover {
            background: var(--primary-hover);
            color: white;
        }

        @media (max-width: 768px) {
            .btn-adjustment {
                padding: 8px 16px;
                font-size: 13px;
                width: 100%;
            }
        }

        /* Status */
        .status-online {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }

        .status-offline {
            width: 8px;
            height: 8px;
            background: var(--gray-400);
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }

        /* Skeleton */
        .skeleton-shimmer {
            background: var(--gray-100);
            animation: shimmer 1.5s infinite;
            border-radius: 10px;
        }

        @keyframes shimmer {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* Pagination */
        .pagination .page-link {
            border-radius: 6px;
            margin: 0 3px;
            border: 2px solid var(--gray-200);
            color: var(--primary);
            font-weight: 600;
            padding: 6px 12px;
            transition: all 0.2s ease;
        }

        .pagination .page-link:hover {
            background: var(--primary-bg);
            border-color: var(--primary-light);
        }

        .pagination .page-item.active .page-link {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        @media (max-width: 576px) {
            .pagination .page-link {
                padding: 4px 8px;
                font-size: 13px;
            }
        }

        /* Revenue Badge */
        .revenue-badge {
            background: var(--warning);
            color: white;
            padding: 3px 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Expansion */
        .expansion-toggle {
            cursor: pointer;
            color: var(--primary);
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border-radius: 6px;
            background: var(--primary-bg);
        }

        .expansion-toggle:hover {
            background: var(--primary-lighter);
        }

        .expansion-content {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px dashed var(--gray-300);
            display: none;
        }

        .expansion-content.show {
            display: block;
        }

        /* Modal */
        .modal-content.modern-modal {
            border-radius: 16px;
            border: none;
        }

        .modal-header.modern-header {
            background: var(--primary);
            border: none;
            padding: 24px;
            border-radius: 16px 16px 0 0;
        }

        .modal-header.modern-header .modal-title {
            color: white;
            font-size: 20px;
            font-weight: 700;
        }

        .balance-display {
            background: var(--primary-bg);
            border: 2px solid var(--primary-lighter);
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 24px;
        }

        .balance-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--primary);
            margin-bottom: 8px;
        }

        .balance-value {
            font-size: 32px;
            font-weight: 800;
            color: var(--primary);
        }

        @media (max-width: 576px) {
            .balance-value {
                font-size: 24px;
            }
        }

        /* Toggle */
        .modern-toggle {
            display: flex;
            gap: 0;
            padding: 4px;
            background: var(--gray-100);
            border-radius: 10px;
            margin-bottom: 24px;
            position: relative;
        }

        .toggle-slider {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 4px);
            height: calc(100% - 8px);
            background: white;
            border-radius: 8px;
            transition: transform 0.3s ease;
            z-index: 1;
            border: 2px solid var(--gray-200);
        }

        .toggle-option {
            flex: 1;
            position: relative;
            z-index: 2;
        }

        .toggle-option input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .toggle-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 16px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .toggle-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: all 0.2s ease;
            background: var(--gray-200);
        }

        .toggle-option.credit .toggle-icon {
            color: var(--success);
        }

        .toggle-option.debit .toggle-icon {
            color: var(--primary);
        }

        .toggle-option input[type="radio"]:checked+.toggle-label .toggle-icon.credit {
            background: var(--success);
            color: white;
        }

        .toggle-option input[type="radio"]:checked+.toggle-label .toggle-icon.debit {
            background: var(--primary);
            color: white;
        }

        .toggle-text {
            font-weight: 700;
            font-size: 12px;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .toggle-option input[type="radio"]:checked+.toggle-label .toggle-text {
            color: var(--gray-900);
        }

        .toggle-desc {
            font-size: 10px;
            color: var(--gray-400);
        }

        .modern-toggle:has(.toggle-option.debit input:checked) .toggle-slider {
            transform: translateX(calc(100% + 4px));
        }

        /* Inputs */
        .modern-input {
            border: 2px solid var(--gray-200);
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 15px;
            transition: all 0.2s ease;
        }

        .modern-input:focus {
            border-color: var(--primary);
            outline: none;
        }

        .input-group-modern {
            border-radius: 10px;
            overflow: hidden;
        }

        .input-group-modern .input-group-text {
            background: var(--primary);
            color: white;
            border: none;
            font-weight: 700;
            font-size: 16px;
            padding: 0 16px;
        }

        /* Buttons */
        .btn-modern {
            padding: 12px 24px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-modern-cancel {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .btn-modern-cancel:hover {
            background: var(--gray-200);
        }

        .btn-modern-submit {
            background: var(--primary);
            color: white;
        }

        .btn-modern-submit:hover {
            background: var(--primary-hover);
        }

        @media (max-width: 576px) {
            .btn-modern {
                padding: 10px 20px;
                font-size: 13px;
            }
        }

        /* Responsive Stack */
        @media (max-width: 768px) {
            .actor-content-wrapper {
                flex-direction: column !important;
            }

            .actor-balance-wrapper {
                width: 100% !important;
                margin-top: 16px;
                text-align: left !important;
                margin-left: 0 !important;
            }
        }

        /* Responsive Stats */
        @media (max-width: 576px) {
            .stats-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <div class="page-header">
        <h3>
            <i class="bi bi-wallet2 me-2"></i>
            Adjustment Saldo Aktor
        </h3>
        <p>Kelola dan sesuaikan saldo untuk semua aktor sistem</p>
    </div>

    <div class="card content-card">
        <div class="card-body p-3 p-md-4">
            <!-- Controls -->
            <div class="row g-3 mb-3 mb-md-4">
                <div class="col-12 col-md-auto flex-grow-1">
                    <div class="search-wrapper">
                        <i class="bi bi-search"></i>
                        <input type="search" class="form-control search-control" id="dt-search-actor"
                            placeholder="Cari nama, kode, email..." />
                    </div>
                </div>
                <div class="col-12 col-sm-auto">
                    <select id="dt-length-actor" class="form-select select-control">
                        <option value="10">10 per halaman</option>
                        <option value="25">25 per halaman</option>
                        <option value="50">50 per halaman</option>
                        <option value="100">100 per halaman</option>
                    </select>
                </div>
            </div>

            <!-- Actor Cards Container -->
            <div id="actor-cards-container"></div>

            <!-- Skeleton Loader -->
            <div id="skeleton-loader" style="display: none;">
                @for ($i = 0; $i < 3; $i++)
                    <div class="actor-card skeleton-shimmer" style="height: 160px;"></div>
                @endfor
            </div>

            <!-- Empty State -->
            <div id="empty-state" style="display: none;" class="text-center py-5">
                <i class="bi bi-inbox" style="font-size: 64px; color: var(--gray-300);"></i>
                <h5 class="text-muted mt-3 fw-bold">Tidak ada data ditemukan</h5>
                <p class="text-muted">Coba ubah kata kunci pencarian Anda</p>
            </div>

            <!-- Pagination -->
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3 mt-4">
                <div id="pagination-info" class="text-muted fw-semibold small"></div>
                <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
            </div>
        </div>
    </div>

    <!-- Modern Modal -->
    <div class="modal fade" id="modalAdjustment" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content modern-modal">
                <form id="adjustment-form" method="POST">
                    @csrf

                    <!-- Header -->
                    <div class="modal-header modern-header">
                        <h5 class="modal-title" id="modal-actor-name">
                            <i class="bi bi-wallet2 me-2"></i>
                            Adjustment Saldo
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>

                    <!-- Body -->
                    <div class="modal-body p-3 p-md-4">
                        <!-- Balance Display -->
                        <div class="balance-display">
                            <div class="text-center">
                                <div class="balance-label">Saldo Saat Ini</div>
                                <div class="balance-value" id="modal-current-balance">Rp 0</div>
                            </div>
                        </div>

                        <!-- Toggle Switch -->
                        <div class="modern-toggle">
                            <div class="toggle-slider"></div>
                            <div class="toggle-option credit">
                                <input type="radio" name="direction" id="adj-credit" value="credit" checked>
                                <label class="toggle-label" for="adj-credit">
                                    <div class="toggle-icon credit">
                                        <i class="bi bi-plus-circle-fill"></i>
                                    </div>
                                    <span class="toggle-text">Tambah</span>
                                    <span class="toggle-desc">Credit</span>
                                </label>
                            </div>
                            <div class="toggle-option debit">
                                <input type="radio" name="direction" id="adj-debit" value="debit">
                                <label class="toggle-label" for="adj-debit">
                                    <div class="toggle-icon debit">
                                        <i class="bi bi-dash-circle-fill"></i>
                                    </div>
                                    <span class="toggle-text">Kurang</span>
                                    <span class="toggle-desc">Debit</span>
                                </label>
                            </div>
                        </div>

                        <!-- Amount Input -->
                        <div class="mb-3 mb-md-4">
                            <label for="adj-amount" class="form-label fw-bold mb-2">Nominal Adjustment</label>
                            <div class="input-group input-group-modern">
                                <span class="input-group-text">Rp</span>
                                <input type="number" step="0.01" class="form-control modern-input" id="adj-amount"
                                    name="amount" placeholder="Masukkan nominal..." required>
                            </div>
                        </div>

                        <!-- Notes Input -->
                        <div class="mb-3">
                            <label for="adj-notes" class="form-label fw-bold mb-2">Keterangan / Alasan</label>
                            <textarea class="form-control modern-input" id="adj-notes" name="notes" rows="4"
                                placeholder="Contoh: Koreksi kesalahan input, Bonus performa..." required></textarea>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="modal-footer border-0 p-3 p-md-4" style="background: var(--gray-50);">
                        <button type="button" class="btn btn-modern btn-modern-cancel" data-bs-dismiss="modal">
                            <i class="bi bi-x-lg me-1"></i>Batal
                        </button>
                        <button type="submit" class="btn btn-modern btn-modern-submit" id="btn-submit-adjustment">
                            <i class="bi bi-check-lg me-1"></i>Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const cardsContainer = document.getElementById("actor-cards-container");
            const skeletonLoader = document.getElementById("skeleton-loader");
            const emptyState = document.getElementById("empty-state");
            const searchInput = document.getElementById("dt-search-actor");
            const lengthSelect = document.getElementById("dt-length-actor");
            const paginationContainer = document.getElementById("pagination");
            const paginationInfo = document.getElementById("pagination-info");

            let currentSort = "name";
            let currentSortDir = "asc";
            let currentPage = 1;
            let currentLength = parseInt(lengthSelect.value);

            function fetchActors() {
                toggleLoading(true);

                axios.get("{{ route('actor-balance.data') }}", {
                        params: {
                            search: searchInput.value,
                            page: currentPage,
                            length: currentLength,
                            sort: currentSort,
                            direction: currentSortDir
                        }
                    })
                    .then(response => {
                        const data = response.data;
                        const actors = data.data;

                        if (actors.length === 0) {
                            showEmptyState();
                        } else {
                            renderCards(actors);
                        }

                        renderPagination(data);
                        toggleLoading(false);
                    })
                    .catch(error => {
                        console.error("Error fetching actors:", error);
                        Swal.fire('Error', 'Gagal memuat data aktor.', 'error');
                        toggleLoading(false);
                    });
            }

            function renderCards(actors) {
                cardsContainer.innerHTML = actors.map(actor => {
                    const balance = actor.user?.balance?.balance || 0;
                    const formattedBalance = new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        minimumFractionDigits: 0
                    }).format(balance);

                    const isOnline = actor.user?.status == 1;
                    const statusDot = isOnline ? '<span class="status-online"></span>' :
                        '<span class="status-offline"></span>';

                    return `
                        <div class="actor-card">
                            <div class="d-flex actor-content-wrapper">
                                <div class="d-flex gap-3 flex-grow-1">
                                    <div class="actor-avatar">
                                        ${actor.name.charAt(0)}
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                                            <h5 class="mb-0 fw-bold" style="color: var(--gray-900);">${actor.name}</h5>
                                            <span class="type-badge ${actor.type}">${actor.type}</span>
                                            <span class="badge" style="background: var(--gray-100); color: var(--gray-700); font-weight: 600; font-size: 11px;">${actor.code}</span>
                                        </div>
                                        
                                        <div class="row g-2 mb-2">
                                            <div class="col-12 col-md-6">
                                                <div class="info-row">
                                                    <i class="bi bi-telephone"></i>
                                                    <span>${actor.phone_number || '-'}</span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <div class="info-row">
                                                    <i class="bi bi-envelope"></i>
                                                    <span class="text-truncate">${actor.email || actor.user?.email || '-'}</span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="info-row">
                                                    <i class="bi bi-geo-alt"></i>
                                                    <span class="text-truncate">${actor.address}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-wrap gap-3 align-items-center stats-row">
                                            <div class="info-row mb-0">
                                                ${statusDot}
                                                <span class="info-label">Status:</span>
                                                <span style="font-weight: 600;">${isOnline ? 'Active' : 'Inactive'}</span>
                                            </div>
                                            <div class="info-row mb-0">
                                                <span class="info-label">Revenue:</span>
                                                <span class="revenue-badge">${actor.revenue_share}%</span>
                                            </div>
                                            <div class="info-row mb-0">
                                                <span class="info-label">COD:</span>
                                                <span style="font-weight: 600;">${actor.is_cod ? '✓' : '✗'}</span>
                                            </div>
                                            <div class="info-row mb-0">
                                                <span class="info-label">Shipping:</span>
                                                <span style="font-weight: 600;">${actor.is_shipping ? '✓' : '✗'}</span>
                                            </div>
                                        </div>

                                        <div class="expansion-toggle mt-2" onclick="toggleExpansion(${actor.id})">
                                            <i class="bi bi-caret-down-fill"></i>
                                            <span>Detail</span>
                                        </div>

                                        <div class="expansion-content" id="expansion-${actor.id}">
                                            <div class="row g-3">
                                                <div class="col-6 col-md-3">
                                                    <small class="text-muted d-block fw-semibold mb-1">User ID</small>
                                                    <strong style="color: var(--gray-800); font-size: 14px;">${actor.user_id || '-'}</strong>
                                                </div>
                                                <div class="col-6 col-md-3">
                                                    <small class="text-muted d-block fw-semibold mb-1">Username</small>
                                                    <strong style="color: var(--gray-800); font-size: 14px;">${actor.user?.username || '-'}</strong>
                                                </div>
                                                <div class="col-6 col-md-3">
                                                    <small class="text-muted d-block fw-semibold mb-1">Terdaftar</small>
                                                    <strong style="color: var(--gray-800); font-size: 14px;">${new Date(actor.created_at).toLocaleDateString('id-ID', {
                                                        day: 'numeric',
                                                        month: 'short',
                                                        year: 'numeric'
                                                    })}</strong>
                                                </div>
                                                <div class="col-6 col-md-3">
                                                    <small class="text-muted d-block fw-semibold mb-1">Update</small>
                                                    <strong style="color: var(--gray-800); font-size: 14px;">${new Date(actor.updated_at).toLocaleDateString('id-ID', {
                                                        day: 'numeric',
                                                        month: 'short',
                                                        year: 'numeric'
                                                    })}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="actor-balance-wrapper ms-3">
                                    <div class="balance-badge ${balance > 0 ? '' : 'empty'} mb-2">
                                        ${formattedBalance}
                                    </div>
                                    <button type="button" class="btn btn-adjustment" 
                                        onclick="showAdjustmentModal(${JSON.stringify(actor).replace(/"/g, '&quot;')})">
                                        <i class="bi bi-sliders me-1"></i> Adjust
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');

                cardsContainer.style.display = 'block';
                emptyState.style.display = 'none';
            }

            window.toggleExpansion = function(actorId) {
                const content = document.getElementById(`expansion-${actorId}`);
                content.classList.toggle('show');
            };

            let searchTimer;
            searchInput.addEventListener("input", () => {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => {
                    currentPage = 1;
                    fetchActors();
                }, 500);
            });

            lengthSelect.addEventListener("change", () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                fetchActors();
            });

            function toggleLoading(show) {
                if (show) {
                    cardsContainer.style.display = 'none';
                    emptyState.style.display = 'none';
                    skeletonLoader.style.display = 'block';
                } else {
                    skeletonLoader.style.display = 'none';
                }
            }

            function showEmptyState() {
                cardsContainer.style.display = 'none';
                emptyState.style.display = 'block';
            }

            function renderPagination(data) {
                const {
                    current_page,
                    last_page,
                    from,
                    to,
                    total
                } = data;
                paginationInfo.innerText = `${from || 0} - ${to || 0} dari ${total}`;

                let html = '';
                const maxVisible = 5;

                html += `<li class="page-item ${current_page === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(1); return false;"><i class="bi bi-chevron-double-left"></i></a>
                </li>`;
                html += `<li class="page-item ${current_page === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${current_page - 1}); return false;"><i class="bi bi-chevron-left"></i></a>
                </li>`;

                let start = Math.max(1, current_page - Math.floor(maxVisible / 2));
                let end = Math.min(last_page, start + maxVisible - 1);
                if (end === last_page) start = Math.max(1, end - maxVisible + 1);

                for (let i = start; i <= end; i++) {
                    html += `
                        <li class="page-item ${i === current_page ? 'active' : ''}">
                            <a class="page-link" href="#" onclick="changePage(${i}); return false;">${i}</a>
                        </li>
                    `;
                }

                html += `<li class="page-item ${current_page === last_page ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${current_page + 1}); return false;"><i class="bi bi-chevron-right"></i></a>
                </li>`;
                html += `<li class="page-item ${current_page === last_page ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${last_page}); return false;"><i class="bi bi-chevron-double-right"></i></a>
                </li>`;

                paginationContainer.innerHTML = html;
            }

            window.changePage = function(page) {
                if (page < 1) return;
                currentPage = page;
                fetchActors();
            };

            window.showAdjustmentModal = function(actor) {
                const modal = new bootstrap.Modal(document.getElementById('modalAdjustment'));
                document.getElementById('modal-actor-name').innerHTML =
                    `<i class="bi bi-wallet2 me-2"></i>Adjustment: ${actor.name}`;

                const balance = actor.user?.balance?.balance || 0;
                const formattedBalance = new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(balance);
                document.getElementById('modal-current-balance').innerText = formattedBalance;

                const form = document.getElementById('adjustment-form');
                form.action = `/actor-balance/${actor.id}/adjust`;
                form.reset();
                document.getElementById('adj-credit').checked = true;

                modal.show();
            };

            const form = document.getElementById('adjustment-form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const btnSubmit = document.getElementById('btn-submit-adjustment');
                const originalText = btnSubmit.innerHTML;
                btnSubmit.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
                btnSubmit.disabled = true;

                const formData = new FormData(this);
                const action = this.action;

                axios.post(action, formData)
                    .then(response => {
                        const modalElement = document.getElementById('modalAdjustment');
                        bootstrap.Modal.getInstance(modalElement).hide();

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Saldo aktor berhasil diperbarui.',
                            timer: 2000,
                            showConfirmButton: false
                        });

                        fetchActors();
                    })
                    .catch(error => {
                        console.error("Adjustment error:", error);
                        const message = error.response?.data?.message || 'Gagal memperbarui saldo.';
                        Swal.fire('Error', message, 'error');
                    })
                    .finally(() => {
                        btnSubmit.innerHTML = originalText;
                        btnSubmit.disabled = false;
                    });
            });

            fetchActors();
        });
    </script>
@endpush