@extends('layout')
@section('content')
<div class="page-container purchase-order-page">
	<div class="container py-5">
		<div class="position-relative mb-4">
			<h2 class="text-center text-black">คำสั่งซื้อ</h2>
		</div>
		<div class="row g-4">
			<div class="col-md-7">
				<div class="card custom-card">
					<div class="mb-4">
						<h3>
							รายการการซื้อ
						</h3>
						@foreach ($selectedItems as $item)
						<div class="row align-items-center mt-3">
							<div class="col-md-4">
								<img src="{{ asset($item->image) }}" alt="course" class="w-100">
							</div>
							<div class="col">
								{{ $item->name }}
							</div>
							<div class="col-auto">
								{{ number_format($item->price, 2) }} บาท
							</div>
						</div>
						@endforeach
					</div>
					<div class="mb-4">
						<h3>
							วิธีการชำระเงิน
						</h3>
						<div class="p-3 text-black border border-1 border-gray rounded-2 mb-4">
							<div>
								ชำระเงินด้วยการแสกนคิวอาร์โค้ด
							</div>
							<p class="fs-6">
								*กรณีที่ต้องการชำระผ่านการสแกน QRCode ให้คุณเข้า Mobile Banking ของคุณเพื่อทำการสแกน
							</p>
							<div class="w-25">
								<img src="{{asset('images/qr-code.png')}}" alt="qr-code" class="w-100">
							</div>
						</div>
						<div class="p-3 text-black border border-1 border-gray rounded-2 mb-4">
							<div>
								ชำระเงินด้วยการแสกนคิวอาร์โค้ด
							</div>
							<p class="fs-6">
								*กรณีที่ต้องการชำระผ่านการสแกน QRCode ให้คุณเข้า Mobile Banking ของคุณเพื่อทำการสแกน
							</p>
							<div class="d-flex gap-3 fs-6 align-items-center">
								<div class="w-25">
									<img src="{{asset('images/bank.png')}}" alt="qr-code" class="w-100">
								</div>
								<div>
									<div>ชื่อ บัญชี โรงพยาบาลรามา</div>
									<div>เลขบัญชี 1234567890</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-5">
				<form class="h-100">
					<div class="card custom-card h-100">
						<div class="mb-4 text-black">
							<h3 class="text-blue">
								สรุปยอดการสั่งซื้อ
							</h3>
							{{-- <div class="d-flex justify-content-between fs-6 mb-2">
								<div>รวมค่าสินค้า</div>
								<div>{{ number_format(array_sum(array_column($selectedItems, 'price')), 2) }} บาท</div>
							</div> --}}
                            <div class="d-flex justify-content-between fs-6 mb-2">
                                <div>รวมค่าสินค้า</div>
                                <div id="original-total" data-original-total="{{ array_sum(array_column($selectedItems, 'price')) }}">
                                    {{ number_format(array_sum(array_column($selectedItems, 'price')), 2) }} บาท
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between fs-6 mb-2">
                                <div>ส่วนลด</div>
                                <div id="discount-amount">0.00 บาท</div>
                            </div>
                            
                            <div class="d-flex justify-content-between mb-4">
                                <div>รวมทั้งสิ้น</div>
                                <div id="final-total">
                                    {{ number_format(array_sum(array_column($selectedItems, 'price')), 2) }} บาท
                                </div>
                            </div>
                            
                            <div class="row form-group g-2">
                                <div class="col-md-9">
                                    <input type="text" id="discount-code" class="form-control mb-3" placeholder="กรอกโค้ดส่วนลด">
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn green-btn w-100 mb-4" id="apply-discount">ใช้โค้ด</button>
                                </div>
                            </div>
                            <p id="discount-error" class="text-danger d-none">โค้ดส่วนลดไม่ถูกต้อง</p>
							{{-- <div class="row form-group g-2">
								<div class="col-md-9">
									<input type="text" class="form-control mb-3" placeholder="กรอกโค้ดส่วนลด">
								</div>
								<div class="col-md-3">
									<button class="btn green-btn w-100 mb-4">ใช้โค้ด</button>
								</div>
							</div> --}}
							<p class="fs-6">
								เมื่อชำระเงิน ถือว่าท่านได้ยอมรับ <a href="#" class="text-blue">ข้อตกลงและเงื่อนไขการใช้บริการ</a>,
								<a href="#" class="text-blue">ประกาศความเป็นส่วนตัวสำหรับลูกค้าและผู้รับบริการ</a> และ
								<a href="#" class="text-blue">นโยบายการคืนเงิน</a> เรียบร้อยแล้ว
							</p>
							<div class="mb-3">
								<label class="fs-6">วันเวลาที่ทำรายการ</label>
								<div class="d-flex gap-2 form-group">
									<input type="date" class="form-control" placeholder="ว/ด/ป">
									<input type="time" class="form-control" placeholder="--:--">
								</div>
							</div>
							<div class="mb-3">
								<label class="fs-6">แนบหลักฐานการชำระเงิน:</label>
								<textarea class="form-control" placeholder="เลือกไฟล์"></textarea>
							</div>
							<div class="d-flex justify-content-center mt-4">
								<button class="btn green-btn w-50" onclick="openPaymentModal(event)">แจ้งผลการชำระเงิน</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body text-center border-0 pt-5">
			<i class="bi bi-check-circle-fill text-green fs-1 text-blue"></i>
			<div class="fs-4 text-blue"> 
				แจ้งผลการชำระเงินเรียบร้อยแล้ว
			</div>
			<div>แจ้งผลการชำระเงินเรียบร้อยแล้ว</div>
        <p>จะมีแจ้งเตือนไปที่อีเมลของคุณเมื่อเอกสารอนุมัติสำเร็จ</p>
      </div>
      <div class="modal-footer justify-content-center border-0">
        <button type="button" class="btn green-btn w-50" data-bs-dismiss="modal">ตกลง</button>
      </div>
    </div>
  </div>
</div>
<script>
function openPaymentModal(e) {
    e.preventDefault(); // Prevent the default form submission
    var modal = new bootstrap.Modal(document.getElementById('paymentModal'));
    modal.show();
}

function closePaymentModal() {
    var modal = new bootstrap.Modal(document.getElementById('paymentModal'));
    modal.hide();
}
document.getElementById('apply-discount').addEventListener('click', function () {
    const discountCode = document.getElementById('discount-code').value.trim().toUpperCase();
    const originalTotalElement = document.getElementById('original-total');
    const discountAmountElement = document.getElementById('discount-amount');
    const finalTotalElement = document.getElementById('final-total');
    const discountError = document.getElementById('discount-error');

    // Mock valid discount codes for testing
    const validDiscountCodes = {
        'DISCOUNT10': 0.10, // 10% discount
        'DISCOUNT20': 0.20, // 20% discount
    };

    if (validDiscountCodes[discountCode]) {
        // Calculate the discount and final total
        const originalTotal = parseFloat(originalTotalElement.getAttribute('data-original-total'));
        const discountRate = validDiscountCodes[discountCode];
        const discountAmount = originalTotal * discountRate;
        const finalTotal = originalTotal - discountAmount;

        // Update the displayed discount and final total
        discountAmountElement.textContent = `-${discountAmount.toFixed(2)} บาท`;
        finalTotalElement.textContent = `${finalTotal.toFixed(2)} บาท`;
        discountError.classList.add('d-none'); // Hide error message
    } else {
        // Show error if the code is invalid
        discountError.classList.remove('d-none');
        discountAmountElement.textContent = '0.00 บาท';
        finalTotalElement.textContent = originalTotalElement.textContent;
    }
});

// Calculate initial totals on page load
window.onload = function () {
    const originalTotalElement = document.getElementById('original-total');
    const finalTotalElement = document.getElementById('final-total');
    const originalTotal = parseFloat(originalTotalElement.getAttribute('data-original-total'));
    originalTotalElement.textContent = `${originalTotal.toFixed(2)} บาท`;
    finalTotalElement.textContent = `${originalTotal.toFixed(2)} บาท`;
};


</script>

@endsection