@extends('layouts.master')

@section('styles')
    <style>
        .simulator-card {
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }
        .simulator-card:hover {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }
        .json-response-box {
            background-color: #0f172a;
            color: #38bdf8;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 13px;
            padding: 16px;
            border-radius: 10px;
            border: 1px solid #1e293b;
            max-height: 320px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .pill-quick-amount {
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }
        .pill-quick-amount:hover {
            transform: scale(1.05);
        }
        .status-badge-paid {
            background-color: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
        }
        .status-badge-pending {
            background-color: #fef3c7;
            color: #b45309;
            border: 1px solid #fde68a;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
        }
        @keyframes pulse-border {
            0% { box-shadow: 0 0 0 0 rgba(14, 122, 83, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(14, 122, 83, 0); }
            100% { box-shadow: 0 0 0 0 rgba(14, 122, 83, 0); }
        }
        .highlight-form {
            animation: pulse-border 1.2s infinite;
        }
    </style>
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h1 class="page-title fw-bold fs-18 mb-1">
                    <i class="ri-flashlight-line text-warning me-1"></i> Simulator Pembayaran Virtual Account (Dev & Staging)
                </h1>
                <p class="text-muted mb-0 fs-13">Uji coba simulasi pembayaran Virtual Account secara instan via Xendit API v3 tanpa perlu transfer dana riil.</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-warning-transparent text-warning border border-warning py-2 px-3 fs-12 fw-semibold">
                    <i class="ri-flask-line me-1"></i> Sandbox Mode ({{ strtoupper($envName) }})
                </span>
                @if($isConfigured)
                    <span class="badge bg-success-transparent text-success border border-success py-2 px-3 fs-12">
                        <i class="ri-checkbox-circle-line me-1"></i> API Key Aktif
                    </span>
                @else
                    <span class="badge bg-danger-transparent text-danger border border-danger py-2 px-3 fs-12">
                        <i class="ri-close-circle-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">Simulasi VA</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="row g-4">

        <div class="col-12">
            <div class="card custom-card simulator-card mb-0" id="card-simulator-form">
                <div class="card-header border-bottom justify-content-between">
                    <div class="card-title fw-bold fs-15 text-dark d-flex align-items-center gap-2">
                        <span class="avatar avatar-sm bg-primary-transparent rounded-circle text-primary">
                            <i class="ri-terminal-box-line fs-16"></i>
                        </span>
                        Form Eksekusi Simulasi Virtual Account
                    </div>
                    <span class="badge bg-light text-muted border">v3 Simulate</span>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">

                        <div class="col-xl-6 col-lg-6">
                            <form id="form-simulate-va" autocomplete="off">
                                @csrf

                                <div class="mb-3">
                                    <label for="input-payment-request-id" class="form-label fw-semibold text-dark fs-13">
                                        1. Payment Request ID <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light text-muted border-end-0">
                                            <i class="ri-key-2-line"></i>
                                        </span>
                                        <input type="text"
                                               class="form-control border-start-0 ps-0"
                                               id="input-payment-request-id"
                                               name="payment_request_id"
                                               placeholder="pr-b1370c67-fdcb-4983-be97-dcfd94ac3215"
                                               required>
                                        <button class="btn btn-outline-light border text-muted" type="button" id="btn-paste-id" title="Tempel dari Clipboard">
                                            <i class="ri-clipboard-line"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted fs-11 mt-1 d-block">
                                        <i class="ri-information-line me-1"></i>Pilih tombol <strong>"⚡ Gunakan"</strong> dari tabel di bawah atau tempel ID transaksi Xendit v3.
                                    </small>
                                </div>

                                <div class="mb-4">
                                    <label for="input-amount" class="form-label fw-semibold text-dark fs-13">
                                        2. Nominal Pembayaran (Angka) <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group mb-2">
                                        <span class="input-group-text bg-light fw-bold text-dark border-end-0">Rp</span>
                                        <input type="number"
                                               class="form-control border-start-0 ps-1 fw-bold fs-15"
                                               id="input-amount"
                                               name="amount"
                                               placeholder="1055000"
                                               min="1000"
                                               step="1"
                                               required>
                                    </div>

                                    <div class="d-flex flex-wrap gap-1 mt-2">
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(50000)">Rp 50.000</span>
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(100000)">Rp 100.000</span>
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(500000)">Rp 500.000</span>
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(1055000)">Rp 1.055.000</span>
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(10000000)">Rp 10.000.000</span>
                                        <span class="badge bg-light text-dark border pill-quick-amount" onclick="setAmount(100000000)">Rp 100.000.000</span>
                                    </div>
                                </div>

                                <div class="d-grid mb-2">
                                    <button type="submit" class="btn btn-primary btn-wave py-2 fw-bold fs-14" id="btn-submit-simulate">
                                        <i class="ri-flashlight-line me-1 fs-16"></i> Kirim Simulasi Pembayaran
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="col-xl-6 col-lg-6">

                            <div id="sim-result-container" class="d-none">
                                <div class="p-3 rounded-3 mb-3" id="sim-result-alert">
                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                        <span class="fw-bold fs-13" id="sim-result-title">Hasil Simulasi:</span>
                                        <span class="badge" id="sim-result-status-badge"></span>
                                    </div>
                                    <div class="fs-12" id="sim-result-message"></div>
                                </div>

                                <div id="sim-order-updated-box" class="alert alert-success bg-success-transparent border-success border-opacity-25 d-none p-3 rounded-3 mb-3 fs-12">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <i class="ri-checkbox-circle-fill text-success fs-16"></i>
                                        <strong class="text-success">Status Pesanan Internal Berhasil Diperbarui!</strong>
                                    </div>
                                    <div id="sim-order-details"></div>
                                </div>

                                <div>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <small class="text-muted fw-semibold fs-11 text-uppercase">Respons JSON dari Xendit API (200 OK):</small>
                                        <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none fs-11" onclick="copyJsonResponse()">
                                            <i class="ri-file-copy-line me-1"></i>Salin JSON
                                        </button>
                                    </div>
                                    <pre class="json-response-box mb-0" id="json-response-content">{
  "status": "IDLE"
}</pre>
                                </div>
                            </div>

                            <div id="sim-placeholder" class="h-100 d-flex flex-column justify-content-center align-items-center text-center p-4 border rounded-3 bg-light bg-opacity-50" style="min-height: 250px;">
                                <span class="avatar avatar-lg bg-primary-transparent rounded-circle text-primary mb-3">
                                    <i class="ri-terminal-box-line fs-24"></i>
                                </span>
                                <h6 class="fw-bold text-dark mb-1">Respons Simulasi Xendit</h6>
                                <p class="text-muted fs-12 mb-0" style="max-width: 320px;">
                                    Pilih transaksi pada tabel di bawah atau isi formulir lalu klik <strong>"Kirim Simulasi Pembayaran"</strong>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card custom-card simulator-card mb-0">
                <div class="card-header border-bottom justify-content-between align-items-center">
                    <div>
                        <div class="card-title fw-bold fs-15 text-dark mb-1 d-flex align-items-center gap-2">
                            <span class="avatar avatar-sm bg-success-transparent rounded-circle text-success">
                                <i class="ri-bank-card-line fs-16"></i>
                            </span>
                            Pilih Cepat Transaksi Virtual Account (Menunggu Bayar)
                        </div>
                        <p class="text-muted fs-12 mb-0">Klik tombol <strong>"⚡ Gunakan"</strong> pada transaksi berstatus <strong>PENDING</strong> di bawah untuk simulasi pembayaran otomatis.</p>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-light border text-muted shadow-none" id="btn-refresh-orders" title="Muat Ulang Transaksi">
                        <i class="ri-refresh-line fs-14" id="icon-refresh-orders"></i> Refresh
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 540px;">
                        <table class="table table-hover align-middle mb-0 text-nowrap">
                            <thead class="table-light">
                                <tr class="fs-12 text-uppercase text-muted">
                                    <th>No. Pesanan & Nasabah</th>
                                    <th>Metode VA</th>
                                    <th>Nominal</th>
                                    <th>ID Xendit (Payment Request)</th>
                                    <th>Status</th>
                                    <th class="text-end">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-recent-orders" class="fs-13">
                                @forelse($recentVaOrders as $order)
                                    <tr id="row-order-{{ $order->id }}">
                                        <td>
                                            <div class="fw-semibold text-dark">{{ $order->display_order_number ?? $order->order_number }}</div>
                                            <small class="text-muted fs-11">{{ $order->user?->name ?? 'Nasabah DBIC' }}</small>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark border">
                                                <i class="ri-bank-line me-1 text-primary"></i>{{ $order->payment_method }}
                                            </span>
                                            @if($order->payment_account_number)
                                                <div class="text-muted fs-11 mt-1 font-monospace">{{ $order->payment_account_number }}</div>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $effAmount = $order->total_package_amount ?? (float) $order->amount;
                                            @endphp
                                            <span class="fw-bold text-dark">Rp {{ number_format($effAmount, 0, ',', '.') }}</span>
                                            @if(!empty($order->is_package))
                                                <span class="badge bg-info-transparent text-info border border-info fs-10 ms-1">Paket ({{ $order->package_count }} Produk)</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="font-monospace text-primary fs-11" title="{{ $order->xendit_id }}">
                                                {{ Str::limit($order->xendit_id, 24) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($order->status === 'PAID')
                                                <span class="status-badge-paid fs-11">
                                                    <i class="ri-checkbox-circle-line me-1"></i>LUNAS
                                                </span>
                                            @else
                                                <span class="status-badge-pending fs-11">
                                                    <i class="ri-time-line me-1"></i>PENDING
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <button type="button"
                                                    class="btn btn-sm btn-success-light fw-bold py-1 px-2 fs-12 btn-use-order"
                                                    data-xendit-id="{{ $order->xendit_id }}"
                                                    data-amount="{{ $effAmount }}"
                                                    onclick="selectOrderForSim('{{ $order->xendit_id }}', '{{ $effAmount }}')">
                                                <i class="ri-flashlight-line me-1"></i>Gunakan
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted fs-13">
                                            <i class="ri-checkbox-circle-line fs-28 d-block mb-1 text-success"></i>
                                            Tidak ada tagihan Virtual Account yang perlu dibayar (semua transaksi telah lunas).
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function setAmount(val) {
            var inputAmount = document.getElementById('input-amount');
            if (inputAmount) {
                inputAmount.value = val;
                inputAmount.dispatchEvent(new Event('input', { bubbles: true }));
                inputAmount.dispatchEvent(new Event('change', { bubbles: true }));
            }
        }
        window.setAmount = setAmount;

        function selectOrderForSim(xenditId, amount) {
            var inputId = document.getElementById('input-payment-request-id');
            var inputAmount = document.getElementById('input-amount');

            if (inputId) {
                inputId.value = (xenditId || '').trim();
                inputId.dispatchEvent(new Event('input', { bubbles: true }));
                inputId.dispatchEvent(new Event('change', { bubbles: true }));
            }

            if (inputAmount) {
                inputAmount.value = amount ? parseFloat(amount) : '';
                inputAmount.dispatchEvent(new Event('input', { bubbles: true }));
                inputAmount.dispatchEvent(new Event('change', { bubbles: true }));
            }

            var formCard = document.getElementById('card-simulator-form');
            if (formCard) {
                formCard.classList.add('highlight-form');
                setTimeout(function() {
                    formCard.classList.remove('highlight-form');
                }, 1200);

                formCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
        window.selectOrderForSim = selectOrderForSim;

        document.addEventListener('click', function(e) {
            var btn = e.target.closest('.btn-use-order');
            if (btn) {
                var xenditId = btn.getAttribute('data-xendit-id');
                var amount = btn.getAttribute('data-amount');
                if (xenditId) {
                    selectOrderForSim(xenditId, amount);
                }
            }
        });

        function copyJsonResponse() {
            var text = $('#json-response-content').text();
            navigator.clipboard.writeText(text).then(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Tersalin',
                    text: 'Respons JSON berhasil disalin ke clipboard.',
                    timer: 1200,
                    showConfirmButton: false
                });
            });
        }
        window.copyJsonResponse = copyJsonResponse;

        $(document).ready(function() {

            $('#btn-paste-id').on('click', function() {
                navigator.clipboard.readText().then(function(clipText) {
                    if (clipText) {
                        $('#input-payment-request-id').val(clipText.trim());
                    }
                }).catch(function() {
                    alert('Tidak dapat membaca clipboard. Silakan tempel secara manual.');
                });
            });

            $('#form-simulate-va').on('submit', function(e) {
                e.preventDefault();

                var paymentRequestId = $('#input-payment-request-id').val().trim();
                var amount = $('#input-amount').val();

                if (!paymentRequestId) {
                    Swal.fire('Perhatian', 'Harap masukkan Payment Request ID terlebih dahulu.', 'warning');
                    return;
                }

                if (!amount || parseFloat(amount) <= 0) {
                    Swal.fire('Perhatian', 'Harap masukkan nominal angka yang valid.', 'warning');
                    return;
                }

                var $btn = $('#btn-submit-simulate');
                var originalHtml = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Memproses Simulasi Xendit...');

                $.ajax({
                    url: "{{ route('xendit.simulator.execute') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        payment_request_id: paymentRequestId,
                        amount: amount
                    },
                    dataType: "json",
                    success: function(res) {
                        $btn.prop('disabled', false).html(originalHtml);

                        $('#sim-placeholder').addClass('d-none');
                        $('#sim-result-container').removeClass('d-none');
                        $('#json-response-content').text(JSON.stringify(res.xendit_raw || res, null, 2));

                        if (res.success) {
                            $('#sim-result-alert')
                                .removeClass('alert-danger bg-danger-transparent border-danger')
                                .addClass('alert-success bg-success-transparent border border-success');
                            $('#sim-result-title').text('Simulasi Pembayaran Berhasil Diproses!').addClass('text-success').removeClass('text-danger');
                            $('#sim-result-status-badge').text(res.status).removeClass('bg-danger').addClass('bg-success text-white');
                            $('#sim-result-message').html(res.message);

                            if (res.order_updated && res.order) {
                                $('#sim-order-updated-box').removeClass('d-none');
                                $('#sim-order-details').html(
                                    'Nomor Pesanan: <strong>' + res.order.order_number + '</strong><br>' +
                                    'Nasabah: ' + res.order.customer_name + '<br>' +
                                    'Total Lunas: ' + res.order.amount_formatted + '<br>' +
                                    'Status Saat Ini: <span class="badge bg-success">LUNAS (PAID)</span>'
                                );

                                var $row = $('#row-order-' + res.order.id);
                                if ($row.length) {
                                    $row.find('td:nth-child(5)').html('<span class="status-badge-paid fs-11"><i class="ri-checkbox-circle-line me-1"></i>LUNAS</span>');
                                    $row.find('td:nth-child(6)').html('<span class="badge bg-success-transparent text-success fs-11"><i class="ri-check-line me-1"></i>Sudah Dibayar</span>');
                                    setTimeout(function() {
                                        $row.fadeOut(500, function() {
                                            $(this).remove();
                                            if ($('#tbody-recent-orders tr').length === 0) {
                                                $('#tbody-recent-orders').html('<tr><td colspan="6" class="text-center py-4 text-muted fs-13"><i class="ri-checkbox-circle-line fs-28 d-block mb-1 text-success"></i>Tidak ada tagihan Virtual Account yang perlu dibayar (semua transaksi telah lunas).</td></tr>');
                                            }
                                        });
                                    }, 1500);
                                }
                            } else {
                                $('#sim-order-updated-box').addClass('d-none');
                            }

                            Swal.fire({
                                icon: 'success',
                                title: 'Simulasi Berhasil!',
                                text: res.message,
                                confirmButtonColor: '#0e7a53'
                            });
                        } else {
                            $('#sim-result-alert')
                                .removeClass('alert-success bg-success-transparent border-success')
                                .addClass('alert-danger bg-danger-transparent border border-danger');
                            $('#sim-result-title').text('Simulasi Gagal:').addClass('text-danger').removeClass('text-success');
                            $('#sim-result-status-badge').text(res.status || 'ERROR').removeClass('bg-success').addClass('bg-danger text-white');
                            $('#sim-result-message').text(res.message);
                            $('#sim-order-updated-box').addClass('d-none');

                            Swal.fire({
                                icon: 'error',
                                title: 'Simulasi Gagal',
                                text: res.message,
                                confirmButtonColor: '#dc2626'
                            });
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false).html(originalHtml);
                        var errMsg = 'Terjadi kesalahan saat memproses request simulasi ke server.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errMsg = xhr.responseJSON.message;
                        }

                        $('#sim-placeholder').addClass('d-none');
                        $('#sim-result-container').removeClass('d-none');
                        $('#sim-result-alert')
                            .removeClass('alert-success bg-success-transparent border-success')
                            .addClass('alert-danger bg-danger-transparent border border-danger');
                        $('#sim-result-title').text('Error:').addClass('text-danger');
                        $('#sim-result-status-badge').text('HTTP ' + xhr.status).addClass('bg-danger text-white');
                        $('#sim-result-message').text(errMsg);
                        $('#json-response-content').text(JSON.stringify(xhr.responseJSON || { error: errMsg }, null, 2));

                        Swal.fire('Gagal', errMsg, 'error');
                    }
                });
            });

            $('#btn-refresh-orders').on('click', function() {
                var $icon = $('#icon-refresh-orders');
                $icon.addClass('spin-rotate');

                $.ajax({
                    url: "{{ route('xendit.simulator.recent-orders') }}",
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        $icon.removeClass('spin-rotate');
                        if (res.success && res.orders) {
                            var html = '';
                            if (res.orders.length === 0) {
                                html = '<tr><td colspan="6" class="text-center py-4 text-muted fs-13"><i class="ri-checkbox-circle-line fs-28 d-block mb-1 text-success"></i>Tidak ada tagihan Virtual Account yang perlu dibayar (semua transaksi telah lunas).</td></tr>';
                            } else {
                                $.each(res.orders, function(i, o) {
                                    var badgeStatus = o.status === 'PAID'
                                        ? '<span class="status-badge-paid fs-11"><i class="ri-checkbox-circle-line me-1"></i>LUNAS</span>'
                                        : '<span class="status-badge-pending fs-11"><i class="ri-time-line me-1"></i>PENDING</span>';

                                    html += '<tr id="row-order-' + o.id + '">' +
                                        '<td>' +
                                            '<div class="fw-semibold text-dark">' + o.order_number + '</div>' +
                                            '<small class="text-muted fs-11">' + o.customer_name + '</small>' +
                                        '</td>' +
                                        '<td>' +
                                            '<span class="badge bg-light text-dark border">' +
                                                '<i class="ri-bank-line me-1 text-primary"></i>' + o.payment_method +
                                            '</span>' +
                                            '<div class="text-muted fs-11 mt-1 font-monospace">' + o.payment_account_number + '</div>' +
                                        '</td>' +
                                        '<td><span class="fw-bold text-dark">' + o.amount_formatted + '</span></td>' +
                                        '<td><span class="font-monospace text-primary fs-11">' + o.xendit_id.substring(0, 24) + '...</span></td>' +
                                        '<td>' + badgeStatus + '</td>' +
                                        '<td class="text-end">' +
                                            '<button type="button" class="btn btn-sm btn-success-light fw-bold py-1 px-2 fs-12 btn-use-order" data-xendit-id="' + o.xendit_id + '" data-amount="' + o.amount + '" onclick="selectOrderForSim(\'' + o.xendit_id + '\', \'' + o.amount + '\')">' +
                                                '<i class="ri-flashlight-line me-1"></i>Gunakan' +
                                            '</button>' +
                                        '</td>' +
                                    '</tr>';
                                });
                            }
                            $('#tbody-recent-orders').html(html);
                        }
                    },
                    error: function() {
                        $icon.removeClass('spin-rotate');
                        Swal.fire('Info', 'Gagal memuat ulang daftar pesanan.', 'warning');
                    }
                });
            });
        });
    </script>
@endsection