{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Choix de la livraison - {{ site.name }}{% endblock %}

{% block body %}
<div class="shipping-page">
    <div class="container">
        <div class="shipping-header">
            <h1><i class="fas fa-truck"></i> Mode de livraison</h1>
            <div class="checkout-steps">
                <div class="step completed"><i class="fas fa-shopping-cart"></i> Panier</div>
                <div class="step completed"><i class="fas fa-user"></i> Informations</div>
                <div class="step active"><i class="fas fa-shipping-fast"></i> Livraison</div>
                <div class="step"><i class="fas fa-credit-card"></i> Paiement</div>
            </div>
        </div>

        <div class="shipping-content">
            <div class="shipping-form-section">
                <form id="shipping-form" method="POST">
                    <!-- Validation error message (hidden by default) -->
                    <div class="validation-error" id="validation-error">
                        <i class="fas fa-exclamation-circle"></i>
                        <span id="validation-error-text"></span>
                    </div>

                    <div class="form-section">
                        <h2><i class="fas fa-box"></i> Choisissez votre mode de livraison</h2>

                        {% if shippingMethods|length == 0 %}
                            {% if not hasConfiguredMethods %}
                                {# Case A: Merchant has not configured any shipping methods #}
                                <div class="shipping-unavailable">
                                    <div class="unavailable-icon">
                                        <i class="fas fa-truck-loading"></i>
                                    </div>
                                    <h3>Livraison non disponible</h3>
                                    <p>Le marchand n'a pas encore configuré de méthodes de livraison.</p>
                                    <p class="text-muted">Veuillez contacter le vendeur pour plus d'informations.</p>
                                </div>
                            {% else %}
                                {# Case B: No shipping methods available for customer's zone #}
                                <div class="shipping-unavailable warning">
                                    <div class="unavailable-icon warning">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <h3>Livraison non disponible dans votre zone</h3>
                                    <p>Malheureusement, nous ne livrons pas encore vers <strong>{{ order.shippingAddress.country }}</strong>.</p>
                                    <div class="unavailable-actions">
                                        <a href="{{ path('shop_checkout', {siteName: site.internalName}) }}" class="btn-modify">
                                            <i class="fas fa-edit"></i> Modifier mon adresse
                                        </a>
                                    </div>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="shipping-methods">
                                {% for method in shippingMethods %}
                                    <div class="shipping-method-card"
                                         data-method-id="{{ method.method.id }}"
                                         data-delivery-type="{{ method.method.deliveryType }}"
                                         data-price="{{ method.finalPrice }}">
                                        <div class="method-radio">
                                            <input type="radio"
                                                   name="shipping_method"
                                                   id="method_{{ method.method.id }}"
                                                   value="{{ method.method.id }}"
                                                   required>
                                        </div>

                                        <div class="method-logo">
                                            {% if method.method.carrier == 'colissimo' %}
                                                <img src="{{ asset('assets/img/shipping/colissimo.png') }}"
                                                     alt="Colissimo">
                                            {% elseif method.method.carrier == 'mondial_relay' %}
                                                <img src="{{ asset('assets/img/shipping/mondial-relay.png') }}"
                                                     alt="Mondial Relay">
                                            {% else %}
                                                <i class="fas fa-truck fa-2x text-muted"></i>
                                            {% endif %}
                                        </div>

                                        <div class="method-info">
                                            <h4 class="method-name">{{ method.method.name }}</h4>
                                            {% if method.method.description %}
                                                <p class="method-description">{{ method.method.description }}</p>
                                            {% endif %}
                                            {% if method.method.estimatedDelivery %}
                                                <span class="method-delivery-time">
                                                    <i class="fas fa-clock"></i> {{ method.method.estimatedDelivery }}
                                                </span>
                                            {% endif %}
                                            {% if method.method.deliveryType == 'pickup_point' %}
                                                <span class="badge bg-warning text-dark ms-2">
                                                    <i class="fas fa-map-marker-alt"></i> Point relais
                                                </span>
                                            {% endif %}
                                        </div>

                                        <div class="method-price">
                                            {% if method.isFreeShipping %}
                                                <span class="price-free">Gratuit</span>
                                                {% if method.calculatedPrice > 0 %}
                                                    <span class="price-original">{{ method.calculatedPrice|number_format(2, ',', ' ') }} €</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="price-amount">{{ method.finalPrice|number_format(2, ',', ' ') }} €</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <!-- Mondial Relay Picker (hidden by default) -->
                    <div class="form-section" id="pickup-point-section" style="display: none;">
                        <h2><i class="fas fa-map-marker-alt"></i> Sélectionnez votre point relais</h2>
                        {% include 'shop/_mondial_relay_picker.html.twig' with {
                            siteId: site.id,
                            initialPostalCode: order.shippingAddress.postal_code|default('')
                        } %}
                    </div>

                    <div class="form-actions">
                        <a href="{{ path('shop_checkout', {siteName: site.internalName}) }}" class="btn-back">
                            <i class="fas fa-arrow-left"></i> Retour
                        </a>
                        {% if shippingMethods|length > 0 %}
                            <button type="submit" class="btn-submit btn-continue disabled" id="btn-continue" disabled>
                                Continuer vers le paiement <i class="fas fa-arrow-right"></i>
                            </button>
                        {% else %}
                            <a href="{{ path('site_shop_cart', {siteName: site.internalName}) }}" class="btn-back-secondary">
                                <i class="fas fa-shopping-cart"></i> Retour au panier
                            </a>
                        {% endif %}
                    </div>
                </form>
            </div>

            <div class="shipping-summary">
                <h2>Récapitulatif</h2>
                <div class="summary-content">
                    <!-- Delivery address -->
                    <div class="summary-section">
                        <h5><i class="fas fa-map-marker-alt"></i> Adresse de livraison</h5>
                        <p class="summary-address">
                            {{ order.customerFirstName }} {{ order.customerLastName }}<br>
                            {{ order.shippingAddress.address }}<br>
                            {{ order.shippingAddress.postal_code }} {{ order.shippingAddress.city }}<br>
                            {{ order.shippingAddress.country }}
                        </p>
                    </div>

                    <!-- Order items -->
                    <div class="summary-section">
                        <h5><i class="fas fa-shopping-bag"></i> Articles</h5>
                        {% for item in order.items %}
                            <div class="summary-item">
                                <div class="summary-item-info">
                                    <span class="summary-item-name">{{ item.productName }}</span>
                                    <span class="summary-item-qty">x{{ item.quantity }}</span>
                                </div>
                                <span class="summary-item-price">{{ (item.quantity * item.unitPrice)|number_format(2, ',', ' ') }} €</span>
                            </div>
                        {% endfor %}
                    </div>

                    <!-- Totals -->
                    <div class="summary-totals">
                        <div class="summary-row">
                            <span>Sous-total</span>
                            <span>{{ cartTotal|number_format(2, ',', ' ') }} €</span>
                        </div>
                        <div class="summary-row" id="shipping-row">
                            <span>Livraison</span>
                            <span id="shipping-cost">
                                {% if shippingMethods|length > 0 %}
                                    <span class="text-muted">À sélectionner</span>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </span>
                        </div>
                        <div class="summary-row total">
                            <span>Total TTC</span>
                            <span id="total-amount">
                                {{ cartTotal|number_format(2, ',', ' ') }} €
                            </span>
                        </div>
                    </div>

                    {% if freeShippingMessage %}
                        <div class="free-shipping-message">
                            <i class="fas fa-gift"></i> {{ freeShippingMessage }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.shipping-page {
    min-height: 70vh;
    padding: 4rem 0;
    background: #f8f9fa;
}

.shipping-header {
    text-align: center;
    margin-bottom: 3rem;
}

.shipping-header h1 {
    font-size: 2.5rem;
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 2rem;
}

.shipping-header h1 i {
    color: var(--site-primary-color, #10b981);
    margin-right: 1rem;
}

.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #e2e8f0;
    border-radius: 50px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
}

.step.active {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.step.completed {
    background: #10b981;
    color: white;
}

.shipping-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.shipping-form-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-section {
    margin-bottom: 2rem;
}

.form-section h2 {
    font-size: 1.4rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-section h2 i {
    color: var(--site-primary-color, #10b981);
}

/* Shipping Methods Cards */
.shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shipping-method-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shipping-method-card:hover {
    border-color: var(--site-primary-color, #10b981);
    background: #f8fffe;
}

.shipping-method-card.selected {
    border-color: var(--site-primary-color, #10b981);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.method-radio {
    flex-shrink: 0;
}

.method-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--site-primary-color, #10b981);
}

.method-logo {
    flex-shrink: 0;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.method-info {
    flex: 1;
    min-width: 0;
}

.method-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.method-description {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 0.5rem 0;
}

.method-delivery-time {
    font-size: 0.85rem;
    color: #10b981;
}

.method-price {
    flex-shrink: 0;
    text-align: right;
}

.price-free {
    font-size: 1.2rem;
    font-weight: 700;
    color: #10b981;
}

.price-original {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.price-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.btn-back,
.btn-submit {
    flex: 1;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-back {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-back:hover {
    background: #cbd5e1;
}

.btn-submit {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.btn-submit:hover {
    background: var(--site-primary-color-dark, #059669);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-submit:disabled,
.btn-submit.disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* Shipping Unavailable States */
.shipping-unavailable {
    text-align: center;
    padding: 3rem 2rem;
    background: #f8f9fa;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.shipping-unavailable.warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.unavailable-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: #64748b;
}

.unavailable-icon.warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.shipping-unavailable h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.shipping-unavailable p {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.shipping-unavailable p.text-muted {
    font-size: 0.9rem;
}

.unavailable-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.btn-modify {
    background: var(--site-primary-color, #10b981);
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-modify:hover {
    background: var(--site-primary-color-dark, #059669);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-back-secondary {
    background: #e2e8f0;
    color: #475569;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
}

.btn-back-secondary:hover {
    background: #cbd5e1;
    color: #1e293b;
}

/* Validation error message */
.validation-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.validation-error.show {
    display: flex;
}

/* Summary */
.shipping-summary {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.shipping-summary h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
}

.summary-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.summary-section h5 {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-address {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.summary-item-info {
    display: flex;
    gap: 0.5rem;
}

.summary-item-name {
    font-weight: 500;
    color: #1e293b;
}

.summary-item-qty {
    color: #64748b;
}

.summary-item-price {
    font-weight: 600;
    color: #1e293b;
}

.summary-totals {
    margin-top: 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.summary-row.total {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e2e8f0;
}

.free-shipping-message {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #dcfce7;
    border-radius: 8px;
    color: #166534;
    font-size: 0.9rem;
    text-align: center;
}

/* Pickup Point Section */
#pickup-point-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .shipping-content {
        grid-template-columns: 1fr;
    }

    .shipping-summary {
        position: static;
    }

    .form-actions {
        flex-direction: column;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const methodCards = document.querySelectorAll('.shipping-method-card');
    const pickupSection = document.getElementById('pickup-point-section');
    const btnContinue = document.getElementById('btn-continue');
    const shippingCostEl = document.getElementById('shipping-cost');
    const totalAmountEl = document.getElementById('total-amount');
    const validationError = document.getElementById('validation-error');
    const validationErrorText = document.getElementById('validation-error-text');
    const cartTotal = {{ cartTotal }};

    let selectedPoint = null;

    // Helper function to show error
    function showError(message) {
        validationErrorText.textContent = message;
        validationError.classList.add('show');
        // Scroll to error
        validationError.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // Helper function to hide error
    function hideError() {
        validationError.classList.remove('show');
    }

    // Handle method selection
    methodCards.forEach(card => {
        card.addEventListener('click', function() {
            // Hide any previous error
            hideError();

            // Update visual selection
            methodCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');

            // Update radio button
            const radio = this.querySelector('input[type="radio"]');
            radio.checked = true;

            // Show/hide pickup point section
            const deliveryType = this.dataset.deliveryType;
            if (deliveryType === 'pickup_point') {
                pickupSection.style.display = 'block';
                // Reset selected point
                selectedPoint = null;
                document.getElementById('relay-point-id').value = '';
                document.getElementById('relay-point-data').value = '';
                updateButtonState();
            } else {
                pickupSection.style.display = 'none';
                selectedPoint = null;
                updateButtonState();
            }

            // Update price display
            updatePriceDisplay(this.dataset.price);
        });
    });

    // Listen for Mondial Relay selection
    document.addEventListener('mondialRelaySelected', function(e) {
        selectedPoint = e.detail;
        hideError();
        updateButtonState();
    });

    function updatePriceDisplay(shippingPrice) {
        const price = parseFloat(shippingPrice) || 0;

        if (price === 0) {
            shippingCostEl.innerHTML = '<span class="text-success">Gratuit</span>';
        } else {
            shippingCostEl.textContent = price.toFixed(2).replace('.', ',') + ' €';
        }

        const total = cartTotal + price;
        totalAmountEl.textContent = total.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' €';
    }

    function updateButtonState() {
        if (!btnContinue) return;

        const selectedCard = document.querySelector('.shipping-method-card.selected');
        if (!selectedCard) {
            btnContinue.disabled = true;
            btnContinue.classList.add('disabled');
            return;
        }

        const deliveryType = selectedCard.dataset.deliveryType;
        if (deliveryType === 'pickup_point' && !selectedPoint) {
            btnContinue.disabled = true;
            btnContinue.classList.add('disabled');
        } else {
            btnContinue.disabled = false;
            btnContinue.classList.remove('disabled');
        }
    }

    // Form validation
    const form = document.getElementById('shipping-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const selectedCard = document.querySelector('.shipping-method-card.selected');

            if (!selectedCard) {
                e.preventDefault();
                showError('Veuillez sélectionner un mode de livraison.');
                return;
            }

            const deliveryType = selectedCard.dataset.deliveryType;
            if (deliveryType === 'pickup_point') {
                const relayPointId = document.getElementById('relay-point-id').value;
                if (!relayPointId) {
                    e.preventDefault();
                    showError('Veuillez sélectionner un point relais sur la carte ci-dessous.');
                    // Scroll to pickup section
                    pickupSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    return;
                }
            }
        });
    }

    // Initialize button state
    updateButtonState();
});
</script>
{% endblock %}