@extends('template.desktop.app')

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

@push('styles')
    <style>
        :root {
            --adj-primary: #6366f1;
            --adj-primary-soft: rgba(99, 102, 241, 0.08);
            --adj-primary-dark: #4f46e5;
            --adj-success: #10b981;
            --adj-success-bg: rgba(16, 185, 129, 0.08);
            --adj-danger: #ef4444;
            --adj-danger-bg: rgba(239, 68, 68, 0.08);
            --adj-surface: #fff;
            --adj-bg: #f8fafc;
            --adj-border: #e2e8f0;
            --adj-text: #0f172a;
            --adj-text-sec: #64748b;
            --adj-text-muted: #94a3b8;
            --adj-radius: 14px;
            --adj-radius-lg: 20px;
            --adj-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .adj-header {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
            border-radius: var(--adj-radius-lg);
            padding: 2rem 2.5rem;
            color: #fff;
            margin-bottom: 2rem;
        }

        .adj-card {
            background: var(--adj-surface);
            border-radius: var(--adj-radius-lg);
            border: 1px solid var(--adj-border);
            box-shadow: var(--adj-shadow-sm);
            overflow: hidden;
        }

        .adj-table {
            width: 100%;
            border-collapse: collapse;
        }

        .adj-table thead th {
            background: var(--adj-bg);
            padding: 0.75rem 1.25rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--adj-text-muted);
            border-bottom: 1px solid var(--adj-border);
            text-align: left;
        }

        .adj-table tbody td {
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
            font-size: 0.835rem;
        }

        .adj-table tbody tr {
            transition: background 0.1s;
        }

        .adj-table tbody tr:hover {
            background: var(--adj-primary-soft);
        }

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

        .adj-badge {
            padding: 0.3rem 0.65rem;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.65rem;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            line-height: 1;
        }

        .adj-btn {
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.8rem;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            border: none;
            cursor: pointer;
        }

        .adj-btn:hover {
            transform: translateY(-1px);
        }

        .adj-btn-primary {
            background: var(--adj-primary);
            color: #fff;
        }

        .adj-btn-primary:hover {
            background: var(--adj-primary-dark);
            color: #fff;
        }

        .adj-btn-success {
            background: var(--adj-success);
            color: #fff;
        }

        .adj-btn-danger {
            background: var(--adj-danger);
            color: #fff;
        }

        .adj-btn-white {
            background: var(--adj-surface);
            color: var(--adj-text);
            border: 1px solid var(--adj-border);
        }

        .adj-search {
            position: relative;
            width: 100%;
            max-width: 340px;
        }

        .adj-search input {
            width: 100%;
            padding: 0.65rem 1rem 0.65rem 2.75rem;
            border-radius: 10px;
            border: 1px solid var(--adj-border);
            background: var(--adj-surface);
            font-size: 0.835rem;
            font-weight: 500;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .adj-search input:focus {
            border-color: var(--adj-primary);
            box-shadow: 0 0 0 3px var(--adj-primary-soft);
            outline: none;
        }

        .adj-search-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--adj-text-muted);
            pointer-events: none;
            width: 16px;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 0.55rem 0;
            border-bottom: 1px dashed #f1f5f9;
        }

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

        .detail-label {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--adj-text-sec);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .detail-value {
            font-weight: 700;
            color: var(--adj-text);
            font-size: 0.85rem;
        }

        .trx-item {
            padding: 0.6rem 0;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .trx-item:last-child {
            border-bottom: none;
        }

        .pagination-adj .page-item .page-link {
            border: none;
            color: var(--adj-text-sec);
            font-weight: 600;
            font-size: 0.8rem;
            border-radius: 8px !important;
            min-width: 34px;
            text-align: center;
            padding: 6px 12px;
        }

        .pagination-adj .page-item .page-link:hover {
            background: var(--adj-primary-soft);
            color: var(--adj-primary);
        }

        .pagination-adj .page-item.active .page-link {
            background: var(--adj-primary);
            color: #fff;
        }

        .pagination-adj .page-item.disabled .page-link {
            opacity: 0.35;
        }

        .balance-positive {
            color: var(--adj-success);
        }

        .balance-negative {
            color: var(--adj-danger);
        }

        .cs-avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.85rem;
            color: #fff;
            flex-shrink: 0;
        }
    </style>
@endpush

@section('content')
    <div class="px-3 p-lg-0">
        <!-- Header -->
        <header class="adj-header">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-3 d-flex align-items-center justify-content-center"
                            style="width: 44px; height: 44px; background: rgba(255,255,255,0.12);">
                            <i data-lucide="scale" style="width: 22px; color: #fff;"></i>
                        </div>
                        <div>
                            <h2 class="fw-bold mb-0" style="font-size: 1.6rem; letter-spacing: -0.02em;">Adjustment Saldo CS
                            </h2>
                            <p class="mb-0" style="font-size: 0.85rem; opacity: 0.8;">Kelola penambahan & pemotongan saldo
                                Customer Service</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Search -->
        <div class="d-flex justify-content-between align-items-center gap-3 mb-4">
            <div class="adj-search">
                <i data-lucide="search" class="adj-search-icon" style="width: 18px;"></i>
                <input type="text" id="adj-search" placeholder="Cari nama CS, email, atau telepon...">
            </div>
            <span class="text-muted small fw-bold" id="adj-total">0 CS</span>
        </div>

        <!-- CS Table -->
        <div class="adj-card">
            <div class="table-responsive">
                <table class="adj-table">
                    <thead>
                        <tr>
                            <th>Customer Service</th>
                            <th class="text-center">Total Box</th>
                            <th class="text-end">Total Bonus</th>
                            <th class="text-end">Saldo</th>
                            <th class="text-end">Total Credit</th>
                            <th class="text-end">Total Debit</th>
                            <th class="text-end" width="220">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="adj-table-body"></tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="p-4 border-top d-flex flex-wrap justify-content-between align-items-center gap-3"
                style="background: var(--adj-bg);">
                <span class="text-muted small fw-bold" id="adj-info">0-0 dari 0</span>
                <nav>
                    <ul class="pagination pagination-sm pagination-adj mb-0" id="adj-pagination"></ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Adjustment Modal -->
    <div class="modal fade" id="adjustModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content" style="border: none; border-radius: 24px; overflow: hidden;">
                <div class="modal-header border-0 p-4 pb-0 bg-white">
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3"
                            style="width: 44px; height: 44px; background: var(--adj-primary-soft);">
                            <i data-lucide="user" style="width: 20px; color: var(--adj-primary);"></i>
                        </div>
                        <div>
                            <h5 class="fw-800 mb-0" style="font-size: 1.1rem;" id="modal-cs-name">-</h5>
                            <p class="text-muted mb-0" style="font-size: 0.75rem;" id="modal-cs-email">-</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">
                    <div id="modal-loading" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>

                    <div id="modal-content" class="d-none">
                        <div class="text-center mb-4 p-4 rounded-4"
                            style="background: var(--adj-bg); border: 2px dashed var(--adj-border);">
                            <div
                                style="font-size: 0.7rem; font-weight: 700; color: var(--adj-text-sec); text-transform: uppercase;">
                                Saldo Saat Ini</div>
                            <div class="fw-800 mt-1" id="modal-balance" style="font-size: 2rem; letter-spacing: -0.02em;">Rp
                                0</div>
                        </div>

                        <!-- Order Stats Section -->
                        <div class="mb-4">
                            <h6 class="fw-800 mb-3 d-flex align-items-center gap-2"
                                style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--adj-text-sec);">
                                <i data-lucide="bar-chart-3" style="width: 16px; color: var(--adj-primary);"></i> Statistik
                                Order
                            </h6>

                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <label class="form-label fw-bold" style="font-size: 0.7rem;">Dari Tanggal</label>
                                    <input type="date" class="form-control form-control-sm" id="stats-from"
                                        onchange="refreshStats()">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold" style="font-size: 0.7rem;">Sampai Tanggal</label>
                                    <input type="date" class="form-control form-control-sm" id="stats-to"
                                        onchange="refreshStats()">
                                </div>
                            </div>

                            <div class="row g-2" id="stats-cards">
                                <div class="col-3">
                                    <div class="text-center p-3 rounded-3" style="background: var(--adj-primary-soft);">
                                        <div class="fw-800" style="font-size: 1.3rem; color: var(--adj-primary);"
                                            id="stat-orders">0</div>
                                        <div style="font-size: 0.65rem; font-weight: 700; color: var(--adj-text-sec);">
                                            TOTAL BOX</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="text-center p-3 rounded-3" style="background: var(--adj-success-bg);">
                                        <div class="fw-800" style="font-size: 1.3rem; color: var(--adj-success);"
                                            id="stat-bonus">0</div>
                                        <div style="font-size: 0.65rem; font-weight: 700; color: var(--adj-text-sec);">
                                            TOTAL BONUS</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="text-center p-3 rounded-3" style="background: var(--adj-danger-bg);">
                                        <div class="fw-800" style="font-size: 1.3rem; color: var(--adj-danger);"
                                            id="stat-deduction">0</div>
                                        <div style="font-size: 0.65rem; font-weight: 700; color: var(--adj-text-sec);">
                                            POTONGAN</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="text-center p-3 rounded-3" style="background: rgba(245,158,11,0.08);">
                                        <div class="fw-800" style="font-size: 1.3rem; color: #f59e0b;" id="stat-pending">
                                            0</div>
                                        <div style="font-size: 0.65rem; font-weight: 700; color: var(--adj-text-sec);">
                                            PENDING</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Adjustment Form -->
                        <h6 class="fw-800 mb-3 d-flex align-items-center gap-2"
                            style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--adj-text-sec);">
                            <i data-lucide="settings" style="width: 16px; color: var(--adj-primary);"></i> Adjustment Baru
                        </h6>

                        <div class="row g-3 mb-3">
                            <div class="col-md-5">
                                <label class="form-label fw-bold" style="font-size: 0.75rem;">Tipe Adjustment</label>
                                <select class="form-select" id="adj-direction">
                                    <option value="credit">+ Tambah Saldo</option>
                                    <option value="debit">- Potong Saldo</option>
                                </select>
                            </div>
                            <div class="col-md-7">
                                <label class="form-label fw-bold" style="font-size: 0.75rem;">Jumlah (Rp)</label>
                                <input type="number" class="form-control" id="adj-amount" min="1"
                                    placeholder="Masukkan jumlah...">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-bold d-flex align-items-center gap-1" style="font-size: 0.75rem;">
                                <i data-lucide="message-square" style="width: 14px; color: var(--adj-primary);"></i>
                                Alasan <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" id="adj-reason" rows="3"
                                placeholder="Contoh: Potongan karena retur order #12345, Bonus tambahan untuk performa..."></textarea>
                        </div>

                        <!-- Preview -->
                        <div class="p-3 rounded-4 mb-4 d-none" id="adj-preview"
                            style="border: 2px solid var(--adj-border);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="small text-muted fw-bold">Saldo Setelah Adjustment</div>
                                    <div class="fw-800" id="adj-preview-balance" style="font-size: 1.4rem;">Rp 0</div>
                                </div>
                                <div id="adj-preview-badge" class="adj-badge" style="font-size: 0.75rem;">-</div>
                            </div>
                        </div>

                        <!-- Recent History -->
                        <h6 class="fw-800 mb-3 d-flex align-items-center gap-2"
                            style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--adj-text-sec);">
                            <i data-lucide="history" style="width: 16px; color: var(--adj-primary);"></i> Riwayat
                            Transaksi Terakhir
                        </h6>

                        <div id="trx-list" class="rounded-4"
                            style="background: var(--adj-bg); padding: 0.75rem 1rem; max-height: 250px; overflow-y: auto;">
                            <div class="text-center text-muted small py-3">Memuat...</div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex gap-3">
                    <button type="button" class="adj-btn adj-btn-white flex-grow-1 justify-content-center py-2"
                        data-bs-dismiss="modal" style="border-radius: 12px;">Batal</button>
                    <button type="button" class="adj-btn adj-btn-primary flex-grow-1 justify-content-center py-2"
                        id="btn-confirm" style="border-radius: 12px;">
                        <i data-lucide="check" style="width: 14px;"></i> Proses Adjustment
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>

    <script>
        let currentPage = 1;
        let currentCsId = null;
        let currentBalance = 0;

        function fmt(n) {
            return 'Rp ' + Number(n || 0).toLocaleString('id-ID');
        }

        // Avatar color from name
        function avatarColor(name) {
            const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#ef4444', '#14b8a6'];
            let hash = 0;
            for (let i = 0; i < (name || '').length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
            return colors[Math.abs(hash) % colors.length];
        }

        // ─── Load Data ───
        async function loadData() {
            const tbody = document.getElementById('adj-table-body');
            tbody.innerHTML =
                '<tr><td colspan="7" class="text-center py-5"><div class="spinner-border spinner-border-sm"></div></td></tr>';

            const search = document.getElementById('adj-search').value;
            const params = new URLSearchParams({
                page: currentPage,
                limit: 20,
                ...(search ? {
                    search
                } : {})
            });

            try {
                const resp = await axios.get('{{ route('checking.balance-adjustment.data') }}?' + params);
                const json = resp.data;

                document.getElementById('adj-total').textContent = (json.total || 0) + ' CS';
                document.getElementById('adj-info').textContent = (json.from || 0) + '-' + (json.to || 0) + ' dari ' + (
                    json.total || 0);

                renderPagination(json);

                const items = json.data || [];
                if (!items.length) {
                    tbody.innerHTML =
                        '<tr><td colspan="7" class="text-center py-5 text-muted">Tidak ada data CS.</td></tr>';
                    return;
                }

                tbody.innerHTML = items.map(cs => {
                    const initials = (cs.name || '?').split(' ').map(w => w[0]).join('').substring(0, 2)
                        .toUpperCase();
                    const balClass = cs.balance >= 0 ? 'balance-positive' : 'balance-negative';

                    return '<tr>' +
                        '<td>' +
                        '<div class="d-flex align-items-center gap-3">' +
                        '<div class="cs-avatar" style="background: ' + avatarColor(cs.name) + ';">' + initials +
                        '</div>' +
                        '<div>' +
                        '<div class="fw-800">' + cs.name + '</div>' +
                        '<div class="text-muted small">' + cs.email + ' &bull; ' + cs.phone + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</td>' +
                        '<td class="text-center">' +
                        '<div class="fw-800" style="font-size: 1.1rem; color: var(--adj-primary);"> ' + (cs
                            .total_box || 0) + '</div>' +
                        '<div class="text-muted" style="font-size: 0.65rem;">box</div>' +
                        '</td>' +
                        '<td class="text-end"><div class="fw-700" style="color: var(--adj-primary); font-size: 0.85rem;">' +
                        fmt(cs.total_bonus) + '</div></td>' +
                        '<td class="text-end"><div class="fw-800 ' + balClass + '" style="font-size: 1rem;">' +
                        fmt(cs.balance) + '</div></td>' +
                        '<td class="text-end"><span class="text-success fw-700">' + fmt(cs.total_credit) +
                        '</span></td>' +
                        '<td class="text-end"><span class="text-danger fw-700">' + fmt(cs.total_debit) +
                        '</span></td>' +
                        '<td class="text-end">' +
                        '<div class="d-flex justify-content-end gap-2">' +
                        '<button class="adj-btn adj-btn-success" style="font-size: 0.75rem; padding: 0.4rem 0.75rem;" onclick="openAdjust(' +
                        cs.cs_id + ', \'credit\')">' +
                        '<i data-lucide="plus" style="width: 14px;"></i> Tambah' +
                        '</button>' +
                        '<button class="adj-btn adj-btn-danger" style="font-size: 0.75rem; padding: 0.4rem 0.75rem;" onclick="openAdjust(' +
                        cs.cs_id + ', \'debit\')">' +
                        '<i data-lucide="minus" style="width: 14px;"></i> Potong' +
                        '</button>' +
                        '</div>' +
                        '</td>' +
                        '</tr>';
                }).join('');

                lucide.createIcons();
            } catch (e) {
                console.error(e);
                tbody.innerHTML =
                    '<tr><td colspan="7" class="text-center py-5 text-danger">Gagal memuat data.</td></tr>';
            }
        }

        // ─── Pagination ───
        function renderPagination(json) {
            const el = document.getElementById('adj-pagination');
            if (!json.last_page || json.last_page <= 1) {
                el.innerHTML = '';
                return;
            }
            let html = '';
            html += '<li class="page-item ' + (json.current_page <= 1 ? 'disabled' : '') +
                '"><a class="page-link" href="#" onclick="goPage(' + (json.current_page - 1) +
                '); return false;">‹</a></li>';
            for (let i = 1; i <= json.last_page; i++) {
                if (i === 1 || i === json.last_page || Math.abs(i - json.current_page) <= 2) {
                    html += '<li class="page-item ' + (i === json.current_page ? 'active' : '') +
                        '"><a class="page-link" href="#" onclick="goPage(' + i + '); return false;">' + i + '</a></li>';
                } else if (Math.abs(i - json.current_page) === 3) {
                    html += '<li class="page-item disabled"><span class="page-link">…</span></li>';
                }
            }
            html += '<li class="page-item ' + (json.current_page >= json.last_page ? 'disabled' : '') +
                '"><a class="page-link" href="#" onclick="goPage(' + (json.current_page + 1) +
                '); return false;">›</a></li>';
            el.innerHTML = html;
        }

        function goPage(p) {
            currentPage = p;
            loadData();
        }

        // ─── Search ───
        let searchTimer;
        document.getElementById('adj-search').addEventListener('input', function() {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(() => {
                currentPage = 1;
                loadData();
            }, 400);
        });

        // ─── Open Adjust Modal ───
        async function openAdjust(csId, defaultDir) {
            currentCsId = csId;
            const modal = new bootstrap.Modal(document.getElementById('adjustModal'));
            modal.show();

            document.getElementById('modal-loading').classList.remove('d-none');
            document.getElementById('modal-content').classList.add('d-none');
            document.getElementById('adj-amount').value = '';
            document.getElementById('adj-reason').value = '';
            document.getElementById('adj-direction').value = defaultDir || 'credit';
            document.getElementById('adj-preview').classList.add('d-none');

            try {
                const resp = await axios.get('{{ url('checking/balance-adjustment') }}/' + csId + '/detail');
                const d = resp.data.data;

                currentBalance = d.balance;

                document.getElementById('modal-cs-name').textContent = d.name;
                document.getElementById('modal-cs-email').textContent = d.email + ' • ' + d.phone;

                const balEl = document.getElementById('modal-balance');
                balEl.textContent = fmt(d.balance);
                balEl.className = 'fw-800 mt-1 ' + (d.balance >= 0 ? 'balance-positive' : 'balance-negative');

                // Set date inputs & render stats
                if (d.order_stats) {
                    document.getElementById('stats-from').value = d.order_stats.from;
                    document.getElementById('stats-to').value = d.order_stats.to;
                    renderStats(d.order_stats);
                }

                // Render transaction history
                renderTransactions(d.recent_transactions);

                document.getElementById('modal-loading').classList.add('d-none');
                document.getElementById('modal-content').classList.remove('d-none');
                lucide.createIcons();
                updatePreview();
            } catch (e) {
                console.error(e);
                document.getElementById('modal-loading').innerHTML =
                    '<div class="text-danger">Gagal memuat data CS.</div>';
            }
        }

        // ─── Render Stats Cards ───
        function renderStats(stats) {
            document.getElementById('stat-orders').textContent = stats.total_box || 0;
            document.getElementById('stat-bonus').textContent = fmt(stats.total_bonus || 0);
            document.getElementById('stat-deduction').textContent = fmt(stats.total_deduction || 0);
            document.getElementById('stat-pending').textContent = stats.pending_count || 0;
        }

        // ─── Refresh Stats (when date changed) ───
        async function refreshStats() {
            if (!currentCsId) return;
            const from = document.getElementById('stats-from').value;
            const to = document.getElementById('stats-to').value;
            if (!from || !to) return;

            try {
                const resp = await axios.get('{{ url('checking/balance-adjustment') }}/' + currentCsId +
                    '/detail?from=' + from + '&to=' + to);
                if (resp.data.data?.order_stats) {
                    renderStats(resp.data.data.order_stats);
                }
            } catch (e) {
                console.error('Failed to refresh stats', e);
            }
        }

        // ─── Render Transactions ───
        function renderTransactions(transactions) {
            const trxList = document.getElementById('trx-list');
            if (transactions && transactions.length > 0) {
                trxList.innerHTML = transactions.map(function(trx) {
                    var dirIcon = trx.direction === 'credit' ?
                        '<span class="adj-badge" style="background: var(--adj-success-bg); color: var(--adj-success); font-size: 0.6rem;">+ CREDIT</span>' :
                        '<span class="adj-badge" style="background: var(--adj-danger-bg); color: var(--adj-danger); font-size: 0.6rem;">- DEBIT</span>';
                    var amtColor = trx.direction === 'credit' ? 'var(--adj-success)' : 'var(--adj-danger)';
                    var prefix = trx.direction === 'credit' ? '+' : '-';

                    return '<div class="trx-item">' +
                        '<div>' +
                        '<div class="fw-bold" style="font-size: 0.8rem;">' + (trx.trx_no || '-') + '</div>' +
                        '<div class="text-muted" style="font-size: 0.7rem;">' + (trx.date || '') + '</div>' +
                        '<div class="text-muted" style="font-size: 0.7rem; max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' +
                        (trx.notes || '') + '">' + (trx.notes || '-') + '</div>' +
                        '</div>' +
                        '<div class="text-end">' +
                        '<div class="fw-800" style="color: ' + amtColor + ';">' + prefix + fmt(trx.amount) +
                        '</div>' +
                        dirIcon +
                        '</div>' +
                        '</div>';
                }).join('');
            } else {
                trxList.innerHTML = '<div class="text-center text-muted small py-3">Belum ada transaksi.</div>';
            }
        }

        // ─── Preview ───
        function updatePreview() {
            const amount = parseFloat(document.getElementById('adj-amount').value) || 0;
            const dir = document.getElementById('adj-direction').value;
            const preview = document.getElementById('adj-preview');

            if (amount > 0) {
                preview.classList.remove('d-none');
                const newBal = dir === 'debit' ? currentBalance - amount : currentBalance + amount;
                document.getElementById('adj-preview-balance').textContent = fmt(newBal);
                document.getElementById('adj-preview-balance').className = 'fw-800 ' + (newBal >= 0 ? 'balance-positive' :
                    'balance-negative');

                const badge = document.getElementById('adj-preview-badge');
                if (dir === 'debit') {
                    badge.textContent = '↓ POTONG ' + fmt(amount);
                    badge.style.background = 'var(--adj-danger-bg)';
                    badge.style.color = 'var(--adj-danger)';
                    preview.style.borderColor = 'var(--adj-danger)';
                } else {
                    badge.textContent = '↑ TAMBAH ' + fmt(amount);
                    badge.style.background = 'var(--adj-success-bg)';
                    badge.style.color = 'var(--adj-success)';
                    preview.style.borderColor = 'var(--adj-success)';
                }
            } else {
                preview.classList.add('d-none');
            }
        }

        document.getElementById('adj-amount').addEventListener('input', updatePreview);
        document.getElementById('adj-direction').addEventListener('change', updatePreview);

        // ─── Confirm Adjustment ───
        document.getElementById('btn-confirm').addEventListener('click', async function() {
            const amount = parseFloat(document.getElementById('adj-amount').value);
            const direction = document.getElementById('adj-direction').value;
            const reason = document.getElementById('adj-reason').value.trim();

            if (!amount || amount <= 0) {
                Swal.fire('Perhatian', 'Jumlah harus lebih dari 0.', 'warning');
                return;
            }
            if (!reason || reason.length < 5) {
                Swal.fire('Perhatian', 'Alasan wajib diisi minimal 5 karakter.', 'warning');
                return;
            }

            const dirLabel = direction === 'debit' ? 'POTONG' : 'TAMBAH';
            const csName = document.getElementById('modal-cs-name').textContent;

            const confirm = await Swal.fire({
                title: dirLabel + ' Saldo?',
                html: '<div class="text-start">' +
                    '<p><strong>CS:</strong> ' + csName + '</p>' +
                    '<p><strong>Jumlah:</strong> ' + fmt(amount) + '</p>' +
                    '<p><strong>Tipe:</strong> ' + dirLabel + '</p>' +
                    '<p><strong>Alasan:</strong> ' + reason + '</p>' +
                    '</div>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Proses!',
                cancelButtonText: 'Batal',
                confirmButtonColor: direction === 'debit' ? '#ef4444' : '#10b981',
            });

            if (!confirm.isConfirmed) return;

            this.disabled = true;
            this.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Memproses...';

            try {
                const resp = await axios.post('{{ route('checking.balance-adjustment.adjust') }}', {
                    cs_id: currentCsId,
                    amount,
                    direction,
                    reason,
                    _token: '{{ csrf_token() }}',
                });

                Swal.fire({
                    title: 'Berhasil!',
                    html: 'Saldo berhasil di-' + dirLabel.toLowerCase() + '.<br><strong>Saldo baru: ' +
                        fmt(resp.data.new_balance) + '</strong>',
                    icon: 'success',
                });

                bootstrap.Modal.getInstance(document.getElementById('adjustModal')).hide();
                loadData();
            } catch (e) {
                Swal.fire('Gagal', e.response?.data?.message || 'Terjadi kesalahan.', 'error');
            } finally {
                this.disabled = false;
                this.innerHTML = '<i data-lucide="check" style="width: 14px;"></i> Proses Adjustment';
                lucide.createIcons();
            }
        });

        // ─── Init ───
        lucide.createIcons();
        loadData();
    </script>
@endpush