@extends('layouts.web.index')

@php
use Illuminate\Support\Str;
@endphp

@section('content')
@include('layouts.web.header')

<div class="page-content bg-white">
    <!-- inner page banner -->
    <div class="dz-bnr-inr overlay-secondary-dark dz-bnr-inr-sm" style="background-image:url({{ asset('images/background/bg3.jpg') }});">
        <div class="container">
            <div class="dz-bnr-inr-entry">
                <h1>Shopping Cart</h1>
                <nav aria-label="breadcrumb" class="breadcrumb-row">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item">Shopping Cart</li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- inner page banner End-->

    <!-- Cart content -->
    <section class="content-inner-1 shop-account">
        <div class="container">
            @if($cartItems->count() > 0)
            <div class="row" style="margin-top: 30px;">
                <div class="col-lg-8">
                    <style>
                        .cart-item-card {
                            background: white;
                            border-radius: 12px;
                            padding: 20px;
                            margin-bottom: 20px;
                            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
                            transition: all 0.3s ease;
                        }
                        .cart-item-card:hover {
                            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
                            transform: translateY(-2px);
                        }
                        .cart-item-image {
                            width: 100px;
                            height: 140px;
                            object-fit: cover;
                            border-radius: 10px;
                            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                        }
                        .cart-item-title {
                            font-size: 16px;
                            font-weight: 600;
                            color: #2c3e50;
                            margin-bottom: 5px;
                            line-height: 1.4;
                        }
                        .cart-item-title a {
                            color: #2c3e50;
                            text-decoration: none;
                            transition: color 0.3s ease;
                        }
                        .cart-item-title a:hover {
                            color: #667eea;
                        }
                        .cart-item-author {
                            font-size: 13px;
                            color: #6c757d;
                            margin-bottom: 15px;
                        }
                        .quantity-controls {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                        }
                        .quantity-btn {
                            width: 36px;
                            height: 36px;
                            border: 2px solid #667eea;
                            background: white;
                            color: #667eea;
                            border-radius: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            font-weight: 600;
                            font-size: 16px;
                        }
                        .quantity-btn:hover {
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                            color: white;
                            transform: scale(1.1);
                        }
                        .quantity-input {
                            width: 60px;
                            height: 36px;
                            text-align: center;
                            border: 2px solid #dee2e6;
                            border-radius: 8px;
                            font-weight: 600;
                            font-size: 14px;
                        }
                        .quantity-input:focus {
                            border-color: #667eea;
                            outline: none;
                            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
                        }
                        .remove-btn {
                            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
                            color: white;
                            border: none;
                            width: 40px;
                            height: 40px;
                            border-radius: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
                        }
                        .remove-btn:hover {
                            transform: scale(1.1);
                            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
                        }
                        .price-display {
                            font-size: 18px;
                            font-weight: 700;
                            color: #667eea;
                        }
                        .total-price-display {
                            font-size: 20px;
                            font-weight: 700;
                            color: #667eea;
                        }
                        .cart-actions {
                            display: flex;
                            gap: 15px;
                            margin-top: 30px;
                        }
                        .btn-continue-shopping {
                            background: white;
                            color: #667eea;
                            border: 2px solid #667eea;
                            padding: 12px 30px;
                            border-radius: 10px;
                            font-weight: 600;
                            text-decoration: none;
                            transition: all 0.3s ease;
                            display: inline-flex;
                            align-items: center;
                            gap: 8px;
                        }
                        .btn-continue-shopping:hover {
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                            color: white;
                            transform: translateY(-2px);
                            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
                        }
                        .btn-clear-cart {
                            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
                            color: white;
                            border: none;
                            padding: 12px 30px;
                            border-radius: 10px;
                            font-weight: 600;
                            transition: all 0.3s ease;
                            display: inline-flex;
                            align-items: center;
                            gap: 8px;
                            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
                        }
                        .btn-clear-cart:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
                        }
                    </style>

                    <h3 class="mb-4" style="font-weight: 700; color: #2c3e50;">Shopping Cart ({{ $cartItems->count() }} {{ Str::plural('item', $cartItems->count()) }})</h3>

                    @foreach($cartItems as $item)
                    <div class="cart-item-card">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="{{ $item->book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                         alt="{{ $item->book->title }}" 
                                         class="cart-item-image">
                                    <div>
                                        <h6 class="cart-item-title">
                                            <a href="{{ route('books.show', $item->book->slug) }}">
                                                {{ $item->book->title }}
                                            </a>
                                        </h6>
                                        <p class="cart-item-author mb-0">by {{ $item->book->author }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 text-center">
                                <div class="price-display">₹{{ number_format($item->price, 2) }}</div>
                                <small class="text-muted">per item</small>
                            </div>
                            <div class="col-md-3">
                                <div class="quantity-controls justify-content-center">
                                    <button class="quantity-btn" onclick="updateCart({{ $item->book_id }}, {{ $item->quantity - 1 }})">-</button>
                                    <input type="number" class="quantity-input" 
                                           value="{{ $item->quantity }}" min="1" max="10" 
                                           onchange="updateCart({{ $item->book_id }}, this.value)">
                                    <button class="quantity-btn" onclick="updateCart({{ $item->book_id }}, {{ $item->quantity + 1 }})">+</button>
                                </div>
                            </div>
                            <div class="col-md-2 text-center">
                                <div class="total-price-display">₹{{ number_format($item->price * $item->quantity, 2) }}</div>
                            </div>
                            <div class="col-md-1 text-center">
                                <button class="remove-btn" onclick="removeFromCart({{ $item->book_id }})" title="Remove item">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    <!-- Cart Actions -->
                    <div class="cart-actions">
                        <a href="{{ route('books.index') }}" class="btn-continue-shopping">
                            <i class="fas fa-arrow-left"></i> Continue Shopping
                        </a>
                        <button class="btn-clear-cart" onclick="clearCart()">
                            <i class="fas fa-trash"></i> Clear Cart
                        </button>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Order Summary -->
                    <div class="card border-0 shadow-lg" style="border-radius: 15px; margin-top: 30px; position: sticky; top: 20px;">
                        <div class="card-header bg-transparent border-0 pb-0" style="padding: 25px 25px 0;">
                            <h4 class="card-title mb-0" style="font-weight: 700; color: #2c3e50;">
                                <i class="fas fa-receipt me-2" style="color: #667eea;"></i>Order Summary
                            </h4>
                        </div>
                        <div class="card-body" style="padding: 25px;">
                            <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid #e9ecef;">
                                <span style="color: #6c757d; font-weight: 500;">Subtotal:</span>
                                <span class="fw-bold" style="color: #2c3e50; font-size: 16px;">₹{{ number_format($total, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid #e9ecef;">
                                <span style="color: #6c757d; font-weight: 500;">Tax (8%):</span>
                                <span class="fw-bold" style="color: #2c3e50; font-size: 16px;">₹{{ number_format($total * 0.08, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-4">
                                <span style="color: #6c757d; font-weight: 500;">Shipping:</span>
                                <span class="fw-bold text-success" style="font-size: 16px;">
                                    <i class="fas fa-check-circle me-1"></i>FREE
                                </span>
                            </div>
                            <hr style="margin: 20px 0;">
                            <div class="d-flex justify-content-between mb-4">
                                <span class="h5 mb-0" style="font-weight: 700; color: #2c3e50;">Total:</span>
                                <span class="h4 mb-0 fw-bold" style="color: #667eea;">₹{{ number_format($total * 1.08, 2) }}</span>
                            </div>
                            <a href="{{ route('checkout.index') }}" class="btn w-100" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px; border-radius: 10px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
                                <i class="fas fa-credit-card me-2"></i> Proceed to Checkout
                            </a>
                            <div class="mt-3 text-center">
                                <small class="text-muted">
                                    <i class="fas fa-lock me-1"></i>Secure checkout with Razorpay
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @else
            <!-- Empty Cart -->
            <div class="row">
                <div class="col-12">
                    <div class="text-center py-5" style="margin-top: 50px;">
                        <div style="width: 150px; height: 150px; margin: 0 auto 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);">
                            <i class="fas fa-shopping-cart fa-4x text-white"></i>
                        </div>
                        <h3 style="font-weight: 700; color: #2c3e50; margin-bottom: 15px;">Your cart is empty</h3>
                        <p class="text-muted mb-4" style="font-size: 16px;">Looks like you haven't added any books to your cart yet.</p>
                        <a href="{{ route('books.index') }}" class="btn" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 40px; border-radius: 10px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
                            <i class="fas fa-book me-2"></i> Browse Books
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </section>
    <!-- Cart content END -->
</div>

@include('layouts.web.footer')

<script>
function updateCart(bookId, quantity) {
    if (quantity < 1) {
        removeFromCart(bookId);
        return;
    }
    
    fetch('{{ route("cart.update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            book_id: bookId,
            quantity: quantity
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showNotification('Error updating cart', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error updating cart', 'error');
    });
}

function removeFromCart(bookId) {
    if (confirm('Are you sure you want to remove this item from your cart?')) {
        fetch('{{ route("cart.remove") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                book_id: bookId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                showNotification('Error removing item from cart', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error removing item from cart', 'error');
        });
    }
}

function clearCart() {
    if (confirm('Are you sure you want to clear your entire cart?')) {
        fetch('{{ route("cart.clear") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                showNotification('Error clearing cart', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error clearing cart', 'error');
        });
    }
}

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'success' ? '#28a745' : '#dc3545'};
        color: white;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 9999;
        font-weight: 500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}
</script>
@endsection