@extends('layout2.clim.header')
@section('content')
    <div class="container my-4">
        <div class="row g-4">
            <!-- Cart Items Column -->
            <div class="col-lg-8 ">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="mb-0 fw-bold">Your Shopping Cart</h2>
                            {{-- <span id="itemCount" class="badge bg-primary rounded-pill">0 items</span> --}}
                        </div>

                        <!-- Empty Cart Message -->
                        <div id="emptyCartPageMessage" class="text-center py-5">
                            <div class="empty-cart-icon mb-4">
                                <i class="fas fa-shopping-cart fa-4x text-light"
                                    style="background: #e9ecef; padding: 30px; border-radius: 50%;"></i>
                            </div>
                            <h4 class="text-muted mb-3">Your cart is empty</h4>
                            <p class="text-muted mb-4">Looks like you haven't added anything to your cart yet</p>
                            <a href="/" class="btn px-4 py-2 rounded-pill text-white"
                                style="background-color: #ed1e54">
                                <i class="fas fa-arrow-left me-2"></i> Continue Shopping
                            </a>
                        </div>

                        <!-- Cart Header (Desktop) -->
                        <div id="cartHeaderRow" class="row d-none d-md-flex py-3 bg-light rounded">
                            <div class="col-md-2"></div>
                            <div class="col-md-4 fw-bold">Product</div>
                            <div class="col-md-2 fw-bold text-end">Price</div>
                            <div class="col-md-2 fw-bold text-center">Quantity</div>
                            <div class="col-md-2 fw-bold text-end">Total</div>
                        </div>

                        <!-- Cart Items -->
                        <div id="cartPageItems" class="mb-4"></div>

                        <!-- Cart Summary -->
                        <div id="cartPageSummary" class="card border-0 bg-light" style="display: none;">
                            <div class="card-body p-4">
                                <h5 class="mb-3 fw-bold">Order Summary</h5>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Subtotal:</span>
                                    <span id="pageSubtotal" class="fw-bold">Tk 0</span>
                                </div>


                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Delivery Area:</span>
                                    <div class="delivery-options">
                                        <div class="text-end d-flex align-items-center">
                                            <input type="radio" name="deliveryOption" id="insideDhaka" value="inside"
                                                checked>
                                            <label class="ps-2 m-0 fw-bold" for="insideDhaka">Inside Dhaka Tk 80</label>
                                        </div>
                                        <div class="text-end d-flex align-items-center">
                                            <input type="radio" name="deliveryOption" id="outsideDhaka" value="outside">
                                            <label class="ps-2 m-0 fw-bold" for="outsideDhaka">Outside Dhaka Tk
                                                150</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between mb-2 d-none">
                                    <span class="text-muted">Delivery Fee:</span>
                                    <span id="pageDelivery" class="fw-bold">Tk 80</span>
                                </div>
                                <div class="d-flex justify-content-between border-top pt-3 mt-2">
                                    <strong class="fs-5">Total:</strong>
                                    <span id="pageTotal" class="fw-bold fs-5" style="color: #ed1e54">Tk 0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Info Column -->
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
                    <div class="card-body p-4">
                        <h2 class="mb-2 fw-bold">Customer Information</h2>
                        {{-- <h5 class="mb-4 fw-bold">Customer Information</h5> --}}
                        <form id="codOrderForm" class="needs-validation">
                            <div class="mb-3">
                                <label for="name" class="form-label">Full Name</label>
                                <input type="text" class="form-control rounded-pill" id="name" name="name"
                                    placeholder="পুরো নাম" required>
                                <div class="invalid-feedback">Please enter your name</div>
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="tel" class="form-control rounded-pill" id="phone" name="phone"
                                    placeholder="ফোন নাম্বার" required>
                                <div class="invalid-feedback">Please enter a valid phone number</div>
                            </div>
                            {{-- <div class="mb-3">
                                <label for="email" class="form-label">Email (Optional)</label>
                                <input type="email" class="form-control rounded-pill" id="email" name="email"
                                    placeholder="your@email.com">
                            </div> --}}
                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control rounded" id="address" name="address" rows="3" placeholder="অ্যাড্রেস" required></textarea>
                                <div class="invalid-feedback">Please enter your delivery address</div>
                            </div>
                            <div class="mb-4">
                                <label for="notes" class="form-label">Order Notes (Optional)</label>
                                <textarea class="form-control rounded" id="notes" name="notes" rows="2" placeholder="মন্তব্য"></textarea>
                            </div>

                            <button type="submit" style="background-color: #ed1e54"
                                class=" text-white btn w-100 py-2 rounded-pill fw-bold">
                                <i class="fas fa-check-circle me-2"></i> Confirm Order
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .cart-item {
            transition: all 0.3s ease;
            border-radius: 8px;
        }

        .cart-item:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }

        .quantity-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50% !important;
        }

        .form-control.rounded-pill {
            padding: 10px 20px;
        }

        .card {
            border-radius: 12px;
            overflow: hidden;
        }
    </style>

    


    <script>
        let DELIVERY_FEE = 80; // Default value

        const deliveryFeeElement = document.getElementById('deliveryFee');
        const radioButtons = document.querySelectorAll('input[name="deliveryOption"]');

        radioButtons.forEach(button => {
            button.addEventListener('change', function() {
                if (this.value === 'inside') {
                    DELIVERY_FEE = 80;
                } else if (this.value === 'outside') {
                    DELIVERY_FEE = 150;
                }

                deliveryFeeElement.textContent = DELIVERY_FEE;
                console.log("Delivery Fee Updated:", DELIVERY_FEE);
                renderCartPage();
            });
        });
    </script>


    <script>
        function getCart() {
            return JSON.parse(localStorage.getItem('cart')) || [];
        }

        function saveCart(cart) {
            localStorage.setItem('cart', JSON.stringify(cart));
        }

        function updateQuantity(id, action) {
            let cart = getCart();
            const item = cart.find(i => i.id === id);
            if (!item) return;

            if (action === 'increase') {
                item.quantity += 1;
            } else if (action === 'decrease') {
                item.quantity -= 1;
                if (item.quantity < 1) {
                    cart = cart.filter(i => i.id !== id);
                }
            }
            saveCart(cart);
            renderCartPage();
        }

        function removeFromCart(id) {
            let cart = getCart().filter(item => item.id !== id);
            saveCart(cart);
            renderCartPage();
        }

        function updateItemCount() {
            const cart = getCart();
            const itemCountElement = document.getElementById('itemCount');
            const distinctItems = cart.length;
            itemCountElement.textContent = `${distinctItems}`;
        }

        function renderCartPage() {
            const cart = getCart();
            const cartItemsDiv = document.getElementById('cartPageItems');
            const emptyMsg = document.getElementById('emptyCartPageMessage');
            const summary = document.getElementById('cartPageSummary');
            const headerRow = document.getElementById('cartHeaderRow');

            if (!Array.isArray(cart)) return;

            if (cart.length === 0) {
                cartItemsDiv.innerHTML = '';
                emptyMsg.style.display = 'block';
                summary.style.display = 'none';
                headerRow.classList.remove('d-md-flex');
                return;
            }

            emptyMsg.style.display = 'none';
            summary.style.display = 'block';
            headerRow.classList.add('d-md-flex');

            let subtotal = 0;

            cartItemsDiv.innerHTML = cart.map(item => {
                subtotal += item.price * item.quantity;

                const imageUrl = item.thumb_image && item.thumb_image.trim() !== '' ? item.thumb_image : item.image;


                // Mobile view template
                const mobileView = `
                    <div class="d-md-none mb-3 bg-white p-3 rounded border cart-item" data-id="${item.id}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <img src="${imageUrl}" class="img-fluid rounded" style="width:80px;height:80px;object-fit: contain;">
                            <button class="btn remove-btn" style="color: #dc3545;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="mb-2">
                            <h6>${item.name}</h6>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Price:</span>
                            <span>Tk ${item.price}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Quantity:</span>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-outline-secondary quantity-btn me-1" data-action="decrease" style="background-color:#e3e0e0;padding:4px 12px;">−</button>
                                <span class="px-2">${item.quantity}</span>
                                <button class="btn btn-sm btn-outline-secondary quantity-btn ms-1" data-action="increase" style="background-color:#e3e0e0;padding:4px 12px;">+</button>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <strong>Total:</strong>
                            <span>Tk ${(item.price * item.quantity)}</span>
                        </div>
                    </div>
                `;

                // Desktop view template
                const desktopView = `
                    <div class="d-none d-md-flex row justify-content-center align-items-center mb-3 bg-white p-3 rounded border cart-item" data-id="${item.id}">
                        <div class="col-md-2 d-flex align-items-center justify-content-center">
                            <button class="btn remove-btn" style="color: #dc3545;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <img src="${imageUrl}" class="img-fluid rounded" style="width:100px;height:100px;object-fit: contain;">
                        </div>
                        <div class="col-md-2">
                            <h6>${item.name}</h6>
                        </div>
                        <div class="col-md-2">
                            <p class="mb-1">Tk ${item.price}</p>
                        </div>
                        <div class="col-md-2 d-flex align-items-center">
                            <button class="btn btn-sm btn-outline-secondary quantity-btn me-1" data-action="decrease" style="background-color:#e3e0e0;padding:4px 12px;">−</button>
                            <span class="px-2">${item.quantity}</span>
                            <button class="btn btn-sm btn-outline-secondary quantity-btn ms-1" data-action="increase" style="background-color:#e3e0e0;padding:4px 12px;">+</button>
                        </div>
                        <div class="col-md-2">
                            <p class="mb-1">Tk ${(item.price * item.quantity)}</p>
                        </div>
                    </div>
                `;

                return mobileView + desktopView;
            }).join('');

            document.getElementById('pageSubtotal').innerText = 'Tk ' + subtotal;
            document.getElementById('pageDelivery').innerText = 'Tk ' + DELIVERY_FEE;
            document.getElementById('pageTotal').innerText = 'Tk ' + (subtotal + DELIVERY_FEE);
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize cart rendering
            renderCartPage();
            updateItemCount();

            // Quantity and remove handlers
            document.getElementById('cartPageItems').addEventListener('click', function(e) {
                const target = e.target;
                const itemRow = target.closest('[data-id]');
                if (!itemRow) return;
                const id = itemRow.dataset.id;

                if (target.closest('.remove-btn')) {
                    removeFromCart(id);
                    updateItemCount();
                    return;
                }

                if (target.classList.contains('quantity-btn')) {
                    const action = target.dataset.action;
                    updateQuantity(id, action);
                }
            });

            // Form submission handler
            document.getElementById('codOrderForm').addEventListener('submit', function(e) {
                e.preventDefault();

                // Disable button and show loading
                const submitBtn = e.target.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                // Prepare form data
                const formData = new FormData(this);
                const cart = getCart();

                if (cart.length === 0) {
                    alert('Your cart is empty!');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                    return;
                }

                // Add cart and totals to form data
                formData.append('cart_items', JSON.stringify(cart));
                formData.append('subtotal', document.getElementById('pageSubtotal').textContent.replace(
                    'Tk ', ''));
                formData.append('total', document.getElementById('pageTotal').textContent.replace('Tk ',
                    ''));

                formData.append('delivery_fee', DELIVERY_FEE);

                // Submit the order
                fetch('/place-order', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(err => {
                                throw err;
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            
                            fbq('track', 'Purchase', {
                                value: data.total,
                                currency: 'BDT'
                            });
                            // Clear cart and redirect to confirmation
                            saveCart([]);
                            window.location.href = '/order-confirmation/' + data.order_id;
                        } else {
                            throw new Error(data.message || 'Order failed');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Error: ' + (error.message || 'Failed to place order'));
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    });
            });

            // Cancel button handler
            document.getElementById('cancelOrderBtn').addEventListener('click', function() {
                if (confirm('Are you sure you want to cancel this order?')) {
                    window.location.href = '/';
                }
            });
        });
    </script>

    <script>
         fbq('track', 'InitiateCheckout');
    </script>
@endsection

@push('script')
@endpush