{% extends 'base.html.twig' %}
{% block title %}Órdenes de compra{% endblock %}

{% block breadcrumb %}
  <nav class="breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="{{ path('home') }}">Inicio</a></li>
      <li class="breadcrumb-item active" aria-current="page">Órdenes</li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-heading">
    <div>
      <p class="text-muted mb-1">Vinculación con documentos CxP</p>
      <h1 class="h3 mb-0">Órdenes de compra</h1>
    </div>
    <a class="btn btn-primary" href="#"><i class="bi bi-plus-lg me-1"></i>Nueva orden</a>
  </div>
{% endblock %}

{% block content %}
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>Órdenes vigentes</span>
      <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm">Importar</button>
        <button class="btn btn-outline-secondary btn-sm">Exportar</button>
      </div>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-modern mb-0" data-table="grid" data-export-title="Órdenes de compra">
          <thead class="table-light">
            <tr>
              <th>Orden</th>
              <th>Proveedor</th>
              <th>Fecha</th>
              <th>Moneda</th>
              <th class="text-end">Total</th>
              <th>Estado</th>
              <th>Entregado</th>
            </tr>
          </thead>
          <tbody>
            {% for oc in ordenes %}
              <tr>
                <td class="fw-semibold">{{ oc.numero }}</td>
                <td>{{ oc.proveedor }}</td>
                <td>{{ oc.fecha }}</td>
                <td>{{ oc.moneda }}</td>
                <td class="text-end">{{ oc.total }}</td>
                <td><span class="status-pill {{ oc.estado == 'Parcial' ? 'warning' : 'success' }}">{{ oc.estado }}</span></td>
                <td style="min-width:180px">
                  <div class="progress" style="height:6px;">
                    <div class="progress-bar" role="progressbar" style="width: {{ oc.entregado }}%"></div>
                  </div>
                  <small class="text-muted">{{ oc.entregado }}% vinculado</small>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock %}