{% extends 'base.html.twig' %}

{% block title %}Mon panier - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .cart-container {
            min-height: 400px;
        }
        
        .cart-item {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            background: white;
            transition: all 0.3s ease;
        }
        
        .cart-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .cart-item-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 0.375rem;
        }
        
        .cart-summary {
            background: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1.5rem;
            position: sticky;
            top: 20px;
        }
        
        .cart-summary .total-amount {
            font-size: 1.5rem;
            font-weight: bold;
            color: #0d6efd;
        }
        
        .empty-cart {
            text-align: center;
            padding: 3rem 1rem;
        }
        
        .empty-cart i {
            font-size: 4rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }
        
        .cart-validation-error {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            border-radius: 0.375rem;
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
        }
        
        .seller-info {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .btn-remove {
            color: #dc3545;
            border-color: #dc3545;
        }
        
        .btn-remove:hover {
            background-color: #dc3545;
            color: white;
        }
        
        @media (max-width: 768px) {
            .cart-item-image {
                width: 80px;
                height: 80px;
            }
            
            .cart-summary {
                position: static;
                margin-top: 2rem;
            }
        }
    </style>
{% endblock %}

{% block body %}
<div class="container py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item active" aria-current="page">Mon panier</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2">
            <i class="fas fa-shopping-cart me-2"></i>
            Mon panier
            {% if cart and not cart.isEmpty %}
                <span class="badge bg-primary">{{ cart.items|length }}</span>
            {% endif %}
        </h1>
        
        {% if cart and not cart.isEmpty %}
            <button type="button" class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#clearCartModal">
                <i class="fas fa-trash me-1"></i>
                Vider le panier
            </button>
        {% endif %}
    </div>
    
    <!-- Messages d'erreur de validation -->
    {% if validationErrors is not empty %}
        <div class="alert alert-warning" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>Attention !</strong> Votre panier contient des erreurs :
            <ul class="mb-0 mt-2">
                {% for error in validationErrors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    
    <div class="cart-container">
        {% if cart and not cart.isEmpty %}
            <div class="row">
                <div class="col-lg-8">
                    <!-- Informations vendeur -->
                    <div class="seller-info">
                        <h6 class="mb-1">
                            <i class="fas fa-store me-2"></i>
                            Vendeur : {{ cart.seller.company|default(cart.seller.firstName ~ ' ' ~ cart.seller.lastName) }}
                        </h6>
                        <small class="text-muted">
                            Tous les articles de votre panier proviennent de ce vendeur
                        </small>
                    </div>
                    
                    <!-- Liste des articles -->
                    <div class="cart-items" id="cart-items">
                        {% for cartItem in cart.items %}
                            {{ include('cart/_cart_item.html.twig', {cartItem: cartItem}) }}
                        {% endfor %}
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Récapitulatif -->
                    <div class="cart-summary" id="cart-summary">
                        {{ include('cart/_cart_summary.html.twig', {cart: cart}) }}
                    </div>
                </div>
            </div>
        {% else %}
            {{ include('cart/_empty_cart.html.twig') }}
        {% endif %}
    </div>
</div>

<!-- Modal de confirmation pour vider le panier -->
{% if cart and not cart.isEmpty %}
    <div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clearCartModalLabel">Vider le panier</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir vider votre panier ? Cette action est irréversible.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <form method="post" action="{{ path('cart_clear') }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('clear_cart') }}">
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i>
                            Vider le panier
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialiser le gestionnaire de panier
            new CartManager();
            
            // Gestion du formulaire de vidage
            const clearCartModal = document.getElementById('clearCartModal');
            if (clearCartModal) {
                const clearForm = clearCartModal.querySelector('form');
                if (clearForm) {
                    clearForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        
                        fetch(this.action, {
                            method: 'POST',
                            body: new FormData(this),
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            } else {
                                alert(data.message || 'Une erreur est survenue');
                            }
                        })
                        .catch(error => {
                            console.error('Erreur:', error);
                            alert('Une erreur est survenue');
                        });
                        
                        // Fermer le modal
                        bootstrap.Modal.getInstance(clearCartModal).hide();
                    });
                }
            }
        });
    </script>
{% endblock %}