@extends('layouts.app')

@section('styles')
<style>
    .cart-container {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-height: 80vh;
    }
    
    .cart-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .cart-item {
        background: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border-left: 4px solid #ff6b9d;
    }
    
    .cart-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(233, 30, 99, 0.15);
    }
    
    .product-image {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .remove-btn {
        background: linear-gradient(45deg, #dc3545, #c82333);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .remove-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }
    
    .price-tag {
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 16px;
    }
    
    .total-section {
        background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f8b500 100%);
        color: white;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 15px 35px rgba(233, 30, 99, 0.3);
    }
    
    .share-btn {
        background: white;
        color: #ff6b9d;
        border: none;
        border-radius: 50px;
        padding: 15px 40px;
        font-weight: 700;
        font-size: 18px;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .share-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.2);
        color: #c44569;
    }
    
    .empty-cart {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .continue-shopping-btn {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 30px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }
    
    .continue-shopping-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(233, 30, 99, 0.3);
        color: white;
    }
    
    .currency-symbol {
        font-weight: 700;
        color: #28a745;
    }
    
    .floating-hearts {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
    }
    
    .floating-heart {
        position: absolute;
        color: rgba(255, 107, 157, 0.2);
        animation: float-up 8s infinite linear;
        font-size: 20px;
    }
    
    @keyframes float-up {
        0% {
            opacity: 1;
            transform: translateY(100vh) rotate(0deg);
        }
        100% {
            opacity: 0;
            transform: translateY(-100px) rotate(360deg);
        }
    }

    /* Share Modal Styles */
    .share-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    
    .share-modal-content {
        background: white;
        border-radius: 20px;
        padding: 30px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        position: relative;
    }
    
    .close-modal {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
        color: #888;
    }
    
    .share-link-input {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        font-size: 16px;
        margin: 15px 0;
    }
    
    .copy-btn {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 25px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .copy-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
    }
    
    .social-share-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: center;
    }
    
    .social-share-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        transition: all 0.3s ease;
    }
    
    .social-share-btn:hover {
        transform: scale(1.1);
    }
    
    .whatsapp-btn {
        background-color: #25D366;
    }
    
    .facebook-btn {
        background-color: #3b5998;
    }
    
    .twitter-btn {
        background-color: #1DA1F2;
    }

    /* Quantity Controls */
    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 10px;
    }
    
    .quantity-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .quantity-btn:hover {
        background: #e9ecef;
    }
    
    .quantity-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .quantity-input {
        width: 50px;
        text-align: center;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 5px;
        font-weight: 600;
    }

    /* Loading Spinner */
    .btn-spinner {
        display: none;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
@endsection

@section('content')
<!-- Floating Hearts Background -->
<div class="floating-hearts">
    <i class="floating-heart fas fa-heart" style="left: 10%; animation-delay: 0s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 20%; animation-delay: 2s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 30%; animation-delay: 4s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 40%; animation-delay: 1s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 50%; animation-delay: 3s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 60%; animation-delay: 5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 70%; animation-delay: 1.5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 80%; animation-delay: 3.5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 90%; animation-delay: 2.5s;"></i>
</div>

<!-- Share Modal -->
<div class="share-modal" id="shareModal">
    <div class="share-modal-content animate__animated animate__fadeInDown">
        <span class="close-modal" onclick="closeShareModal()">&times;</span>
        <h3 class="text-xl font-bold text-gray-800 mb-2">
            <i class="fas fa-share-alt text-pink-500 mr-2"></i>Share Your Cart
        </h3>
        <p class="text-gray-600">Share this link with others to show them your selected items:</p>
        
        <div class="flex items-center mt-4">
            <input type="text" id="shareLinkInput" class="share-link-input" readonly>
            <button class="copy-btn ml-2" onclick="copyShareLink()">
                <i class="fas fa-copy mr-2"></i>Copy
            </button>
        </div>
        
        <p class="text-sm text-gray-500 mt-2">This link will expire in 7 days</p>
        
        <div class="social-share-buttons">
            <a href="#" id="whatsappShare" class="social-share-btn whatsapp-btn" target="_blank">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="#" id="facebookShare" class="social-share-btn facebook-btn" target="_blank">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" id="twitterShare" class="social-share-btn twitter-btn" target="_blank">
                <i class="fab fa-twitter"></i>
            </a>
        </div>
    </div>
</div>

<div class="cart-container py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-6 animate__animated animate__fadeInLeft">
          
        </div>

        <!-- Page Title -->
        <div class="text-center mb-8 animate__animated animate__fadeInDown">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">
                <i class="fas fa-shopping-cart text-pink-500 mr-3"></i>
                @if(isset($isSharedCart) && $isSharedCart)
                    Shared Shopping Cart
                @else
                    Your Shopping Cart
                @endif
            </h1>
            <p class="text-gray-600 text-lg">
                @if(isset($isSharedCart) && $isSharedCart)
                    Someone shared these items with you
                @else
                    Review your selected items
                @endif
            </p>
        </div>

        @if(count($cartItems) > 0)
        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Cart Items -->
            <div class="lg:col-span-2">
                <div class="cart-card p-6 animate__animated animate__fadeInLeft">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">
                        <i class="fas fa-list text-pink-500 mr-2"></i>Cart Items ({{ count($cartItems) }})
                    </h2>
                    
                    @foreach($cartItems as $item)
                    <div class="cart-item animate__animated animate__fadeInUp" style="animation-delay: {{ $loop->index * 0.1 }}s" id="cart-item-{{ $item['id'] }}">
                        <div class="flex flex-col md:flex-row items-start md:items-center gap-4">
                            <!-- Product Image -->
                            <div class="product-image flex-shrink-0">
                                <img src="{{ $item['image'] ? asset('storage/' . $item['image']) : asset('images/placeholder.jpg') }}" 
                                     alt="{{ $item['name'] }}" 
                                     class="w-20 h-20 md:w-24 md:h-24 object-cover">
                            </div>
                            
                            <!-- Product Details -->
                            <div class="flex-grow">
                                <h3 class="text-lg font-bold text-gray-800 mb-1">{{ $item['name'] }}</h3>
                                <div class="flex items-center gap-2">
                                    <span class="price-tag">
                                        <span class="currency-symbol">PKR</span> {{ number_format($item['price'], 0) }}
                                    </span>
                                    @if(isset($item['sale_price']) && ($item['sale_price'] < $item['original_price']))
                                        <span class="text-sm text-gray-500 line-through">
                                            PKR {{ number_format($item['original_price'], 0) }}
                                        </span>
                                    @endif
                                </div>
                                
                                <!-- Quantity Controls -->
                                <div class="mt-2 quantity-controls">
                                    <button class="quantity-btn decrease-btn" data-id="{{ $item['id'] }}" 
                                        @if($item['quantity'] <= 1) disabled @endif>
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    
                                    <input type="number" class="quantity-input" value="{{ $item['quantity'] }}" 
                                        min="1" max="{{ $item['stock'] }}" 
                                        data-id="{{ $item['id'] }}" 
                                        data-price="{{ $item['price'] }}">
                                    
                                    <button class="quantity-btn increase-btn" data-id="{{ $item['id'] }}" 
                                        @if($item['quantity'] >= $item['stock']) disabled @endif>
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Remove Button -->
                            @if(!isset($isSharedCart) || !$isSharedCart)
                            <button type="button" class="remove-btn remove-item-btn" data-id="{{ $item['id'] }}" title="Remove Item">
                                <i class="fas fa-times"></i>
                            </button>
                            @endif
                            
                            <!-- Item Total -->
                            <div class="text-right">
                                <div class="text-lg font-bold text-gray-800 item-total" id="item-total-{{ $item['id'] }}">
                                    <span class="currency-symbol">PKR</span> {{ number_format($item['price'] * $item['quantity'], 0) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Order Summary -->
            <div class="lg:col-span-1">
                <div class="total-section animate__animated animate__fadeInRight">
                    <h2 class="text-2xl font-bold mb-6">
                        <i class="fas fa-calculator mr-2"></i>Order Summary
                    </h2>
                    
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between items-center text-lg">
                            <span>Subtotal:</span>
                            <span class="font-bold" id="cart-subtotal">
                                <span class="currency-symbol">PKR</span> {{ number_format($total, 0) }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center text-lg">
                            <span>Shipping:</span>
                            <span class="font-bold text-green-300">FREE</span>
                        </div>
                        <hr class="border-white border-opacity-30">
                        <div class="flex justify-between items-center text-xl font-bold">
                            <span>Total:</span>
                            <span id="cart-total">
                                <span class="currency-symbol">PKR</span> {{ number_format($total, 0) }}
                            </span>
                        </div>
                    </div>
                    
               
                    
                    @if(!isset($isSharedCart) || !$isSharedCart)
                    <button class="share-btn w-full mb-4" id="shareCartBtn">
                        <i class="fas fa-share-alt mr-2"></i>Share Cart
                    </button>
                    
                    <div class="text-center text-white text-opacity-80">
                        <i class="fas fa-info-circle mr-1"></i>
                        Share your cart with friends and family
                    </div>
                    @else
                    <a href="{{ route('cart.index') }}" class="share-btn w-full mb-4" style="text-decoration: none;">
                        <i class="fas fa-shopping-cart mr-2"></i>View My Cart
                    </a>
                    @endif
                </div>
            </div>
        </div>
        @else
        <!-- Empty Cart -->
        <div class="empty-cart animate__animated animate__fadeInUp">
            <div class="text-6xl text-gray-300 mb-6">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-800 mb-4">Your cart is empty</h2>
            <p class="text-gray-600 text-lg mb-8">Looks like you haven't added any items to your cart yet.</p>
            <a href="{{ route('products') }}" class="continue-shopping-btn">
                <i class="fas fa-heart mr-2"></i>Start Shopping
            </a>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // CSRF Token setup for AJAX
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Remove item when clicking remove button
    $(document).on('click', '.remove-item-btn', function(e) {
        e.preventDefault();
        const itemId = $(this).data('id');
        const $button = $(this);
        
        if (confirm('Are you sure you want to remove this item from your cart?')) {
            $button.html('<i class="fas fa-spinner fa-spin"></i>');
            $button.prop('disabled', true);
            
            $.ajax({
                url: "{{ route('cart.destroy', '') }}/" + itemId,
                method: 'DELETE',
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: 'DELETE'
                },
                success: function(response) {
                    if (response.success) {
                        $('#cart-item-' + itemId).fadeOut(300, function() {
                            $(this).remove();
                            if ($('.cart-item').length === 0) {
                                location.reload();
                            }
                        });
                        
                        // Update the cart totals
                        $('#cart-subtotal, #cart-total').html(
                            `<span class="currency-symbol">PKR</span> ${response.cart_total.toLocaleString()}`
                        );
                        
                        // Update cart count in navbar
                        updateCartCount(response.cart_count);
                        
                        showNotification('Item removed from cart', 'success');
                    } else {
                        showNotification(response.message || 'Error removing item', 'error');
                        $button.html('<i class="fas fa-times"></i>');
                        $button.prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    showNotification(xhr.responseJSON?.message || 'Error removing item', 'error');
                    $button.html('<i class="fas fa-times"></i>');
                    $button.prop('disabled', false);
                }
            });
        }
    });

    // Quantity decrease button
    $(document).on('click', '.decrease-btn', function(e) {
        e.preventDefault();
        const itemId = $(this).data('id');
        const $input = $(`.quantity-input[data-id="${itemId}"]`);
        let newQuantity = parseInt($input.val()) - 1;
        
        if (newQuantity >= 1) {
            $input.val(newQuantity);
            updateCartItem(itemId, newQuantity);
        }
    });
    
    // Quantity increase button
    $(document).on('click', '.increase-btn', function(e) {
        e.preventDefault();
        const itemId = $(this).data('id');
        const $input = $(`.quantity-input[data-id="${itemId}"]`);
        const maxStock = parseInt($input.attr('max'));
        let newQuantity = parseInt($input.val()) + 1;
        
        if (newQuantity <= maxStock) {
            $input.val(newQuantity);
            updateCartItem(itemId, newQuantity);
        }
    });
    
    // Quantity input change
    $(document).on('change', '.quantity-input', function() {
        const itemId = $(this).data('id');
        const newQuantity = parseInt($(this).val());
        const maxStock = parseInt($(this).attr('max'));
        
        if (newQuantity < 1) {
            $(this).val(1);
            updateCartItem(itemId, 1);
        } else if (newQuantity > maxStock) {
            $(this).val(maxStock);
            updateCartItem(itemId, maxStock);
        } else {
            updateCartItem(itemId, newQuantity);
        }
    });
    
    // Function to update cart item quantity via AJAX
    function updateCartItem(itemId, quantity) {
        const $input = $(`.quantity-input[data-id="${itemId}"]`);
        const $decreaseBtn = $(`.decrease-btn[data-id="${itemId}"]`);
        const $increaseBtn = $(`.increase-btn[data-id="${itemId}"]`);
        
        // Disable controls during update
        $input.prop('disabled', true);
        $decreaseBtn.prop('disabled', true);
        $increaseBtn.prop('disabled', true);
        
        $.ajax({
            url: "{{ route('cart.update', '') }}/" + itemId,
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                _method: 'PUT',
                quantity: quantity
            },
            success: function(response) {
                if (response.success) {
                    // Update item total
                    const itemTotal = (response.quantity * $input.data('price')).toLocaleString();
                    $(`#item-total-${itemId}`).html(
                        `<span class="currency-symbol">PKR</span> ${itemTotal}`
                    );
                    
                    // Update cart totals
                    $('#cart-subtotal, #cart-total').html(
                        `<span class="currency-symbol">PKR</span> ${response.cart_total.toLocaleString()}`
                    );
                    
                    // Update cart count in navbar
                    updateCartCount(response.cart_count);
                    
                    // Enable/disable buttons based on new quantity
                    $decreaseBtn.prop('disabled', response.quantity <= 1);
                    $increaseBtn.prop('disabled', response.quantity >= response.max_stock);
                    
                    // Update max value in case stock changed
                    $input.attr('max', response.max_stock);
                } else {
                    showNotification(response.message || 'Error updating quantity', 'error');
                    // Reset to previous value
                    $input.val($input.data('prev-value'));
                }
            },
            error: function(xhr) {
                showNotification(xhr.responseJSON?.message || 'Error updating quantity', 'error');
                // Reset to previous value
                $input.val($input.data('prev-value'));
            },
            complete: function() {
                $input.prop('disabled', false);
                $decreaseBtn.prop('disabled', false);
                $increaseBtn.prop('disabled', false);
            }
        });
    }
    
    // Store previous value for quantity inputs
    $(document).on('focus', '.quantity-input', function() {
        $(this).data('prev-value', $(this).val());
    });

    // Share Cart Button Click
    $(document).on('click', '#shareCartBtn', function() {
        const $button = $(this);
        $button.html('<i class="fas fa-spinner fa-spin mr-2"></i>Generating Link...');
        $button.prop('disabled', true);
        
        $.ajax({
            url: "{{ route('cart.share') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    // Set the share link in the input
                    $('#shareLinkInput').val(response.share_url);
                    
                    // Set up social share links
                    const shareMessage = `Check out my shopping cart! ${response.share_url}`;
                    $('#whatsappShare').attr('href', `https://wa.me/?text=${encodeURIComponent(shareMessage)}`);
                    $('#facebookShare').attr('href', `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(response.share_url)}`);
                    $('#twitterShare').attr('href', `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareMessage)}`);
                    
                    // Show the modal
                    $('#shareModal').css('display', 'flex');
                } else {
                    showNotification(response.message || 'Error sharing cart', 'error');
                }
            },
            error: function(xhr) {
                showNotification(xhr.responseJSON?.message || 'Error sharing cart', 'error');
            },
            complete: function() {
                $button.html('<i class="fas fa-share-alt mr-2"></i>Share Cart');
                $button.prop('disabled', false);
            }
        });
    });

    // Close share modal
    window.closeShareModal = function() {
        $('#shareModal').hide();
    }

    // Copy share link
    window.copyShareLink = function() {
        const shareInput = document.getElementById('shareLinkInput');
        shareInput.select();
        shareInput.setSelectionRange(0, 99999);
        document.execCommand('copy');
        
        showNotification('Link copied to clipboard!', 'success');
    }

    // Close modal when clicking outside
    $(document).on('click', function(e) {
        if ($(e.target).hasClass('share-modal')) {
            closeShareModal();
        }
    });

    // Function to update cart count in navbar
    function updateCartCount(count) {
        // Update desktop cart count
        $('#cart-count-desktop').text(count);
        // Update mobile cart count
        $('#cart-count-mobile').text(count);
        
        // Show/hide cart count based on value
        if (count > 0) {
            $('#cart-count-desktop, #cart-count-mobile').show();
        } else {
            $('#cart-count-desktop, #cart-count-mobile').hide();
        }
    }

    // Notification system
    function showNotification(message, type) {
        const notification = $(`<div class="fixed top-4 right-4 z-50 p-4 rounded-lg text-white font-semibold shadow-lg ${
            type === 'success' ? 'bg-green-500' : 'bg-red-500'
        }">${message}</div>`);
        
        $('body').append(notification);
        
        setTimeout(() => {
            notification.fadeOut(500, function() {
                $(this).remove();
            });
        }, 3000);
    }
});
</script>
@endsection