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

{% block title %}Bon de Commande N° {{ '%04d'|format(commande.id) }}{% endblock %}

{% block body %}

{# CSS impression #}
<style>
  @media print {
    .d-print-none { display: none !important; }
    .d-print-block { display: block !important; }
    .app-topbar, .app-sidebar, .flash-container { display: none !important; }
    .app-main { margin-left: 0 !important; margin-top: 0 !important; padding: 1rem !important; width: 100% !important; }
    body { padding: 0; margin: 0; }
    .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
    .badge { border: 1px solid currentColor; }
  }
  @media screen {
    .d-print-block { display: none; }
  }
</style>

{# ── En-tête ─────────────────────────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-center mb-4 d-print-none">
  <h1 class="h3 fw-bold page-title mb-0">
    <i class="fas fa-file-alt me-2"></i>Bon de Commande N° {{ '%04d'|format(commande.id) }}
  </h1>
  <div class="d-flex gap-2">
    <a href="{{ path('tenant_commandes_index') }}" class="btn btn-secondary">
      <i class="fas fa-arrow-left me-1"></i>Retour à la liste
    </a>
    <button onclick="window.print()" class="btn btn-info">
      <i class="fas fa-print me-1"></i>Imprimer
    </button>
    <a href="{{ path('tenant_commandes_pdf', {id: commande.id}) }}" class="btn btn-success">
      <i class="fas fa-download me-1"></i>Télécharger PDF
    </a>
  </div>
</div>

{# En-tête impression uniquement #}
<div class="d-print-block text-center mb-4">
  <h2>{{ config.nom_etablissement ?? 'Restaurant Scolaire' }}</h2>
  <h4>Bon de Commande N° {{ '%04d'|format(commande.id) }}</h4>
</div>

{# ── Ligne du haut : Infos générales + Statut ────────────────────────────── #}
<div class="row mb-4" id="printable-content">

  {# ── Card Informations générales ────────────────────────────────────────── #}
  <div class="col-md-6 mb-4 mb-md-0">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header fw-semibold">
        <i class="fas fa-info-circle me-1"></i>Informations générales
      </div>
      <div class="card-body p-0">
        <table class="table table-borderless mb-0">
          <tr>
            <th style="width:45%" class="ps-3 text-muted small">Date de commande :</th>
            <td>{{ commande.date_commande ? commande.date_commande|date('d/m/Y') : '—' }}</td>
          </tr>
          <tr>
            <th class="ps-3 text-muted small">Fournisseur :</th>
            <td class="fw-semibold">{{ commande.fournisseur }}</td>
          </tr>
          <tr>
            <th class="ps-3 text-muted small">Livraison souhaitée :</th>
            <td>{% if commande.date_livraison_souhaitee %}<strong>{{ commande.date_livraison_souhaitee|date('d/m/Y') }}</strong>{% else %}—{% endif %}</td>
          </tr>
          <tr>
            <th class="ps-3 text-muted small">Statut :</th>
            <td>
              {% set badges = {brouillon: 'bg-secondary', envoyee: 'bg-warning text-dark', recue: 'bg-success', annulee: 'bg-danger'} %}
              <span class="badge {{ badges[commande.statut] ?? 'bg-secondary' }}">{{ commande.statut|capitalize }}</span>
            </td>
          </tr>
          {% if commande.convertie_en_achats %}
          <tr>
            <td colspan="2" class="ps-3 pb-2">
              <div class="alert alert-success py-2 mb-0 small">
                <i class="fas fa-check-circle me-1"></i>
                Cette commande a été automatiquement ajoutée aux achats.
                <a href="{{ path('tenant_achats_index') }}" class="alert-link fw-semibold">Voir les achats générés</a>
              </div>
            </td>
          </tr>
          {% endif %}
          {% if commande.notes %}
          <tr>
            <th class="ps-3 text-muted small align-top">Notes :</th>
            <td>{{ commande.notes|nl2br }}</td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

  {# ── Card Mettre à jour le statut (non imprimé) ─────────────────────────── #}
  <div class="col-md-6 d-print-none">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header fw-semibold">
        <i class="fas fa-exchange-alt me-1"></i>Mettre à jour le statut
      </div>
      <div class="card-body">

        {% if commande.statut != 'envoyee' and destinataires is not empty %}
          <div class="alert alert-info py-2 mb-3">
            <i class="fas fa-envelope me-1"></i>
            <strong>Email automatique :</strong> Quand vous passerez le statut à "Envoyée",
            un email sera automatiquement envoyé à :
            <strong>{{ destinataires|join(', ') }}</strong>
          </div>
        {% elseif commande.statut != 'envoyee' and destinataires is empty %}
          <div class="alert alert-warning py-2 mb-3">
            <i class="fas fa-exclamation-triangle me-1"></i>
            <strong>Aucun email configuré :</strong> Configurez l'email du fournisseur ou l'email expéditeur
            (Paramètres → Email) pour l'envoi automatique.
          </div>
        {% endif %}

        <form method="post" action="{{ path('tenant_commandes_statut', {id: commande.id}) }}" class="d-flex gap-2"
              onsubmit="return confirmerStatut(this)">
          <input type="hidden" name="_token" value="{{ csrf_token('commande_statut_' ~ commande.id) }}">
          <select name="statut" class="form-select" id="statut-select">
            <option value="brouillon" {{ commande.statut == 'brouillon' ? 'selected' }}>Brouillon</option>
            <option value="envoyee"  {{ commande.statut == 'envoyee'  ? 'selected' }}>Envoyée</option>
            <option value="recue"    {{ commande.statut == 'recue'    ? 'selected' }}>Reçue</option>
            <option value="annulee"  {{ commande.statut == 'annulee'  ? 'selected' }}>Annulée</option>
          </select>
          <button type="submit" class="btn btn-primary text-nowrap">Mettre à jour</button>
        </form>

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

</div>

{# ── Tableau Produits commandés (pleine largeur) ──────────────────────────── #}
<div class="row mb-4">
  <div class="col-12">
    <div class="card border-0 shadow-sm">
      <div class="card-header fw-semibold">
        <i class="fas fa-boxes me-1"></i>Produits commandés
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th>Produit</th>
                <th class="text-center">Qté</th>
                <th>Unité</th>
                <th class="text-end">Prix HT</th>
                <th class="text-center">TVA</th>
                <th class="text-end">Prix TTC</th>
                <th class="text-end">Total HT</th>
                <th class="text-end">Total TTC</th>
              </tr>
            </thead>
            <tbody>
              {% if lignes is empty %}
                <tr><td colspan="8" class="text-center py-3 text-muted">Aucun produit dans cette commande</td></tr>
              {% else %}
                {% set totalHT = 0 %}
                {% set totalTTC = 0 %}
                {% for ligne in lignes %}
                  {% set qte = ligne.quantite ?? 0 %}
                  {% set tva = ligne.taux_tva ?? 0 %}
                  {% if ligne.is_ttc == 1 %}
                    {% set prixTTC = ligne.prix_ttc ?? ligne.prix_ht ?? 0 %}
                    {% set prixHT  = tva > 0 ? prixTTC / (1 + tva / 100) : prixTTC %}
                  {% else %}
                    {% set prixHT  = ligne.prix_ht ?? 0 %}
                    {% set prixTTC = prixHT * (1 + tva / 100) %}
                  {% endif %}
                  {% set ligneHT  = prixHT * qte %}
                  {% set ligneTTC = prixTTC * qte %}
                  {% set totalHT  = totalHT + ligneHT %}
                  {% set totalTTC = totalTTC + ligneTTC %}
                  <tr>
                    <td>
                      <strong>{{ ligne.produit }}</strong>
                      {% if ligne.label %}<span class="badge bg-info ms-1" style="font-size:0.7rem">{{ ligne.label }}</span>{% endif %}
                      {% if ligne.origine %}<br><small class="text-muted">{{ ligne.origine }}</small>{% endif %}
                    </td>
                    <td class="text-center">{{ qte|number_format(3, ',', ' ') }}</td>
                    <td>{{ ligne.unite ?? '' }}</td>
                    <td class="text-end">{{ prixHT > 0 ? prixHT|number_format(3, ',', ' ') ~ ' €' : '—' }}</td>
                    <td class="text-center">{{ tva }}%</td>
                    <td class="text-end">{{ prixTTC > 0 ? prixTTC|number_format(3, ',', ' ') ~ ' €' : '—' }}</td>
                    <td class="text-end">{{ ligneHT > 0 ? ligneHT|number_format(3, ',', ' ') ~ ' €' : '—' }}</td>
                    <td class="text-end fw-semibold">{{ ligneTTC > 0 ? ligneTTC|number_format(3, ',', ' ') ~ ' €' : '—' }}</td>
                  </tr>
                {% endfor %}
              {% endif %}
            </tbody>
            {% if lignes is not empty %}
            <tfoot class="table-light">
              <tr class="align-middle">
                <td colspan="6" class="py-2"></td>
                <td class="text-end py-2">
                  <span class="fw-semibold d-block">Total HT :</span>
                  <span class="fw-bold text-muted">{{ totalHT|number_format(3, ',', ' ') }} €</span>
                </td>
                <td class="text-end py-2">
                  <span class="fw-semibold d-block">Total TTC :</span>
                  <span class="fw-bold">{{ totalTTC|number_format(3, ',', ' ') }} €</span>
                </td>
              </tr>
            </tfoot>
            {% endif %}
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{# ── Zone signature (impression uniquement) ──────────────────────────────── #}
<div class="row">
  <div class="col-12 d-print-block mt-5">
    <div class="row">
      <div class="col-6">
        <div class="border-top pt-2">
          <p><strong>Date et signature de {{ config.nom_etablissement ?? 'la restauration' }} :</strong></p>
          <div style="height: 80px;"></div>
        </div>
      </div>
      <div class="col-6">
        <div class="border-top pt-2">
          <p><strong>Date et signature du Fournisseur :</strong></p>
          <div style="height: 80px;"></div>
        </div>
      </div>
    </div>
  </div>

</div>{# /row #}

{# ── Boutons bas de page (non imprimés) ──────────────────────────────────── #}
<div class="d-flex justify-content-center gap-2 my-4 d-print-none">
  <a href="{{ path('tenant_commandes_edit', {id: commande.id}) }}" class="btn btn-warning">
    <i class="fas fa-pencil-alt me-1"></i>Modifier
  </a>
  <button onclick="window.print()" class="btn btn-info">
    <i class="fas fa-print me-1"></i>Imprimer
  </button>
  <a href="{{ path('tenant_commandes_pdf', {id: commande.id}) }}" class="btn btn-success">
    <i class="fas fa-download me-1"></i>Télécharger PDF
  </a>
  {% if commande.statut == 'brouillon' %}
  <form method="post" action="{{ path('tenant_commandes_statut', {id: commande.id}) }}" class="d-inline"
        onsubmit="return confirm('📧 Envoyer cette commande au fournisseur par email ?')">
    <input type="hidden" name="_token" value="{{ csrf_token('commande_statut_' ~ commande.id) }}">
    <input type="hidden" name="statut" value="envoyee">
    <button class="btn btn-primary">
      <i class="fas fa-paper-plane me-1"></i>Envoyer au fournisseur
    </button>
  </form>
  {% endif %}
</div>

<script>
function confirmerStatut(form) {
  const select = form.querySelector('[name="statut"]');
  const statutActuel = '{{ commande.statut }}';
  const destinataires = {{ destinataires|json_encode|raw }};

  if (select.value === 'envoyee' && statutActuel !== 'envoyee' && destinataires.length > 0) {
    return confirm(
      '📧 Confirmer l\'envoi d\'email ?\n\n' +
      'Un email de commande sera automatiquement envoyé à :\n' +
      destinataires.join('\n') + '\n\nVoulez-vous continuer ?'
    );
  }
  return true;
}
</script>

{% endblock body %}