{% extends 'base/base.html' %}
{% load static %}

{% block title %}Shopping Cart - PRACA Equipment Rental{% endblock %}

{% block extra_css %}
<style>
    .cart-item-actions {
        white-space: nowrap;
    }
    .quantity-input {
        width: 70px;
        display: inline-block;
    }
    .updating {
        opacity: 0.6;
        pointer-events: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">Your Shopping Cart</h1>
            
            <div id="empty-cart-message" class="alert alert-info" {% if items %}style="display: none;"{% endif %}>
                <p class="mb-0">Your cart is empty.</p>
            </div>
            
            <div id="cart-actions" {% if not items %}style="display: none;"{% endif %}>
                <div class="d-flex justify-content-between mb-4">
                    <a href="{% url 'equipment:list' %}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left me-2"></i> Continue Shopping
                    </a>
                    <button id="update-cart" class="btn btn-outline-secondary" style="display: none;">
                        <i class="fas fa-sync-alt me-2"></i> Update Cart
                    </button>
                </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Item</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="cart-items">
                        {% for item in items %}
                            <tr id="item-{{ item.id }}" class="cart-item">
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if item.equipment.images.first %}
                                            <img src="{{ item.equipment.images.first.image.url }}" 
                                                 alt="{{ item.equipment.name }}" 
                                                 class="img-thumbnail me-3" 
                                                 style="width: 80px; height: 60px; object-fit: cover;">
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-1">
                                                <a href="{{ item.equipment.get_absolute_url }}" class="text-decoration-none">
                                                    {{ item.equipment.name }}
                                                </a>
                                            </h6>
                                            {% if item.start_date and item.end_date %}
                                                <p class="text-muted small mb-0">
                                                    {{ item.start_date|date:"M j, Y" }} - {{ item.end_date|date:"M j, Y" }}
                                                        ({{ item.total_days }} day{{ item.total_days|pluralize }})
                                                    </p>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>KSh {{ item.daily_rate|floatformat:2 }}<small class="text-muted">/day</small></td>
                                    <td>
                                        <input type="number" class="form-control quantity-input" value="{{ item.quantity }}" data-item-id="{{ item.id }}">
                                    </td>
                                    <td class="align-middle item-total">KSh <span class="item-total-amount">{{ item.total_price|floatformat:2 }}</span></td>
                                    <td class="text-end align-middle cart-item-actions">
                                        <button type="button" 
                                                class="btn btn-sm btn-outline-danger remove-item" 
                                                data-item-id="{{ item.id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-end fw-bold">Subtotal:</td>
                                <td colspan="2" id="cart-subtotal">KSh {{ cart.total|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-end">
                                    <button type="button" id="clear-cart" class="btn btn-outline-danger me-2">
                                        <i class="fas fa-trash me-1"></i> Clear Cart
                                    </button>
                                    <a href="{% url 'bookings:cart_checkout' %}" class="btn btn-primary">
                                        <i class="fas fa-credit-card me-1"></i> Proceed to Checkout
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Need Help?</h5>
                                <p class="card-text">
                                    Our team is here to help with any questions about your rental.
                                    <a href="{% url 'contact:contact' %}">Contact us</a> for assistance.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Ready to Book?</h5>
                                <p class="card-text">
                                    Proceed to checkout to complete your booking and secure your equipment.
                                </p>
                                <a href="{% url 'bookings:cart_checkout' %}" class="btn btn-primary w-100">
                                    <i class="fas fa-credit-card me-2"></i> Proceed to Checkout
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // CSRF token for AJAX requests
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    // Get cart update URL template
    const cartUpdateUrl = '{% url "bookings:cart_update" 0 %}'.replace('0', '');
    const cartRemoveUrl = '{% url "bookings:cart_remove" 0 %}'.replace('0', '');
    const cartClearUrl = '{% url "bookings:cart_clear" %}';
    
    // Update cart item quantity
    function updateCartItem(itemId) {
        const quantityInput = document.querySelector(`input[data-item-id="${itemId}"]`);
        const quantity = parseInt(quantityInput.value);
        
        if (isNaN(quantity) || quantity < 1) {
            quantityInput.value = 1;
            return;
        }
        
        // Show updating state
        const row = document.getElementById(`item-${itemId}`);
        if (!row) return;
        
        row.classList.add('updating');
        
        // Send AJAX request to update cart
        fetch(`${cartUpdateUrl}${itemId}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': csrfToken
            },
            body: `quantity=${quantity}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update the item total
                const itemTotal = row.querySelector('.item-total-amount');
                if (itemTotal) {
                    itemTotal.textContent = data.item_total;
                }
                
                // Update cart totals
                updateCartTotals(data.cart_count, data.cart_total);
            } else {
                // Show error message
                alert(data.error || 'Failed to update cart item');
                // Reset input value
                quantityInput.value = quantityInput.getAttribute('value');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the cart');
            quantityInput.value = quantityInput.getAttribute('value');
        })
        .finally(() => {
            row.classList.remove('updating');
        });
    }
    
    // Update cart totals in the UI
    function updateCartTotals(count, total) {
        // Update cart count in header
        const cartCountElements = document.querySelectorAll('.cart-count');
        cartCountElements.forEach(el => {
            el.textContent = count;
        });
        
        // Update cart subtotal
        const subtotalElement = document.getElementById('cart-subtotal');
        if (subtotalElement) {
            subtotalElement.textContent = `KSh ${parseFloat(total).toFixed(2)}`;
        }
    }
    
    // Initialize event listeners when the DOM is fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Quantity input change handlers
        document.querySelectorAll('.quantity-input').forEach(input => {
            input.addEventListener('change', function() {
                const itemId = this.dataset.itemId;
                if (itemId) {
                    updateCartItem(itemId);
                }
            });
        });
        
        // Remove item handlers
        document.querySelectorAll('.remove-item').forEach(button => {
            button.addEventListener('click', function() {
                const itemId = this.dataset.itemId;
                if (itemId && confirm('Are you sure you want to remove this item?')) {
                    const row = document.getElementById(`item-${itemId}`);
                    if (row) row.classList.add('updating');
                    
                    fetch(`${cartRemoveUrl}${itemId}/`, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRFToken': csrfToken
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Remove the row
                            if (row) row.remove();
                            
                            // Update cart totals
                            updateCartTotals(data.cart_count, data.cart_total);
                            
                            // Show empty cart message if needed
                            if (data.cart_count === 0) {
                                document.getElementById('empty-cart-message').style.display = 'block';
                                document.getElementById('cart-actions').style.display = 'none';
                                document.querySelector('.table-responsive').style.display = 'none';
                            }
                        } else {
                            alert(data.error || 'Failed to remove item');
                            if (row) row.classList.remove('updating');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while removing the item');
                        if (row) row.classList.remove('updating');
                    });
                }
            });
        });
        
        // Clear cart handler
        const clearCartBtn = document.getElementById('clear-cart');
        if (clearCartBtn) {
            clearCartBtn.addEventListener('click', function() {
                if (confirm('Are you sure you want to clear your cart?')) {
                    document.querySelectorAll('.cart-item').forEach(row => {
                        row.classList.add('updating');
                    });
                    
                    fetch(cartClearUrl, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRFToken': csrfToken
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Clear the cart items
                            const tbody = document.querySelector('tbody');
                            if (tbody) tbody.innerHTML = '';
                            
                            // Update cart totals
                            updateCartTotals(0, 0);
                            
                            // Show empty cart message
                            document.getElementById('empty-cart-message').style.display = 'block';
                            document.getElementById('cart-actions').style.display = 'none';
                            document.querySelector('.table-responsive').style.display = 'none';
                        } else {
                            alert(data.error || 'Failed to clear cart');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while clearing the cart');
                    })
                    .finally(() => {
                        document.querySelectorAll('.cart-item').forEach(row => {
                            row.classList.remove('updating');
                        });
                    });
                }
            });
        }
        
        // Date picker initialization
        const startDateInput = document.querySelector('input[name="start_date"]');
        const endDateInput = document.querySelector('input[name="end_date"]');
        
        if (startDateInput && endDateInput) {
            startDateInput.addEventListener('change', function() {
                endDateInput.min = this.value;
                if (endDateInput.value && endDateInput.value < this.value) {
                    endDateInput.value = this.value;
                }
            });
        }
        
        // Initialize tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}