@extends('layouts.master')

@section('styles')
    <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);
        }
        .money-in-badge {
            background-color: #f0fdf4;
            color: #16a34a;
            border: 1px solid #bbf7d0;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .money-out-badge {
            background-color: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .type-pill {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 5px;
        }
        .json-viewer {
            background-color: #1e293b;
            color: #38bdf8;
            font-family: 'Courier New', Courier, monospace;
            font-size: 12px;
            padding: 14px;
            border-radius: 8px;
            max-height: 380px;
            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">Daftar Transaksi Xendit (Tracking Real-Time)</h1>
                <p class="text-muted mb-0 fs-13">Tracking semua tipe transaksi murni langsung dari Xendit API (Payment, Disbursement, Top-Up, Transfer, & Refund) tanpa perlu login ke dashboard Xendit.</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                @if($isConfigured)
                    <span class="badge bg-success-transparent text-success border border-success p-2 fs-12">
                        <i class="ri-signal-tower-line me-1"></i> Xendit API Terhubung ({{ $environment }})
                    </span>
                @else
                    <span class="badge bg-light text-muted border p-2 fs-12" title="Tambahkan XENDIT_SECRET_KEY di file .env">
                        <i class="ri-key-line me-1"></i> API Key Belum Diisi
                    </span>
                @endif
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Xendit</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Daftar Transaksi</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-3">
        <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-info fs-11 fw-semibold text-uppercase mb-1">TOTAL SALDO XENDIT</span>
                            <div class="d-flex align-items-center gap-2">
                                <h3 class="mb-0 fw-bold text-dark" id="stat-xendit-balance">{{ $balanceFormatted ?? 'Rp 0' }}</h3>
                                <button type="button" class="btn btn-sm btn-icon btn-light border rounded-circle shadow-none p-0 text-muted" id="btn-refresh-balance" title="Refresh Saldo Saja" style="width: 26px; height: 26px; min-width: 26px;">
                                    <i class="ri-refresh-line fs-14" id="icon-refresh-balance"></i>
                                </button>
                            </div>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-wallet-3-line me-1 text-info"></i>Saldo Kas (CASH)</span>
                        </div>
                        <div class="avatar avatar-md bg-info-transparent rounded-circle">
                            <i class="ri-wallet-3-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">TOTAL TRANSAKSI</span>
                            <h3 class="mb-0 fw-bold text-dark" id="stat-total-count">-</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-exchange-line me-1"></i>Semua tipe transaksi</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent rounded-circle">
                            <i class="ri-file-list-3-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-success fs-11 fw-semibold text-uppercase mb-1">UANG MASUK</span>
                            <h3 class="mb-0 fw-bold text-success" id="stat-money-in">-</h3>
                            <span class="text-muted fs-11 mt-1 d-block" id="stat-money-in-count"><i class="ri-arrow-down-circle-line me-1 text-success"></i>Beli Saham & Top-up</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent rounded-circle">
                            <i class="ri-arrow-down-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-danger fs-11 fw-semibold text-uppercase mb-1">UANG KELUAR</span>
                            <h3 class="mb-0 fw-bold text-danger" id="stat-money-out">-</h3>
                            <span class="text-muted fs-11 mt-1 d-block" id="stat-money-out-count"><i class="ri-arrow-up-circle-line me-1 text-danger"></i>Disbursement</span>
                        </div>
                        <div class="avatar avatar-md bg-danger-transparent rounded-circle">
                            <i class="ri-arrow-up-circle-line fs-20 text-danger"></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">BIAYA XENDIT</span>
                            <h3 class="mb-0 fw-bold text-dark" id="stat-total-fees">-</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-percent-line me-1"></i>Fee gateway & PPN</span>
                        </div>
                        <div class="avatar avatar-md bg-warning-transparent rounded-circle">
                            <i class="ri-coins-line fs-20 text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between border-bottom-0 flex-wrap gap-2">

                    <div class="d-flex align-items-center gap-2 flex-grow-1 flex-wrap">
                        <div class="input-group" style="max-width: 280px;">
                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                            <input class="form-control border-start-0" type="search" id="search-input" placeholder="Cari ID, Ref ID, Deskripsi..." aria-label="Search">
                        </div>

                        <select class="form-select" id="filter-type" style="width: auto; min-width: 190px;">
                            <option value="all">Semua Tipe Transaksi</option>
                            <option value="PAYMENT">PAYMENT (Pembayaran / Saham)</option>
                            <option value="DISBURSEMENT">DISBURSEMENT (Penarikan Bank)</option>
                            <option value="BATCH_DISBURSEMENT">BATCH_DISBURSEMENT</option>
                            <option value="TOPUP">TOPUP (Isi Saldo)</option>
                            <option value="TRANSFER">TRANSFER (Transfer Akun)</option>
                            <option value="REFUND">REFUND (Pengembalian Dana)</option>
                            <option value="ADJUSTMENT">ADJUSTMENT (Penyesuaian)</option>
                        </select>

                        <select class="form-select" id="filter-cashflow" style="width: auto; min-width: 170px;">
                            <option value="all">Semua Arus Kas</option>
                            <option value="MONEY_IN">🟢 MONEY_IN (Uang Masuk)</option>
                            <option value="MONEY_OUT">🔴 MONEY_OUT (Uang Keluar)</option>
                        </select>

                        <select class="form-select" id="filter-channel" style="width: auto; min-width: 160px;">
                            <option value="all">Semua Kanal</option>
                            <option value="BANK">BANK (Transfer / VA)</option>
                            <option value="VIRTUAL_ACCOUNT">VIRTUAL_ACCOUNT</option>
                            <option value="QR_CODE">QR_CODE (QRIS)</option>
                            <option value="EWALLET">EWALLET</option>
                            <option value="CARDS">CARDS (Kartu Kredit/Debit)</option>
                        </select>

                        <select class="form-select" id="filter-status" style="width: auto; min-width: 140px;">
                            <option value="all">Semua Status</option>
                            <option value="SUCCESSFUL">SUCCESSFUL</option>
                            <option value="PENDING">PENDING</option>
                            <option value="FAILED">FAILED</option>
                        </select>

                        <button type="button" class="btn btn-light btn-icon" id="btn-reset-filters" title="Reset Filter">
                            <i class="ri-refresh-line"></i>
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="table-xendit-transactions" class="table table-hover text-nowrap w-100 align-middle">
                            <thead class="table-primary">
                                <tr>
                                    <th style="width: 50px;" class="text-center">#</th>
                                    <th>ID Transaksi & Waktu</th>
                                    <th>Arus Kas & Tipe Xendit</th>
                                    <th>Kanal & Akun</th>
                                    <th>Deskripsi Transaksi</th>
                                    <th>Nominal (Gross)</th>
                                    <th>Biaya Xendit</th>
                                    <th>Nominal Bersih (Net)</th>
                                    <th style="width: 100px;" class="text-center">Status</th>
                                    <th style="width: 70px;" class="text-center">Detail</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalDetailTransaction" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold d-flex align-items-center gap-2">
                        <i class="ri-file-code-line text-primary fs-18"></i> Rincian Data Transaksi Murni Xendit API
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">ID Transaksi Xendit</label>
                            <span class="fw-bold font-monospace fs-13 text-primary" id="modal_tx_id">-</span>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Reference ID / External ID</label>
                            <span class="font-monospace fs-13 text-dark" id="modal_reference_id">-</span>
                        </div>

                        <div class="col-12"><hr class="my-1"></div>

                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Tipe Layanan Xendit</label>
                            <div id="modal_type" class="mt-1">-</div>
                        </div>
                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Arus Kas (Cashflow)</label>
                            <div id="modal_cashflow" class="mt-1">-</div>
                        </div>
                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Status Transaksi</label>
                            <div id="modal_status" class="mt-1">-</div>
                        </div>

                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Nominal Kotor (Amount)</label>
                            <span class="fw-bold fs-14 text-dark" id="modal_amount">-</span>
                        </div>
                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Biaya Xendit + PPN (Fee)</label>
                            <span class="text-muted fs-13" id="modal_fee">-</span>
                        </div>
                        <div class="col-md-4">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Nominal Bersih (Net Amount)</label>
                            <span class="fw-bold fs-14 text-success" id="modal_net_amount">-</span>
                        </div>

                        <div class="col-md-6">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Kanal Pembayaran</label>
                            <span class="text-dark fs-13" id="modal_channel">-</span>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Waktu Transaksi</label>
                            <span class="text-dark fs-13" id="modal_created">-</span>
                        </div>

                        <div class="col-12">
                            <label class="text-muted fs-11 text-uppercase fw-semibold d-block">Deskripsi</label>
                            <p class="text-dark fs-12 mb-0 bg-light p-2 rounded" id="modal_description">-</p>
                        </div>
                    </div>

                    <div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <label class="fw-bold fs-12 text-muted mb-0">RAW JSON PAYLOAD DARI XENDIT:</label>
                            <button type="button" class="btn btn-xs btn-outline-secondary" id="btn-copy-json">
                                <i class="ri-file-copy-line me-1"></i> Salin JSON
                            </button>
                        </div>
                        <pre class="json-viewer mb-0" id="modal_raw_json">{}</pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.datatable-assets')

    <script>
        $(document).ready(function () {

            function getTypeBadge(type) {
                switch(type) {
                    case 'PAYMENT':
                        return `<span class="badge bg-primary-transparent text-primary type-pill"><i class="ri-shopping-cart-2-line me-1"></i>PAYMENT (Beli Saham/Investasi)</span>`;
                    case 'DISBURSEMENT':
                        return `<span class="badge bg-danger-transparent text-danger type-pill"><i class="ri-upload-2-line me-1"></i>DISBURSEMENT (Penarikan)</span>`;
                    case 'BATCH_DISBURSEMENT':
                        return `<span class="badge bg-danger-transparent text-danger type-pill"><i class="ri-upload-cloud-line me-1"></i>BATCH_DISBURSEMENT</span>`;
                    case 'TOPUP':
                        return `<span class="badge bg-info-transparent text-info type-pill"><i class="ri-wallet-3-line me-1"></i>TOPUP</span>`;
                    case 'TRANSFER':
                        return `<span class="badge bg-purple-transparent text-purple type-pill"><i class="ri-exchange-line me-1"></i>TRANSFER</span>`;
                    case 'REFUND':
                        return `<span class="badge bg-warning-transparent text-warning type-pill"><i class="ri-arrow-go-back-line me-1"></i>REFUND</span>`;
                    case 'ADJUSTMENT':
                        return `<span class="badge bg-secondary-transparent text-secondary type-pill"><i class="ri-equalizer-line me-1"></i>ADJUSTMENT</span>`;
                    default:
                        return `<span class="badge bg-light text-dark type-pill border font-monospace">${AppDatatable.escapeHtml(type)}</span>`;
                }
            }

            const table = AppDatatable.init('#table-xendit-transactions', {
                pageLength: 25,
                lengthMenu: [[10, 25, 50], [10, 25, 50]],
                ajax: {
                    url: '{{ route("xendit.transactions.api.list") }}',
                    type: 'GET',
                    data: function (d) {
                        d.search = $('#search-input').val();
                        d.type = $('#filter-type').val();
                        d.cashflow = $('#filter-cashflow').val();
                        d.channel_category = $('#filter-channel').val();
                        d.status = $('#filter-status').val();
                    },
                    dataSrc: function (json) {
                        if (json.balance_formatted) {
                            $('#stat-xendit-balance').text(json.balance_formatted);
                        }
                        if (json.summary) {
                            $('#stat-total-count').text(json.summary.total_count + ' Transaksi');
                            $('#stat-money-in').text(json.summary.money_in_amount_formatted);
                            $('#stat-money-in-count').html(`<i class="ri-arrow-down-circle-line me-1 text-success"></i>${json.summary.money_in_count} transaksi masuk`);
                            $('#stat-money-out').text(json.summary.money_out_amount_formatted);
                            $('#stat-money-out-count').html(`<i class="ri-arrow-up-circle-line me-1 text-danger"></i>${json.summary.money_out_count} disbursement`);
                            $('#stat-total-fees').text(json.summary.total_fees_formatted);
                        }
                        return json.data || [];
                    }
                },
                columns: [
                    { data: 'row_num', name: 'row_num', orderable: false, className: 'text-center text-muted fs-12' },
                    {
                        data: 'id',
                        name: 'id',
                        render: function (data, type, row) {
                            return `
                                <div>
                                    <span class="fw-bold font-monospace text-primary d-block fs-12">${AppDatatable.escapeHtml(data)}</span>
                                    <span class="text-muted fs-11 font-monospace d-block">Ref: ${AppDatatable.escapeHtml(row.reference_id)}</span>
                                    <span class="text-muted fs-10">${row.created_formatted}</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'type',
                        name: 'type',
                        render: function (data, type, row) {
                            const cashflowBadge = row.cashflow === 'MONEY_IN'
                                ? `<span class="money-in-badge mb-1"><i class="ri-arrow-down-line"></i> MONEY_IN</span>`
                                : `<span class="money-out-badge mb-1"><i class="ri-arrow-up-line"></i> MONEY_OUT</span>`;

                            return `
                                <div>
                                    ${cashflowBadge}
                                    <div>${getTypeBadge(data)}</div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'channel_category',
                        name: 'channel_category',
                        render: function (data, type, row) {
                            return `
                                <div>
                                    <span class="badge bg-light text-dark border fs-11 d-inline-block mb-1">${AppDatatable.escapeHtml(data)}</span>
                                    <span class="fw-semibold text-dark fs-12 d-block">${AppDatatable.escapeHtml(row.channel_code)}</span>
                                    <span class="text-muted fs-10 font-monospace">${AppDatatable.escapeHtml(row.account_identifier)}</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'description',
                        name: 'description',
                        render: function (data) {
                            return `<span class="fs-12 text-dark d-block text-wrap" style="max-width: 250px;">${AppDatatable.escapeHtml(data)}</span>`;
                        }
                    },
                    {
                        data: 'amount_formatted',
                        name: 'amount',
                        render: function (data, type, row) {
                            const colorClass = row.cashflow === 'MONEY_IN' ? 'text-success' : 'text-danger';
                            const prefix = row.cashflow === 'MONEY_IN' ? '+ ' : '- ';
                            return `<span class="fw-bold ${colorClass} fs-13">${prefix}${data}</span>`;
                        }
                    },
                    {
                        data: 'fee_formatted',
                        name: 'fee_amount',
                        render: function (data) {
                            return `<span class="text-muted fs-12">${data}</span>`;
                        }
                    },
                    {
                        data: 'net_amount_formatted',
                        name: 'net_amount',
                        render: function (data) {
                            return `<span class="fw-semibold text-dark fs-13">${data}</span>`;
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        className: 'text-center',
                        render: function (data) {
                            switch(data) {
                                case 'SUCCESSFUL':
                                case 'COMPLETED':
                                case 'SETTLED':
                                    return `<span class="badge bg-success fs-11"><i class="ri-check-line me-1"></i>${data}</span>`;
                                case 'PENDING':
                                    return `<span class="badge bg-warning text-dark fs-11"><i class="ri-time-line me-1"></i>PENDING</span>`;
                                case 'FAILED':
                                    return `<span class="badge bg-danger fs-11">FAILED</span>`;
                                default:
                                    return `<span class="badge bg-secondary fs-11">${data}</span>`;
                            }
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function (data, type, row) {
                            const rowJson = encodeURIComponent(JSON.stringify(row));
                            return `
                                <button type="button" class="btn btn-sm btn-icon btn-light border btn-view-raw-json" data-row="${rowJson}" title="Lihat Detail & Raw JSON">
                                    <i class="ri-code-s-slash-line text-primary"></i>
                                </button>
                            `;
                        }
                    }
                ]
            });

            AppDatatable.bindSearch(table, '#search-input');

            $('#filter-type, #filter-cashflow, #filter-channel, #filter-status').on('change', function () {
                table.ajax.reload();
            });

            $('#btn-reset-filters').on('click', function () {
                $('#search-input').val('');
                $('#filter-type').val('all');
                $('#filter-cashflow').val('all');
                $('#filter-channel').val('all');
                $('#filter-status').val('all');
                table.ajax.reload();
            });

            $('#btn-refresh-balance').on('click', function () {
                const $btn = $(this);
                const $icon = $('#icon-refresh-balance');

                $btn.prop('disabled', true);
                $icon.addClass('spin-rotate');

                $.ajax({
                    url: '{{ route("xendit.transactions.api.balance") }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        if (res.balance_formatted) {
                            $('#stat-xendit-balance').text(res.balance_formatted);
                        }
                    },
                    error: function (xhr) {
                        console.error('Gagal mengambil saldo:', xhr);
                    },
                    complete: function () {
                        $btn.prop('disabled', false);
                        $icon.removeClass('spin-rotate');
                    }
                });
            });

            $(document).on('click', '.btn-view-raw-json', function () {
                const row = JSON.parse(decodeURIComponent($(this).data('row')));

                $('#modal_tx_id').text(row.id);
                $('#modal_reference_id').text(row.reference_id);
                $('#modal_type').html(getTypeBadge(row.type));
                $('#modal_cashflow').html(row.cashflow === 'MONEY_IN'
                    ? '<span class="money-in-badge"><i class="ri-arrow-down-line"></i> MONEY_IN (Uang Masuk)</span>'
                    : '<span class="money-out-badge"><i class="ri-arrow-up-line"></i> MONEY_OUT (Uang Keluar)</span>');

                $('#modal_amount').text(row.amount_formatted);
                $('#modal_fee').text(row.fee_formatted);
                $('#modal_net_amount').text(row.net_amount_formatted);
                $('#modal_channel').text(row.channel_category + ' (' + row.channel_code + ') - ' + row.account_identifier);
                $('#modal_created').text(row.created_formatted);
                $('#modal_description').text(row.description);
                $('#modal_status').html(`<span class="badge bg-${row.status === 'SUCCESSFUL' ? 'success' : 'secondary'} fs-12">${row.status}</span>`);

                const formattedJson = JSON.stringify(row.raw_json, null, 4);
                $('#modal_raw_json').text(formattedJson);

                $('#modalDetailTransaction').modal('show');
            });

            $('#btn-copy-json').on('click', function () {
                const text = $('#modal_raw_json').text();
                navigator.clipboard.writeText(text).then(function () {
                    alert('Raw JSON transaksi berhasil disalin ke clipboard!');
                });
            });
        });
    </script>
@endsection