// =======================
// DATA SETUP
// =======================
let checkout_biodata = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');
let order_id = sessionStorage.getItem('order_id') || '[]';

// =======================
// EVENT ON LOAD
// =======================
document.addEventListener('DOMContentLoaded', () => {
    $("#cartButton").addClass('d-none');
    $("#no_order_result").val(order_id)
    let currentStep = 0;
    let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    // Redirect jika cart kosong
    if (cart.length === 0) {
        window.location.href = "/";
        return;
    }



    // Setup button step
    document.querySelectorAll('.next-step').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (currentStep ===  0){
                if(!validateStepOne()) return
                isiKonfirmasi();
                currentStep++; showStep(currentStep);
            }else if(currentStep === 1){
                const {isValid, errorMessage} =validateCartBeforeSubmit();
                    if (!isValid) {
                        alert(errorMessage);
                        return
                    }
                    if (!sessionStorage.getItem('order_id')) {
                        await submitOrderToServer(); // async function simpan ke server
                    }
                currentStep++;
                showStep(currentStep)
            }else if(currentStep === 2){
                renderCartSummary()
            }
        });
    });

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

    // Inisialisasi tampilan dan data
    renderCartSummary();
    showStep(currentStep);
    isiKonfirmasi();
    toggleCustomerFields()
    document.getElementById('no_order_display').textContent  = order_id

});
// =======================
// FUNGSI STEP
// =======================
const steps = document.querySelectorAll('.form-step');
const progressBar = document.getElementById('stepProgressBar');

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}`;
    for(let i = 1; i <= total; i++){
        const circle = document.getElementById(`step-circle-${i}`)
        if(circle){
            circle.classList.toggle('active', i === index + 1)
        }
    }
}

// =======================
// FUNGSI BIODATA
// =======================
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);
    }
    if(checkout_biodata.jenis_kelamin){
        $(`input[name="jenis_kelamin"][value="${checkout_biodata.jenis_kelamin}"]`).prop('checked', true);
    }
    $('#nama_pemesan').val(checkout_biodata.nama_pemesan);
    // $('#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 isiKonfirmasi() {
    const biodata = {
        jenis_customer: $('input[name="jenis_customer"]:checked').val(),
        nama_pemesan: $('#nama_pemesan').val(),
        jenis_kelamin: $('input[name="jenis_kelamin"]:checked').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;
    renderCartSummary();
}

// =======================
// FUNGSI CART / PESANAN
// =======================
function renderCartSummary() {
    const container = document.getElementById('checkout_cart_summary');
    let now = new Date();
    let today = now.toISOString().split('T')[0];
    let isAfter12 = now.getHours() >= 12;
    container.innerHTML = '';
    let totalKeseluruhan = 0;
    let carts = JSON.parse(sessionStorage.getItem('cart') || '[]');

    carts.forEach((item) => {
        const pesananList = Array.isArray(item.pesanan) ? item.pesanan : [];
        let pesananHTML = '';
        let countDate = pesananList.length;

        pesananList.forEach((p, i) => {
            let isTodayAndLate = p.tgl === today && isAfter12

            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" min="${today}" value="${p.tgl}"
                            onchange="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=""  ${!p.kategoriPemesanan ? 'selected' : ''}>Kategori Pemesanan</option>
                            <option value="Same Day" ${p.kategoriPemesanan === 'Same Day' ? 'selected' : ''} ${isTodayAndLate ? 'disabled' : ''}>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}"
                            onchange="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}, ${countDate})">
                            <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);
        totalKeseluruhan += itemTotal
        const itemHTML = `
            <div class="card mb-3 shadow-sm position-relative">
                <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; width:auto; object-fit: cover;">
                    </div>
                    <div class="col-md-8">
                              <button type="button" class="btn btn-sm btn-outline-danger position-absolute top-0 end-0 m-2"
                                    onclick="removeCartItem(${item.id})">
                                     Hapus
                                </button>
                        <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>

                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
        container.insertAdjacentHTML('beforeend', itemHTML);
    });
    container.insertAdjacentHTML('beforeend', `
        <div class="text-end mt-4">
            <h5><strong>Total Keseluruhan:</strong> <span class="text-success">Rp ${totalKeseluruhan.toLocaleString('id-ID')}</span></h5>
        </div>
    `);

    document.getElementById('no_order_price').textContent = 'Rp ' + totalKeseluruhan.toLocaleString('id-ID')
}

// =======================
// EVENT HANDLER FIELD
// =======================
function onJumlahChange(itemId, index) {
     let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    const input = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .jumlah-input`);
    if (!isNaN(input.value)) {
        cart.find(item => item.id === itemId).pesanan[index].jumlah = parseInt(input.value);
        sessionStorage.setItem('cart', JSON.stringify(cart));
        isiKonfirmasi();
    }
}

function onTanggalChange(itemId, index) {
     let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    const input = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .tanggal-input`);
    cart.find(item => item.id === itemId).pesanan[index].tgl = input.value;
    sessionStorage.setItem('cart', JSON.stringify(cart));
    renderCartSummary();
}

function onKategoriChange(itemId, index) {
    let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    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));
    renderCartSummary();
}

// =======================
// TAMBAH / HAPUS PESANAN
// =======================
function addOrderDate(itemId) {
    let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    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();
    }
}

function removeOrderDate(itemId, index, count) {
    let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    const item = cart.find(i => i.id === itemId);

    if(count == 1){
        cart = cart.filter(i => i.id !== itemId);
        sessionStorage.setItem('cart', JSON.stringify(cart));
    }else if(item && Array.isArray(item.pesanan) && item.pesanan.length > index) {
        item.pesanan.splice(index, 1);
        sessionStorage.setItem('cart', JSON.stringify(cart));
    }
    renderCartSummary();
}


function removeCartItem(itemId){
         let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
         cart = cart.filter(i => i.id !== itemId);
         sessionStorage.setItem('cart', JSON.stringify(cart));
         renderCartSummary()
    }

// validasi step one dan sebelum submit
function validateStepOne() {
    const jenisCustomer = document.querySelector('input[name="jenis_customer"]:checked');
    const jenisKelamin = document.querySelector('input[name="jenis_kelamin"]:checked');
    const namaPemesan = document.getElementById('nama_pemesan').value.trim();
    const noWA = document.getElementById('no_whatsapp').value.trim();

    if (!jenisCustomer) {
        alert('Silakan pilih jenis customer.');
        return false;
    }

    if (!namaPemesan) {
        alert('Silakan isi nama pemesan.');
        return false;
    }

    if (!jenisKelamin) {
        alert('Silakan pilih jenis kelamin.');
        return false;
    }

    if (!noWA) {
        alert('Silakan isi nomor WhatsApp.');
        return false;
    }

    // Validasi tambahan sesuai jenis customer
    const selected = jenisCustomer.value;
    if (selected === 'Karyawan RSAB Harapan Kita') {
        const bagian = document.getElementById('bagian_instalasi').value.trim();
        const ekstension = document.getElementById('no_ekstensien').value.trim();
        if (!bagian) {
            alert('Silakan lengkapi data karyawan.');
            return false;
        }
    } else if (selected === 'Keluarga Pasien / Penunggu Pasien') {
        const namaPasien = document.getElementById('nama_pasien').value.trim();
        const ruang = document.getElementById('ruang_perawatan').value;
        const noKamar = document.getElementById('no_kamar').value.trim();
        const kelas = document.getElementById('kelas_perawatan').value;
        if (!namaPasien || !ruang || !noKamar || !kelas) {
            alert('Silakan lengkapi data pasien.');
            return false;
        }
    }

    return true;
}


function validateCartBeforeSubmit() {
    const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    let isValid = true;
    let errorMessage = "";

    cart.forEach((item, index) => {
        const pesananList = item.pesanan || [];
        pesananList.forEach((pesanan, i) => {
            if (!pesanan.tgl) {
                isValid = false;
                errorMessage = `Tanggal belum diisi pada item "${item.nama_menu}" (baris ${i + 1})`;
            } else if (!pesanan.kategoriPemesanan) {
                isValid = false;
                errorMessage = `Kategori pemesanan belum dipilih pada item "${item.nama_menu}" (baris ${i + 1})`;
            } else if (!pesanan.jumlah || pesanan.jumlah <= 0) {
                isValid = false;
                errorMessage = `Jumlah harus lebih dari 0 pada item "${item.nama_menu}" (baris ${i + 1})`;
            }
        });
    });

    return { isValid, errorMessage };
}


function hitungTotalHarga(){
    const biodata = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');
    const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
    let total =0;

    cart.forEach(item => {
        const harga = biodata.jenis_customer === "Karyawan RSAB Harapan Kita" ? item.harga_karyawan || 0 : item.harga_kp || 0
        const itemTotal = item.pesanan?.reduce((sum, p) => sum + (p.jumlah * harga), 0);
        total += itemTotal

    })

    return total;
}


function copyNoRek() {
        const text = document.getElementById('noRekText').innerText;
        navigator.clipboard.writeText(text).then(() => {
            alert("Nomor rekening berhasil disalin: " + text);
        }).catch(err => {
            console.error('Gagal menyalin: ', err);
            alert("Gagal menyalin teks.");
        });
}

function copyNoOrder() {
        const text = document.getElementById('no_order_display').innerText;
        navigator.clipboard.writeText(text).then(() => {
            alert("Nomor order berhasil disalin: " + text);
        }).catch(err => {
            console.error('Gagal menyalin: ', err);
            alert("Gagal menyalin teks.");
        });
    }