@extends('layouts.portal')

@section('content')
<style>
    .cart-page-wrap {
        max-width: 1100px;
        margin: 5rem auto 8rem;
        padding: 0 1.5rem;
    }

    .page-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .page-header h1 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 3rem;
        font-weight: 800;
        color: white;
        margin: 0 0 1rem;
        letter-spacing: -1px;
    }

    .page-header p {
        color: var(--text-muted, #9CA3AF);
        font-size: 1.15rem;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .cart-container {
        background: rgba(17, 24, 39, 0.6);
        backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .cart-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        align-items: center;
        padding: 1.8rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        gap: 1.5rem;
    }

    .cart-item:last-child {
        border-bottom: none;
    }

    .col-header {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: block;
    }

    .product-info {
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }

    .product-image {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        object-fit: cover;
        background: rgba(0,0,0,0.3);
    }

    .product-info h3 {
        color: white;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0 0 0.2rem 0;
    }

    .product-info p {
        color: #9CA3AF;
        font-size: 0.85rem;
        margin: 0;
    }

    .item-price {
        color: #34D399;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .qty-input {
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.1);
        color: white;
        padding: 0.5rem;
        border-radius: 8px;
        width: 70px;
        text-align: center;
    }

    .btn-remove {
        background: rgba(239, 68, 68, 0.1);
        color: #EF4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
        padding: 0.5rem 1rem;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-remove:hover {
        background: rgba(239, 68, 68, 0.2);
        color: white;
    }

    .cart-summary {
        padding: 2rem;
        background: rgba(0,0,0,0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .total-price {
        font-size: 1.5rem;
        font-family: 'Space Grotesk', sans-serif;
        color: white;
        font-weight: 700;
    }

    .btn-checkout {
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: white;
        padding: 0.9rem 2rem;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border: none;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        transition: all 0.2s;
    }

    .btn-checkout:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        color: white;
    }

    .btn-update {
        background: rgba(99, 102, 241, 0.15);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
        padding: 0.5rem 1rem;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-update:hover {
        background: rgba(99, 102, 241, 0.3);
        color: white;
    }

    @media (max-width: 900px) {
        .cart-item {
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 
                "product product"
                "price qty"
                "total action";
            gap: 1.2rem;
        }
        .item-product { grid-area: product; }
        .item-price-wrap { grid-area: price; }
        .item-qty { grid-area: qty; }
        .item-total { grid-area: total; }
        .item-action { grid-area: action; text-align: right; }
        .cart-summary {
            flex-direction: column;
            gap: 1.5rem;
            text-align: center;
        }
    }

    @media (max-width: 500px) {
        .cart-item {
            grid-template-columns: 1fr;
            grid-template-areas: 
                "product"
                "price"
                "qty"
                "total"
                "action";
        }
        .item-action { text-align: left; margin-top: 0.5rem; }
    }
</style>

<div class="cart-page-wrap">
    <div class="page-header">
        <h1>Your <span style="color: #10B981;">Shopping Cart</span></h1>
        <p>Review the items in your cart before proceeding to checkout.</p>
    </div>

    @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); padding: 1rem 1.5rem; border-radius: 12px; margin-bottom: 2rem; font-weight: 600;">
            ✓ {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div style="background: rgba(239, 68, 68, 0.15); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); padding: 1rem 1.5rem; border-radius: 12px; margin-bottom: 2rem; font-weight: 600;">
            ⚠ {{ session('error') }}
        </div>
    @endif

    @if($cart && count($cart) > 0)
        <div class="cart-container">
            <div class="cart-item" style="background: rgba(0,0,0,0.4); padding: 1rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 24px 24px 0 0;">
                <div class="col-header" style="margin: 0; color: white;">Product Details</div>
                <div class="col-header" style="margin: 0; color: white;">Price</div>
                <div class="col-header" style="margin: 0; color: white;">Quantity</div>
                <div class="col-header" style="margin: 0; color: white;">Subtotal</div>
                <div class="col-header" style="margin: 0; color: white; text-align: right;">Action</div>
            </div>

            @foreach($cart as $id => $item)
                <div class="cart-item">
                    <div class="item-product product-info">
                        @if($item['media'])
                            @if($item['media_type'] == 'video')
                                <video src="{{ asset($item['media']) }}" class="product-image" muted></video>
                            @else
                                <img src="{{ asset($item['media']) }}" alt="{{ $item['name'] }}" class="product-image">
                            @endif
                        @else
                            <div class="product-image" style="display: flex; align-items: center; justify-content: center; font-size: 2rem;">🛍️</div>
                        @endif
                        <div>
                            <h3>{{ $item['name'] }}</h3>
                            <p>Digital Item</p>
                        </div>
                    </div>

                    <div class="item-price-wrap">
                        <span class="col-header d-md-none">Price</span>
                        <div class="item-price">₹{{ number_format($item['price'], 2) }}</div>
                    </div>

                    <div class="item-qty">
                        <span class="col-header d-md-none">Quantity</span>
                        <form action="{{ route('portal.cart.update') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" method="POST" style="display: flex; align-items: center; gap: 0.5rem;">
                            @csrf
                            <input type="hidden" name="id" value="{{ $id }}">
                            <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1" class="qty-input" data-id="{{ $id }}" onchange="updateCartQty(this)">
                        </form>
                    </div>

                    <div class="item-total">
                        <span class="col-header d-md-none">Subtotal</span>
                        <div class="item-price" id="subtotal-{{ $id }}" style="color: white;">₹{{ number_format($item['price'] * $item['quantity'], 2) }}</div>
                    </div>

                    <div class="item-action">
                        <a href="{{ route('portal.cart.remove', $id) }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" class="btn-remove">
                            ✕ Remove
                        </a>
                    </div>
                </div>
            @endforeach

            <div class="cart-summary">
                <div>
                    <span style="color: #9CA3AF; font-size: 1.1rem;">Total Amount:</span>
                    <div class="total-price" id="cart-total">₹{{ number_format($total, 2) }}</div>
                </div>
                <div>
                    <a href="{{ route('portal.shop') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" style="color: #9CA3AF; text-decoration: none; margin-right: 1.5rem; font-weight: 600;">← Continue Shopping</a>
                    <a href="{{ route('portal.cart.checkout') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" class="btn-checkout">
                        Proceed to Checkout
                    </a>
                </div>
            </div>
        </div>
    @else
        <div class="cart-container" style="text-align: center; padding: 5rem 2rem;">
            <div style="font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.8;">🛒</div>
            <h3 style="color: white; font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; margin-bottom: 0.8rem;">Your Cart is Empty</h3>
            <p style="color: #9CA3AF; font-size: 1.05rem; margin-bottom: 2rem;">Looks like you haven't added anything to your cart yet.</p>
            <a href="{{ route('portal.shop') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" class="btn-checkout" style="padding: 1rem 2.5rem;">
                Browse Store Now
            </a>
        </div>
    @endif
</div>

<script>
function updateCartQty(input) {
    const id = input.getAttribute('data-id');
    const qty = input.value;
    const simHost = new URLSearchParams(window.location.search).get('simulate_host') || '';
    
    fetch('{{ route("portal.cart.update") }}' + (simHost ? '?simulate_host=' + simHost : ''), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            id: id,
            quantity: qty
        })
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            document.getElementById('subtotal-' + id).innerText = '₹' + data.itemSubtotal;
            document.getElementById('cart-total').innerText = '₹' + data.total;
        }
    })
    .catch(error => {
        console.error('Error updating cart:', error);
    });
}
</script>
@endsection