@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease;
            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);
        }
        .order-code-badge {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 12px;
            font-weight: 700;
            color: #0284c7;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            padding: 3px 8px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .detail-kv-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed rgba(0,0,0,0.08);
            font-size: 13px;
        }
        .detail-kv-row:last-child {
            border-bottom: none;
        }
        .detail-kv-label {
            color: #64748b;
            font-weight: 500;
        }
        .detail-kv-val {
            font-weight: 600;
            color: #1e293b;
            text-align: right;
        }
        .json-viewer-box {
            background-color: #0f172a;
            color: #38bdf8;
            font-family: 'Courier New', Courier, monospace;
            font-size: 12px;
            padding: 12px;
            border-radius: 8px;
            max-height: 240px;
            overflow-y: auto;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin-rotate {
            animation: spin 0.75s linear infinite;
            display: inline-block;
        }
    </style>
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
            <div>
                <h1 class="page-title fw-bold fs-18 mb-1">Transaksi Internal Investasi</h1>
                <p class="text-muted mb-0 fs-13">Monitoring dan verifikasi transaksi investasi reksa dana nasabah.</p>
            </div>
            <div>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Transaksi</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Internal</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-5 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">TRANSAKSI SUKSES</span>
                            <h3 class="mb-0 fw-bold text-dark" id="stat-total-orders">{{ $stats['total_orders_formatted'] ?? '0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-check-double-line me-1 text-success"></i>Pembayaran lunas</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent rounded-circle">
                            <i class="ri-checkbox-circle-line fs-20 text-success"></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-semibold text-uppercase mb-1">TOTAL VOLUME MASUK</span>
                            <h3 class="mb-0 fw-bold text-success" id="stat-total-volume">{{ $stats['total_volume_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-funds-line me-1 text-success"></i>Akumulasi dana</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent rounded-circle">
                            <i class="ri-money-dollar-circle-line fs-20 text-primary"></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-semibold text-uppercase mb-1">TOTAL UNIT TERBIT</span>
                            <h3 class="mb-0 fw-bold text-dark fs-18" id="stat-total-units">{{ $stats['total_units_formatted'] ?? '0 Unit' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-pie-chart-line me-1 text-primary"></i>Portofolio nasabah</span>
                        </div>
                        <div class="avatar avatar-md bg-info-transparent rounded-circle">
                            <i class="ri-pie-chart-2-line fs-20 text-info"></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-muted fs-11 fw-semibold text-uppercase mb-1">RATA-RATA TRANSAKSI</span>
                            <h3 class="mb-0 fw-bold text-dark fs-18" id="stat-avg-ticket">{{ $stats['avg_ticket_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-bar-chart-line me-1 text-secondary"></i>Ticket size order</span>
                        </div>
                        <div class="avatar avatar-md bg-secondary-transparent rounded-circle">
                            <i class="ri-line-chart-line fs-20 text-secondary"></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-semibold text-uppercase mb-1">VOLUME BULAN INI</span>
                            <h3 class="mb-0 fw-bold text-success fs-18" id="stat-this-month-volume">{{ $stats['this_month_volume_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block" id="stat-this-month-count"><i class="ri-calendar-line me-1 text-primary"></i>{{ $stats['this_month_count_formatted'] ?? '0 Transaksi' }}</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent rounded-circle">
                            <i class="ri-calendar-check-line fs-20 text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card mb-4 shadow-sm">
        <div class="card-body p-3 p-md-4">
            <div class="row g-3 align-items-center mb-3">
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Pencarian Transaksi</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted border-end-0"><i class="ri-search-line"></i></span>
                        <input type="search" id="search-input" class="form-control border-start-0" placeholder="No. Pesanan, Nasabah, Email, HP..." aria-label="Cari transaksi">
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Tipe Transaksi</label>
                    <select id="filter-transaction-type" class="form-select form-select-sm">
                        <option value="all">Semua Tipe Transaksi</option>
                        <option value="INVESTMENT">Pembelian (Investasi Reksa Dana)</option>
                        <option value="REDEMPTION">Pencairan (Redemption Dana)</option>
                    </select>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <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 Reksa Dana</option>
                        @foreach($products as $prod)
                            <option value="{{ $prod->id }}">{{ $prod->name }} ({{ $prod->code }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-6 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Channel Pembayaran</label>
                    <select id="filter-payment-type" class="form-select form-select-sm">
                        <option value="all">Semua Channel</option>
                        <option value="VIRTUAL_ACCOUNT">Virtual Account</option>
                        <option value="QRIS">QRIS Dynamic</option>
                        <option value="EWALLET">E-Wallet</option>
                        <option value="DISBURSEMENT">Transfer Bank</option>
                    </select>
                </div>
            </div>

            <div class="row g-3 align-items-end pt-3 mt-1 border-top">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <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-4 col-sm-6 custom-date-col d-none">
                    <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 custom-date-col d-none">
                    <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 class="col-lg-4 col-md-4 col-sm-12 ms-auto d-flex align-items-center justify-content-end gap-2 mt-2 mt-md-0">
                    <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>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-header justify-content-between">
            <div class="card-title d-flex align-items-center gap-2">
                <i class="ri-file-list-3-line text-primary"></i> Riwayat Transaksi Sukses
            </div>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-primary" id="btn-refresh-table">
                    <i class="ri-refresh-line me-1" id="icon-refresh"></i> Refresh Data
                </button>
            </div>
        </div>
        <div class="card-body pb-4">
            <div class="table-responsive mb-4">
                <table id="tbl-internal-transactions" class="table table-hover text-nowrap w-100 align-middle">
                    <thead class="table-success">
                        <tr>
                            <th style="width: 45px;" class="text-center">NO</th>
                            <th>NO. PESANAN</th>
                            <th>NASABAH</th>
                            <th>PRODUK REKSA DANA</th>
                            <th>NOMINAL & UNIT</th>
                            <th class="text-center">STATUS</th>
                            <th>WAKTU TRANSAKSI</th>
                            <th style="width: 50px;" class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-order-detail" tabindex="-1" aria-labelledby="modalOrderDetailLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-light border-bottom py-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="avatar avatar-sm bg-primary-transparent rounded-circle">
                            <i class="ri-file-text-line fs-16 text-primary"></i>
                        </div>
                        <div>
                            <h6 class="modal-title fw-bold mb-0" id="modalOrderDetailLabel">Detail Transaksi</h6>
                            <span class="text-muted fs-11" id="modal-order-number-subtitle">-</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div id="modal-status-badge"></div>
                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-4">

                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border">
                                <h6 class="fw-bold fs-13 text-primary mb-3 d-flex align-items-center gap-1">
                                    <i class="ri-user-3-line"></i> Informasi Nasabah
                                </h6>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Nama Lengkap</span>
                                    <span class="detail-kv-val" id="mdl-user-name">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Email</span>
                                    <span class="detail-kv-val" id="mdl-user-email">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Nomor Telepon</span>
                                    <span class="detail-kv-val" id="mdl-user-phone">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Status KYC</span>
                                    <span class="detail-kv-val" id="mdl-user-kyc">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Xendit Customer ID</span>
                                    <span class="detail-kv-val text-primary fw-semibold" id="mdl-user-xendit-id">-</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border">
                                <h6 class="fw-bold fs-13 text-primary mb-3 d-flex align-items-center gap-1">
                                    <i class="ri-funds-box-line"></i> Produk Investasi
                                </h6>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Nama Produk</span>
                                    <span class="detail-kv-val" id="mdl-product-name">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Kode & Kategori</span>
                                    <span class="detail-kv-val" id="mdl-product-code">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">Tenor / Return</span>
                                    <span class="detail-kv-val text-success" id="mdl-product-return">-</span>
                                </div>
                                <div class="detail-kv-row">
                                    <span class="detail-kv-label">AUM Terkini</span>
                                    <span class="detail-kv-val" id="mdl-product-aum">-</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="p-3 rounded-3 border" style="background-color: #f8fafc;">
                                <h6 class="fw-bold fs-13 text-dark mb-3 d-flex align-items-center gap-1">
                                    <i class="ri-bank-card-line text-primary"></i> Rincian Pembayaran
                                </h6>
                                <div class="row g-3">
                                    <div class="col-sm-6">
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Nominal Investasi</span>
                                            <span class="detail-kv-val fs-15 text-primary fw-bold" id="mdl-amount">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Unit Penyertaan</span>
                                            <span class="detail-kv-val" id="mdl-units">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Harga NAV</span>
                                            <span class="detail-kv-val" id="mdl-nav-price">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Metode Pembayaran</span>
                                            <span class="detail-kv-val" id="mdl-payment-method">-</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">No. Rekening / VA</span>
                                            <span class="detail-kv-val text-primary fw-bold" id="mdl-account-number">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Nama Pemilik Akun VA</span>
                                            <span class="detail-kv-val" id="mdl-account-name">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Xendit v3 ID</span>
                                            <span class="detail-kv-val" id="mdl-xendit-id">-</span>
                                        </div>
                                        <div class="detail-kv-row">
                                            <span class="detail-kv-label">Batas Kadaluarsa</span>
                                            <span class="detail-kv-val text-danger" id="mdl-expired-at">-</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="alert alert-success-transparent mt-3 mb-0 d-none" id="mdl-paid-box">
                                    <i class="ri-checkbox-circle-fill me-1"></i> Telah Lunas Dibayar pada: <strong id="mdl-paid-at">-</strong>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" id="box-instructions">
                            <h6 class="fw-bold fs-13 text-dark mb-2">Panduan Pembayaran Nasabah</h6>
                            <div class="accordion" id="accordionInstructions"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light py-2">
                    <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Tutup</button>
                    <div id="modal-actions" class="d-flex align-items-center gap-2"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const csrfToken = '{{ csrf_token() }}';

            const table = $('#tbl-internal-transactions').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                stateSave: true,
                stateDuration: 7200,
                stateSaveParams: function(settings, data) {
                    data.search_query = $('#search-input').val();
                    data.transaction_type = $('#filter-transaction-type').val();
                    data.product_id = $('#filter-product').val();
                    data.payment_type = $('#filter-payment-type').val();
                    data.date_preset = $('#filter-date-preset').val();
                    data.start_date = $('#filter-start-date').val();
                    data.end_date = $('#filter-end-date').val();
                },
                stateLoadParams: function(settings, data) {
                    if (data.search_query !== undefined) $('#search-input').val(data.search_query);
                    if (data.transaction_type !== undefined) $('#filter-transaction-type').val(data.transaction_type);
                    if (data.product_id !== undefined) $('#filter-product').val(data.product_id);
                    if (data.payment_type !== undefined) $('#filter-payment-type').val(data.payment_type);
                    if (data.date_preset !== undefined) {
                        $('#filter-date-preset').val(data.date_preset);
                        if (data.date_preset === 'custom') {
                            $('.custom-date-col').removeClass('d-none');
                        } else {
                            $('.custom-date-col').addClass('d-none');
                        }
                    }
                    if (data.start_date !== undefined) $('#filter-start-date').val(data.start_date);
                    if (data.end_date !== undefined) $('#filter-end-date').val(data.end_date);
                },
                drawCallback: function(settings) {
                    const api = this.api();
                    const info = api.page.info();
                    if (info && info.pages > 0 && info.page >= info.pages) {
                        api.page('previous').draw('page');
                    }
                },
                dom: "<'row'<'col-12'tr>>" +
                     "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                ajax: {
                    url: '{{ route("internal-transactions.api.list") }}',
                    data: function(d) {
                        d.search_query     = $('#search-input').val();
                        d.transaction_type = $('#filter-transaction-type').val();
                        d.product_id       = $('#filter-product').val();
                        d.payment_type     = $('#filter-payment-type').val();
                        d.date_preset      = $('#filter-date-preset').val();
                        d.start_date       = $('#filter-start-date').val();
                        d.end_date         = $('#filter-end-date').val();
                    }
                },
                order: [[6, 'desc']],
                columns: [
                    { data: 'row_num', name: 'id', className: 'text-center' },
                    {
                        data: 'order_number',
                        name: 'order_number',
                        render: function(data, type, row) {
                            return `<div class="d-flex align-items-center gap-1">
                                        <span class="order-code-badge">${data}</span>
                                        <button type="button" class="btn btn-sm btn-icon btn-light rounded shadow-none btn-copy" data-text="${data}" title="Salin No. Pesanan" style="width: 22px; height: 22px; min-width: 22px;">
                                            <i class="ri-file-copy-line fs-11"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted d-block mt-1 fs-11">${row.xendit_id !== '-' ? 'ID: ' + row.xendit_id : ''}</small>`;
                        }
                    },
                    {
                        data: 'user_info',
                        name: 'user_info',
                        render: function(data) {
                            return `<div>
                                        <span class="fw-semibold text-dark d-block fs-13">${data.name}</span>
                                        <span class="text-muted fs-11 d-block">${data.contact}</span>
                                        <div class="mt-1">${data.kyc_html}</div>
                                    </div>`;
                        }
                    },
                    {
                        data: 'product_info',
                        name: 'product_info',
                        render: function(data) {
                            return `<div>
                                        <span class="fw-semibold text-primary d-block fs-13">${data.name}</span>
                                        <span class="badge bg-light text-muted border fs-10">${data.code}</span>
                                        <span class="text-muted fs-11 ms-1">${data.tenor} &bull; ${data.return}</span>
                                    </div>`;
                        }
                    },
                    {
                        data: 'amount_formatted',
                        name: 'amount',
                        render: function(data, type, row) {
                            return `<div>
                                        <span class="fw-bold text-dark fs-14 d-block">${data}</span>
                                        <span class="text-muted fs-11">${row.units_formatted}</span>
                                    </div>`;
                        }
                    },
                    { data: 'status_html', name: 'status', className: 'text-center' },
                    {
                        data: 'created_at_formatted',
                        name: 'created_at',
                        render: function(data, type, row) {
                            let html = `<span class="fs-12 text-dark d-block">${data}</span>`;
                            if (row.paid_at_formatted) {
                                html += `<span class="text-success fs-11 fw-semibold"><i class="ri-check-line me-1"></i>Lunas: ${row.paid_at_formatted}</span>`;
                            }
                            return html;
                        }
                    },
                    { data: 'action_buttons', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
                ],
                language: {
                    emptyTable: "Belum ada riwayat transaksi internal yang berstatus sukses.",
                    processing: '<div class="spinner-border text-primary spinner-border-sm" role="status"></div> Memuat data transaksi...',
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ transaksi",
                    infoEmpty: "Menampilkan 0 transaksi",
                    paginate: {
                        first: "Awal",
                        last: "Akhir",
                        next: "Lanjut",
                        previous: "Kembali"
                    }
                }
            });

            // Search with debounce (starts from page 0)
            let searchTimer = null;
            $('#search-input').on('keyup input', function() {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function() {
                    table.page(0).draw();
                }, 400);
            });

            // Filter dropdowns
            $('#filter-transaction-type, #filter-product, #filter-payment-type').on('change', function() {
                table.page(0).draw();
            });

            // Date preset handler
            $('#filter-date-preset').on('change', function() {
                const val = $(this).val();
                if (val === 'custom') {
                    $('.custom-date-col').removeClass('d-none');
                } else {
                    $('.custom-date-col').addClass('d-none');
                    $('#filter-start-date').val('');
                    $('#filter-end-date').val('');
                    table.page(0).draw();
                }
            });

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

            // Reset filter button
            $('#btn-reset-filter').on('click', function() {
                $('#search-input').val('');
                $('#filter-transaction-type').val('all');
                $('#filter-product').val('all');
                $('#filter-payment-type').val('all');
                $('#filter-date-preset').val('all');
                $('.custom-date-col').addClass('d-none');
                $('#filter-start-date').val('');
                $('#filter-end-date').val('');
                table.state.clear();
                table.page(0).draw();
            });

            // Refresh table
            $('#btn-refresh-table').on('click', function() {
                const icon = $('#icon-refresh');
                icon.addClass('spin-rotate');
                refreshStats();
                table.draw(false);
                setTimeout(() => icon.removeClass('spin-rotate'), 800);
            });

            function refreshStats() {
                $.getJSON('{{ route("internal-transactions.api.stats") }}', function(res) {
                    if (res.success && res.data) {
                        const d = res.data;
                        $('#stat-total-orders').text(d.total_orders_formatted);
                        $('#stat-total-volume').text(d.total_volume_formatted);
                        $('#stat-total-units').text(d.total_units_formatted);
                        $('#stat-avg-ticket').text(d.avg_ticket_formatted);
                        $('#stat-this-month-volume').text(d.this_month_volume_formatted);
                        $('#stat-this-month-count').html(`<i class="ri-calendar-line me-1 text-primary"></i>${d.this_month_count_formatted}`);
                    }
                });
            }

            $(document).on('click', '.btn-copy', function() {
                const text = $(this).data('text');
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(text);
                    const btn = $(this);
                    if (btn.is('a')) {
                        const originalHtml = btn.html();
                        btn.html('<i class="ri-check-line text-success fs-14"></i> Tersalin!');
                        setTimeout(() => btn.html(originalHtml), 1200);
                    } else {
                        btn.html('<i class="ri-check-line text-success fs-11"></i>');
                        setTimeout(() => btn.html('<i class="ri-file-copy-line fs-11"></i>'), 1200);
                    }
                }
            });

            $(document).on('click', '.btn-detail-order', function() {
                const orderId = $(this).data('id');
                $.getJSON(`{{ url('/internal-transactions') }}/${orderId}`, function(res) {
                    if (!res.success) return;
                    const d = res.data;

                    $('#modalOrderDetailLabel').text(`Detail Transaksi: ${d.order_number}`);
                    $('#modal-order-number-subtitle').text(`ID Transaksi #${d.id} &bull; Dibuat: ${d.created_at_formatted}`);

                    let badgeClass = 'bg-warning-transparent text-warning border border-warning';
                    if (d.status === 'PAID') badgeClass = 'bg-success-transparent text-success border border-success';
                    if (d.status === 'EXPIRED') badgeClass = 'bg-secondary-transparent text-secondary border';
                    if (d.status === 'CANCELLED') badgeClass = 'bg-danger-transparent text-danger border border-danger';

                    $('#modal-status-badge').html(`<span class="badge ${badgeClass} fs-11 fw-bold px-2 py-1">${d.status}</span>`);

                    $('#mdl-user-name').text(d.user.name);
                    $('#mdl-user-email').text(d.user.email);
                    $('#mdl-user-phone').text(d.user.phone);
                    let kycText = 'Belum KYC';
                    if (d.user.status_kyc === 2) kycText = 'Verified (Disetujui)';
                    if (d.user.status_kyc === 1) kycText = 'Menunggu Verifikasi';
                    if (d.user.status_kyc === 3) kycText = 'Ditolak';
                    $('#mdl-user-kyc').text(kycText);
                    $('#mdl-user-xendit-id').text(d.user.xendit_user_id || '-');

                    $('#mdl-product-name').text(d.product.name);
                    $('#mdl-product-code').text(`${d.product.code} - ${d.product.category}`);
                    $('#mdl-product-return').text(`${d.product.tenor} &bull; Return: ${d.product.expected_return}`);
                    $('#mdl-product-aum').text(d.product.aum_formatted);

                    $('#mdl-amount').text(d.amount_formatted);
                    $('#mdl-units').text(d.units_formatted);
                    $('#mdl-nav-price').text(d.nav_price_formatted);
                    $('#mdl-payment-method').text(`${d.payment_method} (${d.payment_type})`);
                    $('#mdl-account-number').text(d.payment_account_number || '-');
                    $('#mdl-account-name').text(d.payment_account_name || '-');
                    $('#mdl-xendit-id').text(d.xendit_id || '-');
                    $('#mdl-expired-at').text(d.expired_at_formatted || '-');

                    if (d.status === 'PAID') {
                        $('#mdl-paid-box').removeClass('d-none');
                        $('#mdl-paid-at').text(d.paid_at_formatted);
                    } else {
                        $('#mdl-paid-box').addClass('d-none');
                    }

                    const accBox = $('#accordionInstructions');
                    accBox.empty();
                    if (d.payment_instructions && d.payment_instructions.length > 0) {
                        $('#box-instructions').removeClass('d-none');
                        d.payment_instructions.forEach((inst, idx) => {
                            let stepsHtml = '<ol class="mb-0 ps-3">';
                            if (inst.steps) {
                                inst.steps.forEach(st => stepsHtml += `<li class="mb-1 fs-12">${st}</li>`);
                            }
                            stepsHtml += '</ol>';

                            const item = `
                                <div class="accordion-item border mb-2 rounded overflow-hidden">
                                    <h2 class="accordion-header" id="headingInst${idx}">
                                        <button class="accordion-button collapsed py-2 px-3 fs-13 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInst${idx}">
                                            <i class="ri-arrow-right-s-line me-1"></i> ${inst.channel}
                                        </button>
                                    </h2>
                                    <div id="collapseInst${idx}" class="accordion-collapse collapse" data-bs-parent="#accordionInstructions">
                                        <div class="accordion-body p-3 bg-white">
                                            ${stepsHtml}
                                        </div>
                                    </div>
                                </div>
                            `;
                            accBox.append(item);
                        });
                    } else {
                        $('#box-instructions').addClass('d-none');
                    }

                    const actBox = $('#modal-actions');
                    actBox.empty();

                    if (d.status === 'PENDING') {
                        if (d.order_number && d.order_number.startsWith('RED-')) {
                            actBox.append(`
                                <button type="button" class="btn btn-sm btn-success btn-approve-redeem" data-id="${d.id}">
                                    <i class="ri-check-double-line me-1"></i> Setujui Pencairan (Transfer Selesai)
                                </button>
                                <button type="button" class="btn btn-sm btn-danger btn-reject-redeem" data-id="${d.id}">
                                    <i class="ri-close-line me-1"></i> Tolak Pencairan
                                </button>
                            `);
                        } else {
                            actBox.append(`
                                <button type="button" class="btn btn-sm btn-info btn-sync-order" data-id="${d.id}">
                                    <i class="ri-refresh-line me-1"></i> Cek Status Xendit v3
                                </button>
                                <button type="button" class="btn btn-sm btn-success btn-pay-order" data-id="${d.id}">
                                    <i class="ri-check-line me-1"></i> Verifikasi Lunas (Manual)
                                </button>
                                <button type="button" class="btn btn-sm btn-danger btn-cancel-order" data-id="${d.id}">
                                    <i class="ri-close-line me-1"></i> Batalkan
                                </button>
                            `);
                        }
                    }

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

            $(document).on('click', '.btn-sync-order', function() {
                const btn = $(this);
                const orderId = btn.data('id');
                btn.prop('disabled', true).html('<i class="ri-refresh-line spin-rotate me-1"></i> Mengecek...');

                $.ajax({
                    url: `{{ url('/internal-transactions') }}/${orderId}/sync-status`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-refresh-line me-1"></i> Cek Status Xendit v3');
                        if (res.success) {
                            alert(res.message);
                            $('#modal-order-detail').modal('hide');
                            table.draw(false);
                            refreshStats();
                        } else {
                            alert(res.message || 'Gagal sinkronisasi');
                        }
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-refresh-line me-1"></i> Cek Status Xendit v3');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Koneksi gagal';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-pay-order', function() {
                const orderId = $(this).data('id');
                if (!confirm('Apakah Anda yakin ingin memverifikasi transaksi ini sebagai LUNAS (PAID)? AUM produk akan otomatis disinkronkan.')) {
                    return;
                }

                $.ajax({
                    url: `{{ url('/internal-transactions') }}/${orderId}/mark-paid`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    success: function(res) {
                        alert(res.message);
                        $('#modal-order-detail').modal('hide');
                        table.draw(false);
                        refreshStats();
                    },
                    error: function(err) {
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal verifikasi pembayaran';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-cancel-order', function() {
                const orderId = $(this).data('id');
                if (!confirm('Apakah Anda yakin ingin membatalkan transaksi ini?')) {
                    return;
                }

                $.ajax({
                    url: `{{ url('/internal-transactions') }}/${orderId}/cancel`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    success: function(res) {
                        alert(res.message);
                        $('#modal-order-detail').modal('hide');
                        table.draw(false);
                        refreshStats();
                    },
                    error: function(err) {
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal membatalkan transaksi';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-approve-redeem', function() {
                const orderId = $(this).data('id');
                const notes = prompt('Masukkan catatan transfer / no referensi bank (opsional):', 'Transfer via Admin Finance');
                if (notes === null) return;

                $.ajax({
                    url: `{{ url('/internal-transactions') }}/${orderId}/approve-redemption`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { admin_notes: notes },
                    success: function(res) {
                        alert(res.message);
                        $('#modal-order-detail').modal('hide');
                        table.draw(false);
                        refreshStats();
                    },
                    error: function(err) {
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menyetujui pencairan';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-reject-redeem', function() {
                const orderId = $(this).data('id');
                const notes = prompt('Masukkan alasan penolakan pencairan:', 'Informasi rekening nasabah tidak sesuai');
                if (notes === null) return;

                $.ajax({
                    url: `{{ url('/internal-transactions') }}/${orderId}/reject-redemption`,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { admin_notes: notes },
                    success: function(res) {
                        alert(res.message);
                        $('#modal-order-detail').modal('hide');
                        table.draw(false);
                        refreshStats();
                    },
                    error: function(err) {
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menolak pencairan';
                        alert('Error: ' + msg);
                    }
                });
            });
        });
    </script>
@endsection