@extends('layouts.app')

@section('title', 'Cek Saldo Kartu Santri')

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

    :root {
        --pos-primary: #10b981;
        --pos-primary-hover: #059669;
        --pos-primary-light: rgba(16, 185, 129, 0.08);
        --pos-dark-slate: #0f172a;
        --pos-bg-card: #ffffff;
        --pos-bg-gray: #f8fafc;
        --pos-border: #e2e8f0;
        --pos-text-main: #1e293b;
        --pos-text-muted: #64748b;
        --pos-radius-lg: 16px;
        --pos-radius-md: 12px;
        --pos-shadow-sm: 0 4px 12px rgba(148, 163, 184, 0.05);
        --pos-shadow-md: 0 12px 30px rgba(148, 163, 184, 0.1);
        --pos-shadow-glow: 0 0 25px rgba(16, 185, 129, 0.2);
    }

    .saldo-wrapper,
    .saldo-wrapper button,
    .saldo-wrapper input {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        color: var(--pos-text-main);
    }

    .fas,
    .far,
    .fab,
    .fa {
        font-family: 'Font Awesome 5 Free' !important;
    }

    /* Card Panels */
    .premium-panel {
        background: var(--pos-bg-card);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius-lg);
        box-shadow: var(--pos-shadow-sm);
        padding: 24px;
        height: 100%;
        transition: all 0.3s ease;
    }

    .premium-panel:hover {
        box-shadow: var(--pos-shadow-md);
    }

    .panel-header-title {
        font-weight: 800;
        color: var(--pos-dark-slate);
        font-size: 1.25rem;
        letter-spacing: -0.5px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 1.5px dashed var(--pos-border);
        padding-bottom: 15px;
    }

    .panel-header-title i {
        color: var(--pos-primary);
    }

    /* Scanner Zone Styling */
    .scanner-block {
        text-align: center;
        padding: 10px 0;
    }

    .pulse-scanner-zone {
        border: 2.5px dashed var(--pos-primary) !important;
        border-radius: var(--pos-radius-lg) !important;
        background: var(--pos-primary-light) !important;
        padding: 40px 20px !important;
        text-align: center !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin-bottom: 25px !important;
        overflow: hidden;
    }

    .pulse-scanner-zone::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .pulse-scanner-zone:hover::before,
    .pulse-scanner-zone.focused::before {
        opacity: 1;
    }

    .pulse-scanner-zone:hover,
    .pulse-scanner-zone.focused {
        border-color: var(--pos-primary-hover) !important;
        box-shadow: var(--pos-shadow-glow) !important;
        transform: translateY(-2px);
    }

    .pulse-scanner-icon {
        font-size: 3.5rem !important;
        color: var(--pos-primary) !important;
        margin-bottom: 15px !important;
        position: relative;
        z-index: 2;
        transition: transform 0.3s ease;
        animation: floatingIcon 3s ease-in-out infinite;
    }

    @keyframes floatingIcon {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    .pulse-scanner-zone.focused .pulse-scanner-icon {
        color: var(--pos-primary-hover) !important;
        animation: pulseScanEffect 1.5s infinite !important;
    }

    @keyframes pulseScanEffect {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.15);
            opacity: 0.6;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .pulse-scanner-text {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--pos-dark-slate);
        display: block;
        margin-bottom: 5px;
        position: relative;
        z-index: 2;
    }

    .pulse-scanner-subtext {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--pos-text-muted);
        display: block;
        position: relative;
        z-index: 2;
    }

    .scanner-hidden-input {
        opacity: 0;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 5;
    }

    /* Virtual glowing credit card */
    .glowing-santri-card {
        background: linear-gradient(135deg, #10b981 0%, #064e3b 100%);
        border-radius: 20px;
        padding: 24px;
        color: #ffffff;
        box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3);
        position: relative;
        overflow: hidden;
        margin-bottom: 25px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        animation: cardFloat 6s ease-in-out infinite, cardSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes cardSlideIn {
        0% {
            transform: scale(0.9) translateY(20px);
            opacity: 0;
        }

        100% {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    @keyframes cardFloat {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-5px) rotate(0.5deg);
        }
    }

    .glowing-santri-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .glowing-santri-card::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 10%;
        width: 120px;
        height: 120px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 50%;
        pointer-events: none;
    }

    .card-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .card-header-label {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 2px;
        opacity: 0.9;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-chip-icon {
        color: #fbbf24;
        font-size: 1.75rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-fullname {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -0.3px;
        margin-bottom: 5px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-number-nis {
        font-size: 0.9rem;
        font-weight: 600;
        opacity: 0.8;
        font-family: monospace !important;
        letter-spacing: 1px;
        margin-bottom: 35px;
    }

    .card-bottom-balance {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .card-balance-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        opacity: 0.8;
        display: block;
        margin-bottom: 2px;
    }

    .card-balance-val {
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* History and details tables */
    .history-card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-radius: var(--pos-radius-md);
        background: var(--pos-bg-gray);
        border: 1px solid var(--pos-border);
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }

    .history-card-row:hover {
        background: #ffffff;
        border-color: var(--pos-primary);
        transform: translateX(4px);
    }

    .history-card-info {
        display: flex;
        flex-direction: column;
    }

    .history-card-inv {
        font-weight: 800;
        font-size: 0.9rem;
        color: var(--pos-dark-slate);
        margin-bottom: 3px;
    }

    .history-card-date {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--pos-text-muted);
    }

    .history-card-price {
        font-weight: 800;
        color: #ef4444;
        font-size: 0.95rem;
    }

    /* Elegant Custom Scrollbar */
    .scrollbar-custom::-webkit-scrollbar {
        width: 6px;
    }

    .scrollbar-custom::-webkit-scrollbar-thumb {
        background: var(--pos-border);
        border-radius: 4px;
    }

    .scrollbar-custom::-webkit-scrollbar-thumb:hover {
        background: var(--pos-text-muted);
    }

    /* Floating Toast */
    .pos-toast {
        position: fixed;
        bottom: 24px;
        left: 24px;
        background: var(--pos-dark-slate);
        color: #ffffff;
        padding: 12px 20px;
        border-radius: var(--pos-radius-md);
        font-size: 0.85rem;
        font-weight: 600;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
        display: flex;
        align-items: center;
        gap: 10px;
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 9999;
    }

    .pos-toast.active {
        transform: translateY(0);
        opacity: 1;
    }

    .pos-toast i {
        color: var(--pos-primary);
    }

    .pos-toast.danger i {
        color: #ef4444;
    }

    /* ===== Invoice Detail Modal ===== */
    .inv-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(6px);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .inv-modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    .inv-modal {
        background: #ffffff;
        border-radius: 20px;
        width: 100%;
        max-width: 480px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
        transform: translateY(20px) scale(0.97);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        margin: 16px;
    }
    .inv-modal-overlay.active .inv-modal {
        transform: translateY(0) scale(1);
    }
    .inv-modal-header {
        padding: 20px 24px 16px;
        border-bottom: 1.5px dashed var(--pos-border);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
    }
    .inv-modal-header-info h5 {
        font-weight: 800;
        color: var(--pos-dark-slate);
        font-size: 1.05rem;
        margin: 0 0 4px;
    }
    .inv-modal-header-info span {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--pos-text-muted);
    }
    .inv-modal-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1.5px solid var(--pos-border);
        background: var(--pos-bg-gray);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: var(--pos-text-muted);
        flex-shrink: 0;
        transition: all 0.2s ease;
    }
    .inv-modal-close:hover {
        background: #ef4444;
        border-color: #ef4444;
        color: #ffffff;
    }
    .inv-modal-body {
        overflow-y: auto;
        flex-grow: 1;
        padding: 8px 0;
    }
    .inv-item-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 24px;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
    }
    .inv-item-row:last-child { border-bottom: none; }
    .inv-item-row:hover { background: var(--pos-bg-gray); }
    .inv-item-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--pos-primary-light);
        color: var(--pos-primary);
        font-size: 0.75rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .inv-item-name {
        flex-grow: 1;
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--pos-dark-slate);
    }
    .inv-item-qty {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--pos-text-muted);
    }
    .inv-item-total {
        font-weight: 800;
        font-size: 0.88rem;
        color: var(--pos-dark-slate);
        text-align: right;
        min-width: 80px;
    }
    .inv-modal-footer {
        padding: 16px 24px;
        border-top: 1.5px dashed var(--pos-border);
        background: var(--pos-bg-gray);
        flex-shrink: 0;
    }
    .inv-footer-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--pos-text-muted);
        margin-bottom: 6px;
    }
    .inv-footer-row.total {
        font-size: 1rem;
        font-weight: 800;
        color: var(--pos-dark-slate);
        margin-bottom: 0;
        padding-top: 8px;
        border-top: 1px solid var(--pos-border);
        margin-top: 6px;
    }
    .inv-footer-row.total span:last-child { color: var(--pos-primary); }
    .history-card-row { cursor: pointer; }
</style>
@endpush

@section('content')
<div class="container-fluid saldo-wrapper py-3">
    <div class="row">
        <!-- SCANNER & DIGITAL CARD SECTION -->
        <div class="col-lg-5 mb-4">
            <div class="premium-panel">
                <h4 class="panel-header-title">
                    <i class="fas fa-wallet"></i>
                    Pindai Kartu Santri
                </h4>

                <div class="scanner-block">
                    <!-- Scanner pulsing zone -->
                    <div class="pulse-scanner-zone" id="rfid-pulse-trigger">
                        <i class="fas fa-address-card pulse-scanner-icon"></i>
                        <span class="pulse-scanner-text" id="rfid-status-title">Pindai Kartu Santri Anda</span>
                        <span class="pulse-scanner-subtext">Letakkan kartu di mesin reader atau ketik NIS</span>
                        <input type="text" id="rfid-saldo-input" class="scanner-hidden-input"
                            placeholder="Masukkan NIS..." autocomplete="off">
                    </div>
                </div>

                <!-- Placeholder for glowing card layout -->
                <div id="card-placeholder" class="text-center p-5 text-muted border rounded-lg bg-light"
                    style="border-style: dashed !important; border-radius: 20px !important;">
                    <i class="fas fa-id-card-alt mb-3" style="font-size: 3.5rem; opacity: 0.3;"></i>
                    <h6 class="font-weight-bold text-dark mb-1">Menunggu Kartu Santri</h6>
                    <p class="small mb-0 text-muted">Silakan lakukan scan kartu santri pada reader untuk menampilkan
                        saldo dan detail identitas.</p>
                </div>

                <!-- Digital Card Element (D-None on load) -->
                <div id="card-display-wrapper" class="d-none">
                    <!-- Virtual credit card injected here -->
                </div>
            </div>
        </div>

        <!-- TRANSACTION HISTORY SECTION -->
        <div class="col-lg-7 mb-4">
            <div class="premium-panel d-flex flex-column" style="height: calc(100vh - 120px); min-height: 520px;">
                <h4 class="panel-header-title">
                    <i class="fas fa-history"></i>
                    Riwayat Belanja Terakhir
                </h4>

                <!-- Log list scrollable container -->
                <div class="flex-grow-1 scrollbar-custom" id="history-rows-wrapper"
                    style="overflow-y: auto;">
                    <!-- Semua state (placeholder, loading, data) dikelola JS di dalam satu div ini -->
                    <div id="history-list-injected" class="h-100 d-flex flex-column align-items-center justify-content-center text-center p-5 text-muted">
                        <i class="fas fa-clipboard-list mb-3" style="font-size: 4rem; opacity: 0.25;"></i>
                        <h6 class="font-weight-bold text-dark">Data Pengeluaran Kosong</h6>
                        <p class="small mb-0">Riwayat belanja bulanan akan otomatis terbit sesaat setelah memindai kartu santri.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modern Toast Notification -->
<div class="pos-toast" id="toast-notif">
    <i class="fas fa-info-circle" id="toast-icon"></i>
    <span id="toast-message">Notifikasi</span>
</div>
<!-- Invoice Detail Modal -->
<div class="inv-modal-overlay" id="inv-modal-overlay">
    <div class="inv-modal" id="inv-modal">
        <div class="inv-modal-header">
            <div class="inv-modal-header-info">
                <h5 id="inv-modal-title"><i class="fas fa-receipt text-success mr-2"></i> Detail Transaksi</h5>
                <span id="inv-modal-date"></span>
            </div>
            <button class="inv-modal-close" id="inv-modal-close-btn" title="Tutup">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="inv-modal-body" id="inv-modal-body"></div>
        <div class="inv-modal-footer" id="inv-modal-footer"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let allTransactionDetails = []; // simpan details dari API

    document.addEventListener("DOMContentLoaded", function () {
        initRFIDBalanceChecker();
        initInvoiceModal();
    });

    function initInvoiceModal() {
        const overlay = document.getElementById('inv-modal-overlay');
        const closeBtn = document.getElementById('inv-modal-close-btn');
        if (!overlay) return;

        // Tutup via overlay click
        overlay.addEventListener('click', function (e) {
            if (e.target === overlay) closeInvoiceModal();
        });
        // Tutup via tombol X
        if (closeBtn) closeBtn.addEventListener('click', closeInvoiceModal);
        // Tutup via ESC
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeInvoiceModal();
        });
    }

    function openInvoiceModal(invoiceNumber, dateStr, grandTotal) {
        const overlay  = document.getElementById('inv-modal-overlay');
        const title    = document.getElementById('inv-modal-title');
        const dateEl   = document.getElementById('inv-modal-date');
        const body     = document.getElementById('inv-modal-body');
        const footer   = document.getElementById('inv-modal-footer');
        if (!overlay || !body || !footer) return;

        // Filter items by invoice
        const items = allTransactionDetails.filter(d => d.invoice_number === invoiceNumber);

        title.innerHTML  = `<i class="fas fa-receipt text-success mr-2"></i> ${invoiceNumber}`;
        dateEl.textContent = dateStr;

        if (items.length === 0) {
            body.innerHTML = `<div class="text-center p-4 text-muted small">Detail item tidak tersedia.</div>`;
        } else {
            body.innerHTML = items.map((item, i) => {
                const price = parseFloat(item.price);
                const total = parseFloat(item.total);
                return `
                    <div class="inv-item-row">
                        <div class="inv-item-num">${i + 1}</div>
                        <div class="inv-item-name">${item.product_name}</div>
                        <div class="inv-item-qty">x${item.qty}<br><span style="font-size:0.7rem;">@ Rp ${price.toLocaleString('id-ID')}</span></div>
                        <div class="inv-item-total">Rp ${total.toLocaleString('id-ID')}</div>
                    </div>`;
            }).join('');
        }

        const gt = parseFloat(grandTotal);
        footer.innerHTML = `
            <div class="inv-footer-row"><span>Subtotal</span><span>Rp ${gt.toLocaleString('id-ID')}</span></div>
            <div class="inv-footer-row"><span>Diskon</span><span>- Rp 0</span></div>
            <div class="inv-footer-row total"><span>Total Bayar</span><span>Rp ${gt.toLocaleString('id-ID')}</span></div>`;

        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeInvoiceModal() {
        const overlay = document.getElementById('inv-modal-overlay');
        if (overlay) overlay.classList.remove('active');
        document.body.style.overflow = '';
    }


    function initRFIDBalanceChecker() {
        const trigger = document.getElementById("rfid-pulse-trigger");
        const input = document.getElementById("rfid-saldo-input");
        const statusTitle = document.getElementById("rfid-status-title");
        const cardPlaceholder = document.getElementById("card-placeholder");
        const cardDisplayWrapper = document.getElementById("card-display-wrapper");
        const historyPlaceholder = document.getElementById("history-placeholder");
        const historyListInjected = document.getElementById("history-list-injected");

        // Autocomplete focus management
        if (input) {
            input.focus();
            
            if (trigger) {
                trigger.addEventListener("click", () => {
                    input.focus();
                });
            }

            input.addEventListener("focus", () => {
                if (trigger) trigger.classList.add("focused");
                if (statusTitle) statusTitle.innerText = "Reader Siap. Tempelkan Kartu...";
            });

            input.addEventListener("blur", () => {
                if (trigger) trigger.classList.remove("focused");
                if (statusTitle) statusTitle.innerText = "Pindai Kartu Santri Anda";
            });

            input.addEventListener("keypress", function (e) {
                if (e.key === "Enter") {
                    e.preventDefault();
                    const nis = input.value.trim();

                    if (nis.length >= 3) {
                        if (statusTitle) statusTitle.innerHTML = `<i class="fas fa-spinner fa-spin text-primary"></i> Menghubungi Server Pusat...`;
                        
                        // Fetch student information
                        fetch(`{{ url('proxy/santri') }}/${nis}`)
                            .then(res => res.json())
                            .then(data => {
                                console.log("Balance check proxy data:", data);

                                if (data && data.data) {
                                    // 1. Render virtual student card
                                    renderDigitalCard(data.data);
                                    
                                    // 2. Fetch transaction history log
                                    fetchTransactionHistory(data.data.nomor_kartu);

                                    showToast(`Kartu ${data.data.nama_lengkap} berhasil diverifikasi!`);
                                } else {
                                    showToast("Nomor kartu tidak valid atau tidak terdaftar", "danger");
                                    resetDisplays();
                                }

                                if (statusTitle) statusTitle.innerText = "Reader Siap. Tempelkan Kartu...";
                                input.value = "";
                                input.focus();
                            })
                            .catch(err => {
                                console.error(err);
                                showToast("Gagal menghubungi server database pusat", "danger");
                                resetDisplays();
                                if (statusTitle) statusTitle.innerText = "Pindai Kartu Santri Anda";
                            });
                    }
                }
            });
        }

        function renderDigitalCard(santri) {
            if (cardPlaceholder) cardPlaceholder.classList.add("d-none");
            if (cardDisplayWrapper) {
                cardDisplayWrapper.classList.remove("d-none");
                
                const saldoVal = parseFloat(santri.saldo);
                
                cardDisplayWrapper.innerHTML = `
                    <div class="glowing-santri-card">
                        <div class="card-title-row">
                            <span class="card-header-label">KARTU SANTRI DIGITAL</span>
                            <i class="fas fa-microchip card-chip-icon"></i>
                        </div>
                        <div class="card-fullname">${santri.nama_lengkap}</div>
                        <div class="card-number-nis">NIS: ${santri.nomor_kartu}</div>
                        <div class="card-bottom-balance">
                            <div>
                                <span class="card-balance-label">SALDO ELEKTRONIK</span>
                                <span class="card-balance-val">Rp ${saldoVal.toLocaleString('id-ID')}</span>
                            </div>
                            <i class="fas fa-wallet fa-2x" style="opacity: 0.5;"></i>
                        </div>
                    </div>
                    
                    <div class="alert alert-success p-3 text-center border-0 font-weight-bold" style="border-radius: var(--pos-radius-md); background: var(--pos-primary-light); color: var(--pos-primary);">
                        <i class="fas fa-check-circle mr-1"></i> Kartu Aktif & Terkoneksi
                    </div>
                `;
            }
        }

        function fetchTransactionHistory(nis) {
            const historyList = document.getElementById("history-list-injected");
            if (!historyList) return;

            // Tampilkan loading state
            historyList.className = 'text-center p-5 text-muted';
            historyList.innerHTML = `<i class="fas fa-sync fa-spin fa-2x text-primary mb-3"></i><br><span class="small font-weight-bold">Mengunduh riwayat belanja...</span>`;

            fetch(`{{ url('transactions') }}/${nis}`)
                .then(res => res.json())
                .then(data => {
                    console.log("Transaction history response:", data);

                    if (data && data.status === 200 && data.summary && data.summary.length > 0) {
                        // Simpan details untuk dipakai di modal
                        allTransactionDetails = data.details || [];

                        let html = '';
                        data.summary.forEach(trx => {
                            const dateStr = new Date(trx.tanggal_waktu).toLocaleDateString('id-ID', {
                                day: 'numeric',
                                month: 'long',
                                year: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                            const totalSpent = parseFloat(trx.total_pengeluaran);
                            html += `
                                <div class="history-card-row"
                                     data-invoice="${trx.invoice_number}"
                                     data-date="${dateStr}"
                                     data-total="${totalSpent}"
                                     title="Klik untuk lihat detail belanja">
                                    <div class="history-card-info">
                                        <span class="history-card-inv"><i class="fas fa-receipt text-success mr-1"></i> ${trx.invoice_number}</span>
                                        <span class="history-card-date">${dateStr}</span>
                                    </div>
                                    <div class="text-right d-flex align-items-center gap-2" style="gap:8px;">
                                        <span class="history-card-price">- Rp ${totalSpent.toLocaleString('id-ID')}</span>
                                        <i class="fas fa-chevron-right text-muted" style="font-size:0.7rem;"></i>
                                    </div>
                                </div>`;
                        });
                        // Tampilkan data (reset class, isi dengan rows)
                        historyList.className = '';
                        historyList.innerHTML = html;

                        // Pasang click listener ke setiap row
                        historyList.querySelectorAll('.history-card-row').forEach(row => {
                            row.addEventListener('click', function () {
                                openInvoiceModal(
                                    this.dataset.invoice,
                                    this.dataset.date,
                                    this.dataset.total
                                );
                            });
                        });
                    } else {
                        // Tidak ada transaksi
                        historyList.className = 'h-100 d-flex flex-column align-items-center justify-content-center text-center p-5 text-muted';
                        historyList.innerHTML = `
                            <i class="fas fa-shopping-bag mb-3" style="font-size: 3.5rem; opacity: 0.2;"></i>
                            <h6 class="font-weight-bold text-dark">Tidak Ada Transaksi</h6>
                            <p class="small mb-0">Santri ini belum pernah berbelanja di Terminal Kasir POS.</p>`;
                    }
                })
                .catch(err => {
                    console.error(err);
                    historyList.className = 'p-4';
                    historyList.innerHTML = `<div class="alert alert-danger p-3 text-center small border-0"><i class="fas fa-times-circle mr-1"></i> Gagal memuat riwayat pengeluaran santri</div>`;
                });
        }

        function resetDisplays() {
            if (cardPlaceholder) cardPlaceholder.classList.remove("d-none");
            if (cardDisplayWrapper) {
                cardDisplayWrapper.classList.add("d-none");
                cardDisplayWrapper.innerHTML = "";
            }
            // Kembalikan history ke state placeholder awal
            const historyList = document.getElementById("history-list-injected");
            if (historyList) {
                historyList.className = 'h-100 d-flex flex-column align-items-center justify-content-center text-center p-5 text-muted';
                historyList.innerHTML = `
                    <i class="fas fa-clipboard-list mb-3" style="font-size: 4rem; opacity: 0.25;"></i>
                    <h6 class="font-weight-bold text-dark">Data Pengeluaran Kosong</h6>
                    <p class="small mb-0">Riwayat belanja bulanan akan otomatis terbit sesaat setelah memindai kartu santri.</p>`;
            }
        }

        // Modern Floating Toast Indicator
        function showToast(message, type = "success") {
            const toast = document.getElementById("toast-notif");
            const msgSpan = document.getElementById("toast-message");
            const icon = document.getElementById("toast-icon");
            if (!toast || !msgSpan || !icon) return;

            msgSpan.innerText = message;
            
            if (type === "danger") {
                toast.classList.add("danger");
                icon.className = "fas fa-exclamation-circle";
            } else {
                toast.classList.remove("danger");
                icon.className = "fas fa-check-circle";
            }

            toast.classList.add("active");

            setTimeout(() => {
                toast.classList.remove("active");
            }, 4000);
        }
    }
</script>
@endpush