@extends('layouts.app')

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

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="max-w-7xl mx-auto px-4 py-8">
    @if($cart->items->isEmpty())
    <div class="bg-white rounded-2xl shadow-lg p-12 text-center max-w-2xl mx-auto">
        <img src="https://via.placeholder.com/200x200/e1e8f0/4663ac?text=Empty+Cart" class="w-48 mx-auto mb-6 opacity-50">
        <h2 class="text-2xl font-bold text-gray-900 mb-3">Your cart is feeling lonely</h2>
        <p class="text-gray-600 mb-8">Add some amazing items to get started!</p>
        <a href="/" class="inline-flex items-center px-8 py-3 bg-[#4663ac] text-white rounded-full hover:bg-[#c1d8f0] hover:text-[#4663ac] transition-all font-medium">
            <i class="fas fa-shopping-bag mr-2"></i>
            Start Shopping
        </a>
    </div>
    @else
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {{-- Main Content --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                <div class="p-6 border-b border-gray-200 flex justify-between items-center">
                    <h2 class="text-xl font-bold flex items-center gap-2">
                        <i class="fas fa-shopping-cart text-[#4663ac]"></i>
                        Cart Items ({{ $cart->items->count() }})
                    </h2>
                    {{-- Currency Display --}}
                    <div class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
                        <i class="fas fa-globe mr-1"></i>
                        {{ currency_code() }} ({{ currency_symbol() }})
                    </div>
                </div>

                <div class="divide-y divide-gray-200">
                    @foreach($cart->items as $item)
                    <div class="p-6 flex flex-col md:flex-row gap-6 hover:bg-gray-50 transition-colors" data-item-id="{{ $item->id }}">
                        {{-- Image with badge --}}
                        <div class="md:w-24 h-24 relative flex-shrink-0">
                            <img src="{{ asset($item->product->image) }}" class="w-full h-full object-cover rounded-lg">
                            @if($item->product->sale_price)
                            <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-6 h-6 rounded-full flex items-center justify-center font-bold">
                                %
                            </span>
                            @endif
                        </div>

                        {{-- Content --}}
                        <div class="flex-1">
                            <div class="flex flex-col md:flex-row justify-between gap-4">
                                <div>
                                    <h3 class="font-semibold text-lg">
                                        <a href="/product/{{ $item->product->slug }}" class="hover:text-[#4663ac]">
                                            {{ $item->product->name }}
                                        </a>
                                    </h3>
                                    <p class="text-sm text-gray-500 mt-1">SKU: ITM-{{ $item->product->id }}</p>
                                </div>
                                <div class="text-right">
                                    <div class="text-2xl font-bold text-[#4663ac] item-total-display" id="item-total-{{ $item->id }}">
                                        {{ currency($item->price * $item->quantity) }}
                                    </div>
                                    @if($item->product->sale_price)
                                    <div class="text-sm text-gray-400 line-through">
                                        {{ currency($item->product->price * $item->quantity) }}
                                    </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Controls --}}
                            <div class="flex flex-wrap items-center justify-between gap-4 mt-4">
                                <div class="flex items-center gap-4">
                                    <div class="flex items-center border-2 border-gray-200 rounded-lg">
                                        <button type="button" onclick="decrementQuantity({{ $item->id }})" 
                                                class="w-8 h-8 bg-gray-50 hover:bg-gray-100 rounded-l-lg flex items-center justify-center transition-colors">
                                            <i class="fas fa-minus text-xs"></i>
                                        </button>
                                        <input type="number" 
                                               id="qty-{{ $item->id }}" 
                                               value="{{ $item->quantity }}" 
                                               min="1" 
                                               data-item-id="{{ $item->id }}"
                                               class="quantity-input w-12 h-8 text-center border-x border-gray-200 focus:outline-none">
                                        <button type="button" onclick="incrementQuantity({{ $item->id }})" 
                                                class="w-8 h-8 bg-gray-50 hover:bg-gray-100 rounded-r-lg flex items-center justify-center transition-colors">
                                            <i class="fas fa-plus text-xs"></i>
                                        </button>
                                    </div>
                                    <form action="/cart/update/{{ $item->id }}" method="POST" class="inline update-form" data-item-id="{{ $item->id }}">
                                        @csrf
                                        <input type="hidden" name="quantity" id="hidden-qty-{{ $item->id }}" value="{{ $item->quantity }}">
                                        <button type="submit" class="text-sm text-[#4663ac] hover:text-[#c1d8f0] font-medium">
                                            Update
                                        </button>
                                    </form>
                                </div>

                                <form action="/cart/remove/{{ $item->id }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-sm text-red-500 hover:text-red-700 flex items-center gap-1 transition-colors">
                                        <i class="fas fa-trash-alt"></i>
                                        Remove
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-2xl shadow-lg p-6 sticky top-24">
                <h3 class="text-lg font-bold mb-6 flex items-center justify-between">
                    <span>Cart Total</span>
                    <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
                        {{ currency_code() }}
                    </span>
                </h3>

                <div class="space-y-3 mb-6">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Subtotal</span>
                        <span class="font-medium" id="subtotal-display">{{ currency($cart->total) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Shipping</span>
                        <span class="text-green-600 font-medium">FREE</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Estimated Tax (11%)</span>
                        <span id="tax-display">{{ currency($cart->total * 0.11) }}</span>
                    </div>
                    <div id="discount-row" class="flex justify-between text-green-600" style="display: {{ $cart->total > 500000 ? 'flex' : 'none' }}">
                        <span>Discount (5% off)</span>
                        <span id="discount-display">- {{ currency($cart->total * 0.05) }}</span>
                    </div>
                </div>

                <div class="border-t-2 border-gray-200 pt-4 mb-6">
                    <div class="flex justify-between text-xl font-bold">
                        <span>Total</span>
                        <span class="text-[#4663ac]" id="total-display">
                            {{ currency($cart->total + ($cart->total * 0.11)) }}
                        </span>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Including all taxes & fees | Displayed in {{ currency_code() }}</p>
                </div>

                @if(session('user_id'))
                    <a href="/checkout" class="block w-full py-4 bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] text-white text-center font-bold rounded-xl hover:opacity-90 transition-all">
                        <i class="fas fa-lock mr-2"></i>
                        Proceed to Checkout
                    </a>
                @else
                    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
                        <div class="flex items-start gap-3 mb-3">
                            <i class="fas fa-exclamation-triangle text-yellow-600 mt-1"></i>
                            <p class="text-sm text-yellow-800">Login to complete your purchase</p>
                        </div>
                        <div class="flex gap-2">
                            <a href="/auth/login" class="flex-1 text-center py-2 border border-[#4663ac] text-[#4663ac] rounded-lg hover:bg-[#4663ac] hover:text-white transition-colors text-sm">
                                Login
                            </a>
                            <a href="/auth/register" class="flex-1 text-center py-2 bg-[#4663ac] text-white rounded-lg hover:bg-[#c1d8f0] hover:text-[#4663ac] transition-colors text-sm">
                                Register
                            </a>
                        </div>
                    </div>
                @endif

                {{-- Currency Info --}}
                <div class="mt-4 p-3 bg-gray-50 rounded-lg">
                    <p class="text-xs text-gray-600 text-center">
                        <i class="fas fa-info-circle mr-1"></i>
                        All prices are shown in <strong>{{ currency_code() }}</strong> ({{ currency_symbol() }})
                        based on your location. Final payment will be processed in IDR.
                    </p>
                </div>

                {{-- Trust Badges --}}
                <div class="mt-6 text-center">
                    <div class="flex justify-center gap-4 text-2xl text-gray-400 mb-3">
                        <i class="fab fa-cc-visa hover:text-[#4663ac] cursor-pointer"></i>
                        <i class="fab fa-cc-mastercard hover:text-[#4663ac] cursor-pointer"></i>
                        <i class="fab fa-cc-paypal hover:text-[#4663ac] cursor-pointer"></i>
                    </div>
                    <p class="text-xs text-gray-500">
                        <i class="fas fa-shield-alt text-green-600 mr-1"></i>
                        Secure SSL Encrypted Checkout
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<script>
// Store cart items data with prices in IDR (original)
const cartItems = {
    @foreach($cart->items as $item)
    {{ $item->id }}: {
        id: {{ $item->id }},
        price_idr: {{ $item->price }},
        quantity: {{ $item->quantity }},
        original_price_idr: {{ $item->product->price }}
    },
    @endforeach
};

// Tax and discount constants (based on IDR)
const TAX_RATE = 0.11;
const DISCOUNT_THRESHOLD_IDR = 500000;
const DISCOUNT_RATE = 0.05;

// Format currency helper
function formatCurrency(amountIdr) {
    const symbol = '{{ currency_symbol() }}';
    const code = '{{ currency_code() }}';
    
    // Convert IDR to target currency if needed
    let convertedAmount = amountIdr;
    
    @if(currency_code() != 'IDR')
        // Get the current rate from session or use default
        const rates = {
            'USD': 0.000062,
            'EUR': 0.000057,
            'GBP': 0.000049,
            'SGD': 0.000083,
            'MYR': 0.00029,
            'AUD': 0.000094,
            'JPY': 0.0094,
            'IDR': 1
        };
        const rate = rates['{{ currency_code() }}'] || 1;
        convertedAmount = amountIdr * rate;
    @endif
    
    if (code === 'IDR') {
        return symbol + ' ' + Math.round(convertedAmount).toLocaleString('id-ID');
    } else {
        return symbol + convertedAmount.toLocaleString('en-US', { 
            minimumFractionDigits: 2, 
            maximumFractionDigits: 2 
        });
    }
}

// Calculate subtotal in IDR from current quantities
function calculateSubtotalIdr() {
    let subtotal = 0;
    for (const [id, item] of Object.entries(cartItems)) {
        subtotal += item.price_idr * item.quantity;
    }
    return subtotal;
}

// Update all displays
function updateAllDisplays() {
    const subtotalIdr = calculateSubtotalIdr();
    const taxIdr = subtotalIdr * TAX_RATE;
    let totalIdr = subtotalIdr + taxIdr;
    let discountIdr = 0;
    
    // Apply discount if applicable (based on IDR)
    if (subtotalIdr > DISCOUNT_THRESHOLD_IDR) {
        discountIdr = subtotalIdr * DISCOUNT_RATE;
        totalIdr = subtotalIdr - discountIdr + taxIdr;
    }
    
    // Update sidebar displays with formatted currency
    document.getElementById('subtotal-display').innerHTML = formatCurrency(subtotalIdr);
    document.getElementById('tax-display').innerHTML = formatCurrency(taxIdr);
    document.getElementById('total-display').innerHTML = formatCurrency(totalIdr);
    
    // Update discount row
    const discountRow = document.getElementById('discount-row');
    const discountDisplay = document.getElementById('discount-display');
    
    if (discountIdr > 0) {
        if (discountRow) {
            discountRow.style.display = 'flex';
            if (discountDisplay) {
                discountDisplay.innerHTML = '- ' + formatCurrency(discountIdr);
            }
        }
    } else {
        if (discountRow) {
            discountRow.style.display = 'none';
        }
    }
    
    // Update individual item totals
    for (const [id, item] of Object.entries(cartItems)) {
        const itemTotalElement = document.getElementById(`item-total-${id}`);
        if (itemTotalElement) {
            itemTotalElement.innerHTML = formatCurrency(item.price_idr * item.quantity);
        }
        
        // Update hidden form field
        const hiddenInput = document.getElementById(`hidden-qty-${id}`);
        if (hiddenInput) {
            hiddenInput.value = item.quantity;
        }
    }
}

// Update quantity in cart data
function updateQuantity(itemId, newQuantity) {
    if (newQuantity < 1) newQuantity = 1;
    
    if (cartItems[itemId]) {
        cartItems[itemId].quantity = newQuantity;
        
        // Update input display
        const qtyInput = document.getElementById(`qty-${itemId}`);
        if (qtyInput) {
            qtyInput.value = newQuantity;
        }
        
        updateAllDisplays();
    }
}

// Decrement quantity
function decrementQuantity(itemId) {
    const currentQty = cartItems[itemId]?.quantity || 1;
    const newQty = Math.max(1, currentQty - 1);
    updateQuantity(itemId, newQty);
}

// Increment quantity
function incrementQuantity(itemId) {
    const currentQty = cartItems[itemId]?.quantity || 1;
    const newQty = currentQty + 1;
    updateQuantity(itemId, newQty);
}

// Handle manual quantity input change
function handleQuantityInputChange(itemId, inputElement) {
    let newQty = parseInt(inputElement.value);
    if (isNaN(newQty) || newQty < 1) {
        newQty = 1;
    }
    updateQuantity(itemId, newQty);
}

// Handle update form submission
function handleUpdateFormSubmit(form, itemId) {
    const hiddenInput = document.getElementById(`hidden-qty-${itemId}`);
    if (hiddenInput) {
        hiddenInput.value = cartItems[itemId]?.quantity || 1;
    }
    return true;
}

// Event Listeners
document.addEventListener('DOMContentLoaded', function() {
    // Initialize displays
    updateAllDisplays();
    
    // Add event listeners for quantity inputs
    document.querySelectorAll('.quantity-input').forEach(input => {
        const itemId = input.getAttribute('data-item-id');
        if (itemId) {
            input.addEventListener('change', function() {
                handleQuantityInputChange(itemId, this);
            });
        }
    });
    
    // Add event listeners for update forms
    document.querySelectorAll('.update-form').forEach(form => {
        const itemId = form.getAttribute('data-item-id');
        if (itemId) {
            form.addEventListener('submit', function(e) {
                return handleUpdateFormSubmit(this, itemId);
            });
        }
    });
});
</script>

<style>
/* Quantity input styling */
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-input {
    -moz-appearance: textfield;
}

/* Smooth transitions */
.transition-colors {
    transition: all 0.2s ease;
}

/* Hover effects */
button:active {
    transform: scale(0.95);
}
</style>
@endsection