@extends('layouts.home')
<style>
    :root {
        --harvest-green: #16a34a;
        --harvest-green-light: #22c55e;
        --harvest-green-dark: #16a34a;
        --success-light: #F0F8F0;
    }

    .btn-success {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: var(--harvest-green-dark);
        border-color: var(--harvest-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
    }

    .btn-outline-success {
        color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-outline-success:hover {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        color: white;
    }

    .text-success {
        color: var(--harvest-green) !important;
    }

    .bg-success-subtle {
        background-color: var(--success-light) !important;
    }

    .cart-item {
        transition: all 0.3s ease;
    }

    .cart-item:hover {
        background-color: #f8f9fa;
    }

    .product-image-wrapper {
        overflow: hidden;
        border-radius: 0.75rem;
    }

    .quantity-controls .btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.2s ease;
    }

    .quantity-controls .btn:hover:not(:disabled) {
        transform: scale(1.1);
    }

    .quantity-input {
        border-left: none !important;
        border-right: none !important;
    }

    .quantity-input:focus {
        box-shadow: none;
        border-color: var(--harvest-green);
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05) !important;
    }

    .rounded-3 {
        border-radius: 0.75rem !important;
    }

    @media (max-width: 768px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .cart-item {
            padding: 1.5rem 1rem !important;
        }

        .quantity-controls {
            justify-content: center;
        }

    }

    /* Loading state for quantity updates */
    .quantity-input.loading {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Smooth transitions for cart updates */
    .cart-item {
        opacity: 1;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .cart-item.removing {
        opacity: 0;
        transform: translateX(100%);
    }
</style>
@section('content')
    <main class="min-vh-100 bg-light">
        <!-- Header Section -->
        <div class="bg-white shadow-sm border-bottom">
            <div class="container py-4">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h1 class="h3 mb-1 text-dark fw-bold">Shopping Cart</h1>
                        <p class="text-muted mb-0">{{ count($cartItems) }} {{ count($cartItems) == 1 ? 'item' : 'items' }} in
                            your cart</p>
                    </div>
                    <a href="javascript:history.back()" class="btn btn-outline-success d-none d-md-flex align-items-center gap-2">
                        <i class="fas fa-arrow-left"></i>
                        Continue Shopping
                    </a>
                </div>
            </div>
        </div>

        <div class="container py-5" id="cartContainer">
            <div id="cartContent">
                @if (count($cartItems) > 0)
                    <div class="row g-4">
                        <!-- Cart Items Section -->
                        <div class="col-lg-8">
                            <div class="bg-white rounded-3 shadow-sm overflow-hidden">
                                <div class="p-4 border-bottom bg-light">
                                    <h5 class="mb-0 fw-semibold text-dark">Cart Items</h5>
                                </div>

                                <div class="cart-items">
                                    @foreach ($cartItems as $index => $item)
                                        <div
                                            class="cart-item p-4 {{ $index !== count($cartItems) - 1 ? 'border-bottom' : '' }}">
                                            <div class="row align-items-center g-3">
                                                <!-- Product Image -->
                                                <div class="col-md-2 col-3">
                                                    <div class="product-image-wrapper position-relative">
                                                        @if ($item->product->image)
                                                            <img src="{{ asset('storage/products/' . $item->product->image) }}"
                                                                class="img-fluid rounded-3 shadow-sm"
                                                                alt="{{ $item->product->name }}"
                                                                style="aspect-ratio: 1; object-fit: cover;">
                                                        @else
                                                            <img src="{{ asset('/assets/img/no-product.png') }}"
                                                                alt="{{ $item->product->image }}"
                                                                class="img-fluid rounded-3 shadow-sm">
                                                        @endif


                                                    </div>
                                                </div>

                                                <!-- Product Details -->
                                                <div class="col-md-5 col-9">
                                                    <h6 class="mb-2 fw-semibold text-dark">{{ $item->product->name }}</h6>
                                                    <div class="d-flex align-items-center gap-2 mb-2">
                                                        <span class="badge bg-success-subtle text-success small">In
                                                            Stock</span>
                                                    </div>
                                                    <p class="text-muted small mb-0">
                                                        {{ $item->price }} @if ($config->currancy)
                                                            {{ $config->currancy }}
                                                        @endif per item
                                                    </p>
                                                </div>

                                                <!-- Quantity Controls -->
                                                <div class="col-md-3 col-6">
                                                    <label class="form-label small text-muted mb-2">Quantity</label>
                                                    <div class="quantity-controls d-flex align-items-center">
                                                        <button class="btn btn-outline-success quantity-btn"
                                                            onclick="updateQuantity({{ $item->id }} , 'decrease')">
                                                            <i class="fas fa-minus"></i>
                                                        </button>
                                                        <input type="number"
                                                            class="form-control text-center mx-2 qtybox-{{ $item->id }}"
                                                            id="quantity-{{ $item->id }}"
                                                            value="{{ $item->quantity }}"
                                                            onchange="updateQuantity({{ $item->id }}, this.value)"
                                                            min="1" style="width: 60px;">
                                                        <button class="btn btn-outline-success quantity-btn"
                                                            onclick="updateQuantity({{ $item->id }},  'increase')">
                                                            <i class="fas fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                <!-- Price and Remove -->
                                                <div class="col-md-2 col-6">
                                                    <div class="text-end">
                                                        <div class="fw-bold text-success h6 mb-2">
                                                            <span
                                                                id="sub-total-{{ $item->id }}">{{ $item->total }}</span>
                                                            @if ($config->currancy)
                                                                {{ $config->currancy }}
                                                            @endif
                                                        </div>
                                                        <a href="{{ route('cart.remove', $item->id) }}">
                                                            <button class="btn btn-icon btn-danger p-2" title="Remove item">
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Mobile Continue Shopping Button -->
                            <div class="d-md-none mt-3">
                                <a href="javascript:history.back()" class="btn btn-outline-success w-100">
                                    <i class="fas fa-arrow-left me-2"></i>
                                    Continue Shopping
                                </a>
                            </div>
                        </div>

                        <!-- Order Summary Section -->
                        <div class="col-lg-4">
                            <div class="position-sticky" style="top: 2rem;">
                                <div class="bg-white rounded-3 shadow-sm overflow-hidden">
                                    <div class="p-4 border-bottom bg-light">
                                        <h5 class="mb-0 fw-semibold text-dark">Order Summary</h5>
                                    </div>

                                    <div class="p-4">
                                        <!-- Summary Details -->
                                        <div class="summary-details mb-4">
                                            <div class="d-flex justify-content-between mb-3">
                                                <span class="text-muted">Subtotal ({{ count($cartItems) }} items)</span>
                                                <span class="fw-medium">
                                                    <span id="subtotal-amount">
                                                        {{ number_format($cartItems->sum('total'), 2) }}
                                                    </span>
                                                    @if ($config->currancy)
                                                        {{ $config->currancy }}
                                                    @endif
                                                </span>
                                            </div>

                                            <hr class="my-3">

                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <span class="h5 mb-0 fw-bold text-dark">Total</span>
                                                <span class="h4 mb-0 fw-bold text-success">
                                                    <span id="total-amount">
                                                        {{ number_format($cartItems->sum('total'), 2) }}
                                                    </span>
                                                    @if ($config->currancy)
                                                        {{ $config->currancy }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>

                                        @if ($config->minimum_spent && $config->minimum_spent > 0)
                                            <div class="mb-2">
                                                Minimum Order amount is {{ number_format($config->minimum_spent, 2) }}
                                                {{ $config->currancy ?? '' }}
                                            </div>
                                        @endif
                                        <!-- Action Buttons -->
                                        <div class="d-grid gap-3">
                                            <a href="{{ route('cart.checkout') }}" class="btn btn-success btn-lg">
                                                Proceed To Checkout
                                            </a>
                                        </div>

                                        <!-- continue shopping -->
                                        <div class="text-center mt-3">
                                            <a href="javascript:history.back()" class="btn btn-outline-success w-100">
                                                <i class="fas fa-arrow-left me-2"></i>
                                                Continue Shopping
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <!-- Empty Cart State -->
                    <div class="text-center">
                        <div class="bg-white rounded-3 shadow-sm p-5 mx-auto" style="max-width: 500px;">
                            <div class="mb-4">
                                <i class="fas fa-shopping-cart fa-4x text-muted mb-3"></i>
                            </div>
                            <h3 class="mb-3 text-dark">Your cart is empty</h3>
                            <p class="text-muted mb-4">Looks like you haven't added anything to your cart yet. Start
                                shopping to fill it up!</p>
                            <a href="/" class="btn btn-success btn-lg">
                                <i class="fas fa-shopping-bag me-2"></i>
                                Start Shopping
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </main>



    <script>
        function updateQuantity(itemId, type) {


            if (type == 'increase') {
                var quantity = document.getElementById(`quantity-${itemId}`);
                quantity.value = parseInt(quantity.value) + 1;
            } else if (type == 'decrease') {
                var quantity = document.getElementById(`quantity-${itemId}`);
                if (parseInt(quantity.value) > 1) {
                    quantity.value = parseInt(quantity.value) - 1;
                }
            }

            console.log(itemId, quantity.value);
            fetch(`/cart/update/${itemId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        quantity: quantity.value
                    })
                })
                .then(res => res.json())
                .then(data => {
                    console.log(data);
                    if (data.success) {
                        document.getElementById(`quantity-${itemId}`).value = data.qty;
                        //data.cartTotal.toFixed is not a function
                        document.getElementById(`sub-total-${itemId}`).innerText = data.total;
                        document.getElementById('subtotal-amount').innerText = data.cartTotal;
                        document.getElementById('total-amount').innerText = data.cartTotal;

                    } else {
                        alert('Failed to update quantity.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('An error occurred.');
                });
        }
    </script>

@endsection