{% extends 'base.html.twig' %}
{% block title %}Anticipos{% 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">Anticipos</li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-heading">
    <div>
      <p class="text-muted mb-1">Saldos a favor por proveedor</p>
      <h1 class="h3 mb-0">Anticipos de proveedor</h1>
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNuevoAnticipo"><i class="bi bi-plus-lg me-1"></i>Registrar anticipo</button>
  </div>
{% endblock %}

{% block content %}
  <div class="row g-3 mb-3">
    <div class="col-sm-4">
      <div class="metric-card">
        <div class="metric-label">Anticipos vigentes</div>
        <div class="metric-value">{{ resumen.vigentes }}</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="metric-card">
        <div class="metric-label">Saldo consolidado</div>
        <div class="metric-value">{{ resumen.saldo }}</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-muted small mb-1">Por moneda</p>
          {% for moneda in resumen.monedas %}
            <div class="d-flex justify-content-between">
              <span>{{ moneda.moneda }}</span>
              <span class="fw-semibold">{{ moneda.saldo }}</span>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">Listado de anticipos</div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-modern mb-0" data-table="grid" data-export-title="Anticipos">
          <thead class="table-light">
            <tr>
              <th>Código</th>
              <th>Proveedor</th>
              <th>Fecha</th>
              <th>Moneda</th>
              <th class="text-end">Monto</th>
              <th class="text-end">Saldo</th>
              <th>Estado</th>
            </tr>
          </thead>
          <tbody>
            {% for a in anticipos %}
              <tr>
                <td>{{ a.codigo }}</td>
                <td>{{ a.proveedor }}</td>
                <td>{{ a.fecha }}</td>
                <td>{{ a.moneda }}</td>
                <td class="text-end">{{ a.monto }}</td>
                <td class="text-end">{{ a.saldo }}</td>
                <td><span class="status-pill {{ a.estado == 'Aplicado' ? 'success' : 'warning' }}">{{ a.estado }}</span></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="modal fade modal-rounded" id="modalNuevoAnticipo" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Nuevo anticipo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Proveedor</label>
              <input class="form-control" placeholder="Proveedor">
            </div>
            <div class="col-md-3">
              <label class="form-label">Moneda</label>
              <select class="form-select">
                <option>GTQ</option>
                <option>USD</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Tipo cambio</label>
              <input class="form-control" value="7.82">
            </div>
            <div class="col-md-4">
              <label class="form-label">Fecha</label>
              <input type="date" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Monto</label>
              <input class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Referencia</label>
              <input class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label">Observaciones</label>
              <textarea class="form-control" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button class="btn btn-primary">Registrar anticipo</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}