{% extends 'gestion/_base.html.twig' %}
{% set active = 'commandes' %}

{% block title %}Commande {{ commande.reference|slice(0, 12) }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Commande</span>
            <h1 class="adm-page-title adm-mono" style="font-size:clamp(1.15rem,2vw,1.5rem);">
                <span class="adm-copy" data-adm-copy="{{ commande.reference }}" title="Cliquer pour copier">{{ commande.reference }}</span>
            </h1>
            <p class="adm-page-sub">
                Passée le {{ commande.createdAt|date('d/m/Y à H:i') }}
                {% if commande.updatedAt %} · mise à jour {{ commande.updatedAt|date('d/m/Y H:i') }}{% endif %}
            </p>
        </div>
        <div class="adm-page-head-actions">
            {% include 'gestion/commandes/_status_badge.html.twig' with { status: commande.status } only %}
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_commande_facture', {reference: commande.reference}) }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
                Facture PDF
            </a>
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_commandes') }}">← Retour</a>
        </div>
    </div>

    <div class="adm-grid adm-grid--2">
        {# ===== Colonne gauche : articles + note ===== #}
        <div>
            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
                    Articles
                </h2>
                {# Trois colonnes seulement : le tableau tient sans plancher de
                   largeur, donc sans défilement horizontal sur téléphone. #}
                <div class="adm-table-wrap" style="box-shadow:none;">
                    <table class="adm-table adm-table--auto">
                        <thead>
                            <tr><th></th><th>Article</th><th>Prix</th></tr>
                        </thead>
                        <tbody>
                            {% for ligne in commande.productCommandes %}
                                <tr>
                                    <td style="width:76px;">
                                        {% if ligne.product %}
                                            <img class="adm-table-thumb" src="{{ path('image_miniature', {id: ligne.product.id}) }}" alt="" onerror="this.onerror=null;this.src='/assets/img-placeholder.svg'">
                                        {% else %}
                                            <img class="adm-table-thumb" src="/assets/img-placeholder.svg" alt="">
                                        {% endif %}
                                    </td>
                                    <td>{{ ligne.product ? ligne.product.libelle : 'Produit supprimé' }}</td>
                                    <td class="is-num">{{ ligne.price|number_format(2, ',', ' ') }} €</td>
                                </tr>
                                {# Options payantes : le texte à graver est ce qui
                                   part à l'atelier, il doit sauter aux yeux ici. #}
                                {% for option in ligne.options %}
                                    <tr>
                                        <td></td>
                                        <td style="color:var(--v2-ink-soft);">
                                            ↳ {{ option.label }} : <b style="color:var(--v2-ink);">{{ option.valeur }}</b>
                                        </td>
                                        <td class="is-num">{{ option.prix|number_format(2, ',', ' ') }} €</td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                            <tr>
                                <td></td>
                                <td style="color:var(--v2-ink-soft);">Livraison — {{ commande.livraison.libelle }}</td>
                                <td class="is-num">{{ commande.prixLivraison|number_format(2, ',', ' ') }} €</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td style="font-weight:700;">Total</td>
                                <td class="is-num" style="font-weight:700;color:var(--v2-green-deep);">{{ commande.total|number_format(2, ',', ' ') }} €</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
                    Note interne
                </h2>
                <div class="adm-field">
                    <textarea id="note-interne" placeholder=" ">{{ commande.noteInterne }}</textarea>
                    <label for="note-interne">Visible uniquement par l'atelier</label>
                </div>
                <div style="margin-top:10px;text-align:right;">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="btn-save-note">Enregistrer la note</button>
                </div>
            </div>

            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1.5"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                    Suivi du colis
                </h2>

                <div class="adm-form">
                    <div class="adm-form-row">
                        <div class="adm-field">
                            <select id="trk-carrier">
                                <option value="libre" {{ commande.carrier and commande.carrier.value == 'libre' ? 'selected' }}>Libre (aucune API)</option>
                                <option value="laposte" {{ commande.carrier and commande.carrier.value == 'laposte' ? 'selected' }}>La Poste — Colissimo / Suivi / Chronopost</option>
                            </select>
                            <label for="trk-carrier">Transporteur</label>
                        </div>
                        <div class="adm-field">
                            <input type="text" id="trk-number" placeholder=" " value="{{ commande.numSuiviColis }}">
                            <label for="trk-number">Numéro de suivi</label>
                        </div>
                    </div>
                    <div class="adm-field" id="trk-url-wrap" {{ commande.carrier and commande.carrier.value == 'laposte' ? 'hidden' }}>
                        <input type="url" id="trk-url" placeholder=" " value="{{ commande.trackingUrl }}">
                        <label for="trk-url">Lien de suivi (optionnel)</label>
                    </div>
                    <p class="adm-field-help" id="trk-help" {{ not (commande.carrier and commande.carrier.value == 'laposte') ? 'hidden' }}>
                        Suivi automatique La Poste : statut, timeline et notifications se mettront à jour tout seuls.
                    </p>
                    <label class="adm-check {{ clientEmail ? '' : 'is-disabled' }}" title="{{ clientEmail ? '' : 'Aucun email client sur cette commande' }}">
                        <input type="checkbox" id="trk-notify" {{ clientEmail ? '' : 'disabled' }}>
                        Communiquer ce changement au client
                        <span style="color:var(--v2-ink-soft);font-size:0.78rem;">(email « colis expédié »)</span>
                    </label>
                    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
                        {% if commande.carrier and commande.carrier.value == 'laposte' and commande.numSuiviColis %}
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="btn-track-now">Vérifier maintenant</button>
                        {% endif %}
                        <button type="button" class="adm-btn adm-btn--sm" id="btn-save-tracking">Enregistrer le suivi</button>
                    </div>
                </div>

                <div id="trk-timeline-wrap" style="margin-top:18px;" {{ commande.trackingEvents ? '' : 'hidden' }}>
                    <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;">
                        <span class="adm-eyebrow">Timeline</span>
                        <span class="adm-mono" style="font-size:0.7rem;color:var(--v2-ink-soft);" id="trk-checked-at">
                            {% if commande.trackingLastCheckedAt %}Vérifié le {{ commande.trackingLastCheckedAt|date('d/m/Y H:i') }}{% endif %}
                        </span>
                    </div>
                    <ul class="adm-timeline" id="trk-timeline">
                        {% if commande.trackingEvents %}
                            {% for event in commande.trackingEvents|reverse %}
                                <li class="{{ loop.first ? 'is-current' }} {{ event.code starts with 'PB' or event.code starts with 'ND' ? 'is-problem' }}">
                                    <div class="adm-timeline-label">{{ event.label }}</div>
                                    <div class="adm-timeline-date">{{ event.date|date('d/m/Y H:i') }} · {{ event.code }}</div>
                                </li>
                            {% endfor %}
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        {# ===== Colonne droite : client, adresse, paiement, statut ===== #}
        <div>
            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0 1 14 0v1"/></svg>
                    Client
                </h2>
                <p style="margin:0;font-weight:600;">{{ commande.client.prenom }} {{ commande.client.nom }}</p>
                {% if clientEmail %}
                    <p style="margin:4px 0 0;"><a href="mailto:{{ clientEmail }}" style="color:var(--v2-green-deep);">{{ clientEmail }}</a></p>
                {% else %}
                    <p style="margin:4px 0 0;color:var(--v2-ink-soft);">Aucun email</p>
                {% endif %}
                <p style="margin:4px 0 0;color:var(--v2-ink-soft);font-size:0.86rem;">
                    Client depuis {{ commande.client.dhCreation|date('m/Y') }}
                </p>
            </div>

            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    Adresse de livraison
                </h2>
                <p style="margin:0;line-height:1.7;">
                    {{ commande.adresse.prenom }} {{ commande.adresse.nom }}<br>
                    {{ commande.adresse.libAdr }}<br>
                    {{ commande.adresse.cp }} {{ commande.adresse.ville }}
                    {% if commande.adresse.infoSupp %}<br><span style="color:var(--v2-ink-soft);">{{ commande.adresse.infoSupp }}</span>{% endif %}
                </p>
                <p style="margin:8px 0 0;">
                    <a href="tel:{{ commande.adresse.numTel }}" style="color:var(--v2-green-deep);">{{ commande.adresse.numTel }}</a>
                </p>
            </div>

            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
                    Paiement
                </h2>
                {% if commande.payment %}
                    <p style="margin:0;">
                        <span class="adm-badge adm-badge--{{ commande.payment.status.value in ['completed', 'paid'] ? 'green' : 'neutral' }}">{{ commande.payment.status.value }}</span>
                    </p>
                    <p style="margin:8px 0 0;font-size:0.86rem;color:var(--v2-ink-soft);line-height:1.7;">
                        PayPal · {{ commande.payment.amount|number_format(2, ',', ' ') }} {{ commande.payment.currency }}<br>
                        Payeur : {{ commande.payment.payerEmail }}<br>
                        Capture : <span class="adm-mono" style="font-size:0.74rem;">{{ commande.payment.captureId }}</span>
                    </p>
                {% else %}
                    <p style="margin:0;color:var(--v2-ink-soft);">Aucun paiement enregistré.</p>
                {% endif %}
            </div>

            <div class="adm-card">
                <h2 class="adm-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/></svg>
                    Changer le statut
                </h2>
                <div class="adm-form">
                    <div class="adm-field">
                        <select id="status-select">
                            {% for statut in statuts %}
                                <option value="{{ statut.value }}" {{ commande.status.value == statut.value ? 'selected' }}>{{ statut.label }}</option>
                            {% endfor %}
                        </select>
                        <label for="status-select">Nouveau statut</label>
                    </div>
                    <label class="adm-check {{ clientEmail ? '' : 'is-disabled' }}" title="{{ clientEmail ? '' : 'Aucun email client sur cette commande' }}">
                        <input type="checkbox" id="status-notify" {{ clientEmail ? '' : 'disabled' }}>
                        Communiquer ce changement au client
                    </label>
                    <div style="text-align:right;">
                        <button type="button" class="adm-btn adm-btn--sm" id="btn-save-status">Appliquer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var REF = {{ commande.reference|json_encode|raw }};
    var api = function (action) { return '/gestion/api/commandes/' + encodeURIComponent(REF) + '/' + action; };

    /* ---- Statut ---- */
    var btnStatus = document.getElementById('btn-save-status');
    btnStatus.addEventListener('click', function () {
        btnStatus.disabled = true;
        admFetch(api('status'), {
            body: {
                status: document.getElementById('status-select').value,
                notifyClient: document.getElementById('status-notify').checked
            }
        }).then(function (data) {
            showNotification({
                success: true,
                title: 'Statut mis à jour : ' + data.label,
                message: data.emailSent ? 'Le client a été prévenu par email.' : null
            });
            var badge = document.querySelector('[data-status-badge]');
            if (badge) badge.textContent = data.label;
        }).finally(function () { btnStatus.disabled = false; });
    });

    /* ---- Suivi ---- */
    var carrierSel = document.getElementById('trk-carrier');
    var urlWrap = document.getElementById('trk-url-wrap');
    var help = document.getElementById('trk-help');
    function syncCarrierUi() {
        var laposte = carrierSel.value === 'laposte';
        urlWrap.hidden = laposte;
        help.hidden = !laposte;
    }
    carrierSel.addEventListener('change', syncCarrierUi);

    function renderTimeline(events) {
        var wrap = document.getElementById('trk-timeline-wrap');
        var list = document.getElementById('trk-timeline');
        if (!events || !events.length) return;
        list.innerHTML = '';
        events.slice().reverse().forEach(function (ev, i) {
            var li = document.createElement('li');
            if (i === 0) li.classList.add('is-current');
            if (/^(PB|ND)/.test(ev.code)) li.classList.add('is-problem');
            var label = document.createElement('div');
            label.className = 'adm-timeline-label';
            label.textContent = ev.label;
            var date = document.createElement('div');
            date.className = 'adm-timeline-date';
            date.textContent = new Date(ev.date).toLocaleString('fr-FR') + ' · ' + ev.code;
            li.appendChild(label);
            li.appendChild(date);
            list.appendChild(li);
        });
        wrap.hidden = false;
    }

    var btnTracking = document.getElementById('btn-save-tracking');
    btnTracking.addEventListener('click', function () {
        var number = document.getElementById('trk-number').value.trim();
        if (!number) {
            showNotification({ success: false, title: 'Numéro de suivi requis' });
            return;
        }
        btnTracking.disabled = true;
        // admTrackingSave vérifie le numéro côté serveur : si le transporteur ne le
        // reconnaît pas, la modale propose de forcer avant de rejouer la requête.
        admTrackingSave(api('tracking'), {
            carrier: carrierSel.value,
            number: number,
            url: document.getElementById('trk-url').value.trim(),
            notifyClient: document.getElementById('trk-notify').checked
        }).then(function (data) {
            showNotification({
                success: true,
                title: 'Suivi enregistré',
                message: (data.emailSent ? 'Email « colis expédié » envoyé. ' : '') + (data.trackingError ? 'Suivi auto indisponible : ' + data.trackingError : '')
            });
            var badge = document.querySelector('[data-status-badge]');
            if (badge) badge.textContent = data.statusLabel;
            renderTimeline(data.timeline);
            if (data.carrier === 'laposte') {
                setTimeout(function () { window.location.reload(); }, 900);
            }
        }).catch(function () { /* annulation ou erreur : déjà signalée */ })
          .finally(function () { btnTracking.disabled = false; });
    });

    var btnTrackNow = document.getElementById('btn-track-now');
    if (btnTrackNow) {
        btnTrackNow.addEventListener('click', function () {
            btnTrackNow.disabled = true;
            admFetch(api('track-now'), { body: {} }).then(function (data) {
                showNotification({ success: true, title: 'Suivi actualisé', message: data.trackingStatusLabel || null });
                renderTimeline(data.timeline);
                var checked = document.getElementById('trk-checked-at');
                if (checked && data.checkedAt) checked.textContent = 'Vérifié le ' + data.checkedAt;
                var badge = document.querySelector('[data-status-badge]');
                if (badge && data.statusLabel) badge.textContent = data.statusLabel;
            }).finally(function () { btnTrackNow.disabled = false; });
        });
    }

    /* ---- Note interne ---- */
    var btnNote = document.getElementById('btn-save-note');
    btnNote.addEventListener('click', function () {
        btnNote.disabled = true;
        admFetch(api('note'), { body: { note: document.getElementById('note-interne').value } })
            .then(function () { showNotification({ success: true, title: 'Note enregistrée' }); })
            .finally(function () { btnNote.disabled = false; });
    });
})();
</script>
{% endblock %}