@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease-in-out;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .nav-tabs-custom .nav-link {
            font-weight: 600;
            font-size: 13px;
            color: #64748b;
            border: none;
            border-bottom: 2px solid transparent;
            padding: 10px 18px;
            transition: all 0.2s;
        }
        .nav-tabs-custom .nav-link.active {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
            background: transparent;
        }
        .nav-tabs-custom .nav-link.tab-approved.active {
            color: #10b981;
            border-bottom: 2px solid #10b981;
        }
        .nav-tabs-custom .nav-link.tab-all.active {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }
        .bank-account-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 6px 10px;
        }
    </style>
@endsection

@section('content')

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <div class="d-flex align-items-center gap-2">
                <span class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                    <i class="ri-hand-coin-line fs-20"></i>
                </span>
                <div>
                    <h1 class="page-title fw-bold fs-18 mb-0">Antrean Penarikan Dana (Redemption)</h1>
                    <p class="text-muted mb-0 fs-12">Khusus verifikasi dan eksekusi transfer dana pencairan hasil investasi ke rekening bank nasabah.</p>
                </div>
            </div>
        </div>
        <div class="btn-list mt-md-0 mt-2 d-flex align-items-center gap-2 flex-wrap">
            <span class="badge bg-purple-transparent text-purple border border-purple px-3 py-2 fs-12 fw-bold" title="Saldo Kas Xendit Tersedia">
                <i class="ri-wallet-3-line me-1"></i>Kas Xendit: <span id="stat-xendit-balance">{{ $stats['xendit_balance_formatted'] ?? 'Rp 0' }}</span>
            </span>
            <span class="badge bg-primary-transparent text-primary border border-primary px-3 py-2 fs-12 fw-semibold" id="badge-urgent-header">
                <i class="ri-time-line me-1"></i><span id="urgent-count-text">{{ $stats['pending_count'] }}</span> Menunggu Proses
            </span>
            <button type="button" class="btn btn-sm btn-outline-primary" id="btn-refresh-data">
                <i class="ri-refresh-line me-1"></i> Refresh Antrean
            </button>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">
                                <i class="ri-time-line me-1 text-primary"></i>Menunggu Transfer
                            </span>
                            <h3 class="mb-0 fw-bold text-dark" id="stat-pending-count">{{ $stats['pending_count'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block fw-semibold" id="stat-pending-volume">
                                {{ $stats['pending_volume_formatted'] }}
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-time-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-success fs-11 fw-bold text-uppercase mb-1">
                                <i class="ri-checkbox-circle-line me-1"></i>Selesai Ditransfer
                            </span>
                            <h3 class="mb-0 fw-bold text-success" id="stat-approved-count">{{ $stats['approved_count'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block fw-semibold" id="stat-approved-volume">
                                {{ $stats['approved_volume_formatted'] }}
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent text-success rounded-circle">
                            <i class="ri-check-double-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-secondary fs-11 fw-bold text-uppercase mb-1">
                                <i class="ri-close-circle-line me-1"></i>Ditolak / Batal
                            </span>
                            <h3 class="mb-0 fw-bold text-secondary" id="stat-rejected-count">{{ $stats['rejected_count'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block fw-semibold" id="stat-rejected-volume">
                                {{ $stats['rejected_volume_formatted'] }}
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-secondary-transparent text-secondary rounded-circle">
                            <i class="ri-close-circle-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-primary fs-11 fw-bold text-uppercase mb-1">
                                <i class="ri-funds-line me-1"></i>Total Seluruh Penarikan
                            </span>
                            <h3 class="mb-0 fw-bold text-primary" id="stat-total-count">{{ $stats['total_count'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block fw-semibold" id="stat-total-volume">
                                {{ $stats['total_volume_formatted'] }}
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-money-dollar-box-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">

        <div class="card-header border-bottom pb-0 pt-2 px-3">
            <ul class="nav nav-tabs nav-tabs-custom card-header-tabs" id="redemptionTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-pending" data-tab="pending" type="button" role="tab">
                        <i class="ri-time-line me-1 text-primary"></i> Menunggu Transfer
                        <span class="badge bg-primary-transparent text-primary rounded-pill ms-1 fs-10" id="tab-pending-badge">{{ $stats['pending_count'] }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link tab-approved" id="tab-approved" data-tab="approved" type="button" role="tab">
                        <i class="ri-check-double-line me-1 text-success"></i> Selesai Ditransfer
                        <span class="badge bg-success-transparent text-success rounded-pill ms-1 fs-10" id="tab-approved-badge">{{ $stats['approved_count'] }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-rejected" data-tab="rejected" type="button" role="tab">
                        <i class="ri-close-line me-1 text-secondary"></i> Ditolak
                        <span class="badge bg-secondary-transparent text-secondary rounded-pill ms-1 fs-10" id="tab-rejected-badge">{{ $stats['rejected_count'] }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link tab-all" id="tab-all" data-tab="all" type="button" role="tab">
                        <i class="ri-list-check me-1 text-primary"></i> Semua Riwayat
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body border-bottom p-3 p-md-4 bg-light-subtle">
            <div class="row g-3 align-items-end">
                <div class="col-lg-3 col-md-6 col-12">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Produk Reksa Dana</label>
                    <select id="filter-product" class="form-select form-select-sm">
                        <option value="all">Semua Produk</option>
                        @foreach($products as $prod)
                            <option value="{{ $prod->id }}">{{ $prod->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Bank Tujuan Nasabah</label>
                    <select id="filter-bank" class="form-select form-select-sm">
                        <option value="all">Semua Bank</option>
                        <option value="BCA">BCA</option>
                        <option value="MANDIRI">MANDIRI</option>
                        <option value="BRI">BRI</option>
                        <option value="BNI">BNI</option>
                        <option value="CIMB">CIMB NIAGA</option>
                        <option value="PERMATA">PERMATA</option>
                        <option value="JAGO">BANK JAGO</option>
                        <option value="BSI">BSI</option>
                    </select>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Rentang Waktu</label>
                    <select id="filter-date-preset" class="form-select form-select-sm">
                        <option value="all">Semua Waktu</option>
                        <option value="today">Hari Ini</option>
                        <option value="last_7_days">7 Hari Terakhir</option>
                        <option value="this_month">Bulan Ini</option>
                        <option value="last_month">Bulan Lalu</option>
                        <option value="this_year">Tahun Ini</option>
                        <option value="custom">Rentang Tanggal Kustom...</option>
                    </select>
                </div>
                <div class="col-lg-3 col-md-6 col-12 ms-auto d-flex align-items-center justify-content-end gap-2 mt-auto">
                    <button type="button" id="btn-apply-filter" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm px-3">
                        <i class="ri-filter-3-line fs-14"></i> Terapkan Filter
                    </button>
                    <button type="button" id="btn-reset-filter" class="btn btn-sm btn-light border d-inline-flex align-items-center gap-1 px-3" title="Reset Semua Filter">
                        <i class="ri-refresh-line fs-14"></i> Reset
                    </button>
                </div>
            </div>

            <!-- Custom date range inputs, visible only when 'custom' is selected -->
            <div class="row g-3 align-items-end pt-3 mt-1 border-top custom-date-row d-none">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Tanggal Mulai</label>
                    <input type="date" id="filter-start-date" class="form-control form-control-sm">
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Tanggal Akhir</label>
                    <input type="date" id="filter-end-date" class="form-control form-control-sm">
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="tbl-redemptions" class="table table-hover text-nowrap w-100 align-middle">
                    <thead class="table-success">
                        <tr>
                            <th style="width: 50px;" class="text-center">NO</th>
                            <th>NO. PENARIKAN</th>
                            <th>NASABAH</th>
                            <th>PRODUK REKSA DANA</th>
                            <th>NOMINAL CAIR</th>
                            <th>REKENING TUJUAN NASABAH</th>
                            <th>STATUS</th>
                            <th>WAKTU PENGAJUAN</th>
                            <th style="width: 50px;" class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-xendit-payout" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header text-white py-3" style="background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar avatar-sm bg-white text-primary rounded-circle">
                            <i class="ri-flashlight-fill fs-16"></i>
                        </span>
                        <div>
                            <h6 class="modal-title fw-bold text-white mb-0">Payout Otomatis via Xendit API</h6>
                            <small class="text-white-50 fs-11">Transfer instan dari saldo kas Xendit ke rekening nasabah</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-xendit-payout">
                    <input type="hidden" id="xendit-order-id" name="id">
                    <div class="modal-body p-4">
                        <div class="p-3 rounded mb-3" style="background: #eef2ff; border: 1px solid #c7d2fe;">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <span class="fs-12 text-muted">Nomor Order:</span>
                                <span class="fw-bold font-monospace text-primary" id="modal-xendit-order-number">-</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <span class="fs-12 text-muted">Nominal Payout:</span>
                                <span class="fw-bold fs-17 text-primary" id="modal-xendit-amount">Rp 0</span>
                            </div>
                            <hr class="my-2" style="border-color: #c7d2fe;">
                            <div class="fs-12">
                                <strong>Rekening Bank Tujuan Nasabah:</strong><br>
                                <span id="modal-xendit-bank-info" class="fw-semibold text-dark">-</span>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between p-2 mb-3 bg-light rounded border fs-12">
                            <span class="text-muted"><i class="ri-wallet-3-line me-1 text-purple"></i>Saldo Kas Xendit Saat Ini:</span>
                            <span class="fw-bold text-purple" id="modal-xendit-cash-balance">{{ $stats['xendit_balance_formatted'] ?? 'Rp 0' }}</span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fs-12 fw-semibold">Deskripsi / Catatan Transfer (Opsional)</label>
                            <input type="text" class="form-control form-control-sm" id="xendit-payout-notes" name="admin_notes" placeholder="Contoh: Pencairan Investasi DBIC">
                        </div>

                        <div class="alert alert-info-transparent border border-info p-2 rounded fs-12 mb-0">
                            <i class="ri-information-line me-1 text-info"></i>
                            Setelah tombol ditekan, backend langsung memanggil <strong>Xendit Disbursement API</strong>. Dana akan otomatis dipotong dari saldo kas Xendit dan ditransfer secara instan ke bank nasabah.
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-primary px-3 fw-semibold" id="btn-submit-xendit-payout">
                            <i class="ri-flashlight-line me-1"></i> Eksekusi Payout Xendit Sekarang
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-approve-redemption" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-success text-white py-3">
                    <h6 class="modal-title fw-bold">
                        <i class="ri-checkbox-circle-line me-1"></i> Konfirmasi Transfer Penarikan
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-approve-redemption">
                    <input type="hidden" id="approve-order-id" name="id">
                    <div class="modal-body p-4">
                        <div class="alert alert-success-transparent border border-success p-3 rounded mb-3">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <span class="fs-12 text-muted">Nomor Order:</span>
                                <span class="fw-bold font-monospace text-dark" id="modal-approve-order-number">-</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <span class="fs-12 text-muted">Total Nominal Ditransfer:</span>
                                <span class="fw-bold fs-16 text-success" id="modal-approve-amount">Rp 0</span>
                            </div>
                            <hr class="my-2">
                            <div class="fs-12">
                                <strong>Tujuan Rekening:</strong><br>
                                <span id="modal-approve-bank-info" class="fw-semibold text-dark">-</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fs-12 fw-semibold">Catatan / No. Referensi Transfer Bank <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="approve-notes" name="admin_notes" placeholder="Contoh: Transfer via BCA Bisnis Ref: 20261022001" required value="Transfer via Bank Admin Finance">
                            <small class="text-muted fs-11">Catatan ini akan dikirimkan ke notifikasi aplikasi nasabah sebagai bukti transfer.</small>
                        </div>

                        <div class="p-2 bg-light rounded fs-12 text-muted">
                            <i class="ri-information-line me-1 text-primary"></i>
                            Setelah disetujui, status akan diubah menjadi <strong>REDEEMED</strong>, saldo unit nasabah dipotong permanen, dan AUM produk disinkronkan.
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-success px-3" id="btn-submit-approve">
                            <i class="ri-check-double-line me-1"></i> Ya, Transfer Telah Selesai
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-reject-redemption" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-danger text-white py-3">
                    <h6 class="modal-title fw-bold">
                        <i class="ri-close-circle-line me-1"></i> Tolak Pengajuan Penarikan
                    </h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-reject-redemption">
                    <input type="hidden" id="reject-order-id" name="id">
                    <div class="modal-body p-4">
                        <p class="fs-13 text-muted mb-3">
                            Apakah Anda yakin ingin menolak pengajuan penarikan dana <strong id="modal-reject-order-number" class="text-danger">-</strong>?
                        </p>
                        <div class="mb-3">
                            <label class="form-label fs-12 fw-semibold">Alasan Penolakan <span class="text-danger">*</span></label>
                            <textarea class="form-control form-control-sm" id="reject-notes" name="admin_notes" rows="3" placeholder="Masukkan alasan penolakan untuk nasabah..." required>Data rekening bank tujuan tidak sesuai dengan nama identitas KYC nasabah.</textarea>
                            <small class="text-muted fs-11">Alasan ini akan tampil di riwayat transaksi aplikasi nasabah dan saldo unit akan dikembalikan.</small>
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-danger px-3" id="btn-submit-reject">
                            <i class="ri-close-line me-1"></i> Konfirmasi Tolak
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-redemption" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light py-3 border-bottom">
                    <div class="d-flex align-items-center gap-2">
                        <i class="ri-file-text-line fs-18 text-primary"></i>
                        <h6 class="modal-title fw-bold mb-0">Detail Pengajuan Penarikan Dana</h6>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">

                        <div class="col-md-6 border-end pe-md-4">
                            <h6 class="fw-bold fs-13 text-uppercase text-muted mb-3">
                                <i class="ri-money-dollar-circle-line me-1"></i> Rincian Dana & Produk
                            </h6>
                            <table class="table table-sm table-borderless fs-13 mb-0">
                                <tr>
                                    <td class="text-muted" style="width: 140px;">No. Penarikan</td>
                                    <td>: <span class="font-monospace fw-bold text-primary" id="det-order-number">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Produk</td>
                                    <td>: <span class="fw-semibold text-dark" id="det-product-name">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Nominal Pencairan</td>
                                    <td>: <span class="fw-bold fs-15 text-dark" id="det-amount">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Unit Dicairkan</td>
                                    <td>: <span class="fw-semibold text-dark" id="det-units">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Harga NAV Unit</td>
                                    <td>: <span class="text-dark" id="det-nav">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Waktu Pengajuan</td>
                                    <td>: <span class="text-dark" id="det-created-at">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Status Transaksi</td>
                                    <td>: <span id="det-status-badge">-</span></td>
                                </tr>
                            </table>
                        </div>

                        <div class="col-md-6 ps-md-4">
                            <h6 class="fw-bold fs-13 text-uppercase text-muted mb-3">
                                <i class="ri-bank-card-line me-1"></i> Rekening Tujuan & Nasabah
                            </h6>
                            <div class="p-3 bg-light rounded mb-3 border">
                                <div class="text-muted fs-11 text-uppercase fw-semibold mb-1">Rekening Bank Pencairan</div>
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <span class="badge bg-primary text-white" id="det-bank-name">-</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 fs-11" id="det-copy-acc">
                                        <i class="ri-file-copy-line me-1"></i> Salin
                                    </button>
                                </div>
                                <div class="fs-16 font-monospace fw-bold text-dark" id="det-bank-account">-</div>
                                <div class="fs-12 text-muted mt-1">a.n. <strong class="text-dark" id="det-bank-holder">-</strong></div>
                            </div>

                            <table class="table table-sm table-borderless fs-13 mb-0">
                                <tr>
                                    <td class="text-muted" style="width: 120px;">Nama Nasabah</td>
                                    <td>: <span class="fw-semibold text-dark" id="det-user-name">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">NIK KTP</td>
                                    <td>: <span class="font-monospace text-dark" id="det-user-nik">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Kontak HP</td>
                                    <td>: <span class="text-dark" id="det-user-phone">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Email</td>
                                    <td>: <span class="text-dark" id="det-user-email">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Verifikator</td>
                                    <td>: <span class="text-dark" id="det-approver">-</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Catatan Admin</td>
                                    <td>: <span class="text-dark fst-italic" id="det-notes">-</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light py-2" id="det-modal-actions">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            let currentTab = 'pending';

            const table = (window.AppDatatable && typeof AppDatatable.init === 'function')
                ? AppDatatable.init('#tbl-redemptions', {
                    responsive: false,
                    order: [],
                    ajax: {
                        url: '{{ route("redemptions.api.list") }}',
                        data: function(d) {
                            d.tab         = currentTab;
                            d.product_id  = $('#filter-product').val();
                            d.bank_name   = $('#filter-bank').val();
                            d.date_preset = $('#filter-date-preset').val();
                            d.start_date  = $('#filter-start-date').val();
                            d.end_date    = $('#filter-end-date').val();
                        }
                    },
                    columns: [
                        { data: 'row_num', orderable: false, searchable: false, className: 'text-center' },
                        {
                            data: 'order_number',
                            render: function(data, type, row) {
                                return `<span class="fw-bold font-monospace text-primary fs-12">${data}</span>`;
                            }
                        },
                        {
                            data: 'user_info',
                            render: function(data) {
                                return `
                                    <div>
                                        <span class="fw-semibold text-dark fs-13 d-block">${data.name}</span>
                                        <div class="d-flex align-items-center gap-1 mt-1">
                                            ${data.kyc_html}
                                            <small class="text-muted fs-11">${data.contact}</small>
                                        </div>
                                    </div>
                                `;
                            }
                        },
                        {
                            data: 'product_info',
                            render: function(data) {
                                return `
                                    <div>
                                        <span class="fw-medium text-dark fs-12 d-block">${data.name}</span>
                                        <span class="badge bg-light text-muted border fs-10">${data.code}</span>
                                    </div>
                                `;
                            }
                        },
                        {
                            data: 'amount_formatted',
                            render: function(data, type, row) {
                                return `
                                    <div>
                                        <span class="fw-bold fs-13 text-dark d-block">${data}</span>
                                        <small class="text-muted fs-11">${row.units_formatted}</small>
                                    </div>
                                `;
                            }
                        },
                        { data: 'bank_account_html', orderable: false },
                        { data: 'status_html' },
                        { data: 'created_at_formatted' },
                        { data: 'action_html', orderable: false, searchable: false, className: 'text-center' }
                    ]
                })
                : $('#tbl-redemptions').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: false,
                    stateSave: true,
                    stateDuration: 7200,
                    pageLength: 10,
                    order: [],
                    ajax: {
                        url: '{{ route("redemptions.api.list") }}',
                        data: function(d) {
                            d.tab         = currentTab;
                            d.product_id  = $('#filter-product').val();
                            d.bank_name   = $('#filter-bank').val();
                            d.date_preset = $('#filter-date-preset').val();
                            d.start_date  = $('#filter-start-date').val();
                            d.end_date    = $('#filter-end-date').val();
                        }
                    },
                    columns: [
                        { data: 'row_num', orderable: false, searchable: false, className: 'text-center' },
                        {
                            data: 'order_number',
                            render: function(data, type, row) {
                                return `<span class="fw-bold font-monospace text-primary fs-12">${data}</span>`;
                            }
                        },
                        {
                            data: 'user_info',
                            render: function(data) {
                                return `
                                    <div>
                                        <span class="fw-semibold text-dark fs-13 d-block">${data.name}</span>
                                        <div class="d-flex align-items-center gap-1 mt-1">
                                            ${data.kyc_html}
                                            <small class="text-muted fs-11">${data.contact}</small>
                                        </div>
                                    </div>
                                `;
                            }
                        },
                        {
                            data: 'product_info',
                            render: function(data) {
                                return `
                                    <div>
                                        <span class="fw-medium text-dark fs-12 d-block">${data.name}</span>
                                        <span class="badge bg-light text-muted border fs-10">${data.code}</span>
                                    </div>
                                `;
                            }
                        },
                        {
                            data: 'amount_formatted',
                            render: function(data, type, row) {
                                return `
                                    <div>
                                        <span class="fw-bold fs-13 text-dark d-block">${data}</span>
                                        <small class="text-muted fs-11">${row.units_formatted}</small>
                                    </div>
                                `;
                            }
                        },
                        { data: 'bank_account_html', orderable: false },
                        { data: 'status_html' },
                        { data: 'created_at_formatted' },
                        { data: 'action_html', orderable: false, searchable: false, className: 'text-center' }
                    ]
                });

            $('#redemptionTabs button').on('click', function() {
                $('#redemptionTabs button').removeClass('active');
                $(this).addClass('active');
                currentTab = $(this).data('tab');
                table.page(0).draw();
            });

            // Toggle custom date range inputs when 'custom' is selected
            $('#filter-date-preset').on('change', function() {
                if ($(this).val() === 'custom') {
                    $('.custom-date-row').removeClass('d-none');
                } else {
                    $('.custom-date-row').addClass('d-none');
                    $('#filter-start-date').val('');
                    $('#filter-end-date').val('');
                }
            });

            // Tombol Terapkan Filter
            $('#btn-apply-filter').on('click', function() {
                table.page(0).draw();
            });

            // Tombol Reset Filter
            $('#btn-reset-filter').on('click', function() {
                $('#filter-product').val('all');
                $('#filter-bank').val('all');
                $('#filter-date-preset').val('all');
                $('#filter-start-date').val('');
                $('#filter-end-date').val('');
                $('.custom-date-row').addClass('d-none');
                if (typeof table.state === 'object' && typeof table.state.clear === 'function') {
                    table.state.clear();
                }
                table.page(0).draw();
            });

            $('#btn-refresh-data').on('click', function() {
                refreshAll();
            });

            function refreshAll() {
                table.draw(false);
                refreshStats();
            }

            function refreshStats() {
                $.getJSON('{{ route("redemptions.api.stats") }}', function(res) {
                    if (res.success && res.data) {
                        const d = res.data;
                        $('#stat-pending-count').text(d.pending_count);
                        $('#stat-pending-volume').text(d.pending_volume_formatted);
                        $('#stat-approved-count').text(d.approved_count);
                        $('#stat-approved-volume').text(d.approved_volume_formatted);
                        $('#stat-rejected-count').text(d.rejected_count);
                        $('#stat-rejected-volume').text(d.rejected_volume_formatted);
                        $('#stat-total-count').text(d.total_count);
                        $('#stat-total-volume').text(d.total_volume_formatted);

                        $('#tab-pending-badge').text(d.pending_count);
                        $('#tab-approved-badge').text(d.approved_count);
                        $('#tab-rejected-badge').text(d.rejected_count);
                        $('#urgent-count-text').text(d.pending_count);
                        $('#banner-pending-count').text(d.pending_count);

                        if (d.xendit_balance_formatted) {
                            $('#stat-xendit-balance').text(d.xendit_balance_formatted);
                            $('#modal-xendit-cash-balance').text(d.xendit_balance_formatted);
                        }

                        if (d.pending_count > 0) {
                            $('#badge-urgent-header').removeClass('d-none');
                        } else {
                            $('#badge-urgent-header').addClass('d-none');
                        }
                    }
                });
            }

            $(document).on('click', '.copy-btn, .btn-copy', function() {
                const text = $(this).data('copy') || $(this).data('text');
                if (text) {
                    navigator.clipboard.writeText(text).then(function() {
                        alert('Teks disalin: ' + text);
                    });
                }
            });

            $(document).on('click', '.btn-xendit-payout', function() {
                const id = $(this).data('id');
                const order = $(this).data('order');
                const amount = $(this).data('amount');
                const bank = $(this).data('bank');
                const acc = $(this).data('acc');
                const name = $(this).data('name');

                $('#xendit-order-id').val(id);
                $('#modal-xendit-order-number').text(order);
                $('#modal-xendit-amount').text('Rp ' + amount);
                $('#modal-xendit-bank-info').text(`${bank} - ${acc} (a.n. ${name})`);
                $('#xendit-payout-notes').val(`Pencairan Reksa Dana DBIC ${order}`);

                $('#modal-xendit-payout').modal('show');
            });

            $('#form-xendit-payout').on('submit', function(e) {
                e.preventDefault();
                const id = $('#xendit-order-id').val();
                const notes = $('#xendit-payout-notes').val();
                const btn = $('#btn-submit-xendit-payout');

                btn.prop('disabled', true).html('<i class="ri-loader-4-line spin-rotate me-1"></i> Memproses Transfer via Xendit API...');

                $.ajax({
                    url: `{{ url('/redemptions') }}/${id}/payout-xendit`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { admin_notes: notes },
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-flashlight-line me-1"></i> Eksekusi Payout Xendit Sekarang');
                        $('#modal-xendit-payout').modal('hide');
                        alert(res.message);
                        refreshAll();
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-flashlight-line me-1"></i> Eksekusi Payout Xendit Sekarang');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal memproses payout Xendit';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-approve-redemption', function() {
                const id = $(this).data('id');
                const order = $(this).data('order');
                const amount = $(this).data('amount');
                const bank = $(this).data('bank');
                const acc = $(this).data('acc');
                const name = $(this).data('name');

                $('#approve-order-id').val(id);
                $('#modal-approve-order-number').text(order);
                $('#modal-approve-amount').text('Rp ' + amount);
                $('#modal-approve-bank-info').text(`${bank} - ${acc} (a.n. ${name})`);

                $('#modal-approve-redemption').modal('show');
            });

            $('#form-approve-redemption').on('submit', function(e) {
                e.preventDefault();
                const id = $('#approve-order-id').val();
                const notes = $('#approve-notes').val();
                const btn = $('#btn-submit-approve');

                btn.prop('disabled', true).html('<i class="ri-loader-4-line spin-rotate me-1"></i> Memproses...');

                $.ajax({
                    url: `{{ url('/redemptions') }}/${id}/approve`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { admin_notes: notes },
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-check-double-line me-1"></i> Ya, Transfer Telah Selesai');
                        $('#modal-approve-redemption').modal('hide');
                        alert(res.message);
                        refreshAll();
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-check-double-line me-1"></i> Ya, Transfer Telah Selesai');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menyetujui penarikan';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-reject-redemption', function() {
                const id = $(this).data('id');
                const order = $(this).data('order');

                $('#reject-order-id').val(id);
                $('#modal-reject-order-number').text(order);
                $('#modal-reject-redemption').modal('show');
            });

            $('#form-reject-redemption').on('submit', function(e) {
                e.preventDefault();
                const id = $('#reject-order-id').val();
                const notes = $('#reject-notes').val();
                const btn = $('#btn-submit-reject');

                btn.prop('disabled', true).html('<i class="ri-loader-4-line spin-rotate me-1"></i> Memproses...');

                $.ajax({
                    url: `{{ url('/redemptions') }}/${id}/reject`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { admin_notes: notes },
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-close-line me-1"></i> Konfirmasi Tolak');
                        $('#modal-reject-redemption').modal('hide');
                        alert(res.message);
                        refreshAll();
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-close-line me-1"></i> Konfirmasi Tolak');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menolak penarikan';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-detail-redemption', function() {
                const id = $(this).data('id');
                $.getJSON(`{{ url('/redemptions') }}/${id}`, function(res) {
                    if (res.success && res.data) {
                        const d = res.data;
                        $('#det-order-number').text(d.order_number);
                        $('#det-product-name').text(d.product.name);
                        $('#det-amount').text(d.amount_formatted);
                        $('#det-units').text(d.units_formatted);
                        $('#det-nav').text(d.nav_price_formatted);
                        $('#det-created-at').text(d.created_at_formatted);

                        let stBadge = '';
                        if (d.status === 'PENDING') {
                            stBadge = '<span class="badge bg-warning-transparent text-warning border border-warning fw-semibold fs-11"><i class="ri-time-line me-1"></i>Menunggu Transfer</span>';
                        } else if (d.status === 'REDEEMED' || d.status === 'PAID') {
                            stBadge = '<span class="badge bg-success-transparent text-success border border-success fw-bold fs-11"><i class="ri-check-double-line me-1"></i>SELESAI DITRANSFER</span>';
                        } else {
                            stBadge = '<span class="badge bg-secondary-transparent text-secondary border fw-bold fs-11"><i class="ri-close-circle-line me-1"></i>DITOLAK</span>';
                        }
                        $('#det-status-badge').html(stBadge);

                        $('#det-bank-name').text(d.bank_name);
                        $('#det-bank-account').text(d.bank_account_number);
                        $('#det-bank-holder').text(d.bank_account_name);

                        $('#det-copy-acc').off('click').on('click', function() {
                            navigator.clipboard.writeText(d.bank_account_number).then(function() {
                                alert('Nomor rekening disalin: ' + d.bank_account_number);
                            });
                        });

                        $('#det-user-name').text(d.user.name);
                        $('#det-user-nik').text(d.user.nik);
                        $('#det-user-phone').text(d.user.phone || '-');
                        $('#det-user-email').text(d.user.email || '-');
                        $('#det-approver').text(d.approver_name);
                        $('#det-notes').text(d.admin_notes || 'Belum ada catatan');

                        const actContainer = $('#det-modal-actions');
                        actContainer.find('.dynamic-act-btn').remove();

                        if (d.status === 'PENDING') {
                            const rawAmt = d.amount_formatted.replace('Rp ', '');
                            let xenditBtn = '';
                            if (d.can_execute_payout) {
                                xenditBtn = `
                                    <button type="button" class="btn btn-sm btn-primary dynamic-act-btn btn-xendit-payout"
                                        data-id="${d.id}" data-order="${d.order_number}" data-amount="${rawAmt}"
                                        data-bank="${d.bank_name}" data-acc="${d.bank_account_number}" data-name="${d.bank_account_name}">
                                        <i class="ri-flashlight-line me-1"></i> Payout via Xendit API
                                    </button>
                                `;
                            } else {
                                xenditBtn = `
                                    <button type="button" class="btn btn-sm btn-light border dynamic-act-btn text-muted" disabled title="Khusus Role Finance & Owner">
                                        <i class="ri-lock-line me-1"></i> Payout via Xendit (Khusus Finance & Owner)
                                    </button>
                                `;
                            }
                            actContainer.prepend(`
                                ${xenditBtn}
                                <button type="button" class="btn btn-sm btn-outline-danger dynamic-act-btn btn-reject-redemption"
                                    data-id="${d.id}" data-order="${d.order_number}">
                                    <i class="ri-close-line me-1"></i> Tolak
                                </button>
                            `);
                        }

                        $('#modal-detail-redemption').modal('show');
                    }
                });
            });

            setInterval(function() {
                refreshStats();
            }, 30000);
        });
    </script>
@endsection