@extends('layouts.app')

@section('title', 'Shopping Cart')

@section('content')
<div class="hero-section">
    <div class="container">
        <h1 class="display-4 fw-bold">Shopping Cart</h1>
    </div>
</div>

<div class="container mb-5">
    <div id="cart-container">
        <!-- Loading state -->
        <div id="loading-state" class="text-center py-5">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3">Loading your cart...</p>
        </div>
    </div>
</div>

<script>
const isAuthenticated = '{{ auth()->check() ? 'true' : 'false' }}';
let currentCartItems = [];

document.addEventListener('DOMContentLoaded', function() {
    loadCartFromLocalStorage();
});

function loadCartFromLocalStorage() {
    console.log('loadCartFromLocalStorage() called');
    
    const cartData = localStorage.getItem('store_cart');
    const cartItems = cartData ? JSON.parse(cartData) : [];
    
    console.log('✅ Found', cartItems.length, 'items in localStorage');
    
    if (cartItems.length === 0) {
        renderEmptyCart();
    } else {
        let total = 0;
        cartItems.forEach(item => {
            total += (parseFloat(item.price) || 0) * (parseInt(item.quantity) || 1);
        });
        currentCartItems = cartItems;
        renderCart(cartItems, total);
    }
}

function renderEmptyCart() {
    console.log('renderEmptyCart() called');
    document.getElementById('cart-container').innerHTML = `
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card border-0 shadow-sm text-center">
                    <div class="card-body py-5">
                        <i class="bi bi-cart-x" style="font-size: 4rem; color: #ccc;"></i>
                        <h3 class="mt-3">Your cart is empty</h3>
                        <p class="text-muted mb-4">Add some products to get started!</p>
                        <a href="{{ route('user.products.index') }}" class="btn btn-primary btn-lg">
                            <i class="bi bi-shop"></i> Start Shopping
                        </a>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function renderCart(cartItems, total) {
    console.log('renderCart() rendering', cartItems.length, 'items');
    const currencySymbol = window.appConfig?.currencySymbol || '$';
    
    const cartContainer = document.getElementById('cart-container');
    let itemsHTML = '';
    
    cartItems.forEach((item) => {
        const itemPrice = parseFloat(item.price) || 0;
        const itemQuantity = parseInt(item.quantity) || 1;
        const itemTotal = itemPrice *itemQuantity;
        
        itemsHTML += `
            <tr>
                <td>
                    <div style="display: flex; align-items: center;">
                        <img src="${item.image || '{{ asset("uploads/no-image.png") }}'}" 
                             alt="${item.name}" 
                             style="width: 80px; height: 80px; object-fit: cover; margin-right: 15px; border-radius: 4px;">
                        <div>
                            <strong>${item.name || 'Product'}</strong>
                            <br>
                            <small class="text-muted">SKU: ${item.sku || 'N/A'}</small>
                        </div>
                    </div>
                </td>
                <td>${currencySymbol}${itemPrice.toFixed(2)}</td>
                <td>
                    <div class="input-group" style="width: 100px;">
                        <input type="number" value="${itemQuantity}" min="1" class="form-control form-control-sm" 
                               onchange="updateCartQuantity(${item.id}, this.value)">
                    </div>
                </td>
                <td class="fw-bold">${currencySymbol}${itemTotal.toFixed(2)}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeFromCartView(${item.id})">
                        <i class="bi bi-trash"></i> Remove
                    </button>
                </td>
            </tr>
        `;
    });
    
    const checkoutButton = isAuthenticated === 'true'
        ? `<button onclick="syncAndCheckout()" class="btn btn-primary w-100 mb-2">
               <i class="bi bi-lock"></i> Proceed to Checkout
           </button>`
        : `<p class="alert alert-warning mb-2">Please <a href="{{ route('login') }}">login</a> to checkout</p>
           <a href="{{ route('user.checkout.index') }}" class="btn btn-secondary w-100 mb-2" disabled>
               <i class="bi bi-lock"></i> Checkout (Login Required)
           </a>
           <p class="text-center mt-2"><a href="{{ route('register') }}">Create account</a></p>`;
    
    cartContainer.innerHTML = `
        <div class="row">
            <div class="col-md-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 40%;">Product</th>
                                        <th style="width: 15%;">Price</th>
                                        <th style="width: 15%;">Qty</th>
                                        <th style="width: 15%;">Total</th>
                                        <th style="width: 15%;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${itemsHTML}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Order Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Subtotal:</span>
                            <strong>${currencySymbol}${total.toFixed(2)}</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Shipping:</span>
                            <strong>$0.00</strong>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="h5">Total:</span>
                            <strong class="h5">${currencySymbol}${total.toFixed(2)}</strong>
                        </div>
                        ${checkoutButton}
                        <a href="{{ route('user.products.index') }}" class="btn btn-outline-secondary w-100 mb-2">
                            <i class="bi bi-arrow-left"></i> Continue Shopping
                        </a>
                        <button onclick="clearEntireCart()" class="btn btn-outline-danger w-100">
                            <i class="bi bi-cart-x"></i> Clear Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function updateCartQuantity(productId, newQuantity) {
    const quantity = parseInt(newQuantity) || 0;
    
    if (quantity <= 0) {
        removeFromCartView(productId);
        return;
    }
    
    const cartData = localStorage.getItem('store_cart');
    const cartItems = cartData ? JSON.parse(cartData) : [];
    
    const item = cartItems.find(i => i.id === productId);
    if (item) {
        item.quantity = quantity;
        localStorage.setItem('store_cart', JSON.stringify(cartItems));
        loadCartFromLocalStorage();
        if (window.cartManager) window.cartManager.updateCartDropdown();
    }
}

function syncAndCheckout() {
    if (currentCartItems.length === 0) {
        alert('Your cart is empty');
        return;
    }

    const btn = event?.target || document.querySelector('.btn-primary');
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
    }

    const items = currentCartItems.map(item => ({
        product_id: item.id,
        quantity: parseInt(item.quantity) || 1
    }));

    console.log('🔄 Syncing cart to session:', items);

    fetch('{{ route("user.api.cart.sync") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ items: items })
    })
    .then(response => response.json())
    .then(data => {
        console.log('✅ Cart synced to session:', data);
        if (data.success) {
            window.location.href = '{{ route("user.checkout.index") }}';
        } else {
            alert('Error syncing cart. Please try again.');
            if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-lock"></i> Proceed to Checkout'; }
        }
    })
    .catch(error => {
        console.error('❌ Sync error:', error);
        alert('Error syncing cart. Please try again.');
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-lock"></i> Proceed to Checkout'; }
    });
}

function removeFromCartView(productId) {
    if (!confirm('Remove this item?')) return;
    
    const cartData = localStorage.getItem('store_cart');
    let cartItems = cartData ? JSON.parse(cartData) : [];
    cartItems = cartItems.filter(item => item.id !== productId);
    localStorage.setItem('store_cart', JSON.stringify(cartItems));
    loadCartFromLocalStorage();
    if (window.cartManager) window.cartManager.updateCartDropdown();
}

function clearEntireCart() {
    if (!confirm('Clear all items from your cart?')) return;
    localStorage.removeItem('store_cart');
    renderEmptyCart();
    if (window.cartManager) window.cartManager.updateCartDropdown();
}
</script>
@endsection