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

{% block title %}Detalle de pedido{% endblock %}

{# Ocultar el nav superior y el footer para un layout tipo recibo #}
{% block menu %}{% endblock %}
{% block footer %}{% endblock %}

{% block body %}
    <style>
        body {
            background-color: #f8fafc;
        }
        .troa-header {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            border-left: 6px solid #002f5b; /* Troa Blue */
        }
        .troa-logo {
            width: 140px;
        }
        .troa-info {
            font-size: 14px;
            color: #4b5563;
            line-height: 1.6;
            text-align: right;
        }
        .containerChangeState p {
            font-size: 15px;
            color: #374151;
            margin-bottom: 8px;
        }
        .tablaDetalles {
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .tablaDetalles th {
            background-color: #002f5b; /* Troa Blue */
            color: white;
            font-weight: 600;
            border: none;
            padding: 12px 15px;
        }
        .tablaDetalles td {
            padding: 12px 15px;
            vertical-align: middle;
            color: #4b5563;
        }
        .troa-blue {
            color: #002f5b;
        }
        .alert-success-custom {
            background-color: #e0f2fe; /* light blue */
            color: #0369a1; 
            border: 1px solid #bae6fd;
            border-radius: 8px;
            font-weight: 600;
            padding: 15px;
        }
        
    </style>
    <div class="containerAllOrder" style="max-width: 1000px; margin: auto;">
        
        <div class="row troa-header shadow-sm mt-3 mx-2">
            <div class="col-12 d-flex justify-content-between align-items-center">
                <img src="/img/logo-troa.png" class="troa-logo" alt="Troa Logo"/>
                <div class="troa-info">
                    <strong>SOCIEDAD ANONIMA DE DISTRIBUCION EDICION Y LIBRERIAS</strong><br>
                    A28057230<br>
                    CALLE SERRANO, 80 - PL BAJA<br>
                    MADRID (28006), Madrid, España<br>
                    914357421<br>
                    sgenerales@troa.es<br>
                </div>
            </div>
        </div>

        <div class="row justify-content-sm-center" style="margin-bottom: 40px;">
            <div class="col-12 col-md-10">
                <div class="alert text-center alert-success-custom shadow-sm fade show" role="alert">
                    ESTADO DEL PEDIDO: 
                    {% if orden.state == 1 %}Pendiente{% elseif orden.state == 2 %}Confirmado{% elseif orden.state == 3 %}En preparación{% elseif orden.state == 4 %}Enviado{% elseif orden.state == 5 %}Entregado{% elseif orden.state == 6 %}Cancelado{% elseif orden.state == 7 %}Completado{% elseif orden.state == 8 %}No entregado / Devuelto{% else %}Desconocido{% endif %}
                </div>
            </div>
        </div>
        
        <div class="containerChangeState row" style="margin-bottom: 50px; padding: 0 15px;">
            <div class="col-sm-12 col-md-8">
                <h4 class="troa-blue" style="margin-bottom: 20px; font-weight: 600;">Datos del Cliente</h4>
                <p><b>Cliente:</b> {{orden.externalClient.name}}</p>
                <p><b>Fecha de pedido:</b> {{orden.createdAt|date("d-m-Y")}}</p>
                <p><b>Dirección de entrega:</b> 
                    {% if orden.address %}
                        {{orden.address.streetAddress1}} {{orden.address.number}}, {{orden.address.zipCode}}, {{orden.address.city}}
                    {% endif %}
                </p>
                <p><b>NIF/ CIF:</b> 
                    {% if orden.address and orden.address.cif %}
                        {{orden.address.cif}}
                    {% endif %}
                </p>
                {% if orden.additionalNote %}
                <p><b>Nota adicional:</b> {{orden.additionalNote}}</p>
                {% endif %}
                <p><b>Método de entrega:</b> 
                    {% if orden.deliveryMethod == 1 %}
                        Retiro en tienda (Gratis)
                    {% elseif orden.deliveryMethod == 2 %}
                        Envío a domicilio
                    {% else %}
                        No especificado
                    {% endif %}
                </p>
                {% if orden.extraData is defined and orden.extraData is not null %}
                    {% if orden.extraData.trackingId is defined and orden.extraData.trackingId %}
                        <p><b>ID de Seguimiento:</b> <span class="badge badge-info tracking-badge" style="background-color: #002f5b; color: #fff; padding: 5px 10px; border-radius: 5px;">{{ orden.extraData.trackingId }}</span></p>
                    {% endif %}
                    {% if orden.extraData.trackingUrl is defined and orden.extraData.trackingUrl %}
                        <p><b>URL de Rastreo:</b> <a href="{{ orden.extraData.trackingUrl }}" target="_blank" class="troa-blue" style="text-decoration: underline; font-weight: 500;">Rastrear Paquete <i class="fa fa-external-link"></i></a></p>
                    {% endif %}
                {% endif %}
            </div>
            <div class="col-sm-12 col-md-4 text-center">
                {# Generación de QR con el ID del pedido para escaneo rápido #}
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ url('order_info', {'token': orden.tokenAccess}) }}" alt="QR Code" style="border: 1px solid #ddd; padding: 5px; border-radius: 8px;">
                <p class="mt-2 text-muted" style="font-size: 12px;">Escanea para ver este recibo</p>
            </div>
        </div>

        <div class="containerOrder" style="padding: 0 15px;">
            <div class="row mtpro">
                <div class="col-12" style="overflow-x:auto">
                    <h3 class="" style="margin-bottom: 20px;"><strong class="troa-blue">Pedido</strong> #{{orden.id}}</h3>
                    <table class="tablaDetalles table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>SKU/EAN</th>
                                <th>Cant.</th>
                                <th>Precio Unit.</th>
                                <th>Descuento</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set priceSymbol = '€' %}
                            {% if orden.providerArray and orden.providerArray['money_symbol'] %}
                                {% set priceSymbol = orden.providerArray['money_symbol'] %}
                            {% endif %}

                            {% for producto in productosExternos %}
                                <tr>
                                    <td>{{producto.name}}</td>
                                    <td>{{producto.codeEAN ? producto.codeEAN : ""}}</td>
                                    <td>
                                        {% if not producto.externalProduct %}
                                            {{producto.quantity ? producto.quantity : 0}}
                                        {% else %}
                                            {{producto.quantity_external_provider ? producto.quantity_external_provider : 0}}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {{producto.price}} {{priceSymbol}}
                                    </td>
                                    <td>0%</td>
                                    <td>
                                        {% if not producto.externalProduct %}
                                            {{ (producto.price * (producto.quantity ? producto.quantity : 0)) | number_format(2, '.', ',') }}
                                        {% else %}
                                            {{ (producto.price * (producto.quantity_external_provider ? producto.quantity_external_provider : 0)) | number_format(2, '.', ',') }}
                                        {% endif %}
                                        {{priceSymbol}}
                                    </td>
                                </tr>
                            {% endfor %}
                            <tr>
                                <td colspan="4" class="invisble" style="border: none;"></td>
                                <td class="text-right"><b class="troa-blue" style="font-size: 16px;">Subtotal</b></td>
                                <td>
                                    {% set subTotalAmount = 0 %}
                                    {% for producto in productosExternos %}
                                        {% if not producto.externalProduct %}
                                            {% set subTotalAmount = subTotalAmount + (producto.price * (producto.quantity ? producto.quantity : 0)) %}
                                        {% else %}
                                            {% set subTotalAmount = subTotalAmount + (producto.price * (producto.quantity_external_provider ? producto.quantity_external_provider : 0)) %}
                                        {% endif %}
                                    {% endfor %}
                                    <b style="font-size: 16px;">{{subTotalAmount | number_format(2, '.', ',')}} {{priceSymbol}}</b>
                                </td>
                            </tr>
                            {% if orden.deliveryMethod == 2 and orden.shippingCost > 0 %}
                            <tr>
                                <td colspan="4" class="invisble" style="border: none;"></td>
                                <td class="text-right"><b class="troa-blue" style="font-size: 16px;">Envío</b></td>
                                <td>
                                    <b style="font-size: 16px;">{{orden.shippingCost | number_format(2, '.', ',')}} {{priceSymbol}}</b>
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td colspan="4" class="invisble" style="border: none;"></td>
                                <td class="text-right"><b class="troa-blue" style="font-size: 18px;">Total</b></td>
                                <td>
                                    {% set finalTotal = subTotalAmount + (orden.shippingCost ? orden.shippingCost : 0) %}
                                    <b style="font-size: 18px;">{{finalTotal | number_format(2, '.', ',')}} {{priceSymbol}}</b>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="row mt-5 mb-5 text-center">
                <div class="col-12 text-muted" style="font-size: 13px;">
                    <p>Documento generado electrónicamente. Gracias por comprar en nuestra tienda e-commerce.</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}