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

{% block title %}Détail échange{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('front/assets/css/order-recap.css') }}">
    <style>
        .exchange-section-title{
            font-weight: 800;
            color: #111827;
            padding: 10px 12px;
            border-radius: 12px;
            background: #f8fafc;
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom: 10px;
        }

        .exchange-line-old{
            background: #fff7ed; /* orange très clair */
        }
        .exchange-line-new{
            background: #ecfdf5; /* vert très clair */
        }
        .exchange-line-old .cart-item-name{
            text-decoration: line-through;
            opacity: .85;
        }
        .exchange-badge{
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid rgba(0,0,0,.08);
            background: #fff;
            color:#111827;
        }

        .exchange-line-old .cart-thumb{
            position: relative;
        }

        .exchange-line-old .cart-thumb img{
            filter: grayscale(100%);
            opacity: .75;
        }

        .exchange-line-old .cart-thumb::after{
            content: "";
            position:absolute;
            inset: 8px;
            border-radius: 10px;
            background:
                linear-gradient(45deg, transparent 46%, rgba(220,38,38,.55) 47%, rgba(220,38,38,.55) 53%, transparent 54%),
                linear-gradient(-45deg, transparent 46%, rgba(220,38,38,.55) 47%, rgba(220,38,38,.55) 53%, transparent 54%);
            pointer-events:none;
        }

        .order-linked-card{
            background:#f8fafc;
            border:1px solid #e5e7eb;
            border-radius:12px;
            padding:12px 14px;
        }

        .order-linked-card .order-id-badge{
            display:inline-block;
            margin-top:2px;
        }

    </style>
{% endblock %}

{% block body %}
<main class="main order-recap">
    <section class="mt-4">
        <div class="container">
            <div class="alert alert-light border d-flex align-items-start gap-2">
                <i class="fa fa-random fs-4 mt-1 text-muted"></i>

                <div class="flex-grow-1">
                    <div class="fw-semibold">
                        Détails de l’échange
                    </div>
                    <div class="small text-muted">
                        Consultez les articles à échanger, les nouveaux articles et le statut de votre échange.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-4">
        <div class="container">

            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h5 class="mb-0 fw-semibold">
                    Échange N° :
                    <span class="order-id-badge">{{ document.internalNbr }}</span>
                </h5>

                {% if statusView is defined and statusView %}
                    <span class="order-status-badge" style="--status-color: {{ statusView.couleur }};">
                        <i class="{{ statusView.icon }}"></i>
                        {{ statusView.libelle }}
                    </span>
                {% endif %}
            </div>

            {# lien commande liée #}
            {% if linkedOrder is defined and linkedOrder %}
                <div class="order-linked-card mt-3">
                    <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">

                        <div class="d-flex align-items-center gap-2">
                            <i class="fi-rs-link text-muted fs-5"></i>

                            <div>
                                <div class="small text-muted">Commande liée</div>

                                <span class="order-id-badge">
                                    #{{ linkedOrder.internalNbr }}
                                </span>
                            </div>
                        </div>

                        <a href="{{ path('document_details', { id: linkedOrder.internalNbr }) }}"
                        class="btn btn-primary btn-sm">
                            <i class="fi-rr-eye me-1"></i>
                            Voir la commande
                        </a>

                    </div>
                </div>
            {% endif %}

            {# Timeline (si tu l’as déjà) #}
            {% if statusTimeline is defined and statusTimeline %}
                <div class="order-timeline mt-4">
                    {% for step in statusTimeline %}
                        <div class="timeline-step {{ step.state }}"
                             style="--status-color: {{ step.couleur }};"
                             data-bs-toggle="tooltip"
                             data-bs-placement="bottom"
                             title="{{ step.libelle }}">
                            <div class="timeline-badge"><i class="{{ step.icon }}"></i></div>
                            <div class="timeline-label">{{ step.libelle }}</div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

        </div>
    </section>

    <section class="mt-4 mb-5">
        <div class="container">
            <div class="row g-4 order-recap-layout">

                <div class="col-lg-7">

                    {# ===== 1) PRODUITS À ÉCHANGER ===== #}
                    <div class="order-card mb-3">
                        <div class="exchange-section-title">
                            <div class="d-flex align-items-center gap-2">
                                <i class="fa fa-random"></i>
                                <span>Produit(s) à échanger</span>
                            </div>
                            <span class="exchange-badge ms-auto">Ancien</span>
                        </div>


                        <div class="table-responsive">
                            <table class="table cart-table mb-0">
                                <tbody>
                                {% set hasOld = false %}

                                {% for item in document.documentDeclinationProduits %}
                                    {% if item.type == 'declinationEchange' %}
                                        {% set hasOld = true %}
                                        <tr class="exchange-line-old">
                                            <td>
                                                <div class="cart-row">

                                                    <div class="cart-thumb" style="--img-aspect:0.75">
                                                        {% set picture = 'galery_placeholder_200.png' %}
                                                        {% for image in item.produitDeclinationValue.picture %}
                                                            {% if image.isSelected %}
                                                                {% set picture = image.imageName %}
                                                            {% endif %}
                                                        {% endfor %}
                                                        <img src="{{ asset('images/300-400/' ~ picture) }}"
                                                             alt="{{ item.reference }}"
                                                             loading="lazy">
                                                    </div>

                                                    <div class="cart-meta">
                                                        <div class="cart-item-name">
                                                            {{ item.produitDeclinationValue.produit.name ?? '' }}
                                                            – Ref : {{ item.produitDeclinationValue.produit.reference ?? item.reference }}
                                                        </div>

                                                        <div class="cart-unit-price">
                                                            {{ (item.totalAmountTtc / item.quantity)|number_format(3,'.') }} TND
                                                        </div>

                                                        <div class="cart-variant-line">
                                                            Quantité : {{ item.quantity }}
                                                        </div>
                                                    </div>

                                                    <div class="cart-side">
                                                        <div class="cart-side-bottom">
                                                            {{ item.totalAmountTtc|number_format(3,'.') }} TND
                                                        </div>
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}

                                {% if not hasOld %}
                                    <tr>
                                        <td class="text-muted small">Aucun produit à échanger.</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {# ===== 2) NOUVEAUX PRODUITS ===== #}
                    <div class="order-card">


                        <div class="exchange-section-title">
                            <div class="d-flex align-items-center gap-2">
                                <i class="fa fa-plus-circle"></i>
                                <span>Nouveau(x) produit(s)</span>
                            </div>
                            <span class="exchange-badge ms-auto">Nouveau</span>
                        </div>


                        <div class="table-responsive">
                            <table class="table cart-table mb-0">
                                <tbody>
                                {% set hasNew = false %}

                                {% for item in document.documentDeclinationProduits %}
                                    {% if item.type != 'declinationEchange' %}
                                        {% set hasNew = true %}
                                        <tr class="exchange-line-new">
                                            <td>
                                                <div class="cart-row">

                                                    <div class="cart-thumb" style="--img-aspect:0.75">
                                                        {% set picture = 'galery_placeholder_200.png' %}
                                                        {% for image in item.produitDeclinationValue.picture %}
                                                            {% if image.isSelected %}
                                                                {% set picture = image.imageName %}
                                                            {% endif %}
                                                        {% endfor %}
                                                        <img src="{{ asset('images/300-400/' ~ picture) }}"
                                                             alt="{{ item.reference }}"
                                                             loading="lazy">
                                                    </div>

                                                    <div class="cart-meta">
                                                        <div class="cart-item-name">
                                                            {{ item.produitDeclinationValue.produit.name ?? '' }}
                                                            – Ref : {{ item.produitDeclinationValue.produit.reference ?? item.reference }}
                                                        </div>

                                                        <div class="cart-price-block">
                                                            {% if item.discount and item.discount > 0 %}
                                                                <div class="price-meta">
                                                                    <span class="original-price">
                                                                        {{
                                                                            (
                                                                                (item.totalAmountTtc / item.quantity)
                                                                                +
                                                                                (
                                                                                    item.discountType == 'percent'
                                                                                    ? ((item.totalAmountTtc / item.quantity) * item.discount / 100)
                                                                                    : item.discount
                                                                                )
                                                                            )|number_format(3,'.')
                                                                        }} TND
                                                                    </span>
                                                                    <span class="discount-flag">
                                                                        {% if item.discountType == 'percent' %}
                                                                            -{{ item.discount }}%
                                                                        {% else %}
                                                                            -{{ item.discount|number_format(3,'.') }} TND
                                                                        {% endif %}
                                                                    </span>
                                                                    <span class="sale-price">
                                                                        {{ (item.totalAmountTtc / item.quantity)|number_format(3,'.') }} TND
                                                                    </span>
                                                                </div>
                                                            {% else %}
                                                                <div class="cart-unit-price">
                                                                    {{ (item.totalAmountTtc / item.quantity)|number_format(3,'.') }} TND
                                                                </div>
                                                            {% endif %}
                                                        </div>

                                                        <div class="cart-variant-line">
                                                            Quantité : {{ item.quantity }}
                                                        </div>
                                                    </div>

                                                    <div class="cart-side">
                                                        <div class="cart-side-bottom">
                                                            {{ item.totalAmountTtc|number_format(3,'.') }} TND
                                                        </div>
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}

                                {% if not hasNew %}
                                    <tr>
                                        <td class="text-muted small">Aucun nouveau produit.</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                {# ===== COL DROITE : RÉCAP (tu peux réutiliser ton bloc totals) ===== #}
                <div class="col-lg-5">
                    {# Tu peux réutiliser exactement ton bloc "Récapitulatif des montants" de order_recap.html.twig #}
                    {# + livraison + tracking si utile #}

                    {# Exemple minimal : #}
                    {% set deliveryTotal = document.deliveryPrice|default(0) %}

                    <div class="cart-summary-box">
                        <h6 class="order-card-title">
                            <i class="fi-rs-receipt me-1"></i>
                            Récapitulatif des montants
                        </h6>

                        <div class="cart-summary-row">
                            <div class="label">Frais de livraison</div>
                            <div class="value">
                                {% if deliveryTotal == 0 %}
                                    <span class="text-success">Gratuite</span>
                                {% else %}
                                    {{ deliveryTotal|number_format(3,'.') }}
                                    <sup class="currency-style">TND</sup>
                                {% endif %}
                            </div>
                        </div>

                        <div class="cart-summary-total">
                            <div class="label">Total à payer</div>
                            <div class="value">
                                {{ document.totalAmountTtc|number_format(3,'.') }}
                                <sup class="currency-style">TND</sup>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>

</main>
{% endblock %}