@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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<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;
  }

  body {
      font-family: 'Prompt', sans-serif;
      background-color: #f8f9fa;
    }

    .order-card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
      overflow: hidden;
      border: 1px solid #ddd;
    }

    .status-bar {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 20px;
      font-weight: bold;
      font-size: 14px;
    }

    .status-paid {
      background-color: #C3F7CE;
      color: #1a7f37;
    }

    .status-failed {
      background-color: #FAD5D5;
      color: #b00020;
    }

    .order-body {
      padding: 20px;
      display: flex;
      align-items: flex-start;
    }

    .order-image {
      width: 160px;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
      background-color: #eee;
    }

    .order-details {
      padding-left: 20px;
      flex: 1;
    }

    .order-details h6 {
      font-weight: bold;
      font-size: 16px;
    }

    .order-amount {
      font-weight: bold;
      font-size: 18px;
      text-align: right;
      margin-top: 10px;
    }

    .total-label {
      margin-top: 10px;
    }
</style>

<div class="container my-5">
  <h5 class="text-center mb-4"><strong>ประวัติการสั่งซื้อ</strong></h5>
  <p>ทั้งหมด 2 รายการ</p>

  <!-- ✅ Order: ชำระแล้ว -->
  <div class="order-card">
    <div class="status-bar status-paid">ชำระแล้ว</div>
    <div class="order-body">
      <img src="https://academous.com/web_portal/public/storage/courses/3q5cfIq0UTNZ7vIXq8Au7HuBW9SazCuNQVMy03gb.png" class="order-image" alt="Healty Diet Food">
      <div class="order-details">
        <h6>Cyber Security</h6>
        <p class="mb-1">เลขที่คำสั่งซื้อ : #01</p>
        <p class="mb-1">วันที่สั่งซื้อ : 18/06/2568 12:00</p>
        <p class="mb-1">วิธีการชำระเงิน : ชำระผ่านบัตรเครดิต</p>
        <div class="order-amount total-label">ยอดชำระ: 500.00 บาท</div>
      </div>
    </div>
  </div>

  <!-- ❌ Order: ชำระไม่สำเร็จ -->
  <div class="order-card">
    <div class="status-bar status-failed">ชำระไม่สำเร็จ</div>
    <div class="order-body">
      <img src="https://academous.com/web_portal/public/storage/courses/NvKYNRlWnjKedfAaTGMq8ltw4oGrQUu8398pZWUX.png" class="order-image" alt="Healty Diet Food">
      <div class="order-details">
        <h6>วิธีการใช้งานระบบ LMS</h6>
        <p class="mb-1">เลขที่คำสั่งซื้อ : #01</p>
        <p class="mb-1">วันที่สั่งซื้อ : 18/06/2568 12:00</p>
        <p class="mb-1">วิธีการชำระเงิน : ชำระผ่านบัตรเครดิต</p>
        <div class="order-amount total-label">ยอดชำระ: 500.00 บาท</div>
      </div>
    </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