{% extends '@SyliusShop/Email/Templates/customLayout.html.twig' %}

{% block subject %}
    Confirmation de commande Lerda Shop
{% endblock %}

{% block content %}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #1a1a1a;">
        <tr>
            <td align="center" style="padding: 20px 0;">

                <!-- Logo -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0;">
                            <a href="https://www.shop.lerda.fr">
                                <img src="cid:{{ logoCid }}" alt="Logo-Lerda" style="height: 170px;"/>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <hr style="border: none; border-top: 1px solid #444; width: 80%; margin: 10px 0;" />
                        </td>
                    </tr>
                </table>

                <!-- Titre -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0; font-size: 24px; font-weight: bold; color: #ffffff;">
                            Confirmation de commande sur Lerda Shop
                        </td>
                    </tr>
                </table>

                <!-- Informations client et livraison -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #2a2a2a; border-radius: 5px;">
                    <tr>
                        <td style="padding: 30px; font-size: 16px; line-height: 24px; color: #ffffff;">
                            <p>Bonjour {{ order.customer.firstName ?? '' }},</p>
                            <p>Lerda vous remercie pour votre commande.</p>

                            <hr style="border: none; border-top: 1px solid #444; margin: 15px 0;"/>

                            <p><strong>Client :</strong> {{ order.customer.companyName ?? 'Non renseigné' }}</p>

                            {% if order.isPickedUp %}
                                <p><strong>Livraison :</strong> Retrait sur place</p>
                            {% elseif order.shippingAddress %}
                                <p>
                                    <strong>Adresse de livraison :</strong><br/>
                                    {{ (order.shippingAddress.company ? order.shippingAddress.company ~ '<br/>' : '') | raw }}
                                    {{ order.shippingAddress.street }}<br/>
                                    {{ order.shippingAddress.postcode }} {{ order.shippingAddress.city }}<br/>
                                    {{ order.shippingAddress.countryCode }}
                                </p>
                            {% else %}
                                <p><strong>Adresse de livraison :</strong> Non renseignée</p>
                            {% endif %}
                        </td>
                    </tr>
                </table>

                <!-- Liste des articles -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #2a2a2a; border-radius: 5px; margin-top: 20px;">
                    <tr>
                        <td style="padding: 20px;">
                            <table width="100%" cellpadding="8" cellspacing="0" style="border-collapse: collapse; color: #ffffff; font-size: 14px;">
                                <thead>
                                <tr style="background-color: #444;">
                                    <th align="left">Article</th>
                                    <th align="center">Quantité</th>
                                    <th align="right">Prix unitaire HT</th>
                                    <th align="right">Total HT</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% set totalArticles = 0 %}
                                {% set totalHt = 0 %}

                                {% for item in order.items %}
                                    {% set lineTotal = item.weightEstimatedPrice ?? item.total %}
                                    {% set totalArticles = totalArticles + item.quantity %}
                                    {% set totalHt = totalHt + (lineTotal / 100) %}

                                    {# Détermine si le produit est vendu au poids ou à l’unité #}
                                    {% set isWeightBased = item.weightEstimatedPrice is defined and item.weightEstimatedPrice > 0 %}

                                    <tr style="border-bottom: 1px solid #555;">
                                        <td>{{ item.productName }} {% if item.variantName %} - {{ item.variantName }} {% endif %}</td>
                                        <td align="center">{{ item.quantity }}</td>

                                        {% if isWeightBased %}
                                            <td align="right">{{ (item.unitPrice / 100)|number_format(2, ',', ' ') }} €/kg</td>
                                        {% else %}
                                            <td align="right">{{ (item.unitPrice / 100)|number_format(2, ',', ' ') }} €/unité</td>
                                        {% endif %}

                                        <td align="right">{{ (lineTotal / 100)|number_format(2, ',', ' ') }} €</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                                <tfoot style="font-weight: bold; border-top: 2px solid #888;">
                                <tr>
                                    <td colspan="3" align="right">Nombre total d’articles :</td>
                                    <td align="right">{{ totalArticles }}</td>
                                </tr>
                                <tr>
                                    <td colspan="3" align="right">Total HT :</td>
                                    <td align="right" style="white-space: nowrap;">
                                        {{ totalHt|number_format(2, ',', ' ') }} €
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
                <p style="padding: 30px; font-size: 16px; line-height: 24px; color: #ffffff;">Vous trouverez votre bon de commande dans votre espace client.</p>
                <p style="font-style: italic; color: white; font-size: 10px;"> * Des écarts de prix sont possibles entre le bon de commande et la facture finale.

                <!-- Bouton connexion -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 30px 0;">
                            <a href="https://www.shop.lerda.fr/"
                               style="display: inline-block; padding: 12px 24px; background-color: #0056b3;
                                      color: #ffffff; text-decoration: none; border-radius: 5px;
                                      font-size: 16px; font-weight: bold;">
                                Se connecter au shop
                            </a>
                        </td>
                    </tr>
                </table>

                <!-- Boutons App Store et Google Play -->
                <p style="margin-top:20px;">
                    <a href="https://apps.apple.com/fr/app/lerda-shop/id6747896084" target="_blank">
                        <img src="cid:{{ appStoreCid }}" alt="App Store" style="height:50px;" />
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.planis_eddy.LerdaMobile" target="_blank" style="margin-left:10px;">
                        <img src="cid:{{ googlePlayCid }}" alt="Google Play" style="height:50px;" />
                    </a>
                </p>

                <!-- Pied -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0; font-size: 12px; color: #888;">
                            Email automatique envoyé par <a href="https://www.shop.lerda.fr" style="color: #888; text-decoration: underline;">LERDA</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
{% endblock %}