@extends('guest.layout.main')
@section('body_main_guests')

<section class="section py-5 bg-light">

  <div class="container">
    <div class="row justify-content-center">

      <div class="col-lg-8">

        <div class="card shadow-sm border-0">
            <div class="d-flex justify-content-end align-items-center p-3">
                    <a href="/" class="btn btn-outline-success">
                        <i class="fa fa-arrow-left me-1"></i> Kembali ke Menu
                    </a>
                </div>
          <div class="card-body text-center py-5">

            <h3 class="mb-4 fw-bold text-success">Cek Status Pesanan Anda</h3>
            <p class="text-muted mb-4">Masukkan <strong>No Order</strong> yang Anda terima setelah pemesanan untuk melihat status.</p>

            <form action="" class="d-flex justify-content-center" id="form_search_order">
              <div class="input-group w-100 w-md-75">
                <input type="text" name="no_order" class="form-control form-control-lg shadow-sm" placeholder="Contoh: TX/CT/GIZI/2025/07/1/0001" required>
                <button class="btn btn-success btn-lg" type="submit">
                  <i class="fa fa-search me-1"></i>
                </button>
              </div>
            </form>
            <div id="result_check_order">
                {{-- Isi javascript --}}
            </div>
          </div>
        </div>

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

<script>
    $(document).ready(function() {
        $("#cartButton").addClass('d-none')
        const container = $("#result_check_order")
        const formSearch = $("#form_search_order")

        formSearch.on("submit", function(e) {
            e.preventDefault()
            const formData = new FormData(this);
            const noOrder = formData.get("no_order");

            if (!noOrder) {
                alert("No Order tidak boleh kosong.");
                return;
            }

            container.html(`<div class="text-center py-3"><div class="spinner-border text-success" role="status"></div><p class="mt-2">Sedang memuat...</p></div>`);

            fetch(`/check-order/search?no_order=${encodeURIComponent(noOrder)}`)
                .then(res => {
                    if (!res.ok) throw new Error("Gagal mengambil data.");
                    return res.json();
                })
                .then(order => {
                    let html = '';
                    let itemHTML ='';
                    if(!order.status){
                         return container.html(`<h4 class="fw-bold text-black">Pesanan Tidal Ditemukan</h4>`);
                    }
                    const data = order.data;
                    (data.items || []).forEach(item => {

                        const harga = parseInt(item.harga_satuan);
                        const jumlah = parseInt(item.jumlah);
                        const total = harga * jumlah;
                        itemHTML += `
                            <div class="card mb-2 shadow-sm">
                                <div class="row g-0">
                                    <div class="${data?.cara_pembayaran === "MCU" ? 'd-none' : 'col-md-4 p-2'}">
                                        <img src="/gambar/${item.foto || 'default.jpg'}" class="img-fluid rounded-start" alt="${item.nama_item}" style="max-height: 150px; width:100%; object-fit: cover;">
                                    </div>
                                    <div class="${data?.cara_pembayaran === "MCU" ? 'col-md-12' : 'col-md-8'}">
                                        <div class="card-body py-2 px-3 mt-2">
                                            <h6 class="card-title mb-1">${item.nama_item}</h6>
                                            <p class="mb-1 small text-muted">Tgl Antar: <strong>${item.tgl_antar}</strong></p>
                                            ${item?.total_kalori ? `
                                            <p class="mb-1 small text-muted">Total Kalori: <strong>${item?.total_kalori || '-'} kal</strong></p>
                                            ` : ''}
                                            <p class="mb-1 small">Harga: <strong>${harga.toLocaleString('id-ID')}</strong></p>
                                            <p class="mb-1 small">Jumlah: <strong>${jumlah}</strong></p>
                                            <p class="mb-0 small">Total: <strong class="text-success">Rp ${total.toLocaleString('id-ID')}</strong></p>
                                             <p class="badge text-white
                                            ${item?.status_order === 'Pending'? 'bg-primary'
                                                    : data.status_order === 'Belum Bayar'  ? '' : 'bg-success'}">
                                            ${item?.status_order}
                                        </p>
                                        ${data?.cara_pembayaran === "MCU" ? '' : `
                                        <p class="mb-1 small">Catatan: <strong>${item?.catatan || '-'}</strong></p>`}
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    });

                    html += `
                           <div class="card mt-5 shadow-sm border-0 rounded-4">
                            <div class="card-body px-3 py-4">
                                <div class="text-center mb-4">
                                <h4 class="fw-bold text-success">Pesanan Anda Ditemukan</h4>
                                <p class="text-muted small">Berikut adalah detail pesanan dengan No Order: <strong>${data?.no_order}</p>
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <div class="bg-light p-3 rounded shadow-sm small">
                                        <div class="fw-semibold text-secondary mb-1">Nama Pemesan</div>
                                        <div class="text-dark">${data.nama_pemesan}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bg-light p-3 rounded shadow-sm small">
                                        <div class="fw-semibold text-secondary mb-1">Tanggal Pesan</div>
                                        <div class="text-dark">${new Date(data.tgl_pesanan).toLocaleDateString('id-ID')}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bg-light p-3 rounded shadow-sm small">
                                        <div class="fw-semibold text-secondary mb-1">Jenis Customer</div>
                                        <div class="text-dark">${data?.jenis_customer}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bg-light p-3 rounded shadow-sm small">
                                        <div class="fw-semibold text-secondary mb-1">Status</div>
                                        <span class="badge
                                            ${data?.status_order === "Menunggu Konfirmasi Pembayaran"
                                                    ? 'bg-primary'
                                                    : data?.status_order === "Belum Bayar"
                                                    ? "bg-warning"
                                                    : "bg-success"}">
                                                ${data?.status_order}
                                        </span>
                                        </div>
                                    </div>
                                 ${data?.jenis_customer === "Karyawan RSAB Harapan Kita" ?
                                    ` <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Bagian /Instalasi</div>
                                                <div class="text-dark">${data?.bagian_instalasi || '-'}</div>
                                            </div>
                                     </div>
                                    <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Ekstensien yang bisa di Hubungi</div>
                                                <div class="text-dark">${data?.no_ekstensien || '-'}</div>
                                            </div>
                                     </div>
                                     ` : data?.jenis_customer === "Keluarga Pasien / Penunggu Pasien" ?
                                     `
                                     <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Nama Pasien</div>
                                                <div class="text-dark">${data?.nama_pasien || '-'}</div>
                                            </div>
                                     </div>
                                     <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Ruang Perawatan</div>
                                                <div class="text-dark">${data?.ruang_perawatan || '-'}</div>
                                            </div>
                                      </div>
                                     <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Nomor Kamar Perawatan</div>
                                                <div class="text-dark">${data?.no_kamar_perawatan || '-'}</div>
                                            </div>
                                     </div>
                                     <div class="col-md-6">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Kelas Perawatan</div>
                                                <div class="text-dark">${data?.kelas_perawatan || '-'}</div>
                                            </div>
                                      </div>
                                     ` : data?.jenis_customer === "Masyarakat Umum" ? ` <div class="col-md-12">
                                            <div class="bg-light p-3 rounded shadow-sm small">
                                                <div class="fw-semibold text-secondary mb-1">Alamat</div>
                                                <div class="text-dark">${data?.alamat || '-'}</div>
                                            </div>
                                      </div>` : ''

                                }
                                </div>

                                <div class="bg-white rounded-4 border p-3 shadow-sm mb-4">
                                    <h6 class="fw-semibold mb-3">Item Pesanan</h6>
                                    ${itemHTML}

                                        <div class="text-end mt-3">
                                            <h6>Total Seluruh Pesanan: <strong class="text-success">Rp ${parseInt(data?.total_harga).toLocaleString('id-ID')}</strong></h6>
                                        </div>
                                </div>
                                ${data?.status_order === "Belum Bayar"
                                                ? `<div class="text-center mb-4">
                                                        <button class="btn btn-warning fw-bold text-dark">Belum Melakukan Pembayaran</button>
                                                    </div>` :
                                                    data?.bukti_bayar ? `
                                                    <div class="text-center mb-4">
                                                        <h6 class="fw-semibold mb-2">Bukti Pembayaran</h6>
                                                        <img src="/storage/${data?.bukti_bayar}" alt="Bukti Pembayaran" class="img-fluid rounded shadow-sm" style="max-width: 300px;">
                                                    </div>
                                                    ` :`
                                                    <div class="text-center mb-4">
                                                        <button class="btn btn-success fw-bold">Pembayaran VIA ${data?.cara_pembayaran === "MCU" ? 'MCU' : 'Billing'}</button>
                                                    </div>
                                                    `}
                                <div class="text-center">
                                <a href="/" class="btn btn-outline-success btn-sm px-4 rounded-pill">
                                    <i class="fa fa-arrow-left me-1"></i> Kembali ke Beranda
                                </a>
                                </div>
                            </div>
                           </div>
                    `
                    container.html(html);
                })
                .catch(err => {
                    console.error(err);
                    container.html(`<h4 class="fw-bold text-black mt-3">Pesanan Tidal Ditemukan</h4>`);
                });
        })
    })
</script>

@endsection