@extends('layouts.app')

@section('content')
<h1 style="font-size: 2rem; font-weight: 800; margin-bottom: 2rem; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Carrito de Compras</h1>

@if(empty($cart))
    <div class="glass" style="border-radius: var(--radius-lg); text-align: center; padding: 5rem 2rem; box-shadow: var(--shadow-soft);">
        <svg width="60" height="60" fill="none" stroke="var(--text-muted)" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom: 1rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
        <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--text-secondary);">Tu carrito está vacío</h3>
        <p style="color: var(--text-muted); margin-top: 0.25rem;">Navega por nuestra tienda y agrega tus productos favoritos.</p>
        <a href="{{ route('shop.index') }}" class="btn btn-primary" style="margin-top: 1.5rem;">Volver al Catálogo</a>
    </div>
@else
    <div class="cart-layout">
        <!-- Cart Items List -->
        <div class="cart-items-container glass">
            @foreach($cart as $id => $item)
                <div class="cart-item">
                    <img src="{{ $item['image_path'] ? asset('storage/' . $item['image_path']) : asset('images/placeholder.svg') }}" alt="{{ $item['name'] }}" class="cart-item-image">
                    
                    <div class="cart-item-details">
                        <h4 class="cart-item-name">{{ $item['name'] }}</h4>
                        <span class="cart-item-price">${{ number_format($item['price'], 2) }}</span>
                        
                        <div class="cart-item-qty">
                            <form action="{{ route('cart.update', $id) }}" method="POST" style="display: flex; align-items: center; gap: 0.5rem;">
                                @csrf
                                <label for="qty-{{ $id }}" class="form-label" style="margin-bottom: 0; font-size: 0.8rem;">Cant:</label>
                                <input type="number" id="qty-{{ $id }}" name="quantity" value="{{ $item['quantity'] }}" min="1" max="{{ $item['stock'] }}" class="qty-input">
                                <button type="submit" class="btn btn-outline btn-sm" style="padding: 0.25rem 0.5rem;" title="Actualizar cantidad">
                                    Actualizar
                                </button>
                            </form>
                        </div>
                    </div>

                    <div style="text-align: right;">
                        <span style="font-weight: 700; display: block; margin-bottom: 0.5rem;">
                            Total: ${{ number_format($item['price'] * $item['quantity'], 2) }}
                        </span>
                        <form action="{{ route('cart.remove', $id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-danger btn-sm" title="Quitar del carrito">
                                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Checkout Summary -->
        <div class="cart-summary glass">
            <h3 class="summary-title">Resumen de Compra</h3>
            
            <div class="summary-row">
                <span>Productos ({{ count($cart) }})</span>
                @php 
                    $subtotal = collect($cart)->sum(fn($i) => $i['price'] * $item['quantity']); 
                    // Let's compute actual total correctly
                    $total = 0;
                    foreach($cart as $item) {
                        $total += $item['price'] * $item['quantity'];
                    }
                @endphp
                <span>${{ number_format($total, 2) }}</span>
            </div>
            
            <div class="summary-row">
                <span>Envío</span>
                <span class="badge badge-success">Gratis</span>
            </div>
            
            <div class="summary-total">
                <span>Total</span>
                <span>${{ number_format($total, 2) }}</span>
            </div>

            <div style="margin-top: 1.5rem;">
                @auth
                    <form action="{{ route('checkout') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-primary btn-block">
                            Completar Checkout
                        </button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="btn btn-primary btn-block">
                        Ingresa para Comprar
                    </a>
                @endauth
                
                <a href="{{ route('shop.index') }}" class="btn btn-outline btn-block" style="margin-top: 0.5rem; text-align: center;">
                    Seguir Comprando
                </a>
            </div>
        </div>
    </div>
@endif

@endsection