@extends('layoutstudent.layouts')
@section('title', 'ข้อมูลส่วนตัว')
@section('content')
<link href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    .profile-card {
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        max-width: 1200px;
        margin: 0 auto;
        /* margin-top: 40px; */
        height: 800px;
    }
    .profile-header {
        text-align: center;
        margin-bottom: 30px;
    }
    .profile-header img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #e6f3fc;
        display: block;
        margin: 0 auto;
    }
    .profile-header .edit-icon {
        position: relative;
        top: -30px;
        left: 35px;
        font-size: 18px;
        color: #26aaf7;
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        font-weight: 600;
        color: #0D1B4C;
    }
    .form-control {
        border-radius: 10px;
        border: 1px solid #e3e6ed;
        padding: 14px;
        font-size: 16px;
    }
    .change-password-link {
        text-align: right;
        display: block;
        margin-top: 10px;
        color: #26aaf7;
    }
  .modal-xl {
    max-width: 950px; /* You can adjust this */
  }

  .modal-body .form-control {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
  }

  .modal-body ul i {
    font-size: 20px;
    position: relative;
    top: 2px;
  }
</style>

<div class="container my-5">
    <h3 class="text-center mb-4 fw-bold" style="color: #016FAB">คำสั่งซื้อ</h3>
    <div class="row justify-content-center">
        <!-- Left: Order Info -->
        <div class="col-md-7">
            <div class="card shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">รายการการสั่งซื้อ</h5>
                <div class="d-flex align-items-center mb-3">
                    <img id="courseImage" src="" class="img-thumbnail me-3" style="width: 300px; height: auto;">
                        <div>
                            <p id="courseName" class="mb-1 fw-semibold"></p>
                            <p id="coursePrice" class="mb-0"></p>
                        </div>
                </div>

                <h5 class="fw-bold mt-4 mb-3">วิธีการชำระเงิน</h5>

                <!-- Credit Card -->
                <div class="border p-3 rounded mb-3">
                    <p class="fw-semibold mb-2">ชำระเงินผ่านบัตรเครดิต</p>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png" style="height:30px;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png" style="height:30px;">
                </div>

                <!-- QR Code -->
                <div class="border p-3 rounded mb-3">
                    <p class="fw-semibold mb-2">ชำระเงินด้วยการสแกน QR Code</p>
                    <img src="{{ asset('images/qr-code.jfif') }}" style="width: 120px;">
                    <p class="small text-muted mt-1">*รองรับการสแกนด้วยแอปธนาคาร</p>
                </div>

                <!-- Bank Transfer -->
                <div class="border p-3 rounded">
                    <p class="fw-semibold mb-2">ชำระเงินโดยการโอนผ่านธนาคารกสิกร</p>
                    <img src="{{ asset('images/k-bank.jfif') }}" style="width: 60px;" class="mb-2">
                    <p class="mb-0">ชื่อบัญชี: บริษัทฯ</p>
                    <p class="mb-0">เลขที่บัญชี: 123456789</p>
                </div>
            </div>
        </div>

        <!-- Right: Summary -->
            <div class="col-md-4">
                <div class="card shadow-sm p-4">
                    <h5 class="fw-bold mb-3">สรุปยอดการสั่งซื้อ</h5>

                    <div class="d-flex justify-content-between mb-2">
                        <span>ราคารวมสินค้า</span>
                        <span id="priceTotal">200.00 บาท</span>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span>ส่วนลด</span>
                        <span id="discount">0.00 บาท</span>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-between mb-3 fw-bold fs-5">
                        <span>รวมค่าสินค้าทั้งหมด</span>
                        <span id="finalTotal">200.00 บาท</span>
                    </div>

                  <button id="toggleCouponBtn" class="btn btn-outline-primary w-100 mb-3">ใช้โค้ด</button>

                    <!-- ช่องกรอกรหัสคูปอง -->
                    <div id="couponField" class="mb-3" style="display: none;">
                        <input type="text" id="couponCode" class="form-control" placeholder="กรอกรหัสส่วนลดของคุณ">
                    </div>

                    <p class="small text-muted">
                        เมื่อชำระเงิน ถือว่าท่านได้ยอมรับ 
                        <a href="#" class="text-decoration-underline">ข้อตกลงและเงื่อนไข</a> การใช้บริการ
                    </p>

                    <button class="btn btn-primary w-100">แจ้งการชำระเงิน</button>
                </div>
            </div>

</div>

    <!-- Footer -->
    <footer class="py-4" style="background-color:rgb(255, 255, 255);">
        <div class="container-fluid mt-5 px-3 px-sm-5 my-5">
            <div class="mx-auto w-100 conteainer-w">
                <div class="row text-center text-md-start gy-4">
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                        <h6 class="kanit-500 fs-34  mb-4" style="color: #016FAB">เกี่ยวกับเรา</h6>
                        <ul class="list-unstyled d-flex flex-column gap-2 gap-md-3">
                            <li><a href="#" class="custom-link-style fs-20 text-dark">สอนกับเรา</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Privacy Policy</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Terms and Conditions</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Data Protection Policy</a>
                            </li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Cookie Policy</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                        <h6 class="kanit-500 fs-34 mb-3" style="color: #016FAB">ช่องทางการติดต่อ</h6>
                        <div class="mb-4">
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-facebook"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-messenger"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-twitter"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-youtube"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-envelope-fill"></i></a>
                        </div>
                        <div class="d-flex flex-column gap-2 gap-md-3">
                            <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">ที่อยู่
                                บ้านเลขที่ 111/150 ต.บางพูด</p>
                            <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">อ.ปากเกร็ด
                                จ.นนทบุรี</p>
                        </div>
                    </div>
                    <div
                        class="col-12 col-sm-12 col-md-12 col-lg-4 d-flex flex-column align-items-center justify-content-center text-center">
                        <img src="{{ asset('images/acdemouslogo.png') }}" class="img-fluid mb-3"
                            style="height: auto; max-height: 250px;">

                        <strong class="kanit-500 fs-34 text-dark">Academous</strong>
                    </div>
                </div>
            </div>
        </div>
    </footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('toggleCouponBtn').addEventListener('click', function () {
    const couponField = document.getElementById('couponField');
    if (couponField.style.display === 'none') {
        couponField.style.display = 'block';
    } else {
        couponField.style.display = 'none';
    }
});
    const courseId = new URLSearchParams(window.location.search).get('id');
const token = localStorage.getItem('token');

if (courseId && token) {
    fetch(`{{ config('app.url') }}/api/course/payment/${courseId}`, {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    .then(res => res.json())
    .then(response => {
        if (response.status === 'success') {
            const course = response.course;
            const price = parseFloat(course.price).toFixed(2);

            // ✅ อัปเดตข้อมูลแสดงผล
            document.getElementById('courseImage').src = course.image;
            document.getElementById('courseName').textContent = course.name;
            document.getElementById('coursePrice').textContent = `${price} บาท`;

            // ✅ อัปเดตราคาใน summary
            document.getElementById('priceTotal').textContent = `${price} บาท`;
            document.getElementById('discount').textContent = `0.00 บาท`; // หรือคำนวณภายหลัง
            document.getElementById('finalTotal').textContent = `${price} บาท`;
        } else {
            console.error('Course not found');
        }
    })
    .catch(err => {
        console.error('Fetch failed:', err);
    });
}


</script>
@endsection