document.addEventListener('DOMContentLoaded', () => {
    $("#cartButton").addClass('d-none');

    const steps = document.querySelectorAll('.form-step');
    const progressBar = document.getElementById('stepProgressBar');
    let currentStep = 0;

    let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    let checkout_biodata = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');

    if (cart.length === 0) {
        window.location.href = "/";
        return;
    }

    function toggleCustomerFields() {
        const selected = $('input[name="jenis_customer"]:checked').val();
        if (selected === 'Karyawan RSAB Harapan Kita') {
            $('.karyawan').show();
            $('.pasien').hide();
        } else if (selected === 'Keluarga Pasien / Penunggu Pasien') {
            $('.pasien').show();
            $('.karyawan').hide();
        } else {
            $('.karyawan, .pasien').hide();
        }
    }

    $('input[name="jenis_customer"]').on('change', toggleCustomerFields);
    toggleCustomerFields();

    if (typeof checkout_biodata === 'object') {
        if (checkout_biodata.jenis_customer) {
            $(`input[name="jenis_customer"][value="${checkout_biodata.jenis_customer}"]`).prop('checked', true);
        }
        $('#nama_pemesan').val(checkout_biodata.nama_pemesan);
        $('#jenis_kelamin').val(checkout_biodata.jenis_kelamin);
        $('#tanggal_lahir').val(checkout_biodata.tanggal_lahir);
        $('#tinggi_badan').val(checkout_biodata.tinggi_badan);
        $('#berat_badan').val(checkout_biodata.berat_badan);
        $('#no_whatsapp').val(checkout_biodata.no_whatsapp);
        $('#nama_pasien').val(checkout_biodata.nama_pasien);
        $('#ruang_perawatan').val(checkout_biodata.ruang_perawatan);
        $('#no_kamar').val(checkout_biodata.no_kamar);
        $('#kelas_perawatan').val(checkout_biodata.kelas_perawatan);
        $('#bagian_instalasi').val(checkout_biodata.bagian_instalasi);
        $('#no_ekstensien').val(checkout_biodata.no_ekstensien);
    }

    function showStep(index) {
        steps.forEach((step, i) => {
            step.classList.toggle('active', i === index);
            step.classList.toggle('d-none', i !== index);
        });
        const total = steps.length;
        const progress = ((index + 1) / total) * 100;
        progressBar.style.width = progress + '%';
        progressBar.innerText = `Langkah ${index + 1} dari ${total}`;
    }

    function isiKonfirmasi() {
        const biodata = {
            jenis_customer: $('input[name="jenis_customer"]:checked').val(),
            nama_pemesan: $('#nama_pemesan').val(),
            jenis_kelamin: $('#jenis_kelamin').val(),
            tanggal_lahir: $('#tanggal_lahir').val(),
            tinggi_badan: $('#tinggi_badan').val(),
            berat_badan: $('#berat_badan').val(),
            no_whatsapp: $('#no_whatsapp').val(),
            nama_pasien: $('#nama_pasien').val(),
            ruang_perawatan: $('#ruang_perawatan').val(),
            no_kamar: $('#no_kamar').val(),
            kelas_perawatan: $('#kelas_perawatan').val(),
            bagian_instalasi: $('#bagian_instalasi').val(),
            no_ekstensien: $('#no_ekstensien').val(),
        };

        sessionStorage.setItem('checkout_biodata', JSON.stringify(biodata));
        checkout_biodata = biodata; // Update global var
        renderCartSummary();
    }

    function renderCartSummary() {
        const container = document.getElementById('checkout_cart_summary');
        container.innerHTML = '';

        cart.forEach((item) => {
            const pesananList = Array.isArray(item.pesanan) ? item.pesanan : [];

            let pesananHTML = '';
            pesananList.forEach((p, i) => {
                pesananHTML += `
                    <div class="row g-2 align-items-center mb-2" data-item-id="${item.id}" data-index="${i}">
                        <div class="col-12 col-md-5">
                            <input type="date" class="form-control form-control-sm tanggal-input" value="${p.tgl}" oninput="onTanggalChange(${item.id}, ${i})">
                        </div>
                        <div class="col-12 col-md-3">
                            <select class="form-select form-select-sm kategori-pemesanan-input" onchange="onKategoriChange(${item.id}, ${i})">
                                <option value="" disabled ${!p.kategoriPemesanan ? 'selected' : ''}>Kategori Pemesanan</option>
                                <option value="Same Day" ${p.kategoriPemesanan === 'Same Day' ? 'selected' : ''}>Same Day</option>
                                <option value="Menu Normal" ${p.kategoriPemesanan === 'Menu Normal' ? 'selected' : ''}>Menu Normal</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-2">
                            <input type="number" class="form-control form-control-sm jumlah-input" value="${p.jumlah}" min="1" oninput="onJumlahChange(${item.id}, ${i})">
                        </div>
                        <div class="col-6 col-md-2 text-end">
                            <button type="button" class="btn btn-sm btn-danger w-100 w-md-auto" onclick="removeOrderDate(${item.id}, ${i})">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </div>
                    </div>`;
            });

            const harga = checkout_biodata.jenis_customer === 'Karyawan RSAB Harapan Kita' ? item.harga_karyawan || 0 : item.harga_kp || 0;
            const itemTotal = pesananList.reduce((sum, p) => sum + (p.jumlah * harga), 0);

            const itemHTML = `
                <div class="card mb-3 shadow-sm">
                    <div class="row g-0">
                        <div class="col-md-4 d-flex align-items-center justify-content-center p-2">
                            <img src="gambar/${item.foto || 'default.jpg'}" alt="${item.nama_menu}" class="img-fluid rounded" style="max-height: 180px; object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">${item.nama_menu}</h5>
                                <div class="text-muted small">Rp ${parseInt(harga).toLocaleString('id-ID')}</div>
                                <p class="card-text text-muted small mb-3">${item.deskripsi || ''}</p>
                                ${pesananHTML}
                                <div class="mt-3 d-flex justify-content-between align-items-center">
                                    <button type="button" class="btn btn-sm btn-outline-success" onclick="addOrderDate(${item.id})">+ Tambah Tanggal</button>
                                    <div><strong>Total:</strong> <span class="text-success">Rp ${itemTotal.toLocaleString('id-ID')}</span></div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeCartItem(${item.id})"><i class="fa-solid fa-trash"></i> Hapus</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
            container.insertAdjacentHTML('beforeend', itemHTML);
        });
    }

    window.onTanggalChange = function (itemId, index) {
        const tanggalInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .tanggal-input`).value;
        cart.forEach(item => {
            if (item.id === itemId) item.pesanan[index].tgl = tanggalInput;
        });
        sessionStorage.setItem('cart', JSON.stringify(cart));
    };

    window.onKategoriChange = function (itemId, index) {
        const kategori = $(`[data-item-id='${itemId}'][data-index='${index}'] .kategori-pemesanan-input`).val();
        cart.find(item => item.id === itemId).pesanan[index].kategoriPemesanan = kategori;
        sessionStorage.setItem('cart', JSON.stringify(cart));
    };

    window.onJumlahChange = function (itemId, index) {
        const jumlahInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .jumlah-input`).value;
        if (!isNaN(jumlahInput)) {
            cart.find(item => item.id === itemId).pesanan[index].jumlah = parseInt(jumlahInput);
            sessionStorage.setItem('cart', JSON.stringify(cart));
            isiKonfirmasi();
        }
    };
    window.addOrderDate = function(itemId) {
        const item = cart.find(i => i.id === itemId);

        if (item && Array.isArray(item.pesanan)) {
            item.pesanan.push({ tgl: '', jumlah: 1, kategoriPemesanan: '' });
            sessionStorage.setItem('cart', JSON.stringify(cart));
            renderCartSummary();
        }
    }

    window.removeOrderDate = function(itemId, index) {
        const item = cart.find(i => i.id === itemId);

        if (item && Array.isArray(item.pesanan) && item.pesanan.length > index) {
            item.pesanan.splice(index, 1);
            sessionStorage.setItem('cart', JSON.stringify(cart));
            renderCartSummary();
        }
    }



    document.querySelectorAll('.next-step').forEach(btn => {
        btn.addEventListener('click', () => {
            if (currentStep === 0) isiKonfirmasi();
            if (currentStep < steps.length - 1) {
                currentStep++;
                showStep(currentStep);
            }
        });
    });

    document.querySelectorAll('.prev-step').forEach(btn => {
        btn.addEventListener('click', () => {
            if (currentStep > 0) {
                currentStep--;
                showStep(currentStep);
            }
        });
    });

    showStep(currentStep);
    isiKonfirmasi();
});