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

        /* ปรับสีปุ่มใน Table View */
        #product-table-view .item-cart {
            color: #7C3AED;
            /* สีม่วง */
        }

        #product-table-view .item-cart.in-cart {
            color: red;
            /* สีแดงสำหรับ Delete */
        }

        /* --- List View Styles --- */
        .shop .row.list-view-active {
            display: block !important;
            /* ยกเลิก Grid layout */
            height: auto !important;
            /* ยกเลิกความสูงจาก Isotope */
        }

        .shop .row.list-view-active .project.item {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            display: flex !important;
            flex-direction: row;
            align-items: center;
            padding: 1.5rem;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem !important;
            position: relative !important;
            /* ยกเลิก absolute ของ Isotope */
            left: auto !important;
            top: auto !important;
            transform: none !important;
            /* ยกเลิก transform ของ Isotope */
            transition: none !important;
            /* ยกเลิก animation ของ Isotope ในโหมด List เพื่อไม่ให้กระตุก */
        }

        .shop .row.list-view-active .project.item figure {
            width: 280px !important;
            /* ขนาดรูปในแนวนอน */
            height: 200px !important;
            flex-shrink: 0;
            margin-bottom: 0 !important;
            margin-right: 2rem;
        }

        .shop .row.list-view-active .project.item .post-header {
            flex: 1;
            text-align: left;
        }

        /* ซ่อนรายละเอียดในโหมด Grid (ปกติ) */
        .project.item .post-content {
            display: none;
        }

        /* แสดงรายละเอียดเมื่อเป็นโหมด List View */
        .shop .row.list-view-active .project.item .post-content {
            display: block;
            margin-top: 1rem;
            color: #60697b;
        }

        @media (max-width: 768px) {
            .shop .row.list-view-active .project.item {
                flex-direction: column;
            }

            .shop .row.list-view-active .project.item figure {
                width: 100% !important;
                height: 250px !important;
                margin-right: 0;
                margin-bottom: 1rem !important;
            }
        }

        /* ทำให้กล่องสินค้าใน Grid View มีขนาดเท่ากัน */
        #product-grid-view .post-title {
            min-height: 3rem;
            /* จองพื้นที่สำหรับชื่อสินค้า 2 บรรทัด */
            max-height: 3rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0.5rem !important;
            line-height: 1.5rem;
        }

        #product-grid-view .post-category {
            height: 1.2rem;
            overflow: hidden;
        }
    </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);

            const isProductInCart = cart.some(item => item.product_id === product_id);

            if (isProductInCart) {
                removeFromCart(product_id);
            } 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 = '';
            const nextBtn = document.querySelector('#cart-footer .btn-primary');
            const warningEl = document.getElementById('cart-warning');

            if (cart.length === 0) {
                container.innerHTML = '<p>ตะกร้าว่างเปล่า</p>';
                updateSubtotal([]);
                updateTotalWeight([]);
                if (nextBtn) nextBtn.disabled = true;
                if (warningEl) warningEl.innerHTML =
                    '<span class="text-muted small">กรุณาเพิ่มสินค้าลงตะกร้าเพื่อดำเนินการต่อ</span>';
                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);

            let hasOutOfStock = false;

            cartProducts.forEach(item => {
                const totalPrice = (item.product_current_unit_price * item.qty).toFixed(2);
                if (item.product_current_stock <= 0) {
                    hasOutOfStock = true;
                }

                const premiumBadge = (item.product_type == 7) ? ' <span title="Premium Product">✨</span>' : '';

                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}${premiumBadge}</h3>
                            <p class="price fs-sm"><ins><span class="amount">${item.product_current_unit_price} THB</span></ins></p>
                            <div class="d-flex align-items-center">
                                <div class="form-select-wrapper me-8">
                                    ${
                                        item.product_current_stock > 0
                                        ? `<select name="qty" class="form-select form-select-sm qty-select" data-product-id="${item.product_id}">
                                                                                                                                                                                                        ${[...Array(parseInt(item.product_current_stock)).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 d-flex align-items-center justify-content-center rounded-circle text-white"
style="
    width:45px;
    height:45px;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    border:none;
    box-shadow: 0 4px 12px rgba(255,77,79,0.4);
    transition: all 0.3s ease;
"
onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'" onclick="removeFromCart(${item.product_id})" title="ลบสินค้า">
                                    <i class="uil uil-multiply"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                container.insertAdjacentHTML('beforeend', itemHtml);
            });

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

            if (nextBtn) {
                nextBtn.disabled = hasOutOfStock;
                if (warningEl) {
                    warningEl.innerHTML = hasOutOfStock ?
                        '<span class="text-danger fw-bold small">มีสินค้าหมดในตะกร้า กรุณาลบออกก่อนทำรายการ</span>' :
                        '';
                }
            }
        }

        // ==================== 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_current_stock <= 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_current_unit_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();
        }

        // ==================== Custom Search Logic ====================
        function initCustomSearch() {
            const searchInput = document.getElementById('customSearch');
            if (!searchInput) return;

            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();

                // กรองข้อมูลใน Grid View
                document.querySelectorAll('#product-grid-view .project.item').forEach(item => {
                    const name = item.querySelector('.post-title').textContent.toLowerCase();
                    item.style.display = name.includes(searchTerm) ? '' : 'none';
                });

                // กรองข้อมูลใน Table View
                document.querySelectorAll('.product-table tbody tr').forEach(row => {
                    const name = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
                    row.style.display = name.includes(searchTerm) ? '' : 'none';
                });
            });
        }

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

            // Fix for DataTables: Update icons on table draw
            if (typeof jQuery !== 'undefined') {
                $(document).on('draw.dt', '.product-table', function() {
                    updateCartIcons();
                });
            }
        });

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

        // View Switcher Script
        document.addEventListener('DOMContentLoaded', function() {
            const toggle = document.getElementById('viewToggle');
            const gridView = document.getElementById('product-grid-view');
            const tableView = document.getElementById('product-table-view');
            const viewInput = document.getElementById('viewInput');
            const mainContainer = document.getElementById('catalog-main-container');

            if (toggle) {
                toggle.addEventListener('change', function() {
                    if (this.checked) {
                        // Switch to List View (Table)
                        if (gridView) gridView.style.display = 'none';
                        if (tableView) tableView.style.display = 'block';
                        if (viewInput) viewInput.value = 'list';
                        if (mainContainer) {
                            mainContainer.classList.remove('container');
                            mainContainer.classList.add('container-fluid');
                        }
                    } else {
                        // Switch to Grid View
                        if (gridView) gridView.style.display = 'block';
                        if (tableView) tableView.style.display = 'none';
                        setTimeout(() => window.dispatchEvent(new Event('resize')), 50);
                        if (viewInput) viewInput.value = 'grid';
                        if (mainContainer) {
                            mainContainer.classList.remove('container-fluid');
                            mainContainer.classList.add('container');
                        }
                    }
                });
            }
        });
    </script>

@endsection


@section('content')

    @include('layouts.sidebar')
    {{-- @include('layouts.header-sub') --}}
    {{-- @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>
                        <div id="cart-warning" class="mb-3"></div>
                        <button type="button" class="btn btn-danger flex-fill" onclick="clearCart()">Clear All</button>
                        <br>
                        <button type="button" class="btn btn-primary" onclick="showConfirmModal()">Next</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-fluid pb-14 pb-md-16 pt-12">
                    <div class="row gy-10">
                        <div class="col-lg-9 order-lg-2">

                            <style>
                                .custom-container {
                                    max-width: 1600px;
                                }

                                /* Container หลัก */
                                .view-switcher-container {
                                    display: inline-block;
                                    vertical-align: middle;
                                }

                                /* ซ่อน Checkbox ตัวจริง */
                                .view-checkbox {
                                    display: none;
                                }

                                .view-slider {
                                    position: relative;
                                    width: 80px;
                                    height: 47px;
                                    background-color: #EDE9FE;
                                    /* สีที่คุณเลือก */
                                    border-radius: 50px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding: 0 10px;
                                    cursor: pointer;
                                    border: 1px solid #969696;
                                    /* ปรับขอบให้เข้มกว่าพื้นหลังนิดหน่อย */
                                    transition: all 0.3s ease;
                                }

                                /* ลูกบอลที่สไลด์ ใช้สีม่วงที่เข้มขึ้นเพื่อความเด่น */
                                .slider-ball {
                                    position: absolute;
                                    top: 4px;
                                    left: 4px;
                                    width: 35px;
                                    height: 35px;
                                    background-color: #8B5CF6;
                                    /* สีม่วงเข้ม (Violet) */
                                    border-radius: 50%;
                                    z-index: 1;
                                    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                                    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
                                }

                                /* ไอคอน */
                                .view-icon {
                                    font-size: 1.2rem;
                                    z-index: 2;
                                    color: #7C3AED;
                                    /* สีม่วงกลาง */
                                    transition: color 0.3s ease;
                                }

                                /* เมื่อ Checkbox ถูกเลือก ให้เลื่อนลูกบอลไปทางขวา */
                                .view-checkbox:checked+.view-slider .slider-ball {
                                    transform: translateX(37px);
                                    /* ปรับระยะตามความกว้างของปุ่มคุณ */
                                }

                                /* แถม: เมื่อถูกเลือก ให้สีพื้นหลังคงที่ ไม่โดน Hover สีเทากลบ */
                                .view-checkbox:checked+.view-slider {
                                    background-color: #EDE9FE;
                                }

                                /* ปรับสี Dropdown ให้เข้าชุดกัน */
                                .form-select.bg-light {
                                    background-color: #ffffff !important;
                                    color: #5B21B6;
                                    border: 1px solid #969696 !important;
                                }

                                /* Hover Effect */
                                .view-slider:hover {
                                    background-color: #e9ecef;
                                }
                            </style>

                            <div class="card border-0 shadow-sm p-3 bg-white rounded-4">
                                <div class="row align-items-center g-3">
                                    <div class="col-md-4">
                                        <h2 class="display-6 fw-bold mb-1 text-dark" style="letter-spacing: -1px;">Online
                                            Catalog</h2>
                                        <p class="mb-0 text-muted small">
                                            <i class="uil uil-info-circle me-1"></i>
                                            Showing 1–<span class="fw-bold text-navy">{{ $products->count() }}</span> of
                                            <span class="fw-bold text-navy">{{ $products->count() }}</span> results
                                        </p>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="d-flex justify-content-md-end align-items-center gap-3 flex-wrap position-relative" style="z-index: 50;">

                                            {{-- <a class="nav-link" data-bs-toggle="offcanvas"
                                                data-bs-target="#offcanvas-search" title="Search">
                                                <i class="uil uil-search"
                                                    style="font-size: 1.6rem; color: #343a40 !important;"></i>
                                            </a> --}}

                                            <!-- ช่องค้นหาใหม่ (Custom Search Box) -->
                                            <div class="input-group shadow-sm"
                                                style="width: 250px; border-radius: 50px; overflow: hidden; border: 1px solid #343a40;">
                                                <span class="input-group-text bg-light border-0 px-3">
                                                    <i class="uil uil-search" style="color: #343a40 !important;"></i>
                                                </span>
                                                <input type="text" id="customSearch"
                                                    class="form-control border-0 bg-light ps-0" placeholder="ค้นหาสินค้า..."
                                                    style="height: 48px; box-shadow: none;">
                                            </div>

                                            <button type="button"
                                                class="btn position-relative border shadow-sm d-inline-flex align-items-center px-3"
                                                data-bs-toggle="offcanvas" data-bs-target="#offcanvas-cart"
                                                style="height: 48px; background-color: #f8f9fa; border-radius: 50px; border: 1px solid #343a40;">
                                                <i class="uil uil-shopping-cart me-2"
                                                    style="font-size: 1.2rem; color: #000 !important;"></i>
                                                <span class="me-2" style="font-weight: 600;">ตะกร้าของฉัน</span>
                                                <span class="badge rounded-pill bg-danger badge-cart fs-16"
                                                    style="background-color: #7c3aed;">0</span>
                                            </button>

                                            <div class="view-switcher-container">
                                                <input type="checkbox" id="viewToggle" class="view-checkbox"
                                                    {{ request('view') == 'grid' ? '' : 'checked' }}>
                                                <label for="viewToggle" class="view-slider">
                                                    <div class="view-icon grid-icon">
                                                        <i class="uil uil-grid"></i>
                                                    </div>
                                                    <div class="view-icon list-icon">
                                                        <i class="uil uil-list-ul"></i>
                                                    </div>
                                                    <span class="slider-ball"></span>
                                                </label>
                                            </div>

                                            <form method="GET" action="{{ url('/cataloglist') }}" class="m-0">
                                                @if (request('product_type'))
                                                    <input type="hidden" name="product_type"
                                                        value="{{ request('product_type') }}">
                                                @endif
                                                <input type="hidden" name="view" id="viewInput"
                                                    value="{{ request('view', 'list') }}">
                                                <div class="form-select-wrapper custom-select-icon">
                                                    <select class="form-select border-0 bg-light rounded-pill px-4"
                                                        name="sort"
                                                        style="height: 48px; min-width: 220px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); position: relative; z-index: 10;"
                                                        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' : '' }}>📉
                                                            Price: Low to High</option>
                                                        <option value="price_high_low"
                                                            {{ request('sort') == 'price_high_low' ? 'selected' : '' }}>📈
                                                            Price: High to Low</option>
                                                    </select>
                                                </div>
                                            </form>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div id="product-grid-view" class="grid grid-view projects-masonry shop mb-13"
                                style="display: {{ request('view') == 'grid' ? 'block' : 'none' }};">
                                <div class="row gx-md-8 gy-10 gy-md-13 isotope">

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

                                                <a class="item-view" href="#"
                                                    style="position: absolute; top: 1rem; right: 1rem; z-index: 20; background-color: #dcd4ff !important;"
                                                    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_current_unit_price, 2) }} THB"
                                                    data-weight="{{ $item->product_weight ?? 0 }} grams"
                                                    data-description="{{ $item->product_description }}"
                                                    data-id="{{ $item->product_id }}"
                                                    data-product-type="{{ $item->product_type }}" title="Quick view">
                                                    <i class="uil uil-eye" style="color:#7c3aed;"></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>

                                                {{-- ส่วนนี้จะแสดงเฉพาะเมื่อเป็น List View ตาม CSS ด้านบน --}}
                                                <div class="post-content">
                                                    <p class="mb-0">
                                                        {{ \Illuminate\Support\Str::limit($item->product_description, 150) }}
                                                    </p>
                                                </div>

                                                <p class="price">
                                                    <del></del>
                                                    <ins><span
                                                            class="amount">{{ number_format($item->product_current_unit_price, 2) }}
                                                            THB</span></ins>
                                                </p>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>

                            <div id="product-table-view" class="shop mb-13"
                                style="display: {{ request('view') == 'grid' ? 'none' : 'block' }};">
                                <div class="card p-4">
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle product-table"
                                            style="white-space: nowrap;">
                                            <thead>
                                                <tr>
                                                    <th>no.</th>
                                                    <th>Img.</th>
                                                    <th>Product Name</th>
                                                    <th>Weight (g)</th>
                                                    <th>Price (THB)</th>
                                                    <th>Stock</th>
                                                    <th>Pending</th>
                                                    <th>Available</th>
                                                    <th class="text-center">Add to cart</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($products as $i => $item)
                                                    <tr>
                                                        <td>{{ $products->firstItem() + $i }}</td>
                                                        <td>
                                                            <a href="#" 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_current_unit_price, 2) }} THB"
                                                                data-weight="{{ $item->product_weight ?? 0 }} grams"
                                                                data-description="{{ $item->product_description }}"
                                                                data-id="{{ $item->product_id }}"
                                                                data-product-type="{{ $item->product_type }}">
                                                                <figure class="rounded mb-0"
                                                                    style="width: 50px; height: 50px;">
                                                                    <img src="{{ asset('product_images/' . $item->product_image) }}"
                                                                        alt="{{ $item->product_name }}"
                                                                        style="width:100%; height:100%; object-fit:cover; object-position: center;" />
                                                                </figure>
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                @if ($item->product_type == '7')
                                                                    <div>
                                                                        {{ $item->product_name }} ✨
                                                                    </div>
                                                                @else
                                                                    {{ $item->product_name }}
                                                                @endif
                                                            </div>
                                                        </td>
                                                        <td>{{ $item->product_weight ?? '-' }}</td>
                                                        <td>{{ number_format($item->product_current_unit_price, 2) }}</td>
                                                        <td>{{ $item->product_current_stock ?? 'Out of Stock' }}</td>
                                                        <td>{{ $item->product_pending ?? '-' }}</td>
                                                        <td>
                                                            @php
                                                                $available =
                                                                    $item->product_current_stock -
                                                                    $item->product_pending;
                                                            @endphp
                                                            {{ $available }}
                                                        </td>
                                                        <td class="text-center">
                                                            <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>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </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 ms-14">
                                <h4 class="widget-title mb-3 ms-8 mt-4">Categories</h4>
                                <ul class="list-unstyled ps-0 ms-8 mt-4">
                                    <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 class="mt-4 text-center">
                                    <img src="{{ asset('picture/646.png') }}" class="img-fluid rounded shadow-sm"
                                        alt="">
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
            </section>

            <section class="wrapper" style="background-color: #EDE9FE;">
                <div class="container py-4 py-md-8">
                    <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 class="me-4 fs-40">
                                    <i class="uil uil-fast-mail" style="color: #434E78 !important"></i>
                                </div>
                                <div>
                                    <h4 class="mb-1">เบิกง่าย</h4>
                                    <p class="mb-0">ใช้งานสะดวก ไม่ซับซ้อน ลดขั้นตอนการดำเนินงาน สามารถเบิกของได้อย่างรวดเร็วภายในไม่กี่ขั้นตอน</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="d-flex flex-row">
                                <div class="me-4 fs-40">
                                    <i class="uil uil-shopping-cart-alt" style="color: #434E78 !important"></i>
                                </div>
                                <div>
                                    <h4 class="mb-1">ตรวจสอบสถานะได้ทันที</h4>
                                    <p class="mb-0">ติดตามสถานะคำขอได้แบบเรียลไทม์ ตั้งแต่การอนุมัติจนถึงการรับสินค้า ครบทุกขั้นตอนในที่เดียว</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="d-flex flex-row">
                                <div class="me-4 fs-40">
                                    <i class="uil uil-shield-check" style="color: #434E78 !important"></i>
                                </div>
                                <div>
                                    <h4 class="mb-1">ระบบปลอดภัย</h4>
                                    <p class="mb-0">ทุกการดำเนินการถูกบันทึกและตรวจสอบได้ มั่นใจในความถูกต้องและความปลอดภัยของข้อมูล</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 d-block mx-auto" />
                                </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 item-cart"
                                onclick="add_to_cart(this, event)">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_current_stock <= 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.
                        `;

                        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();
                    }
                }
            </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 productId = button.getAttribute('data-id');
                    var productType = button.getAttribute('data-product-type');
                    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');

                    // ผูกข้อมูลเข้ากับปุ่ม Add to Cart ใน Modal
                    var modalAddToCartBtn = productModal.querySelector('.item-cart');
                    if (modalAddToCartBtn) {
                        modalAddToCartBtn.setAttribute('data-product-id', productId);
                        modalAddToCartBtn.setAttribute('data-product-type', productType);
                    }

                    // อัปเดตสถานะปุ่ม (Add/Delete) ตามที่มีในตะกร้า
                    updateCartIcons();

                    // ใส่ข้อมูลลง 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