@extends('template.desktop.app')
@section('title', 'Detail Customer Service')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --csd-primary: #A52019;
            --csd-primary-soft: #fef2f1;
            --csd-bg: #f8f9fb;
            --csd-surface: #ffffff;
            --csd-border: #e5e7eb;
            --csd-border-light: #f3f4f6;
            --csd-text: #111827;
            --csd-text-sec: #6b7280;
            --csd-text-muted: #9ca3af;
            --csd-radius: 12px;
            --csd-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            --csd-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.07);
        }

        .csd-wrapper {
            font-family: 'Inter', -apple-system, system-ui, sans-serif;
            color: var(--csd-text);
            -webkit-font-smoothing: antialiased;
        }

        /* ─── Header ──────── */
        .csd-header {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 30%, #b91c1c 60%, #dc2626 100%);
            border-radius: 16px;
            padding: 1.75rem 2rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }

        .csd-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .csd-header h2 {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
            color: #fff;
        }

        .csd-header p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.8rem;
            margin: 3px 0 0;
        }

        .csd-back-btn {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
        }

        .csd-back-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .csd-back-btn svg {
            width: 14px;
            height: 14px;
        }

        /* ─── Profile Card ──────── */
        .csd-profile-card {
            background: var(--csd-surface);
            border: 1px solid var(--csd-border);
            border-radius: var(--csd-radius);
            overflow: hidden;
        }

        .csd-profile-top {
            background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
            padding: 2rem 1.5rem 3.5rem;
            text-align: center;
            position: relative;
        }

        .csd-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: 3px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.75rem;
            font-size: 2rem;
            font-weight: 800;
            color: #fff;
        }

        .csd-profile-name {
            font-size: 1.1rem;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

        .csd-profile-role {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 6px;
        }

        .csd-balance-card {
            background: var(--csd-surface);
            border: 1px solid var(--csd-border);
            border-radius: 14px;
            padding: 1rem 1.25rem;
            margin: -2.5rem 1.25rem 0;
            position: relative;
            z-index: 1;
            box-shadow: var(--csd-shadow-md);
            text-align: center;
        }

        .csd-balance-label {
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--csd-text-sec);
        }

        .csd-balance-val {
            font-size: 1.4rem;
            font-weight: 800;
            color: #16a34a;
            margin: 4px 0 8px;
        }

        .csd-btn-withdraw {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
            border: none;
            padding: 0.5rem 1.25rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .csd-btn-withdraw:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
        }

        .csd-btn-withdraw svg {
            width: 14px;
            height: 14px;
        }

        /* ─── Stats Row ──────── */
        .csd-stats-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            padding: 1.25rem;
        }

        .csd-stat-item {
            background: var(--csd-bg);
            border-radius: 10px;
            padding: 0.85rem;
            text-align: center;
        }

        .csd-stat-item .val {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--csd-text);
        }

        .csd-stat-item .lbl {
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--csd-text-sec);
            margin-top: 2px;
        }

        /* ─── Detail List ──────── */
        .csd-detail-section {
            padding: 0 1.25rem 1.25rem;
        }

        .csd-detail-title {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--csd-text-sec);
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--csd-border-light);
            margin-bottom: 0.75rem;
        }

        .csd-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.45rem 0;
            font-size: 0.8rem;
        }

        .csd-detail-row .label {
            color: var(--csd-text-sec);
            font-weight: 500;
        }

        .csd-detail-row .value {
            font-weight: 600;
            color: var(--csd-text);
            text-align: right;
        }

        /* ─── Table Card ──────── */
        .csd-table-card {
            background: var(--csd-surface);
            border: 1px solid var(--csd-border);
            border-radius: var(--csd-radius);
            overflow: hidden;
        }

        .csd-table-header {
            padding: 1.1rem 1.5rem;
            border-bottom: 1px solid var(--csd-border);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .csd-table-header h5 {
            font-size: 0.9rem;
            font-weight: 700;
            margin: 0;
            color: var(--csd-text);
        }

        .csd-table-header svg {
            width: 18px;
            height: 18px;
            color: var(--csd-primary);
        }

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

        .csd-table thead th {
            background: #f9fafb;
            padding: 0.65rem 0.85rem;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--csd-text-sec);
            border-bottom: 1px solid var(--csd-border);
            white-space: nowrap;
        }

        .csd-table tbody td {
            padding: 0.65rem 0.85rem;
            font-size: 0.78rem;
            color: var(--csd-text);
            border-bottom: 1px solid var(--csd-border-light);
            vertical-align: middle;
        }

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

        .csd-table tbody tr:hover {
            background: #fafbff;
        }

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

        /* ─── Badges ──────── */
        .csd-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.6rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .csd-badge-green {
            background: #dcfce7;
            color: #166534;
        }

        .csd-badge-yellow {
            background: #fef3c7;
            color: #92400e;
        }

        .csd-badge-red {
            background: #fee2e2;
            color: #991b1b;
        }

        .csd-badge-blue {
            background: #dbeafe;
            color: #1e40af;
        }

        .csd-badge-purple {
            background: #ede9fe;
            color: #5b21b6;
        }

        /* ─── Pagination ──────── */
        .csd-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--csd-border-light);
            background: #fafbfc;
        }

        .csd-pagination .info {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--csd-text-sec);
        }

        .csd-page-btn {
            padding: 0.35rem 0.85rem;
            border: 1px solid var(--csd-border);
            border-radius: 8px;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--csd-text-sec);
            background: var(--csd-surface);
            cursor: pointer;
            transition: all 0.15s;
        }

        .csd-page-btn:hover:not(:disabled) {
            background: var(--csd-primary-soft);
            color: var(--csd-primary);
            border-color: var(--csd-primary);
        }

        .csd-page-btn:disabled {
            opacity: 0.35;
            cursor: default;
        }

        /* ─── Empty ──────── */
        .csd-empty {
            text-align: center;
            padding: 3rem 1.5rem;
            color: var(--csd-text-muted);
            font-size: 0.82rem;
        }

        /* ─── Modals ──────── */
        .modal-backdrop.show {
            opacity: 0.85;
            background-color: rgba(0, 0, 0, 0.9);
        }

        .modal-backdrop {
            backdrop-filter: blur(3px);
        }

        .modal.fade .modal-dialog {
            transform: scale(0.96);
            transition: transform .15s ease-out;
        }

        .modal.show .modal-dialog {
            transform: scale(1);
        }

        .csd-modal .modal-content {
            border: none;
            border-radius: 16px;
            overflow: hidden;
        }

        .csd-modal .modal-header {
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
            padding: 1.1rem 1.5rem;
        }

        .csd-modal .modal-title {
            font-size: 0.9rem;
            font-weight: 700;
        }

        .csd-modal .modal-footer {
            background: #f9fafb;
            border-top: 1px solid #e5e7eb;
            padding: 0.85rem 1.5rem;
        }

        @media (max-width: 991px) {
            .csd-layout {
                flex-direction: column;
            }
        }
    </style>
@endpush

@section('content')
    <div class="csd-wrapper px-3 py-3 px-lg-4">

        {{-- Header --}}
        <header class="csd-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-flex align-items-center justify-content-center rounded-3"
                        style="width:42px;height:42px;background:rgba(255,255,255,0.1);">
                        <i data-lucide="user-circle" style="width:22px;color:#fbbf24;"></i>
                    </div>
                    <div>
                        <h2>Detail Customer Service</h2>
                        <p>Informasi lengkap dan riwayat transaksi CS</p>
                    </div>
                </div>
                <a href="{{ route('customer-services.index') }}" class="csd-back-btn">
                    <i data-lucide="arrow-left"></i> Kembali
                </a>
            </div>
        </header>

        <div class="row g-4">
            {{-- Left: Profile --}}
            <div class="col-xl-4 col-lg-5">
                <div class="csd-profile-card">
                    {{-- Profile Top --}}
                    <div class="csd-profile-top">
                        <div class="csd-avatar" id="cs-avatar">?</div>
                        <h4 class="csd-profile-name" id="cs-name">-</h4>
                        <div class="csd-profile-role" id="cs-role">-</div>
                    </div>

                    {{-- Balance Card --}}
                    <div class="csd-balance-card">
                        <div class="csd-balance-label">Saldo Saat Ini</div>
                        <div class="csd-balance-val">Rp
                            {{ number_format($customerService->user->balance->balance ?? 0, 0, ',', '.') }}</div>
                        <button type="button" class="csd-btn-withdraw" data-bs-toggle="modal"
                            data-bs-target="#withdrawModal">
                            <i data-lucide="arrow-up-right"></i> Withdraw
                        </button>
                    </div>

                    {{-- Stats --}}
                    <div class="csd-stats-row">
                        <div class="csd-stat-item">
                            <div class="val" style="color:#7c3aed;" id="total-box">0</div>
                            <div class="lbl">Total Box</div>
                        </div>
                        <div class="csd-stat-item">
                            <div class="val" style="color:#db2777;" id="total-sachet">0</div>
                            <div class="lbl">Total Sachet</div>
                        </div>
                    </div>

                    {{-- Detail Info --}}
                    <div class="csd-detail-section">
                        <div class="csd-detail-title">Informasi CS</div>
                        <div class="csd-detail-row">
                            <span class="label">Username</span>
                            <span class="value" id="cs-username">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Email</span>
                            <span class="value" id="cs-email">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Telepon</span>
                            <span class="value" id="cs-phone">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Gaji</span>
                            <span class="value" id="cs-salary">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Target Box</span>
                            <span class="value" id="cs-target">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Periode</span>
                            <span class="value" id="cs-period">-</span>
                        </div>
                        <div class="csd-detail-row">
                            <span class="label">Order Source</span>
                            <span class="value" id="cs-source">-</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right: Transaction History --}}
            <div class="col-xl-8 col-lg-7">
                <div class="csd-table-card">
                    <div class="csd-table-header">
                        <i data-lucide="receipt"></i>
                        <h5>Riwayat Saldo CS</h5>
                    </div>

                    <div class="table-responsive">
                        <table class="csd-table">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Tipe</th>
                                    <th>Arah</th>
                                    <th class="text-end">Nominal</th>
                                    <th>Status</th>
                                    <th>Tgl Order Dibuat</th>
                                    <th>Catatan</th>
                                </tr>
                            </thead>
                            <tbody id="transaction-history">
                                <tr>
                                    <td colspan="7" class="csd-empty">
                                        <div class="spinner-border text-secondary spinner-border-sm"></div>
                                        <p class="mt-2 mb-0">Memuat data...</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="csd-pagination">
                        <span class="info" id="pagination-info"></span>
                        <div class="d-flex gap-2">
                            <button class="csd-page-btn" id="prev-page" disabled>
                                <i data-lucide="chevron-left" style="width:14px;height:14px;"></i> Prev
                            </button>
                            <button class="csd-page-btn" id="next-page" disabled>
                                Next <i data-lucide="chevron-right" style="width:14px;height:14px;"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Withdraw Modal --}}
    <div class="modal fade csd-modal" id="withdrawModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2">
                        <i data-lucide="arrow-up-right" style="width:16px;height:16px;color:#dc2626;"></i>
                        Withdraw Saldo CS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="padding:1.5rem;">
                    <div class="mb-3">
                        <label class="form-label" style="font-size:0.78rem;font-weight:600;">Jumlah Withdraw</label>
                        <input type="number" class="form-control" id="withdraw-amount" placeholder="Masukkan nominal"
                            style="border-radius:10px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" style="font-size:0.78rem;font-weight:600;">Catatan</label>
                        <textarea class="form-control" id="withdraw-notes" rows="3" placeholder="Opsional"
                            style="border-radius:10px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-secondary rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button class="btn btn-sm btn-danger rounded-pill px-4" id="btn-submit-withdraw">
                        <span id="withdraw-btn-text">
                            <i data-lucide="arrow-up-right" style="width:14px;height:14px;"></i>
                            Proses Withdraw
                        </span>
                        <span id="withdraw-btn-loading" class="d-none">
                            <span class="spinner-border spinner-border-sm me-1"></span>
                            Memproses...
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Info Modal --}}
    <div class="modal fade csd-modal" id="infoModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="infoModalTitle">Informasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="padding:1.5rem;">
                    <p id="infoModalMessage" class="mb-0"></p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-primary rounded-pill px-4" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();

            function fillText(id, value) {
                const el = document.getElementById(id)
                if (el) el.innerText = value ?? '-'
            }

            const csId = {{ $id }}
            const fmt = (n) => new Intl.NumberFormat('id-ID').format(n || 0);

            // ─── Load CS Info ─────────────────────────
            axios.get(`/customer-services/${csId}`)
                .then(res => {
                    const data = res.data.data
                    const cs = data.cs
                    const user = cs.user
                    const summary = data.summary
                    const period = data.period
                    const source = data.order_sources

                    fillText('cs-name', cs.name)
                    fillText('cs-role', user.role.replace('_', ' ').toUpperCase())

                    // Avatar initial
                    const initials = cs.name ? cs.name.split(' ').map(w => w[0]).join('').substring(0, 2)
                        .toUpperCase() : '?';
                    document.getElementById('cs-avatar').textContent = initials;

                    fillText('total-box', fmt(summary.total_box))
                    fillText('total-sachet', fmt(summary.total_sachet))

                    fillText('cs-username', user.username)
                    fillText('cs-email', user.email)
                    fillText('cs-phone', cs.phone)
                    fillText('cs-salary', 'Rp ' + fmt(cs.salary))
                    fillText('cs-target', cs.target_boxes + ' Box')
                    fillText('cs-period', period.start + ' - ' + period.end)
                    fillText('cs-source', `EP: ${source.everpro}, MP: ${source.marketplace}`)
                })
                .catch(err => {
                    console.error(err)
                    fillText('cs-name', 'Gagal memuat data')
                })

            // ─── Transaction History ─────────────────────────
            let currentPage = 1

            function loadTransactions(page = 1) {
                const tbody = document.getElementById('transaction-history')
                tbody.innerHTML = `<tr><td colspan="7" class="csd-empty">
                    <div class="spinner-border text-secondary spinner-border-sm"></div>
                    <p class="mt-2 mb-0">Memuat data...</p>
                </td></tr>`

                axios.get(`/customer-services/${csId}/transactions?page=${page}`)
                    .then(res => {
                        const rows = res.data.data.transactions
                        const pagination = res.data.data.pagination

                        if (!rows.length) {
                            tbody.innerHTML =
                                `<tr><td colspan="7" class="csd-empty">Tidak ada riwayat transaksi</td></tr>`
                            return
                        }

                        tbody.innerHTML = rows.map(trx => {
                            const dirBadge = trx.direction === 'credit' ?
                                '<span class="csd-badge csd-badge-green">Credit</span>' :
                                '<span class="csd-badge csd-badge-red">Debit</span>';

                            const statusMap = {
                                pending: 'csd-badge-yellow',
                                process: 'csd-badge-blue',
                                approved: 'csd-badge-green',
                                rejected: 'csd-badge-red'
                            };
                            const statusClass = statusMap[trx.status] || 'csd-badge-yellow';

                            const typeBadge = trx.type === 'order' ?
                                '<span class="csd-badge csd-badge-purple">order</span>' :
                                trx.type === 'withdraw' ?
                                '<span class="csd-badge csd-badge-red">withdraw</span>' :
                                `<span class="csd-badge csd-badge-blue">${trx.type}</span>`;

                            const amountColor = trx.direction === 'credit' ? '#16a34a' : '#dc2626';
                            const amountPrefix = trx.direction === 'credit' ? '+' : '-';

                            const orderDate = trx.order_created_at ?
                                `<span style="color:#7c3aed;font-weight:600;">${trx.order_created_at}</span>` :
                                '<span style="color:var(--csd-text-muted);">-</span>';

                            return `<tr>
                                <td><span style="font-size:0.75rem;font-weight:500;">${trx.transaction_date}</span></td>
                                <td>${typeBadge}</td>
                                <td>${dirBadge}</td>
                                <td class="text-end" style="font-weight:700;color:${amountColor};">${amountPrefix}Rp ${fmt(trx.amount)}</td>
                                <td><span class="csd-badge ${statusClass}">${trx.status}</span></td>
                                <td>${orderDate}</td>
                                <td style="font-size:0.72rem;color:var(--csd-text-sec);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${trx.notes || ''}">${trx.notes ?? '-'}</td>
                            </tr>`;
                        }).join('')

                        document.getElementById('pagination-info').innerText =
                            `Halaman ${pagination.current_page} dari ${pagination.last_page} (${pagination.total} transaksi)`

                        document.getElementById('prev-page').disabled = pagination.current_page === 1
                        document.getElementById('next-page').disabled = pagination.current_page === pagination
                            .last_page

                        currentPage = pagination.current_page
                    })
                    .catch(err => {
                        console.error(err)
                        tbody.innerHTML =
                            `<tr><td colspan="7" class="csd-empty" style="color:#dc2626;">Gagal memuat data</td></tr>`
                    })
            }

            document.getElementById('prev-page').onclick = () => loadTransactions(currentPage - 1)
            document.getElementById('next-page').onclick = () => loadTransactions(currentPage + 1)

            loadTransactions()

            // ─── Withdraw ─────────────────────────
            const btnSubmit = document.getElementById('btn-submit-withdraw')
            const btnText = document.getElementById('withdraw-btn-text')
            const btnLoading = document.getElementById('withdraw-btn-loading')
            const withdrawModalEl = document.getElementById('withdrawModal')
            const infoModalEl = document.getElementById('infoModal')

            function setLoading(state) {
                btnSubmit.disabled = state
                btnText.classList.toggle('d-none', state)
                btnLoading.classList.toggle('d-none', !state)
            }

            function showInfoModal(title, message) {
                document.getElementById('infoModalTitle').innerText = title
                document.getElementById('infoModalMessage').innerText = message
                new bootstrap.Modal(infoModalEl).show()
            }

            btnSubmit.addEventListener('click', () => {
                const amount = document.getElementById('withdraw-amount').value
                const notes = document.getElementById('withdraw-notes').value

                if (!amount || amount <= 0) {
                    showInfoModal('Validasi Gagal', 'Nominal withdraw tidak valid')
                    return
                }

                setLoading(true)

                axios.post(`/customer-services/{{ $id }}/withdraw`, {
                        amount,
                        notes
                    })
                    .then(() => {
                        const withdrawModal = bootstrap.Modal.getInstance(withdrawModalEl)
                        if (withdrawModal) withdrawModal.hide()

                        setTimeout(() => {
                            showInfoModal('Withdraw Berhasil',
                                'Saldo berhasil ditarik dan langsung disetujui.')
                        }, 200)

                        setTimeout(() => location.reload(), 1300)
                    })
                    .catch(err => {
                        const message = err.response?.data?.message ??
                            'Terjadi kesalahan saat melakukan withdraw'
                        const withdrawModal = bootstrap.Modal.getInstance(withdrawModalEl)
                        if (withdrawModal) withdrawModal.hide()

                        setTimeout(() => {
                            showInfoModal('Withdraw Gagal', message)
                        }, 200)
                    })
                    .finally(() => {
                        setLoading(false)
                    })
            })

            lucide.createIcons();
        })
    </script>
@endpush