2025-07-23 15:32:00 +07:00

224 lines
12 KiB
PHP

@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="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="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>
<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>
</div>
</div>
</div>
</div>`;
});
html += `
<div class="card mt-5 shadow-sm border-0 rounded-4">
<div class="card-body p-2">
<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?.bukti_bayar
? 'bg-warning text-dark'
: data?.status_order !== 'Selesai'
? 'bg-primary'
: 'bg-success'}">
${!data?.bukti_bayar
? 'Belum Bayar'
: 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>
` : ``
}
</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?.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-warning fw-bold text-dark">Belum Melakukan Pembayaran</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