@extends('layouts.master_landing')
@section('content')

<section class="section-py first-section-pt bg-body">
    <div class="container">
        <br>
        <div class="row mb-6">
            <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                <div>
                    <h3 class="mb-1 fw-bold text-dark">Checkout & Perlengkapan</h3>
                    <p class="mb-0 text-muted">Konfirmasi keikutsertaan kelas dan pilih perlengkapan pelatihan tambahan Anda.</p>
                </div>
                <a href="{{ route('pelatihan_tersedia.index') }}#PelatihanView" class="btn btn-outline-secondary">
                    <i class="ti tabler-arrow-left me-1"></i> Kembali ke Pelatihan Tersedia
                </a>
            </div>
        </div>

        <!-- FORM UTAMA -->
        <form action="{{ route('pelatihan.checkout.store') }}" method="POST" id="form-checkout">
            @csrf
            
            <input type="hidden" name="magang_id" value="{{ $magang->id }}">
            
            <div class="row">
                <!-- SISI KIRI: DAFTAR PERLENGKAPAN -->
                <div class="col-lg-8 mb-4">
                    <div class="card shadow-sm border mb-4">
                        <div class="card-header border-bottom bg-light py-3 d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0 fw-bold text-dark">
                                <i class="ti tabler-box text-primary me-2 fs-4"></i> Perlengkapan & Atribut Pelatihan
                            </h5>
                            <span class="badge bg-label-primary fw-semibold">Opsional</span>
                        </div>
                        
                        <div class="card-body pt-4">
                            <p class="text-muted small mb-4">Bila Anda membutuhkan perlengkapan fisik di bawah ini selama pelatihan, silakan centang item yang diinginkan:</p>

                            <div class="d-flex flex-column gap-3">
                                
                                <!-- LOOPING DINAMIS DARI DATABASE -->
                                @forelse($barangs as $barang)
                                <div class="p-3 border rounded d-flex align-items-center justify-content-between gap-3 item-barang" style="transition: all 0.2s;">
                                    
                                    <div class="d-flex align-items-center gap-3 flex-grow-1" style="min-width: 0;">
                                        <div class="form-check mb-0 flex-shrink-0">
                                            <input class="form-check-input checkbox-barang" type="checkbox" name="barang_id[]" value="{{ $barang->id }}" id="barang{{ $barang->id }}" data-harga="{{ $barang->harga }}" style="width: 20px; height: 20px; cursor: pointer;">
                                        </div>
                                        
                                        <!-- Foto Barang -->
                                        <div class="bg-label-primary rounded p-1 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 55px; height: 55px;">
                                            @if(!empty($barang->foto))
                                                <img src="{{ asset('foto_barang/' . $barang->foto) }}" alt="{{ $barang->nama }}" style="width: 100%; height: 100%; object-fit: cover;" class="rounded">
                                            @else
                                                <i class="ti tabler-box fs-3"></i>
                                            @endif
                                        </div>
                                        
                                        <div class="flex-grow-1" style="min-width: 0;">
                                            <label for="barang{{ $barang->id }}" class="h6 mb-1 fw-bold text-dark cursor-pointer d-block text-truncate">{{ $barang->nama }}</label>
                                            <span class="text-muted d-block small style-desc-text">
                                                {{ strip_tags($barang->uraian) }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="text-end flex-shrink-0 ps-2" style="min-width: 110px;">
                                        <span class="fw-bold text-dark d-block">Rp {{ number_format($barang->harga, 0, ',', '.') }}</span>
                                    </div>

                                </div>
                                @empty
                                <div class="text-center py-4 text-muted">
                                    <i class="ti tabler-info-circle fs-3 mb-2 d-block text-secondary"></i>
                                    Tidak ada perlengkapan atau atribut tambahan yang tersedia untuk tipe pelatihan ini.
                                </div>
                                @endforelse

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

                <!-- SISI KANAN: DETAIL RINGKASAN & TOTAL -->
                <div class="col-lg-4 mb-4">
                    <div class="card shadow-sm border border-primary">
                        <div class="card-header bg-label-primary py-3">
                            <h5 class="card-title mb-0 fw-bold text-primary">
                                <i class="ti tabler-file-invoice me-2 fs-4"></i> Detail Pelatihan
                            </h5>
                        </div>
                        
                        <div class="p-4 pb-0 text-center">
                            @if(isset($magang->foto) && file_exists(public_path('foto_magang/' . $magang->foto)))
                                <img src="{{ asset('foto_magang/' . $magang->foto) }}" alt="{{ $magang->nama }}" class="img-fluid rounded shadow-sm w-100" style="max-height: 160px; object-fit: cover;" />
                            @else
                                <img src="{{ asset('assets/img/front-pages/landing-page/hero-dashboard-light.png') }}" alt="Default Image" class="img-fluid rounded shadow-sm w-100" style="max-height: 160px; object-fit: cover;" />
                            @endif
                        </div>

                        <div class="card-body pt-3">
                            <div class="mb-3">
                                <span class="badge bg-label-success text-uppercase mb-2 fw-semibold" style="font-size: 0.65rem;">
                                    {{ $magang->type ?? 'Pelatihan' }}
                                </span>
                                <h5 class="fw-bold text-dark lh-base mb-2">{{ $magang->nama ?? 'Nama Pelatihan Tidak Ditemukan' }}</h5>
                                
                                <div class="d-flex align-items-center text-muted small">
                                    <i class="ti tabler-calendar me-2 text-info fs-5"></i>
                                    <span>Jadwal: <strong>{{ isset($magang->tgl_mulai) ? \Carbon\Carbon::parse($magang->tgl_mulai)->translatedFormat('d M') : '-' }} - {{ isset($magang->tgl_selesai) ? \Carbon\Carbon::parse($magang->tgl_selesai)->translatedFormat('d M Y') : '-' }}</strong></span>
                                </div>
                            </div>

                            <hr class="my-3" />

                            <h6 class="fw-bold text-dark mb-3">Rincian Pembayaran</h6>
                            
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-secondary">Biaya Pelatihan</span>
                                <span class="fw-bold text-dark">
                                    {{ empty($magang->biaya) ? 'Gratis' : 'Rp ' . number_format($magang->biaya, 0, ',', '.') }}
                                </span>
                            </div>
                            
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-secondary">Tambahan Barang</span>
                                <span class="text-dark fw-semibold" id="total-barang">Rp 0</span>
                            </div>
                            
                            <hr class="my-3" />
                            
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <span class="fw-bold text-dark">Total Pembayaran</span>
                                <span class="fw-extrabold text-primary fs-4" id="grand-total">
                                    {{ empty($magang->biaya) ? 'Gratis' : 'Rp ' . number_format($magang->biaya, 0, ',', '.') }}
                                </span>
                            </div>

                            <button type="button" class="btn btn-primary w-100 py-2 fw-bold shadow-xs" id="btn-buka-invoice">
                                <i class="ti tabler-shield-check me-2 fs-5"></i> Selesaikan Pendaftaran
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MODAL INVOICE DENGAN KEBIJAKAN CICILAN MINIMAL 500 RIBU -->
            <div class="modal fade" id="invoiceModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0 shadow-lg overflow-hidden rounded-3">
                        
                        <!-- Header Premium -->
                        <div class="modal-header bg-dark py-3 position-relative">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary rounded p-2 d-flex align-items-center justify-content-center me-3 shadow">
                                    <i class="ti tabler-receipt text-white fs-4"></i>
                                </div>
                                <div>
                                    <h5 class="modal-title fw-bold text-white mb-0" id="invoiceModalLabel">Pembayaran Pendaftaran</h5>
                                    <small class="text-muted-light extra-small">Harap tinjau kembali metode tagihan dan pembayaran Anda</small>
                                </div>
                            </div>
                            <button type="button" class="btn-close btn-close-white position-absolute end-0 top-50 translate-middle-y me-3" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        
                        <div class="modal-body p-4 bg-light-body">
                            <div class="row g-4">
                                
                                <!-- KOLOM KIRI: STRUK INVOICE DIGITAL DENGAN SISTEM CICILAN -->
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-xs rounded-3 overflow-hidden bg-white h-100 border-top border-3 border-primary">
                                        <div class="p-4">
                                            <div class="text-center mb-3">
                                                <span class="text-uppercase tracking-wider text-muted fw-bold extra-small d-block mb-1">Rincian Tagihan</span>
                                                <h4 class="fw-extrabold text-dark mb-0">INVOICE SUMMARY</h4>
                                            </div>
                                            
                                            <div class="py-2">
                                                <div class="d-flex justify-content-between mb-2">
                                                    <span class="text-muted small">Kelas Pelatihan:</span>
                                                    <span class="fw-bold text-dark text-end small style-invoice-title">{{ $magang->nama }}</span>
                                                </div>
                                                <div class="d-flex justify-content-between pb-2">
                                                    <span class="text-muted small">Biaya Kelas:</span>
                                                    <span class="fw-bold text-dark small">{{ empty($magang->biaya) ? 'Gratis' : 'Rp ' . number_format($magang->biaya, 0, ',', '.') }}</span>
                                                </div>
                                                
                                                <div id="modal-list-barang" class="pt-2 border-top border-dashed"></div>
                                            </div>

                                            <!-- OPSI KEBIJAKAN METODE TAGIHAN (LUNAS / CICILAN) -->
                                            <div class="pt-3 border-top border-dashed my-2">
                                                <label class="fw-bold text-dark small mb-2 d-block"><i class="ti tabler-adjustments-horizontal me-1 text-primary"></i>Metode Tagihan</label>
                                                <div class="d-flex gap-2 mb-2">
                                                    <label class="btn btn-sm btn-outline-primary flex-grow-1 py-2 cursor-pointer style-type-btn text-center active" id="btn-type-lunas">
                                                        <input type="radio" name="tipe_tagihan" value="lunas" class="d-none" checked>
                                                        <i class="ti tabler-circle-check me-1 fs-6"></i>Bayar Lunas
                                                    </label>
                                                    <label class="btn btn-sm btn-outline-primary flex-grow-1 py-2 cursor-pointer style-type-btn text-center" id="btn-type-cicilan">
                                                        <input type="radio" name="tipe_tagihan" value="cicilan" class="d-none">
                                                        <i class="ti tabler-credit-card me-1 fs-6"></i>Cicilan / DP
                                                    </label>
                                                </div>

                                                <!-- Kotak Form Input Nominal Cicilan -->
                                                <div id="container-input-cicilan" class="d-none mt-2 p-2 bg-light rounded-2 border">
                                                    <label class="extra-small text-dark fw-bold mb-1 d-block">Masukkan Nominal Bayar Sekarang:</label>
                                                    <div class="input-group input-group-merge">
                                                        <span class="input-group-text bg-white text-dark small fw-bold py-1 px-2 border-end-0">Rp</span>
                                                        <input type="number" id="nominal-cicilan-input" name="nominal_cicilan_awal" class="form-control form-control-sm fw-bold border-start-0 ps-1 py-1 text-dark" placeholder="500000" min="500000">
                                                    </div>
                                                    <small id="error-msg-cicilan" class="text-danger extra-small mt-1 d-none fw-semibold">
                                                        <i class="ti tabler-alert-circle me-0.5"></i>Minimal pembayaran awal Rp 500.000
                                                    </small>
                                                </div>

                                                <!-- Notifikasi jika nominal total tidak mencukupi batas minimal cicilan -->
                                                <small id="alert-cicilan-disabled" class="text-warning extra-small d-none fw-medium mt-1">
                                                    <i class="ti tabler-info-circle me-0.5"></i>Fitur cicilan tidak tersedia (Total tagihan di bawah Rp 500.000)
                                                </small>
                                            </div>
                                        </div>
                                        
                                        <!-- Total yang harus dibayar saat ini -->
                                        <div class="bg-light p-4 text-center border-top border-dashed position-relative">
                                            <div class="receipt-notch notch-left"></div>
                                            <div class="receipt-notch notch-right"></div>
                                            
                                            <span id="label-tagihan-pembayaran" class="text-muted small d-block mb-1 fw-medium">TOTAL YANG HARUS DIBAYAR</span>
                                            <h3 class="fw-extrabold text-primary mb-0" id="modal-grand-total">Rp 0</h3>
                                            
                                            <!-- Informasi Tambahan Sisa Hutang jika memilih cicilan -->
                                            <div id="container-sisa-tagihan" class="mt-1 d-none">
                                                <span class="text-muted extra-small">Sisa Hutang Tagihan: <strong class="text-danger fw-bold" id="text-sisa-tagihan">Rp 0</strong></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- KOLOM KANAN: PILIHAN METODE PEMBAYARAN -->
                                <div class="col-md-6">
                                    <h6 class="fw-bold text-dark mb-3 d-flex align-items-center">
                                        <i class="ti tabler-wallet me-2 text-primary fs-4"></i> Pilih Metode Pembayaran
                                    </h6>
                                    
                                    <div class="d-flex flex-column gap-2">
                                        <!-- OPSI 1: TRANSFER MANUAL -->
                                        <label class="payment-option p-3 border rounded-3 d-flex align-items-center justify-content-between cursor-pointer bg-white">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="custom-radio-wrapper flex-shrink-0">
                                                    <input type="radio" name="metode_pembayaran" value="Transfer" class="form-check-input visual-radio d-none" checked required>
                                                    <div class="custom-radio-circle"></div>
                                                </div>
                                                <div>
                                                    <span class="fw-bold text-dark d-block small mb-0">Transfer Bank (Manual)</span>
                                                    <span class="text-muted extra-small d-block mt-1">
                                                        <span class="badge bg-label-secondary px-2 py-0.5 mb-1 text-dark fw-bold">BANK BCA</span> <br>
                                                        No. Rek: <strong class="text-dark fs-6">8830-4752-11</strong> <br>
                                                        a/n <span class="text-dark fw-semibold">PT Setia Raya Nanda</span>
                                                    </span>
                                                    <span class="text-danger extra-small d-block mt-1 fw-medium"><i class="ti tabler-info-circle me-0.5"></i>Wajib upload bukti transfer setelah ini</span>
                                                </div>
                                            </div>
                                            <div class="bg-light rounded p-2 text-secondary flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                <i class="ti tabler-receipt-2 fs-4"></i>
                                            </div>
                                        </label>

                                        <!-- OPSI 2: VIRTUAL ACCOUNT -->
                                        <label class="payment-option p-3 border rounded-3 d-flex align-items-center justify-content-between cursor-pointer bg-white">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="custom-radio-wrapper flex-shrink-0">
                                                    <input type="radio" name="metode_pembayaran" value="VA" class="form-check-input visual-radio d-none">
                                                    <div class="custom-radio-circle"></div>
                                                </div>
                                                <div>
                                                    <span class="fw-bold text-dark d-block small mb-0">Virtual Account (VA)</span>
                                                    <span class="text-muted extra-small d-block mt-1">Mendukung Mandiri, BNI, BRI, Danamon, dll.</span>
                                                    <span class="text-success extra-small d-block mt-1 fw-medium"><i class="ti tabler-circle-check me-0.5"></i>Verifikasi otomatis instan tanpa kirim bukti</span>
                                                </div>
                                            </div>
                                            <div class="bg-light rounded p-2 text-secondary flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                <i class="ti tabler-building-bank fs-4"></i>
                                            </div>
                                        </label>
                                    </div>
                                    
                                    <div class="mt-4 p-3 bg-label-warning rounded-3 border border-warning-subtle d-flex align-items-start gap-2">
                                        <i class="ti tabler-alert-circle text-warning fs-4 mt-0.5"></i>
                                        <p class="mb-0 text-dark extra-small lh-base">Pendaftaran Anda baru akan diproses dan tercatat di sistem setelah pembayaran berhasil dikonfirmasi.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="modal-footer bg-white border-top py-3 px-4 d-flex justify-content-between align-items-center">
                            <button type="button" class="btn btn-label-secondary fw-semibold px-4" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary px-4 py-2 fw-bold shadow-sm rounded-2" id="btn-submit-konfirmasi">
                                <i class="ti tabler-shield-lock me-2 fs-5"></i> Konfirmasi & Bayar Sekarang
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</section>

<!-- CSS Kustom UI Premium -->
<style>
    .item-barang:hover {
        border-color: #7367f0 !important;
        background-color: rgba(115, 103, 240, 0.02);
    }
    .cursor-pointer { cursor: pointer; }
    .style-desc-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }
    .extra-small { font-size: 0.75rem; }
    .tracking-wider { letter-spacing: 0.05em; }
    .text-muted-light { color: #a1b0cb; }
    .bg-light-body { background-color: #f8f9fa; }
    .border-dashed { border-style: dashed !important; border-color: #dbdade !important; }
    .style-invoice-title { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* DEKORASI NOTCH STRUK */
    .receipt-notch { position: absolute; top: -10px; width: 20px; height: 20px; background-color: #f8f9fa; border-radius: 50%; }
    .notch-left { left: -10px; }
    .notch-right { right: -10px; }

    /* SELEKSI METODE PEMBAYARAN KUSTOM */
    .payment-option { transition: all 0.25s ease; border: 1px solid #dbdade !important; }
    .payment-option:hover { border-color: #7367f0 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(115, 103, 240, 0.08); }
    .payment-option-active { border-color: #7367f0 !important; background-color: rgba(115, 103, 240, 0.04) !important; box-shadow: 0 4px 12px rgba(115, 103, 240, 0.08); }

    /* CUSTOM RADIO DESIGN (TITIK MODEREN) */
    .custom-radio-circle { width: 18px; height: 18px; border: 2px solid #b4b4b4; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
    .payment-option-active .custom-radio-circle { border-color: #7367f0; background-color: #7367f0; }
    .payment-option-active .custom-radio-circle::after { content: ''; width: 6px; height: 6px; background-color: #ffffff; border-radius: 50%; display: block; }
    
    /* STYLE PILIHAN TIPE TAGIHAN */
    .style-type-btn.active { background-color: #7367f0 !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(115, 103, 240, 0.2); }
</style>

<!-- Script Logic Kalkulasi Biaya, Cicilan, & Validasi Angka -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.checkbox-barang');
        const totalBarangElement = document.getElementById('total-barang');
        const grandTotalElement = document.getElementById('grand-total');
        
        // Komponen Modal Invoice & Cicilan
        const btnBukaInvoice = document.getElementById('btn-buka-invoice');
        const modalListBarang = document.getElementById('modal-list-barang');
        const modalGrandTotalElement = document.getElementById('modal-grand-total');
        const paymentOptions = document.querySelectorAll('.payment-option');
        const btnSubmitKonfirmasi = document.getElementById('btn-submit-konfirmasi');
        
        // Elemen Cicilan
        const btnTypeLunas = document.getElementById('btn-type-lunas');
        const btnTypeCicilan = document.getElementById('btn-type-cicilan');
        const containerInputCicilan = document.getElementById('container-input-cicilan');
        const nominalCicilanInput = document.getElementById('nominal-cicilan-input');
        const errorMsgCicilan = document.getElementById('error-msg-cicilan');
        const alertCicilanDisabled = document.getElementById('alert-cicilan-disabled');
        const labelTagihanPembayaran = document.getElementById('label-tagihan-pembayaran');
        const containerSisaTagihan = document.getElementById('container-sisa-tagihan');
        const textSisaTagihan = document.getElementById('text-sisa-tagihan');

        const biayaPelatihan = {{ $magang->biaya ?? 0 }};
        let currentGrandTotal = 0; // Menyimpan total tagihan aktif aktif

        function formatRupiah(angka) {
            if (angka === 0) return 'Rp 0';
            return 'Rp ' + angka.toLocaleString('id-ID');
        }

        // 1. HITUNG RINCIAN DI HALAMAN UTAMA LUAR
        function hitungTotal() {
            let totalBarang = 0;
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    totalBarang += parseInt(cb.getAttribute('data-harga')) || 0;
                }
            });

            currentGrandTotal = biayaPelatihan + totalBarang;
            totalBarangElement.textContent = formatRupiah(totalBarang);
            
            if(currentGrandTotal === 0) {
                grandTotalElement.textContent = 'Gratis';
            } else {
                grandTotalElement.textContent = formatRupiah(currentGrandTotal);
            }
            return { totalBarang, grandTotal: currentGrandTotal };
        }

        checkboxes.forEach(cb => {
            cb.addEventListener('change', hitungTotal);
        });

        // 2. GENERATE STRUK & SET KEADAAN AWAL CICILAN SAAT MODAL DIBUKA
        btnBukaInvoice.addEventListener('click', function() {
            const dataBiaya = hitungTotal();
            modalListBarang.innerHTML = ''; 
            
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    const hargaBarang = parseInt(cb.getAttribute('data-harga')) || 0;
                    const containerItem = cb.closest('.item-barang');
                    const namaBarang = containerItem.querySelector('label').textContent;
                    
                    const divItem = document.createElement('div');
                    divItem.className = 'd-flex justify-content-between mb-2 text-secondary small text-start';
                    divItem.innerHTML = `
                        <span class="text-truncate me-2" style="max-width: 65%;">+ Extra: ${namaBarang}</span>
                        <span class="fw-medium text-dark">Rp ${hargaBarang.toLocaleString('id-ID')}</span>
                    `;
                    modalListBarang.appendChild(divItem);
                }
            });
            
            // VALIDASI LOGIKA KELAYAKAN CICILAN (MINIMAL TOTAL HARUS 500 RIBU)
            if (dataBiaya.grandTotal < 500000) {
                // Jika di bawah 500rb, matikan opsi cicilan
                btnTypeCicilan.classList.add('disabled');
                btnTypeCicilan.style.pointerEvents = 'none';
                alertCicilanDisabled.classList.remove('d-none');
                
                // Kembalikan paksa ke mode lunas
                setModeLunas();
            } else {
                // Jika mencukupi, buka kembali opsi cicilan
                btnTypeCicilan.classList.remove('disabled');
                btnTypeCicilan.style.pointerEvents = 'auto';
                alertCicilanDisabled.classList.add('d-none');
                
                // Atur nilai default input cicilan pertama = 500.000
                nominalCicilanInput.value = 500000;
                nominalCicilanInput.max = dataBiaya.grandTotal;
            }

            // Atur tampilan default ke mode Lunas saat modal pertama kali dibuka
            setModeLunas();
            
            const invoiceModal = new bootstrap.Modal(document.getElementById('invoiceModal'));
            invoiceModal.show();
        });

        // 3. FUNGSI SET MODE BAYAR LUNAS
        function setModeLunas() {
            btnTypeLunas.classList.add('active');
            btnTypeLunas.querySelector('input').checked = true;
            btnTypeCicilan.classList.remove('active');
            
            containerInputCicilan.classList.add('d-none');
            containerSisaTagihan.classList.add('d-none');
            errorMsgCicilan.classList.add('d-none');
            
            labelTagihanPembayaran.textContent = "TOTAL YANG HARUS DIBAYAR";
            modalGrandTotalElement.textContent = currentGrandTotal === 0 ? 'Gratis' : formatRupiah(currentGrandTotal);
            btnSubmitKonfirmasi.removeAttribute('disabled');
        }

        // 4. FUNGSI SET MODE BAYAR CICILAN
        function setModeCicilan() {
            btnTypeCicilan.classList.add('active');
            btnTypeCicilan.querySelector('input').checked = true;
            btnTypeLunas.classList.remove('active');
            
            containerInputCicilan.classList.remove('d-none');
            containerSisaTagihan.classList.remove('d-none');
            
            labelTagihanPembayaran.textContent = "TOTAL DIBAYAR HARI INI (DP)";
            validasiInputCicilan();
        }

        // Event Listener Tombol Tipe Tagihan
        btnTypeLunas.addEventListener('click', setModeLunas);
        btnTypeCicilan.addEventListener('click', setModeCicilan);

        // 5. VALIDASI REAL-TIME INPUT NOMINAL CICILAN
        function validasiInputCicilan() {
            const inputVal = parseInt(nominalCicilanInput.value) || 0;
            
            if (inputVal < 500000) {
                errorMsgCicilan.innerHTML = '<i class="ti tabler-alert-circle me-0.5"></i>Minimal pembayaran awal Rp 500.000';
                errorMsgCicilan.classList.remove('d-none');
                btnSubmitKonfirmasi.setAttribute('disabled', 'true'); // Kunci tombol submit
                
                modalGrandTotalElement.textContent = formatRupiah(inputVal);
                containerSisaTagihan.classList.add('d-none');
            } else if (inputVal > currentGrandTotal) {
                errorMsgCicilan.innerHTML = '<i class="ti tabler-alert-circle me-0.5"></i>Nominal melebihi total tagihan Anda';
                errorMsgCicilan.classList.remove('d-none');
                btnSubmitKonfirmasi.setAttribute('disabled', 'true'); // Kunci tombol submit
                
                modalGrandTotalElement.textContent = formatRupiah(inputVal);
                containerSisaTagihan.classList.add('d-none');
            } else {
                // Input Valid dan Lolos Kebijakan Sistem
                errorMsgCicilan.classList.add('d-none');
                btnSubmitKonfirmasi.removeAttribute('disabled'); // Buka tombol submit
                
                modalGrandTotalElement.textContent = formatRupiah(inputVal);
                containerSisaTagihan.classList.remove('d-none');
                
                // Hitung sisa hutang tagihan secara live
                let sisaHutang = currentGrandTotal - inputVal;
                textSisaTagihan.textContent = formatRupiah(sisaHutang);
            }
        }

        nominalCicilanInput.addEventListener('input', validasiInputCicilan);

        // 6. EFEK HIGHLIGHT INTERAKTIF METODE PEMBAYARAN KANAN
        paymentOptions.forEach(option => {
            const radioInput = option.querySelector('.visual-radio');
            option.addEventListener('click', function() {
                paymentOptions.forEach(opt => opt.classList.remove('payment-option-active'));
                option.classList.add('payment-option-active');
                if (radioInput) radioInput.checked = true;
            });
            if (radioInput && radioInput.checked) {
                option.classList.add('payment-option-active');
            }
        });
    });
</script>

@endsection