{% extends 'base.html.twig' %}
{% block title %}Detalle del Documento{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li>
        <div>
          <a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">
            <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
            <span class="sr-only">Inicio</span>
          </a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="{{ path('documento_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Documentos</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <span class="ml-4 text-sm font-medium text-secondary-500">Detalle</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">
        Documento {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}
      </h2>
      <p class="mt-1 text-sm text-secondary-500">
        Detalle completo del documento registrado
      </p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
      <a href="{{ path('documento_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Volver
      </a>
      <a href="{{ path('documento_print', {id: documento.id}) }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
        </svg>
        Imprimir
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  {# Success badge #}
  <div class="mb-6 flex items-center">
    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
      <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
      Documento Registrado
    </span>
  </div>

  <div class="space-y-6">
    {# Información General #}
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6 bg-gradient-to-r from-primary-50 to-primary-100">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Información General
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          Datos principales del documento
        </p>
      </div>
      <div class="border-t border-secondary-200">
        <dl>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Proveedor</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2 font-semibold">
              {{ documento.proveedor.razonSocial }}
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">NIT</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              {{ documento.proveedor.nit }}
            </dd>
          </div>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Tipo de Documento</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {{ documento.tipoDocumento.codigo }}
              </span>
              {{ documento.tipoDocumento.nombre }}
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Serie y Número</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2 font-mono">
              {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}
            </dd>
          </div>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Fechas</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              <div class="grid grid-cols-3 gap-4">
                <div>
                  <p class="text-xs text-secondary-500">Emisión</p>
                  <p class="font-medium">{{ documento.fechaEmision|date('d/m/Y') }}</p>
                </div>
                <div>
                  <p class="text-xs text-secondary-500">Recepción</p>
                  <p class="font-medium">{{ documento.fechaRecepcion|date('d/m/Y') }}</p>
                </div>
                <div>
                  <p class="text-xs text-secondary-500">Vencimiento</p>
                  <p class="font-medium">{{ documento.fechaVencimiento|date('d/m/Y') }}</p>
                </div>
              </div>
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Moneda</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              {{ documento.moneda.codigo }} - {{ documento.moneda.nombre }}
            </dd>
          </div>
        </dl>
      </div>
    </div>

    {# Detalle de Líneas #}
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6 bg-gradient-to-r from-primary-50 to-primary-100">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Detalle de Líneas
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          {{ lineas|length }} línea(s) de detalle
        </p>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-secondary-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">#</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Descripción</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Cantidad</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Precio Unit.</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Subtotal</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Impuesto</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Total</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-secondary-200">
            {% for linea in lineas %}
            <tr class="hover:bg-secondary-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary-900">{{ linea.linea }}</td>
              <td class="px-6 py-4 text-sm text-secondary-900">{{ linea.descripcion }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-secondary-900">{{ linea.cantidad|number_format(2, '.', ',') }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-secondary-900">{{ linea.precioUnitario|number_format(2, '.', ',') }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-secondary-900">{{ (linea.cantidad * linea.precioUnitario)|number_format(2, '.', ',') }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-secondary-900">{{ linea.impuestoMonto|number_format(2, '.', ',') }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-secondary-900">
                {{ documento.moneda.codigo }} {{ linea.totalLinea|number_format(2, '.', ',') }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {# Detalle de Pagos #}
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6 bg-gradient-to-r from-primary-50 to-primary-100">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Detalle de Pagos
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          {{ pagosAplicados|length }} pago(s) aplicado(s)
        </p>
      </div>
      <div class="overflow-x-auto">
        {% if pagosAplicados|length > 0 %}
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-secondary-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Código</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Fecha</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Monto</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Forma de Pago</th>
              <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-secondary-500 uppercase tracking-wider">Estado</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-secondary-200">
            {% for pago in pagosAplicados %}
            <tr class="hover:bg-secondary-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary-900">
                <a href="{{ path('pago_aplicar', {id: pago.pagoId}) }}" class="text-primary-600 hover:text-primary-900">
                  PAY-{{ '%05d'|format(pago.pagoId) }}
                </a>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-900">
                {{ pago.fecha|date('d/m/Y') }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-secondary-900">
                {{ pago.monedaCodigo }} {{ pago.monto|number_format(2, '.', ',') }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-900">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                  {{ pago.formaPago }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-center text-sm">
                {% if pago.estado == 'Aplicado' %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Aplicado
                  </span>
                {% elseif pago.estado == 'Anulado' %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    Anulado
                  </span>
                {% else %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    {{ pago.estado }}
                  </span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="px-6 py-12 text-center">
          <svg class="mx-auto h-12 w-12 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
          <p class="mt-2 text-sm text-secondary-500">No hay pagos aplicados a este documento</p>
        </div>
        {% endif %}
      </div>
    </div>

    {# Totales #}
    <div class="bg-white shadow sm:rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
          <div class="bg-secondary-50 overflow-hidden shadow rounded-lg border border-secondary-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-secondary-500 truncate">Subtotal</dt>
              <dd class="mt-1 text-2xl font-semibold text-secondary-900">
                {{ documento.moneda.codigo }} {{ documento.subtotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-blue-50 overflow-hidden shadow rounded-lg border border-blue-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-blue-700 truncate">IVA (12%)</dt>
              <dd class="mt-1 text-2xl font-semibold text-blue-900">
                {{ documento.moneda.codigo }} {{ documento.impuestoTotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-red-50 overflow-hidden shadow rounded-lg border border-red-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-red-700 truncate">Retenciones</dt>
              <dd class="mt-1 text-2xl font-semibold text-red-900">
                -{{ documento.moneda.codigo }} {{ documento.retencionTotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-green-50 overflow-hidden shadow rounded-lg border border-green-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-green-700 truncate">Pagos Aplicados</dt>
              <dd class="mt-1 text-2xl font-semibold text-green-900">
                -{{ documento.moneda.codigo }} {{ totalPagosAplicados|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-gradient-to-br from-primary-50 to-primary-100 overflow-hidden shadow-lg rounded-lg border-2 border-primary-300">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-bold text-primary-700 truncate">TOTAL A PAGAR</dt>
              <dd class="mt-1 text-3xl font-bold text-primary-900">
                {{ documento.moneda.codigo }} {{ documento.saldoPendiente|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}