{{-- resources/views/shop-ajax.blade.php --}}
@extends('layouts.ecom')

@section('title', 'Shop')
@push('styles')
    <style>
        .toast-enter {
            opacity: 0;
            transform: translateX(20px);
        }

        .toast-enter-active {
            opacity: 1;
            transform: translateX(0);
            transition: opacity 300ms, transform 300ms;
        }

        .toast-exit {
            opacity: 1;
        }

        .toast-exit-active {
            opacity: 0;
            transition: opacity 300ms;
        }

    </style>
@endpush
@section('content')
    <div class="flex flex-col lg:flex-row gap-6">
        <aside class="w-full lg:w-1/4 bg-white rounded-lg shadow-sm p-4 h-fit sticky top-20">
            <h3 class="text-lg font-semibold mb-4 text-gray-800">Filter Products</h3>
            <div class="mb-6">
                <label for="category-filter" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                <select id="category-filter" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    <option value="">All Categories</option>
                    <!-- Dynamically populated -->
                </select>
            </div>
            <div class="mb-6">
                <label for="type-filter" class="block text-sm font-medium text-gray-700 mb-1">Product Type</label>
                <select id="type-filter" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    <option value="">All Types</option>
                    <!-- Dynamically populated -->
                </select>
            </div>
            <div>
                <label for="sort-filter" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                <select id="sort-filter" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    <option value="name_asc">Name (A → Z)</option>
                    <option value="name_desc">Name (Z → A)</option>
                    <option value="price_low">Price (Low → High)</option>
                    <option value="price_high">Price (High → Low)</option>
                </select>
            </div>
        </aside>
        <section class="w-full lg:w-3/4">
            <div id="toast-container" class="fixed top-5 right-5 space-y-2 z-50 max-w-md w-full"></div>
            <div class="flex justify-end mb-4">
                <input type="text" id="search-input" placeholder="Search products..." class="w-full  border border-gray-300 rounded-md px-4 py-2 text-sm focus:ring-2 focus:ring-blue-400"/>
            </div>
            <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                <div class="col-span-full text-center text-gray-500" id="loading-msg">Loading products...</div>
            </div>
        </section>
    </div>

<div id="cart-panel"
    class="fixed top-0 right-0 w-full sm:w-96 h-full bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
    <div class="flex justify-between items-center p-4 border-b">
        <h3 class="text-lg font-semibold text-gray-800">Your Cart</h3>
        <button id="close-cart" class="text-gray-500 hover:text-red-600 text-xl">&times;</button>
    </div>
    <div id="cart-items" class="flex-1 overflow-y-auto p-4 space-y-4 text-sm">
    </div>
    <div class="border-t p-4">
        <div class="flex justify-between items-center mb-4">
            <span class="font-semibold text-gray-700">Total:</span>
            <span id="cart-total" class="text-lg font-bold text-green-600">$0.00</span>
        </div>
        <form id="checkout-form" class="space-y-3 text-sm">
            <input type="text" name="name" placeholder="Full Name" class="border p-2 rounded w-full" required>
            <input type="email" name="email" placeholder="Email Address" class="border p-2 rounded w-full" required>
            <input type="text" name="phone" placeholder="Phone Number" class="border p-2 rounded w-full" required>
            <input type="text" name="address" placeholder="Shipping Address" class="border p-2 rounded w-full" required>

            <button type="submit"
                    class="bg-green-600 text-white py-2 px-4 rounded w-full hover:bg-green-700">
                Confirm Order
            </button>
        </form>
    </div>
</div>

<div class="fixed bottom-4 right-4 z-40">
    <button id="open-cart"
        class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 text-sm">
        🛒 View Cart (<span id="cart-count">0</span>)
    </button>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        fetch("/select/categorys")
            .then(res => res.json())
            .then(data => {
                const catFilter = document.getElementById("category-filter");
                data.forEach(cat => {
                    const option = document.createElement("option");
                    option.value = cat.id;
                    option.textContent = cat.name;
                    catFilter.appendChild(option);
                });
            });
        fetch("/select/product-types")
            .then(res => res.json())
            .then(data => {
                const typeFilter = document.getElementById("type-filter");
                data.forEach(type => {
                    const option = document.createElement("option");
                    option.value = type.id;
                    option.textContent = type.name;
                    typeFilter.appendChild(option);
                });
            });
        function loadProducts() {
            const name = document.getElementById("search-input").value;
            const categoryId = document.getElementById("category-filter").value;
            const typeId = document.getElementById("type-filter").value;
            const sort = document.getElementById("sort-filter").value;

            const params = new URLSearchParams({
                name: name,
                category_id: categoryId,
                product_type_id: typeId,
                sort: sort,
            });

            fetch(`/select/products-shop?${params}`)
                .then(res => res.json())
                .then(products => renderProducts(products));
        }
        document.getElementById("search-input").addEventListener("input", loadProducts);
        document.getElementById("category-filter").addEventListener("change", loadProducts);
        document.getElementById("type-filter").addEventListener("change", loadProducts);
        document.getElementById("sort-filter").addEventListener("change", loadProducts);
        loadProducts();
        function renderProducts(products) {
            const grid = document.getElementById("product-grid");
            grid.innerHTML = "";
            if (products.length === 0) {
                grid.innerHTML = `<div class="col-span-full text-center text-gray-500">No products found.</div>`;
                return;
            }
            products.slice(0, 5).forEach(product => {
                const card = document.createElement("div");
                card.className = "bg-white rounded-md shadow-sm overflow-hidden flex flex-col";

                card.innerHTML = `
                    <img
                        src="${product.image || 'https://via.placeholder.com/300x180'}"
                        alt="${product.product_name}"
                        class="w-full h-36 object-cover"
                    >
                    <div class="p-3 flex flex-col flex-grow">
                        <h3 class="text-sm font-semibold text-gray-900 truncate" title="${product.product_name}">
                            ${product.product_name}
                        </h3>
                        <p class="text-xs text-gray-500 mb-1 truncate" title="${product.category?.name || ''}">
                            Category: ${product.category?.name || 'N/A'}
                        </p>
                        <p class="text-xs text-gray-500 mb-2 truncate" title="${product.productType?.name || ''}">
                            Type: ${product.productType?.name || 'N/A'}
                        </p>
                        <div class="mt-auto flex items-center justify-between text-sm font-semibold text-blue-600">
                            <span>$${product.product_price ?? product.price1 ?? 'N/A'}</span>
                            <button  data-id="${product.product_id}" data-name="${product.product_name}" data-price="${product.product_price}"
                                    class="add-to-cart mt-2 bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded text-xs hover:bg-blue-700">
                                Add to Cart
                            </button>
                        </div>
                    </div>
                `;
                grid.appendChild(card);
            });
            bindCartButtons();
        }
    });

    function showToast(message, type = 'success') {
        const container = document.getElementById('toast-container');
        const toast = document.createElement('div');

        const baseClasses = "max-w-md w-full bg-white shadow-lg rounded-md pointer-events-auto flex ring-1 ring-black ring-opacity-5 p-4";
        const typeClasses = {
            success: "border-l-4 border-green-500",
            error: "border-l-4 border-red-500",
            info: "border-l-4 border-blue-500",
        };

        toast.className = `${baseClasses} ${typeClasses[type] || typeClasses.info}`;

        toast.innerHTML = `
        <div class="flex-1 w-0">
            <p class="text-base font-semibold text-gray-900">${message}</p>
        </div>
        <button class="ml-4 p-1 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Close">
            &times;
        </button>
    `;

        container.appendChild(toast);

        // Close on button click
        toast.querySelector('button').addEventListener('click', () => {
            container.removeChild(toast);
        });

        // Auto remove after 3 seconds
        setTimeout(() => {
            if (container.contains(toast)) {
                container.removeChild(toast);
            }
        }, 3000);
    }
</script>
<script>
    const cart = [];
    const cartCount = document.getElementById('cart-count');
    const cartPanel = document.getElementById('cart-panel');
    const cartItemsContainer = document.getElementById('cart-items');
    const cartTotal = document.getElementById('cart-total');


    function bindCartButtons() {
        document.querySelectorAll('.add-to-cart').forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const name = btn.dataset.name;
                const price = parseFloat(btn.dataset.price);

                const existing = cart.find(item => item.id === id);
                if (existing) {
                    existing.qty += 1;
                } else {
                    cart.push({ id, name, price, qty: 1 });
                }
                updateCart();

                showToast(`Added "${name}" to cart!`, 'success');

                // Optional button feedback
                btn.textContent = "Added!";
                btn.disabled = true;
                setTimeout(() => {
                    btn.textContent = "Add to Cart";
                    btn.disabled = false;
                }, 1000);
            });
        });
    }

    function updateCart() {
        cartCount.innerText = cart.reduce((sum, item) => sum + item.qty, 0);
        renderCartItems();
        renderCartTotal();
    }

    function renderCartItems() {
        cartItemsContainer.innerHTML = '';
        if (cart.length === 0) {
            cartItemsContainer.innerHTML = '<p class="text-gray-500">Cart is empty.</p>';
            return;
        }

        cart.forEach((item, index) => {
            const div = document.createElement('div');
            div.className = "flex justify-between items-center border-b pb-2";
            div.innerHTML = `
                <div>
                    <p class="font-medium text-gray-800">${item.name}</p>
                    <p class="text-gray-600 text-xs">Qty: ${item.qty} | ${(item.qty * item.price).toFixed(2)} TK</p>
                </div>
                <button data-index="${index}" class="remove-item text-red-500 text-xs hover:underline">Remove</button>
            `;
            cartItemsContainer.appendChild(div);
        });

        document.querySelectorAll('.remove-item').forEach(btn => {
            btn.addEventListener('click', () => {
                const i = btn.dataset.index;
                cart.splice(i, 1);
                updateCart();
            });
        });
    }

    function renderCartTotal() {
        const total = cart.reduce((sum, item) => sum + (item.qty * item.price), 0);
        cartTotal.innerText = `${total.toFixed(2)} TK`;
    }

    document.getElementById('open-cart').addEventListener('click', () => {
        cartPanel.classList.remove('translate-x-full');
    });

    document.getElementById('close-cart').addEventListener('click', () => {
        cartPanel.classList.add('translate-x-full');
    });

</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        $('#checkout-form').off('submit').on('submit', function (e) {
            e.preventDefault(); // ✅ prevent form from reloading

            if (cart.length === 0) {
                Swal.fire('Cart is empty', 'Please add items before checkout.', 'warning');
                return;
            }

            const formData = $(this).serializeArray();
            const customer = {};
            formData.forEach(field => customer[field.name] = field.value);

            // Validate email and name
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!customer.name.trim()) {
                Swal.fire('Name Required', 'Please enter your name.', 'error');
                return;
            }
            if (!emailPattern.test(customer.email)) {
                Swal.fire('Invalid Email', 'Enter a valid email.', 'error');
                return;
            }

            const payload = {
                name: customer.name,
                email: customer.email,
                phone: customer.phone,
                address: customer.address,
                payment_method: 'paid',
                items: cart.map(item => ({
                    product_id: item.id,
                    quantity: item.qty,
                    price: item.price
                }))
            };

            const submitBtn = $(this).find('button[type="submit"]');
            submitBtn.prop('disabled', true).text('Placing Order...');

            $.ajax({
                url: '/ecom/shop',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: 'application/json',
                data: JSON.stringify(payload),
                success: function (res) {
                    Swal.fire('Order Placed', 'Your order was successful.', 'success');
                    cart.length = 0;
                    updateCart();
                    $('#cart-panel').addClass('translate-x-full');
                    $('#checkout-form')[0].reset();
                },
                error: function (err) {
                    Swal.fire('Error', 'Something went wrong.', 'error');
                    console.error(err);
                },
                complete: function () {
                    submitBtn.prop('disabled', false).text('Confirm Order');
                }
            });
        });
    });
</script>
@endpush