{% extends '@!EasyAdmin/crud/detail.html.twig' %}
{% import 'admin/order/_icons.html.twig' as icons %}

{% block main %}
    {% set order = entity.instance %}

    {% set statusColors = {
        'bat1': 'dark', 'bat2': 'dark', 'bat3': 'dark', 'bat4': 'dark',
        'new_order': 'primary', 'pending': 'warning', 'manufacturing': 'info',
        'pending_delivery': 'secondary', 'delivered': 'success', 'cancelled': 'danger'
    } %}
    {% set statusColor = statusColors[order.status.value] ?? 'secondary' %}

    {% set statusStyle = {
        'NEW':                  { color: '#3b82f6', icon: 'new'   },
        'PENDING_TEXT':         { color: '#58d19c', icon: 'text'  },
        'PENDING_CREATION':     { color: '#6c757d', icon: 'clock'   },
        'BAT1':                 { color: '#f59e0b', icon: 'doc'   },
        'BAT2':                 { color: '#f59e0b', icon: 'doc'   },
        'BAT3':                 { color: '#f59e0b', icon: 'doc'   },
        'BAT4':                 { color: '#f59e0b', icon: 'doc'   },
        'BAT5':                 { color: '#f59e0b', icon: 'doc'   },
        'PENDING_CORRECTIONS':    { color: '#6c757d',   icon: 'eye'  },
        'VALIDATED':            { color: '#00b129', icon: 'doc' },
        'PENDING':              { color: '#6c757d', icon: 'clock' },
        'MANUFACTURING':    { color: '#6c757d',   icon: 'gear'  },
        'PENDING_DELIVERY':     { color: '#8b5cf6', icon: 'truck' },
        'DELIVERED':            { color: '#00b129', icon: 'check' },
        'CANCELLED':            { color: '#b3261e', icon: 'x'     },
    } %}
    {% set current = statusStyle[order.status.name] ?? { color: '#6c757d', icon: 'gear' } %}

    <div class="order-detail-grid">
        {# ===== Carte résumé ===== #}
        <div class="detail-card detail-card--summary">
            <div class="summary-header">
                <div>
                    <p class="color-blue" style="font-weight: 600; font-size: 12px;">STATUT ACTUEL</p>
                    <span class="badge status-badge d-flex align-items-center"
                          style="padding: 11px 12px; background-color: {{ current.color }}">{{ icons.icon(current.icon) }}&nbsp; {{ order.status.label }}&nbsp; </span>
                </div>
            </div>
            <div class="summary-dates">
                <div>
                    <span class="summary-label color-blue"
                          style="font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 4px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                             class="bi bi-calendar2-check" viewBox="0 0 16 16">
                      <path
                          d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
                      <path
                          d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/>
                      <path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                        Créé le</span>
                    <span>{{ order.createdAt|date('d/m/Y à H:i') }}</span>
                </div>
                <div>
                    <span class="summary-label color-blue"
                          style="font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 4px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                             class="bi bi-clock" viewBox="0 0 16 16">
                          <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
                          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
                        </svg>
                        Mis à jour le</span>
                    <span>{{ order.updatedAt|date('d/m/Y à H:i') }}</span>
                </div>
                {% if order.status.name is same as "PENDING_CREATION" or order.status.name is same as "PENDING_CORRECTIONS" %}
                    {% set daysElapsed = ((date().timestamp - order.updatedAt.timestamp) / 86400)|round(0, 'floor') %}
                    {% set daysRemaining = 5 - daysElapsed %}
                    <div>
                        <span class="summary-label color-blue"
                              style="font-weight: 600; font-size: 12px;display: flex; align-items: center; gap: 4px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                                 class="bi bi-stopwatch" viewBox="0 0 16 16">
                              <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5z"/>
                              <path
                                  d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64l.012-.013.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5M8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3"/>
                            </svg>
                            Jour(s) restant(s)</span>
                        <span class="{{ daysRemaining <= 1 ? 'text-danger fw-bold' : '' }}">
                             {% if daysRemaining < 0 %}
                                 Expiré
                             {% else %}
                                 {{ daysRemaining }} jour{{ daysRemaining > 1 ? 's' : '' }}
                             {% endif %}
                        </span>
                    </div>
                {% endif %}
            </div>
            <div class="summary-customer">
                <div>
                       <span class="summary-label color-blue"
                             style="font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 4px;">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                           class="bi bi-person-circle" viewBox="0 0 16 16">
                      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                      <path fill-rule="evenodd"
                            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
                    </svg>
                        CLIENT</span>
                    <a href="{{ path('admin_customer_index', {"query": order.customer.name}) }}"
                       class="d-flex align-items-center" style="font-weight: 600">
                        {{ order.customer.name }}&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-box-arrow-up-right fw-bolder" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                  d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
                            <path fill-rule="evenodd"
                                  d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"></path>
                        </svg>
                    </a>
                </div>
                <div>
                       <span class="summary-label color-blue"
                             style="font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 4px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-person-badge" viewBox="0 0 16 16">
                      <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"></path>
                      <path
                          d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492z"/>
                    </svg>  COMMERCIAL</span>
                    <p class="d-flex align-items-center mb-1 mt-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                             class="bi bi-person-vcard" viewBox="0 0 16 16">
                            <path
                                d="M5 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m4-2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5M9 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 8m1 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/>
                            <path
                                d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM1 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8.96q.04-.245.04-.5C9 10.567 7.21 9 5 9c-2.086 0-3.8 1.398-3.984 3.181A1 1 0 0 1 1 12z"/>
                        </svg>&nbsp; {{ order.customer.commercial }}</p>
                    <p class="d-flex align-items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                             class="bi bi-envelope-paper" viewBox="0 0 16 16">
                            <path
                                d="M4 0a2 2 0 0 0-2 2v1.133l-.941.502A2 2 0 0 0 0 5.4V14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.4a2 2 0 0 0-1.059-1.765L14 3.133V2a2 2 0 0 0-2-2zm10 4.267.47.25A1 1 0 0 1 15 5.4v.817l-1 .6zm-1 3.15-3.75 2.25L8 8.917l-1.25.75L3 7.417V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm-11-.6-1-.6V5.4a1 1 0 0 1 .53-.882L2 4.267zm13 .566v5.734l-4.778-2.867zm-.035 6.88A1 1 0 0 1 14 15H2a1 1 0 0 1-.965-.738L8 10.083zM1 13.116V7.383l4.778 2.867L1 13.117Z"/>
                        </svg>&nbsp; {{ order.customer.commercial.email }}</p>
                </div>
                <div>

                </div>

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

        {# ===== Carte notes internes ===== #}
        {% if order.internalNotes %}
            <div class="detail-card">
                <h3 class="card-title">Notes internes</h3>
                <p class="notes-content">{{ order.internalNotes|nl2br }}</p>
            </div>
        {% endif %}
        <div class="order-detail-product-grid" >
            {# ===== Carte historique des statuts ===== #}
            <div class="detail-card historic">
                <h3 class="card-title">Historique des statuts</h3>
                {% set history = order.orderStatusHistories|sort((a, b) => b.createdAt <=> a.createdAt) %}
                {% if history is empty %}
                    <p class="text-muted">Aucun historique.</p>
                {% else %}
                    <div class="status-timeline">
                        {% for entry in history %}
                            {% set current = statusStyle[entry.status.name] ?? { color: '#6c757d', icon: 'gear' } %}
                            <div class="timeline-item">
                                <div class="timeline-icon"
                                     style="background-color: {{ current.color }};width: 24px; height: 24px; padding:5px;">
                                    {{ icons.icon(current.icon) }}
                                </div>
                                <div class="timeline-content">
                                    <div class="timeline-header">
                                        <span class="timeline-status">{{ entry.status.label }}</span>
                                        <span class="timeline-date">{{ entry.createdAt|date('d/m/Y à H:i') }}</span>
                                    </div>
                                    {% if entry.changedBy %}
                                        <div class="timeline-meta">Par {{ entry.changedBy }}</div>
                                    {% endif %}
                                    {% if entry.comments %}
                                        <div class="timeline-comment"><span
                                                style="font-weight: 600;">Commentaires :</span> {{ entry.comments }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            {# ===== Carte lignes de commande ===== #}
            <div class="detail-card products" style="padding: 16px;">
                <h3 class="card-title">PRODUITS COMMANDES</h3>
                {% if order.orderLines is empty %}
                    <p class="text-muted">Aucune ligne de commande.</p>
                {% else %}
                    <table class="order-lines-table">
                        <thead>
                        <tr>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th class="text-center">Qté</th>
                            <th class="text-center">Prix unitaire</th>
                            <th class="text-end">Prix total</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for line in order.orderLines %}
                            <tr>
                                <td style="font-weight: bold">{{ line.product.description }}</td>
                                <td><span class="sku-badge">{{ line.product.sku }}</span></td>
                                <td class="text-center">{{ line.quantity }}</td>
                                <td class="text-center">{{ line.product.price }}</td>
                                <td class="text-end">{{ line.totalPrice|number_format(2, ',', ' ') }} €</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="4" class="text-start"><strong>Total HT</strong></td>
                            <td class="text-end">
                                <strong>{{ order.orderLines|reduce((carry, l) => carry + l.totalPrice, 0)|number_format(2, ',', ' ') }}
                                    €</strong>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                {% endif %}
            </div>


        </div>


    </div>

    <style>
        .color-blue {
            color: #929aab;
        }

        .badge {
            color: white;
        }

        .order-detail-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .order-detail-product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            @media screen and (max-width: 800px) {
                grid-template-columns: 1fr;
            }
            align-items: baseline;
            gap: 20px;
        }
        .historic {
            padding: 16px;
            @media screen and (max-width: 800px) {
                order: 1;
            }
        }
        .products {
            position: sticky;
            top: 0;
            @media screen and (max-width: 800px) {
                order: 0;
                position: relative;
            }
        }
        .detail-card {
            background: #fff;
            border: 3px solid #eff3f5;
            border-radius: 12px;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 14px;
            color: #212529;
        }

        .detail-card--summary {
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
            @media screen and (max-width: 800px) {
                flex-direction: column;
            }
            & > * {
                flex: 1;
            }
        }

        .summary-header {
            display: flex;
            flex-direction: column;
            align-items: start;
            flex-wrap: wrap;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            gap: 10px;
            background: #f8fcf8;
            padding: 16px;
        }

        .summary-order-number {
            font-size: 1.4rem;
            font-weight: 700;
            margin-right: 12px;
        }

        .status-badge {
            font-size: 0.8rem;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .summary-header, .summary-dates {
            position: relative;
        }

        .summary-header:after, .summary-dates:after {
            position: absolute;
            content: '';
            width: 2px;
            height: 85%;
            background: #eff3f5;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            @media screen and (max-width: 800px) {
                width: 85%;
                height: 2px;
                left: 50%;
                top: 100%;
                transform: translateX(-50%);
            }
        }

        .summary-dates {
            display: flex;
            flex-direction: column;
            align-items: start;
            flex-wrap: wrap;
            gap: 20px;
            padding: 16px;
        }

        .summary-customer {
            display: flex;
            flex-direction: column;
            align-items: start;
            flex-wrap: wrap;
            gap: 20px;
            padding: 16px;
        }

        .summary-label {
            display: block;
            font-size: 0.75rem;
            color: #868e96;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .notes-content {
            margin: 0;
            color: #495057;
            white-space: pre-line;
        }

        .order-lines-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .order-lines-table thead {
            background: #f7f8fa;
        }

        .order-lines-table th {
            text-align: left;
            padding: 10px 12px;
            font-weight: 600;
            color: #495057;
            border-bottom: 1px solid #f1f2f4;
        }

        .order-lines-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #f1f2f4;
        }

        .order-lines-table tfoot td {
            padding: 12px;
            background: #f8f9fb;
            border-top: 2px solid #f1f2f4;
        }

        .sku-badge {
            background: #eef1f5;
            color: #495057;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-family: monospace;
        }

        .text-center {
            text-align: center;
        }

        .text-end {
            text-align: right;
        }

        .text-muted {
            color: #999;
        }

        .status-timeline {
            position: relative;
            padding-left: 4px;
        }

        .timeline-item {
            position: relative;
            display: flex;
            gap: 14px;
            padding-bottom: 18px;
            border-left: 2px solid #e3e6ea;
            padding-left: 20px;
            margin-left: 12px;
        }

        .timeline-item:last-child {
            border-left: 2px solid transparent;
            padding-bottom: 0;
        }

        .timeline-icon {
            position: absolute;
            left: -14px;
            top: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 3px #fff;
            flex-shrink: 0;
        }


        .timeline-content {
            padding-left: 20px;
        }

        .timeline-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .timeline-status {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .timeline-date {
            font-size: 0.8rem;
            color: #868e96;
        }

        .timeline-meta {
            font-size: 0.8rem;
            color: #868e96;
            margin-top: 2px;
        }

        .bg-primary {
            color: white;
        }
    </style>
{% endblock %}