@extends('layouts.master_landing')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">Riwayat Transaksi</span> 
    </h4>

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex overflow-x-auto pb-2 gap-2 style-scroll-hidden">
                <a href="{{ route('dashboard.magang.transaksi', ['status' => 'semua']) }}" 
                   class="btn btn-sm {{ $statusFilter == 'semua' ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-4 flex-shrink-0">
                    Semua ({{ $counts['semua'] }})
                </a>
                <a href="{{ route('dashboard.magang.transaksi', ['status' => 'belum_bayar']) }}" 
                   class="btn btn-sm {{ $statusFilter == 'belum_bayar' ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-4 flex-shrink-0">
                    Belum Bayar <span class="badge bg-warning text-white ms-1 rounded-circle">{{ $counts['belum_bayar'] }}</span>
                </a>
                <a href="{{ route('dashboard.magang.transaksi', ['status' => 'menunggu_verifikasi']) }}" 
                   class="btn btn-sm {{ $statusFilter == 'menunggu_verifikasi' ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-4 flex-shrink-0">
                    Menunggu Verifikasi <span class="badge bg-info text-white ms-1 rounded-circle">{{ $counts['menunggu_verifikasi'] }}</span>
                </a>
                <a href="{{ route('dashboard.magang.transaksi', ['status' => 'cicilan_aktif']) }}" 
                   class="btn btn-sm {{ $statusFilter == 'cicilan_aktif' ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-4 flex-shrink-0">
                    Cicilan <span class="badge bg-primary text-white ms-1 rounded-circle">{{ $counts['cicilan_aktif'] }}</span>
                </a>
                <a href="{{ route('dashboard.magang.transaksi', ['status' => 'lunas']) }}" 
                   class="btn btn-sm {{ $statusFilter == 'lunas' ? 'btn-primary' : 'btn-outline-secondary' }} rounded-pill px-4 flex-shrink-0">
                    Lunas <span class="badge bg-success text-white ms-1 rounded-circle">{{ $counts['lunas'] }}</span>
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column gap-4">

                @forelse($transaksis as $trx)
                <div class="card shadow-xs border border-light transaction-card bg-white mb-2">
                    
                    <div class="card-header bg-light py-3 d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2 border-bottom">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <span class="fw-bold text-dark small">
                                <i class="ti tabler-calendar-event me-1 text-secondary"></i> {{ $trx['tanggal'] }}
                            </span>
                            <span class="text-muted small">|</span>
                            
                            @if($trx['status'] == 'belum_bayar')
                                <span class="badge bg-label-warning fw-semibold px-3 py-1.5"><i class="ti tabler-hourglass-high me-1 fs-6"></i> Menunggu Pembayaran</span>
                            @elseif($trx['status'] == 'cicilan_aktif')
                                <span class="badge bg-label-primary fw-semibold px-3 py-1.5"><i class="ti tabler-credit-card me-1 fs-6"></i> Cicilan Aktif</span>
                            @elseif($trx['status'] == 'lunas')
                                <span class="badge bg-label-success fw-semibold px-3 py-1.5"><i class="ti tabler-circle-check me-1 fs-6"></i> Berhasil / Lunas</span>
                            @endif

                            <span class="text-muted small d-none d-md-inline">|</span>
                            <span class="badge bg-label-secondary text-secondary d-none d-md-inline-block fw-normal py-1 px-2">
                                <i class="ti tabler-file-description me-1 fs-6"></i> {{ $trx['no_invoice'] }}
                            </span>
                        </div>
                        
                        @if($trx['status'] == 'cicilan_aktif')
                            <span class="badge bg-label-danger text-danger fw-bold px-3 py-2" style="font-size: 0.85rem;">
                                Sisa Hutang: Rp {{ number_format($trx['sisa_kurang'], 0, ',', '.') }}
                            </span>
                        @endif
                    </div>

                    <div class="card-body py-4">
                        <div class="row align-items-center g-3 border-bottom pb-4">
                            
                            <div class="col-md-5 d-flex align-items-center gap-3">
                                <div class="bg-label-primary rounded p-1 flex-shrink-0" style="width: 70px; height: 70px;">
                                    @if(!empty($trx['kelas_foto']))
                                        <img src="{{ asset('foto_magang/' . $trx['kelas_foto']) }}" alt="{{ $trx['kelas_nama'] }}" class="w-100 h-100 rounded" style="object-fit: cover;">
                                    @else
                                        <img src="{{ asset('assets/img/front-pages/landing-page/hero-dashboard-light.png') }}" alt="Default Cover" class="w-100 h-100 rounded" style="object-fit: cover;">
                                    @endif
                                </div>
                                <div>
                                    <span class="badge bg-label-success text-uppercase extra-small mb-1 fw-bold">{{ $trx['kelas_tipe'] }}</span>
                                    <h5 class="fw-bold text-dark mb-1 text-truncate-2">{{ $trx['kelas_nama'] }}</h5>
                                    <p class="mb-0 text-muted extra-small">
                                        <i class="ti tabler-wallet me-1"></i> Metode: {{ $trx['metode_pembayaran'] }} ({{ $trx['tipe_tagihan'] ?? 'Lunas' }})
                                    </p>
                                    <small class="text-secondary d-block mt-0.5 extra-small italic-style">{{ $trx['keterangan'] }}</small>
                                </div>
                            </div>
                            
                            <div class="col-md-3 border-start-md py-1">
                                <span class="text-muted extra-small d-block text-uppercase fw-semibold mb-2" style="letter-spacing: 0.5px;">Rincian Item</span>
                                
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="text-dark small text-truncate" style="max-width: 130px;" title="{{ $trx['kelas_nama'] }}">
                                        <i class="ti tabler-book me-1 text-primary fs-6"></i> Pelatihan
                                    </span>
                                    <span class="fw-semibold text-dark extra-small">
                                        Rp {{ number_format($trx['kelas_biaya'], 0, ',', '.') }}
                                    </span>
                                </div>

                                @if(isset($trx['items_barang']) && count($trx['items_barang']) > 0)
                                    @foreach($trx['items_barang'] as $barang)
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span class="text-muted extra-small text-truncate" style="max-width: 130px;" title="{{ $barang->nama_barang }}">
                                                <i class="ti tabler-package me-1 text-secondary fs-6"></i> {{ $barang->nama_barang }} (x{{ $barang->qty }})
                                            </span>
                                            <span class="text-muted extra-small">
                                                Rp {{ number_format(($barang->harga * $barang->qty), 0, ',', '.') }}
                                            </span>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            
                            <div class="col-md-2 text-md-end border-start-md">
                                <span class="text-muted extra-small d-block">Total Tagihan</span>
                                <span class="fw-extrabold text-dark fs-5">Rp {{ number_format($trx['total_harga'], 0, ',', '.') }}</span>

                                @if($trx['status'] != 'lunas')
                                    <div class="mt-1">
                                        <span class="badge bg-label-danger text-danger fw-semibold" style="font-size: 0.72rem; padding: 4px 8px;">
                                            Sisa: Rp {{ number_format($trx['sisa_kurang'], 0, ',', '.') }}
                                        </span>
                                    </div>
                                @endif
                            </div>

                            <div class="col-md-2 text-md-end border-start-md d-flex flex-column gap-2">
                                @if($trx['status'] == 'lunas')
                                    @php 
                                        $invoiceId = isset($trx['list_pembayaran'][0]['id_asli']) ? $trx['list_pembayaran'][0]['id_asli'] : '#';
                                    @endphp
                                    <a href="{{ $invoiceId != '#' ? route('dashboard.magang.cetakReceipt', $invoiceId) : '#' }}" target="_blank" class="btn btn-outline-success btn-sm fw-semibold w-100 py-2">
                                        <i class="ti tabler-download me-1 fs-6"></i> Unduh Receipt
                                    </a>
                                    <a href="{{ $invoiceId != '#' ? route('dashboard.magang.cetakKartu', $invoiceId) : '#' }}" target="_blank" class="btn btn-primary btn-sm fw-bold w-100 py-2 shadow-xs">
                                        <i class="ti tabler-id me-1 fs-6"></i> Cetak Kartu
                                    </a>

                                @elseif($trx['status_invoice_terakhir'] === '0' || $trx['status_invoice_terakhir'] === 0)
                                    {{-- MODIFIKASI: Tombol Verifikasi WhatsApp Aktif --}}
                                    @php
                                        
                                        $namaPeserta = Auth::guard('peserta')->user()->nama ?? 'Peserta';
                                        
                                        // 2. Cari data pembayaran yang sedang pending (belum lunas) untuk mengambil ID aslinya
                                        $pendingPayment = collect($trx['list_pembayaran'])->where('status', 'belum lunas')->last();
                                        
                                        // 3. Ambil ID primary key dari tabel 'pembayarans'
                                        $id_pembayaran_asli = $pendingPayment ? $pendingPayment['id_asli'] : $trx['peserta_magang_id'];
                                        $suid_potongan = $pendingPayment ? $pendingPayment['id_transaksi_tampil'] : '-';

                                        // 4. Membuat pesan dinamis yang sangat ramah untuk Admin
                                        $pesan_wa = "Halo Admin, saya ingin melakukan verifikasi transfer pembayaran.\n\n"
                                                  . "👤 *Nama:* " . $namaPeserta . "\n"
                                                  . "📚 *Kelas:* " . $trx['kelas_nama'] . "\n"
                                                  . "🔑 *ID Pembayaran:* #" . $id_pembayaran_asli . "\n"
                                                  . "🔖 *SUID Ref:* " . $suid_potongan . "\n\n"
                                                  . "Berikut saya lampirkan foto bukti transfernya.";
                                        
                                        // Mengubah teks pesan menjadi URL yang valid
                                        $pesan_url = urlencode($pesan_wa);
                                    @endphp
                                    
                                    <a href="https://api.whatsapp.com/send?phone=6285704929289&text={{ $pesan_url }}" target="_blank" class="btn btn-success btn-sm w-100 py-2 text-white shadow-xs">
                                        <i class="ti tabler-brand-whatsapp me-1 fs-6"></i> Verifikasi via WA
                                    </a>
                                    <small class="text-danger extra-small text-center d-block mt-2 fw-semibold">Mohon kirim bukti transfer ke WA Admin</small>

                                @elseif($trx['status'] == 'belum_bayar')
                                    <a href="#" class="btn btn-primary btn-sm fw-bold w-100 py-2 shadow-xs"><i class="ti tabler-credit-card me-1 fs-6"></i> Bayar Sekarang</a>

                                @elseif($trx['status'] == 'cicilan_aktif')
                                    <button type="button" class="btn btn-outline-primary btn-sm fw-bold w-100 py-2" data-bs-toggle="modal" data-bs-target="#modalBayarCicilan{{ $trx['peserta_magang_id'] }}">
                                        <i class="ti tabler-cash me-1 fs-6"></i> Bayar Cicilan
                                    </button>
                                @endif

                                <button type="button" class="btn btn-link text-secondary btn-sm w-100 text-decoration-none pt-1" data-bs-toggle="collapse" data-bs-target="#tableHistory{{ $trx['peserta_magang_id'] }}" aria-expanded="true">
                                    Detail <i class="ti tabler-chevron-down ms-1 fs-7"></i>
                                </button>
                            </div>

                        </div>

                        <div class="collapse show mt-4" id="tableHistory{{ $trx['peserta_magang_id'] }}">
                            <div class="table-responsive border rounded bg-white">
                                <table class="table table-striped table-hover align-middle mb-0 text-center" style="font-size: 0.85rem; table-layout: fixed; width: 100%;">
                                    <thead class="table-light fw-bold border-bottom">
                                        <tr>
                                            <th style="width: 50px;">No</th>
                                            <th style="width: 180px;">ID Transaksi (suid)</th>
                                            <th style="width: 140px;">Tgl Pembayaran</th>
                                            <th style="width: 130px;">Nominal</th>
                                            <th style="width: 100px;">Status</th>
                                            <th style="width: 180px;">Opsi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($trx['list_pembayaran'] as $pembayaran)
                                            <tr>
                                                <td class="fw-semibold">{{ $pembayaran['no'] }}</td>
                                                <td>
                                                    <code class="text-primary fw-medium" title="{{ $pembayaran['id_transaksi'] ?? '' }}" style="background: #f1f5f9; padding: 3px 6px; border-radius: 4px; font-size: 0.8rem;">
                                                        {{ $pembayaran['id_transaksi_tampil'] ?? substr($pembayaran['id_transaksi'] ?? '', 0, 15) . '...' }}
                                                    </code>
                                                </td>
                                                <td>{{ $pembayaran['tgl_pembayaran'] }}</td>
                                                <td class="fw-bold text-dark">Rp {{ number_format($pembayaran['nominal'], 0, ',', '.') }}</td>
                                                <td>
                                                    @if($pembayaran['status'] == 'lunas')
                                                        <span class="badge bg-label-success text-success px-2 py-1" style="font-size: 0.75rem;">lunas</span>
                                                    @else
                                                        <span class="badge bg-label-warning text-warning px-2 py-1" style="font-size: 0.75rem;">pending</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-2 justify-content-center">
                                                        <a href="{{ route('dashboard.magang.cetakInvoice', $pembayaran['id_asli']) }}" target="_blank" class="btn btn-xs btn-label-primary fw-medium">
                                                            <i class="ti tabler-file-invoice me-1 fs-7"></i> Invoice
                                                        </a>

                                                        @if($pembayaran['status'] == 'lunas')
                                                            <a href="{{ route('dashboard.magang.cetakNota', $pembayaran['id_asli']) }}" target="_blank" class="btn btn-xs btn-label-success fw-medium">
                                                                <i class="ti tabler-receipt me-1 fs-7"></i> Nota
                                                            </a>
                                                        @else
                                                            <button class="btn btn-xs btn-secondary disabled" disabled style="opacity: 0.5; cursor: not-allowed;">
                                                                <i class="ti tabler-receipt-off me-1 fs-7"></i> Nota
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-muted py-3">Belum ada riwayat pecahan pembayaran untuk transaksi ini.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="modal fade" id="detailModal{{ $trx['peserta_magang_id'] }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title fw-bold">Rincian Transaksi</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body text-start">
                                <div class="mb-3 p-2 bg-light rounded text-center">
                                    <small class="text-muted d-block">Nomor Invoice</small>
                                    <span class="fw-bold text-primary">{{ $trx['no_invoice'] }}</span>
                                </div>
                                <table class="table table-borderless sm-table mb-3">
                                    <tr>
                                        <td class="text-muted ps-0">Program Kelas</td>
                                        <td class="text-end fw-semibold text-dark">{{ $trx['kelas_nama'] }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0">Tipe Skema</td>
                                        <td class="text-end fw-semibold text-dark">{{ $trx['tipe_tagihan'] }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0">Metode Pembayaran</td>
                                        <td class="text-end fw-semibold text-dark">{{ $trx['metode_pembayaran'] }}</td>
                                    </tr>
                                    <tr class="border-top">
                                        <td class="text-muted ps-0 pt-2">Total Harga Program</td>
                                        <td class="text-end fw-extrabold text-dark pt-2">Rp {{ number_format($trx['total_harga'], 0, ',', '.') }}</td>
                                    </tr>
                                </table>
                                <hr>
                                <div class="alert {{ $trx['status'] == 'lunas' ? 'alert-light-success' : 'alert-light-warning' }} p-3 mb-0">
                                    <h6 class="fw-bold mb-1">Status Pembayaran:</h6>
                                    <p class="small mb-2 text-secondary">{{ $trx['keterangan'] }}</p>
                                    @if($trx['status'] != 'lunas')
                                        <div class="bg-white p-2 rounded border border-dashed">
                                            <small class="text-muted d-block text-center">Rekening Tujuan Transfer Manual:</small>
                                            <strong class="d-block text-center text-dark mt-1">BCA: 8830-4752-11</strong>
                                            <small class="d-block text-center text-muted">a.n PT Setia Raya Nanda</small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-label-secondary w-100" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalBayarCicilan{{ $trx['peserta_magang_id'] }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content" style="border-radius: 8px; overflow: hidden;">
                            <div class="modal-header text-white" style="background-color: #2b354f; border-bottom: none; padding: 20px 24px;">
                                <div>
                                    <h5 class="modal-title fw-bold text-white mb-1"><i class="ti tabler-file-invoice me-2"></i>Pembayaran Pendaftaran</h5>
                                    <small class="text-white-50" style="font-size: 0.8rem;">Harap tinjau kembali metode tagihan dan pembayaran Anda</small>
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <form action="{{ route('dashboard.magang.simpanCicilan') }}" method="POST">
                                @csrf
                                <input type="hidden" name="peserta_magang_id" value="{{ $trx['peserta_magang_id'] }}">
                                <div class="modal-body p-4" style="background-color: #f8f9fa;">
                                    <div class="row g-4">
                                        <div class="col-md-5">
                                            <div class="card h-100 border-0 shadow-sm" style="border-radius: 8px; background: #ffffff;">
                                                <div class="card-body p-4 d-flex flex-column justify-content-between">
                                                    <div>
                                                        <div class="text-center mb-3">
                                                            <small class="text-muted text-uppercase fw-bold tracking-wider d-block mb-1" style="font-size: 0.7rem; color: #a1a5b7 !important;">Rincian Tagihan</small>
                                                            <h5 class="fw-extrabold text-dark mb-0" style="letter-spacing: 0.5px; font-weight: 800;">INVOICE SUMMARY</h5>
                                                        </div>
                                                        <div class="mt-4">
                                                            <div class="d-flex justify-content-between align-items-center mb-2.5">
                                                                <span class="text-muted small">Kelas Pelatihan:</span>
                                                                <span class="fw-bold text-dark small">{{ $trx['kelas_nama'] }}</span>
                                                            </div>
                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                <span class="text-muted small">Sisa Hutang:</span>
                                                                <span class="fw-bold text-danger small">Rp {{ number_format($trx['sisa_kurang'], 0, ',', '.') }}</span>
                                                            </div>
                                                        </div>
                                                        <hr style="border-top: 2px dashed #dbdade; margin: 20px 0;">
                                                        <div class="mb-3">
                                                            <label class="form-label fw-bold text-dark small mb-2">Nominal Pembayaran (Rp)</label>
                                                            <div class="input-group input-group-merge">
                                                                <span class="input-group-text bg-light fw-bold text-muted" style="font-size: 0.85rem;">Rp</span>
                                                                <input type="number" name="nominal" id="inputNominal{{ $trx['peserta_magang_id'] }}" class="form-control fw-bold" placeholder="Contoh: 500000" min="10000" max="{{ $trx['sisa_kurang'] }}" required oninput="updateTotalLive('{{ $trx['peserta_magang_id'] }}')">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="text-center py-3 px-2 rounded-3 mt-4" style="background-color: #f1f2f4;">
                                                        <small class="text-muted text-uppercase fw-bold d-block mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">TOTAL YANG HARUS DIBAYAR</small>
                                                        <h4 class="fw-bold text-primary mb-0" id="textTotalLive{{ $trx['peserta_magang_id'] }}" style="color: #666ee8 !important; font-weight: 700;">Rp 0</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <h6 class="fw-bold text-dark mb-3"><i class="ti tabler-wallet me-2 text-primary"></i>Pilih Metode Pembayaran</h6>
                                            <div class="card border mb-3 shadow-none" style="border-radius: 6px; border-color: #e4e6ef !important;">
                                                <div class="card-body p-3">
                                                    <div class="form-check d-flex align-items-start mb-0">
                                                        <input class="form-check-input me-3 mt-1" type="radio" name="payment_method" id="methodTransfer{{ $trx['peserta_magang_id'] }}" value="Transfer" required checked>
                                                        <label class="form-check-label w-100" for="methodTransfer{{ $trx['peserta_magang_id'] }}" style="cursor: pointer;">
                                                            <div class="d-flex align-items-center justify-content-between mb-1.5">
                                                                <span class="fw-bold text-dark" style="font-size: 0.9rem;">Transfer Bank (Manual)</span>
                                                                <span class="badge fw-bold px-2 py-1 text-primary" style="font-size: 0.7 foolproof; background-color: #eef3ff;">BANK BCA</span>
                                                            </div>
                                                            <p class="text-muted mb-1 small">No. Rek: <span class="text-dark fw-bold">8830-4752-11</span></p>
                                                            <p class="text-muted mb-1 small">a/n <span class="text-dark fw-semibold">PT Setia Raya Nanda</span></p>
                                                            <span class="text-danger extra-small fw-bold d-block" style="font-size: 0.72rem;"><i class="ti tabler-alert-triangle me-1"></i>Wajib upload bukti transfer setelah ini</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card border mb-4 shadow-none" style="border-radius: 6px; border-color: #e4e6ef !important;">
                                                <div class="card-body p-3">
                                                    <div class="form-check d-flex align-items-start mb-0">
                                                        <input class="form-check-input me-3 mt-1" type="radio" name="payment_method" id="methodVA{{ $trx['peserta_magang_id'] }}" value="VA">
                                                        <label class="form-check-label w-100" for="methodVA{{ $trx['peserta_magang_id'] }}" style="cursor: pointer;">
                                                            <div class="d-flex align-items-center justify-content-between mb-1">
                                                                <span class="fw-bold text-dark" style="font-size: 0.9rem;">Virtual Account (VA)</span>
                                                                <i class="ti tabler-building-bank text-muted fs-5"></i>
                                                            </div>
                                                            <p class="text-muted mb-1.5 small">Mendukung Mandiri, BNI, BRI, Danamon, dll.</p>
                                                            <span class="text-success extra-small fw-bold d-block" style="font-size: 0.72rem;"><i class="ti tabler-circle-check-half me-1"></i>Verifikasi otomatis instan tanpa kirim bukti</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="alert alert-warning border-0 p-3 d-flex align-items-start mb-0" style="background-color: #fff8ec; border-radius: 6px;">
                                                <i class="ti tabler-alert-circle text-warning me-2 fs-4 mt-0.5"></i>
                                                <div style="font-size: 0.78rem; line-height: 1.4; color: #7e4d05; font-weight: 500;">
                                                    Pendaftaran Anda baru akan diproses dan tercatat di sistem setelah pembayaran berhasil dikonfirmasi.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer border-top d-flex justify-content-between py-3 px-4" style="background: #ffffff;">
                                    <button type="button" class="btn btn-label-secondary px-4 text-secondary bg-light border-0" data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-primary fw-bold px-4" style="background-color: #666ee8; border-color: #666ee8;"><i class="ti tabler-shield-check me-1"></i> Konfirmasi & Bayar Sekarang</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                @empty
                <div class="text-center py-5 bg-white border rounded-3 shadow-xs">
                    <i class="ti tabler-receipt-off text-muted mb-3" style="font-size: 4rem;"></i>
                    <h5 class="fw-bold text-dark mb-1">Belum Ada Transaksi</h5>
                    <p class="text-muted small mb-0">Semua riwayat pendaftaran Anda akan direkam di sini.</p>
                </div>
                @endforelse

            </div>
        </div>
    </div>
</div>

<style>
    .style-scroll-hidden::-webkit-scrollbar { display: none; }
    .style-scroll-hidden { -ms-overflow-style: none; scrollbar-width: none; }
    .extra-small { font-size: 0.725rem; }
    .italic-style { font-style: italic; }
    .transaction-card { transition: all 0.2s ease-in-out; border-radius: 8px !important; }
    .transaction-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(147, 158, 170, 0.15) !important; }
    @media (min-width: 768px) { 
        .border-start-md { border-left: 1px solid #dbdade !important; padding-left: 1.5rem !important; } 
    }
    .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
</style>

<script>
function updateTotalLive(id) {
    let inputVal = document.getElementById('inputNominal' + id).value;
    let textDisplay = document.getElementById('textTotalLive' + id);
    
    if (inputVal) {
        let formatted = new Intl.NumberFormat('id-ID').format(inputVal);
        textDisplay.innerText = 'Rp ' + formatted;
    } else {
        textDisplay.innerText = 'Rp 0';
    }
}
</script>
@endsection