@extends('layouts.master')
@section('title', 'Catalog List')

@section('style')
    <style>
        .navbar-bg-top {
            /* background-color: #98D2C0 !important; */
            background-color: #E0E0E0 !important;
            /* เปลี่ยนเป็นสีที่ต้องการ */
            /* color: #000; */
        }

        .item-cart {
            color: black;
        }

        .item-cart.in-cart {
            color: red;
        }
    </style>
@endsection

@section('script')
    <script>
        let cart = [];
        let allProducts = @json($allProducts); // สินค้าทั้งหมด
        const baseImageUrl = "{{ asset('product_images') }}";

        // ==================== Cookie Functions ====================
        function loadCartFromCookie() {
            const value = document.cookie.match('(^|;)\\s*cart\\s*=\\s*([^;]+)');
            cart = value ? JSON.parse(decodeURIComponent(value[2])) : [];
            renderCart();
            updateCartBadge();
        }

        function saveCartToCookie() {
            document.cookie = "cart=" + encodeURIComponent(JSON.stringify(cart)) + "; path=/; max-age=" + (60 * 60 * 24 *
                7); // 7 วัน
        }

        // ==================== Cart Operations ====================
        function add_to_cart(element, event) {
            event.preventDefault();
            const product_id = parseInt(element.dataset.productId);
            const product_type = parseInt(element.dataset.productType);

            let existing = cart.find(item => item.product_id === product_id);
            if (existing) {
                existing.qty += 1;
            } else {
                cart.push({
                    product_id,
                    product_type,
                    qty: 1
                });
            }

            saveCartToCookie();
            renderCart();
            updateCartIcons();

            showToast('เพิ่มสินค้าลงตะกร้าเรียบร้อย!', 'success');
        }

        function removeFromCart(product_id) {
            cart = cart.filter(item => item.product_id !== product_id);
            saveCartToCookie();
            renderCart();
            updateCartIcons();
        }

        function updateQuantity(productId, qty) {
            let item = cart.find(i => i.product_id === productId);
            if (item) item.qty = qty;
            saveCartToCookie();
            renderCart();
            updateCartBadge();
        }

        // ==================== Render Cart ====================
        function renderCart() {
            const container = document.getElementById('cart-items');
            container.innerHTML = '';

            if (cart.length === 0) {
                container.innerHTML = '<p>ตะกร้าว่างเปล่า</p>';
                updateSubtotal([]);
                updateTotalWeight([]);
                return;
            }

            const cartProducts = cart.map(c => {
                let product = allProducts.find(p => p.product_id === c.product_id);
                if (!product) return null;
                return {
                    ...product,
                    qty: c.qty
                };
            }).filter(Boolean);

            cartProducts.forEach(item => {
                const totalPrice = (item.product_price * item.qty).toFixed(2);
                const itemHtml = `
                <div class="shopping-cart-item d-flex justify-content-between mb-4">
                    <div class="d-flex flex-row">
                        <figure class="rounded w-17">
                            <img src="${baseImageUrl}/${item.product_image}" />
                        </figure>
                        <div class="w-100 ms-4">
                            <h3 class="post-title fs-16 lh-xs mb-1">${item.product_name}</h3>
                            <p class="price fs-sm"><ins><span class="amount">${item.product_price} THB</span></ins></p>
                            <div class="d-flex align-items-center">
                                <div class="form-select-wrapper me-8">
                                    ${
                                        item.product_quantity > 0
                                        ? `<select name="qty" class="form-select form-select-sm qty-select" data-product-id="${item.product_id}">
                                                                                                        ${[...Array(parseInt(item.product_quantity)).keys()].map(i =>
                                                                                                        `<option value="${i + 1}" ${i + 1 === parseInt(item.qty) ? 'selected' : ''}>${i + 1}</option>`
                                                                                                    ).join('')}
                                                                                                </select>`
                                        : `<span class="text-danger">สินค้าหมด</span>`
                                    }
                                </div>
                                <button type="button" class="btn btn-circle btn-outline-danger d-flex align-items-center" onclick="removeFromCart(${item.product_id})" title="ลบสินค้า">
                                    <i class="uil uil-multiply"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                container.insertAdjacentHTML('beforeend', itemHtml);
            });

            // // Footer
            // const footerHtml = `
        // <div id="cart-items"></div>
        // <div id="cart-footer">
        //     <div class="offcanvas-footer flex-column text-center">
        //         <div class="d-flex w-100 justify-content-between mb-4">
        //             <span>Subtotal:</span>
        //             <span class="h6 mb-0">0.00 THB</span>
        //         </div>
        //         <button type="button" class="btn btn-primary" onclick="showConfirmModal()">Checkout</button>
        //     </div>
        // </div>
        // `;
            // container.insertAdjacentHTML('beforeend', footerHtml);

            updateSubtotal(cartProducts);
            updateTotalWeight(cartProducts);
            attachQtyChangeListeners();
            updateCartBadge();
        }

        // ==================== Event Listeners ====================
        function attachQtyChangeListeners() {
            document.querySelectorAll('.qty-select').forEach(select => {
                select.addEventListener('change', function() {
                    const productId = parseInt(this.dataset.productId);
                    const qty = parseInt(this.value);
                    updateQuantity(productId, qty);
                });
            });
        }

        function checkout() {
            if (cart.length === 0) {
                alert('ตะกร้าว่างเปล่า');
                return;
            }

            const hasOutOfStock = cart.some(item => {
                const product = allProducts.find(p => p.product_id === item.product_id);
                return product && product.product_quantity <= 0;
            });
            if (hasOutOfStock) {
                alert('มีสินค้าหมดในตะกร้า กรุณาลบออกก่อนทำรายการ');
                return;
            }

            document.getElementById('cart-data').value = JSON.stringify(cart);
            document.getElementById('checkout-form').submit();
        }

        // ==================== Badge & Subtotal ====================
        function updateCartBadge() {
            const badge = document.querySelector('.badge-cart');
            let totalItems = cart.reduce((sum, item) => sum + item.qty, 0);
            badge.textContent = totalItems;
        }

        function updateSubtotal(cartProducts) {
            let subtotal = 0;
            cartProducts.forEach(item => {
                subtotal += parseFloat(item.product_price) * item.qty;
            });
            const subtotalEl = document.getElementById('cart-subtotal');
            if (subtotalEl) subtotalEl.textContent = `${subtotal.toFixed(2)} THB`;
        }

        function updateTotalWeight(cartProducts) {
            let totalWeight = 0;
            cartProducts.forEach(item => {
                // ใช้น้ำหนักของสินค้าแต่ละชิ้น (product_weight) คูณกับจำนวน (qty)
                totalWeight += (parseFloat(item.product_weight) || 0) * item.qty;
            });
            const totalWeightEl = document.getElementById('cart-total-weight');
            if (totalWeightEl) totalWeightEl.textContent = `${totalWeight.toFixed(2)} grams`;
        }

        function updateCartIcons() {
            document.querySelectorAll('.item-cart').forEach(el => {
                const productId = parseInt(el.dataset.productId);
                const inCart = cart.some(item => item.product_id === productId);
                if (inCart) {
                    el.classList.add('in-cart');
                    el.innerHTML = '<i class="uil uil-trash-alt"></i> Delete';
                } else {
                    el.classList.remove('in-cart');
                    el.innerHTML = '<i class="uil uil-shopping-bag"></i> Add to Cart';
                }
            });
        }

        function clearCart() {
            if (!confirm('คุณแน่ใจว่าจะล้างตะกร้าหรือไม่?')) return;
            cart = [];
            document.cookie = "cart=; path=/; max-age=0";
            renderCart();
            updateCartBadge();
        }

        function showToast(message, type = 'primary') {
            const toastEl = document.getElementById('cart-toast');
            const toastBody = toastEl.querySelector('.toast-body');

            // เปลี่ยนข้อความและสี
            toastBody.textContent = message;
            toastEl.className = `toast align-items-center text-white bg-${type} border-0`;

            // สร้าง Bootstrap toast instance
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        }

        // ==================== Init ====================
        document.addEventListener('DOMContentLoaded', () => {
            loadCartFromCookie();
        });

        document.getElementById('offcanvas-cart').addEventListener('show.bs.offcanvas', () => {
            renderCart();
        });
    </script>

@endsection


@section('content')

    @include('layouts.header')

    <section>
        <div class="content-wrapper">

            <div class="offcanvas offcanvas-end bg-light" id="offcanvas-cart" data-bs-scroll="true">
                <div class="offcanvas-header">
                    <h3 class="mb-0">Your Cart</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>

                <div class="offcanvas-body d-flex flex-column">

                    <div class="shopping-cart" id="cart-items"></div>

                    <!-- Footer ตะกร้า แยกจาก JS -->
                    <div id="cart-footer" class="offcanvas-footer flex-column text-center mt-auto">
                        <div class="d-flex w-100 justify-content-between mb-4">
                            <span>Subtotal:</span>
                            <span id="cart-subtotal" class="h6 mb-0">0.00 THB</span>
                        </div>
                        <div class="d-flex w-100 justify-content-between mb-4">
                            <span>Total Weight:</span>
                            <span id="cart-total-weight" class="h6 mb-0">0.00 grams</span>
                        </div>
                        <button type="button" class="btn btn-danger flex-fill" onclick="clearCart()">ล้างตะกร้า</button>
                        <br>
                        <button type="button" class="btn btn-primary" onclick="showConfirmModal()">Checkout</button>
                    </div>

                    <form id="checkout-form" action="{{ url('/checkout') }}" method="POST" style="display: none;">
                        @csrf
                        <input type="hidden" name="cart_data" id="cart-data">
                    </form>

                </div>
            </div>

            <!-- Toast Container -->
            <div class="position-fixed top-0 end-0 p-3" style="z-index: 1100">
                <div id="cart-toast" class="toast align-items-center text-white bg-primary border-0" role="alert"
                    aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            เพิ่มสินค้าลงตะกร้าเรียบร้อย!
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                </div>
            </div>


            <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
                <div class="container d-flex flex-row py-6">
                    <form class="search-form w-100">
                        <input id="search-form" type="text" class="form-control"
                            placeholder="Type keyword and hit enter">
                    </form>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
            </div>



            <section class="wrapper bg-light">
                <div class="container pb-14 pb-md-16 pt-12">
                    <div class="row gy-10">
                        <div class="col-lg-9 order-lg-2">
                            <div class="row align-items-center mb-10 position-relative zindex-1">
                                <div class="col-md-7 col-xl-8 pe-xl-20">
                                    <h2 class="display-6 mb-1">New Arrivals</h2>
                                    {{-- <p class="mb-0 text-muted">
                                        Showing {{ $products->firstItem() }}–{{ $products->lastItem() }} of
                                        {{ $products->total() }} results
                                    </p> --}}
                                    <p class="mb-0 text-muted">
                                        Showing 1–{{ $products->count() }} of {{ $products->count() }} results
                                    </p>
                                </div>

                                <div class="col-md-5 col-xl-4 ms-md-auto text-md-end mt-5 mt-md-0">
                                    <form method="GET" action="{{ url('/cataloglist') }}">
                                        <div class="form-select-wrapper">
                                            <select class="form-select" name="sort" onchange="this.form.submit()">
                                                <option value="popularity"
                                                    {{ request('sort') == 'popularity' ? 'selected' : '' }}>Sort by
                                                    popularity
                                                </option>
                                                <option value="newness"
                                                    {{ request('sort') == 'newness' ? 'selected' : '' }}>
                                                    Sort by newness</option>
                                                <option value="price_low_high"
                                                    {{ request('sort') == 'price_low_high' ? 'selected' : '' }}>Sort by
                                                    price:
                                                    low to high</option>
                                                <option value="price_high_low"
                                                    {{ request('sort') == 'price_high_low' ? 'selected' : '' }}>Sort by
                                                    price:
                                                    high to low</option>
                                            </select>
                                        </div>
                                    </form>
                                </div>

                            </div>

                            <div class="grid grid-view projects-masonry shop mb-13">
                                <div class="row gx-md-8 gy-10 gy-md-13 isotope">


                                    @foreach ($products as $i => $item)
                                        {{-- @if ($item->product_quantity > 0) --}}
                                        <div class="project item col-md-6 col-xl-4">
                                            <figure class="rounded mb-6 position-relative"
                                                style="height:350px; overflow:hidden; width:100%;">
                                                <img src="{{ asset('product_images/' . $item->product_image) }}"
                                                    alt="{{ $item->product_name }}"
                                                    style="width:100%; height:100%; object-fit:cover" class="img-fluid" />

                                                {{-- <a class="item-like" href="#"
                                                    style="position: absolute; bottom: 1rem; right: 1rem; z-index: 10;"
                                                    title="Add to wishlist">
                                                    <i class="uil uil-heart"></i>
                                                </a> --}}

                                                <a class="item-view" href="#"
                                                    style="position: absolute; top: 1rem; right: 1rem; z-index: 20;"
                                                    data-bs-toggle="modal" data-bs-target="#productModal"
                                                    data-name="{{ $item->product_name }}"
                                                    data-image="{{ asset('product_images/' . $item->product_image) }}"
                                                    data-type="{{ $item->product_type_name }}"
                                                    data-price="{{ number_format($item->product_price, 2) }} THB"
                                                    data-weight="{{ $item->product_weight ?? 0}} grams"
                                                    data-description="{{ $item->product_description }}" title="Quick view">
                                                    <i class="uil uil-eye"></i>
                                                </a>

                                                <a href="#" class="item-cart" onclick="add_to_cart(this, event)"
                                                    data-product-id="{{ $item->product_id }}"
                                                    data-product-type="{{ $item->product_type }}">
                                                    <i class="uil uil-shopping-bag"></i> Add to Cart
                                                </a>

                                                @if ($item->product_type == '7')
                                                    <span
                                                        class="avatar bg-warning text-dark position-absolute text-uppercase d-flex flex-column align-items-center justify-content-center"
                                                        style="top: 1rem; left: 1rem; font-weight: bold; line-height: 1; width: 40px; height: 40px; font-size: 24px;">
                                                        <span
                                                            style="color: #FFD700; font-size: 16px; line-height: 1;">👑</span>
                                                        <span style="font-size: 12px; line-height: 1;">Premium</span>
                                                    </span>
                                                @else
                                                    <span
                                                        class="avatar bg-pink text-white w-10 h-10 position-absolute text-uppercase fs-13"
                                                        style="top: 1rem; left: 1rem;"><span>Sale!</span>
                                                    </span>
                                                @endif
                                            </figure>

                                            <div class="post-header">
                                                <div
                                                    class="d-flex flex-row align-items-center justify-content-between mb-2">
                                                    <div class="post-category text-ash mb-0">
                                                        {{ $item->product_type_name }}
                                                    </div>
                                                </div>
                                                <h2 class="post-title h3 fs-22">
                                                    <a href="./shop-product.html"
                                                        class="link-dark">{{ $item->product_name }}</a>
                                                </h2>
                                                <p class="price">
                                                    <del></del>
                                                    <ins><span class="amount">{{ number_format($item->product_price, 2) }}
                                                            THB</span></ins>
                                                </p>
                                            </div>
                                        </div>
                                        {{-- @else
                                            <span class="item-cart text-danger" style="cursor: not-allowed; opacity: 0.6;">
                                                <i class="uil uil-ban"></i> สินค้าหมด
                                            </span>
                                        @endif --}}
                                    @endforeach

                                </div>
                            </div>

                            <nav class="d-flex" aria-label="pagination">
                                {{ $products->withQueryString()->links('pagination::bootstrap-5') }}
                            </nav>


                        </div>
                        <aside class="col-lg-3 sidebar">
                            <div class="widget mt-1">
                                <h4 class="widget-title mb-3">Categories</h4>
                                <ul class="list-unstyled ps-0">
                                    <li class="mb-1">
                                        <a href="{{ url('/cataloglist') }}" class="link-body">
                                            All
                                            <span class="fs-sm text-muted ms-1">({{ $total_products }})</span>
                                        </a>
                                    </li>

                                    @foreach ($product_types as $pt)
                                        <li class="mb-1">
                                            <a href="{{ url('/cataloglist?product_type=' . $pt->product_type_id) }}"
                                                class="link-body">
                                                {{ $pt->product_type_name }}
                                                <span class="fs-sm text-muted ms-1">({{ $pt->product_count ?? 0 }})</span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const radios = document.querySelectorAll('input[name="price_range"]');
                                    const minInput = document.querySelector('input[name="price_min"]');
                                    const maxInput = document.querySelector('input[name="price_max"]');

                                    function clearRadios() {
                                        radios.forEach(r => r.checked = false);
                                    }

                                    minInput.addEventListener('input', clearRadios);
                                    maxInput.addEventListener('input', clearRadios);
                                });
                            </script>

                            <div class="widget">
                                <h4 class="widget-title mb-3">Price</h4>
                                <form method="GET" action="{{ url('/cataloglist') }}">
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="radio" name="price_range" id="price1"
                                            value="0-300" {{ request('price_range') == '0-300' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="price1"> 0.00 - 300.00 </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="radio" name="price_range" id="price2"
                                            value="301-600" {{ request('price_range') == '301-600' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="price2"> 300.00 - 600.00 </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="radio" name="price_range" id="price3"
                                            value="601-900" {{ request('price_range') == '601-900' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="price3"> 600.00 - 900.00 </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="radio" name="price_range" id="price4"
                                            value="901-1500" {{ request('price_range') == '901-1500' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="price4"> 900.00 - 1500.00 </label>
                                    </div>

                                    <div class="row">
                                        <div class="col-7 col-md-5 col-lg-12 col-xl-10 col-xxl-10">
                                            <div class="d-flex align-items-center mt-4">
                                                <input type="number" class="form-control form-control-sm"
                                                    name="price_min" placeholder="0.00" min="0" step="0.01"
                                                    value="{{ request('price_min') }}">
                                                <div class="text-muted mx-2">‒</div>
                                                <input type="number" class="form-control form-control-sm"
                                                    name="price_max" placeholder="1500.00" min="0" step="0.01"
                                                    value="{{ request('price_max') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-primary mt-3">Filter</button>
                                </form>
                            </div>

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

            <nav class="navbar fixed-bottom navbar-expand-lg center-nav navbar-dark navbar-bg-top">
                <div class="container flex-lg-row flex-nowrap align-items-center">
                    <div class="navbar-other w-100 d-flex ms-auto">
                        <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvas-search"><i class="uil uil-search"
                                        style="color: #000000"></i></a></li>
                            <li class="nav-item">
                                <a class="nav-link position-relative d-flex flex-row align-items-center"
                                    data-bs-toggle="offcanvas" data-bs-target="#offcanvas-cart">
                                    <i class="uil uil-shopping-cart" style="color: #000000"></i>
                                    <span class="badge-cart badge bg-primary rounded-pill">0</span>
                                </a>
                            </li>
                            <li class="nav-item d-lg-none">
                                <button class="hamburger offcanvas-nav-btn"><span></span></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>



            {{-- <section class="wrapper" style="background-color: #4F959D;"> --}}
            <section class="wrapper" style="background-color: #e0e0e0;">
                <div class="container py-12 py-md-14">
                    <div class="row gx-lg-8 gx-xl-12 gy-8">
                        <div class="col-md-6 col-lg-4">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/shipment.svg"
                                        class="svg-inject icon-svg icon-svg-sm solid-mono text-navy me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Free Shipping</h4>
                                    <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget
                                        lacinia odio sem.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/push-cart.svg"
                                        class="svg-inject icon-svg icon-svg-sm solid-mono text-navy me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">30 Days Return</h4>
                                    <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget
                                        lacinia odio sem.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/verify.svg"
                                        class="svg-inject icon-svg icon-svg-sm solid-mono text-navy me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">2-Years Warranty</h4>
                                    <p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget
                                        lacinia odio sem.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>



            <!-- Modal -->
            <div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="productModalLabel">Product Name</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <img id="modalProductImage" src="" alt="Product Image"
                                        class="img-fluid rounded" />
                                </div>
                                <div class="col-md-6">
                                    <p id="modalProductType" class="text-muted"></p>
                                    <p id="modalProductPrice" class="fs-48 fw-bold"></p>
                                    <p id="modalProductDescription"></p>
                                    <p id="modalProductWeight"></p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <!-- ปุ่มเพิ่มใส่ตะกร้า หรืออื่น ๆ -->
                            <button type="button" class="btn btn-primary">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" style="max-width: 700px;">
                    <form id="checkoutForm" method="POST" action="{{ route('checkout') }}">
                        @csrf
                        <input type="hidden" name="cart_data" id="cart_data">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h2 class="modal-title mb-0">Notification</h2>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <hr class="my-2 mx-4" style="border-top: 1px solid #ddd;">

                            @php
                                $hasPremium = false;
                                if (!empty($products)) {
                                    foreach ($products as $product) {
                                        if ($product->product_type == 7) {
                                            $hasPremium = true;
                                            break;
                                        }
                                    }
                                }
                            @endphp

                            @if ($hasPremium)
                                <div class="modal-body text-center px-4">
                                    Please contact the Admin to proceed with the premium gift redemption.
                                </div>
                            @else
                                <div class="modal-body text-center px-4">
                                    You have selected a souvenir. Please confirm your redemption.
                                </div>
                            @endif

                            <hr class="my-2 mx-4" style="border-top: 1px solid #ddd;">

                            <div class="modal-footer justify-content-center">
                                <button type="submit" class="btn btn-green rounded-pill me-2">Confirm</button>
                                <button type="button" class="btn btn-red rounded-pill"
                                    data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>



            <script>
                function showConfirmModal() {
                    // ใช้ cart ที่ sync จาก server
                    const hasOutOfStock = cart.some(item => {
                        const product = allProducts.find(p => p.product_id === item.product_id);
                        return product && product.product_quantity <= 0;
                    });

                    if (cart.length === 0) {
                        alert('ตะกร้าว่างเปล่า');
                        return;
                    }

                    if (hasOutOfStock) {
                        alert('มีสินค้าหมดในตะกร้า กรุณาลบออกก่อนทำรายการ');
                        return;
                    }

                    document.getElementById('cart_data').value = JSON.stringify(cart);

                    const hasPremium = cart.some(item => parseInt(item.product_type) === 7);

                    if (hasPremium) {
                        document.querySelector('#confirmModal .modal-body').innerHTML = `
                            Please contact the Admin to proceed with the premium gift redemption.
                        `;
                        // } else {
                        //     document.querySelector('#confirmModal .modal-body').innerHTML = `
            //         You have selected a souvenir. Please confirm your redemption.
            //     `;

                        const offcanvasEl = document.getElementById('offcanvas-cart');
                        if (offcanvasEl) {
                            const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
                            if (offcanvas) offcanvas.hide();
                        }

                        // ลบ backdrop เก่าก่อน
                        document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
                        
                        new bootstrap.Modal(document.getElementById('confirmModal')).show();
                    } else {
                        // case ธรรมดา → submit form ไป checkout เลย
                        document.getElementById('checkoutForm').submit();
                    }

                    // เปิด modal
                    // new bootstrap.Modal(document.getElementById('confirmModal')).show();
                }
            </script>



            <script>
                var productModal = document.getElementById('productModal');
                productModal.addEventListener('show.bs.modal', function(event) {
                    // ปิด offcanvas cart ถ้าเปิดอยู่
                    var offcanvasEl = document.getElementById('offcanvas-cart');
                    var offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasEl);
                    if (offcanvasInstance) offcanvasInstance.hide();

                    var button = event.relatedTarget;

                    var name = button.getAttribute('data-name');
                    var image = button.getAttribute('data-image');
                    var type = button.getAttribute('data-type');
                    var price = button.getAttribute('data-price');
                    var weight = button.getAttribute('data-weight');
                    var description = button.getAttribute('data-description');

                    // ใส่ข้อมูลลง modal
                    productModal.querySelector('.modal-title').textContent = name;
                    productModal.querySelector('#modalProductImage').src = image;
                    productModal.querySelector('#modalProductType').textContent = type;
                    productModal.querySelector('#modalProductPrice').textContent = price;
                    productModal.querySelector('#modalProductWeight').textContent = weight;
                    productModal.querySelector('#modalProductDescription').textContent = description;
                });
            </script>

        </div>

    </section>



    @include('layouts.footer')
@endsection