{% extends 'base.html.twig' %}
{% block title %}Proveedor: {{ provider.razonSocial }}{% endblock %}

{% block breadcrumb %}
  <nav aria-label="Breadcrumb">
    <ol class="flex min-w-0 flex-wrap items-center gap-2 text-sm">
      <li>
        <a href="{{ path('home') }}" class="inline-flex h-10 w-10 items-center justify-center rounded-control text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700" aria-label="Inicio">
          <svg class="h-5 w-5" aria-hidden="true" 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>
        </a>
      </li>
      <li class="text-secondary-300" aria-hidden="true">/</li>
      <li>
        <a href="{{ path('proveedor_index') }}" class="font-medium text-secondary-500 hover:text-secondary-700">Proveedores</a>
      </li>
      <li class="text-secondary-300" aria-hidden="true">/</li>
      <li class="min-w-0" aria-current="page">
        <span class="block max-w-[12rem] truncate font-medium text-secondary-700 sm:max-w-sm" title="{{ provider.razonSocial }}">{{ provider.razonSocial }}</span>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <header class="page-header">
    <div class="min-w-0">
      <div class="flex min-w-0 flex-wrap items-center gap-3">
        <h2 class="page-title min-w-0 break-words">{{ provider.razonSocial }}</h2>
        <span class="badge {{ provider.activo ? 'badge-success' : 'badge-danger' }}">
          {{ provider.activo ? 'Activo' : 'Inactivo' }}
        </span>
      </div>
      <p class="page-subtitle">NIT {{ provider.nit }}</p>
    </div>
    <div class="page-actions w-full sm:w-auto">
      <a href="{{ path('proveedor_index') }}" class="btn btn-outline-secondary flex-1 sm:flex-none">
        <svg class="h-4 w-4" aria-hidden="true" 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('proveedor_edit', {id: provider.id}) }}" class="btn btn-primary flex-1 sm:flex-none">
        <svg class="h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a1.999 1.999 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
        </svg>
        Editar
      </a>
    </div>
  </header>
{% endblock %}

{% block content %}
  <div class="min-w-0 space-y-6">
    <section class="section-card" aria-labelledby="provider-summary-title">
      <div class="section-card-header flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
          <h3 id="provider-summary-title" class="section-card-title">Resumen financiero</h3>
          <p class="section-card-subtitle">Saldos y limites configurados para este proveedor.</p>
        </div>
        <div class="min-w-0 sm:text-right">
          <span class="type-metadata block uppercase text-secondary-500">Codigo interno</span>
          <strong class="mt-1 block break-words text-lg font-semibold text-secondary-900">{{ provider.codigo ?? 'Pendiente' }}</strong>
        </div>
      </div>

      <dl class="grid grid-cols-1 gap-px bg-secondary-200 sm:grid-cols-2 xl:grid-cols-4">
        <div class="min-w-0 bg-white px-5 py-5">
          <dt class="metric-label">Saldo inicial</dt>
          <dd class="metric-value block break-words text-xl sm:text-2xl">{{ balances.moneda ?? 'Q' }} {{ provider.saldoInicial|default(0)|number_format(2, '.', ',') }}</dd>
        </div>
        <div class="min-w-0 bg-white px-5 py-5">
          <dt class="metric-label">Limite de credito</dt>
          <dd class="metric-value block break-words text-xl sm:text-2xl">{{ balances.moneda ?? 'Q' }} {{ provider.limiteCredito|default(0)|number_format(2, '.', ',') }}</dd>
        </div>
        <div class="min-w-0 bg-success-50 px-5 py-5">
          <dt class="metric-label text-success-700">Saldo a favor</dt>
          <dd class="metric-value block break-words text-xl text-success-900 sm:text-2xl">{{ balances.moneda }} {{ balances.saldo_favor|number_format(2, '.', ',') }}</dd>
        </div>
        <div class="min-w-0 bg-danger-50 px-5 py-5">
          <dt class="metric-label text-danger-700">Saldo pendiente de pago</dt>
          <dd class="metric-value block break-words text-xl text-danger-900 sm:text-2xl">{{ balances.moneda }} {{ balances.saldo_contra|number_format(2, '.', ',') }}</dd>
        </div>
      </dl>
    </section>

    <div class="grid min-w-0 grid-cols-1 gap-6 lg:grid-cols-3">
      <section class="section-card min-w-0 lg:col-span-2" aria-labelledby="provider-general-title">
        <div class="section-card-header">
          <h3 id="provider-general-title" class="section-card-title">Datos generales</h3>
          <p class="section-card-subtitle">Identificacion y datos de contacto del proveedor.</p>
        </div>
        <div class="section-card-body">
          <dl class="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
            <div class="min-w-0">
              <dt class="type-helper font-medium">NIT</dt>
              <dd class="mt-1 break-words text-sm font-semibold text-secondary-900">{{ provider.nit }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Razon social</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.razonSocial }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Nombre comercial</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.comercial ?? 'No registrado' }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Telefono</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.telefono ?? 'No registrado' }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Correo electronico</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">
                {% if provider.email %}
                  <a href="mailto:{{ provider.email }}" class="break-all text-primary-600 hover:text-primary-800">{{ provider.email }}</a>
                {% else %}
                  No registrado
                {% endif %}
              </dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Contacto</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.contacto ?? 'No registrado' }}</dd>
            </div>
            <div class="min-w-0 sm:col-span-2">
              <dt class="type-helper font-medium">Direccion</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.direccion ?? 'No registrada' }}</dd>
            </div>
          </dl>
        </div>
      </section>

      <section class="section-card min-w-0" aria-labelledby="provider-location-title">
        <div class="section-card-header">
          <h3 id="provider-location-title" class="section-card-title">Ubicacion y clasificacion</h3>
          <p class="section-card-subtitle">Parametros usados en la operacion.</p>
        </div>
        <div class="section-card-body">
          <dl class="space-y-5">
            <div class="min-w-0">
              <dt class="type-helper font-medium">Pais</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.pais ?? 'Guatemala' }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Clasificacion</dt>
              <dd class="mt-2"><span class="badge badge-info">{{ provider.clasificacion ?? 'Sin clasificacion' }}</span></dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Condicion de pago</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.condicionPago ?? 'Contado' }}</dd>
            </div>
            <div class="min-w-0">
              <dt class="type-helper font-medium">Regimen fiscal</dt>
              <dd class="mt-1 break-words text-sm text-secondary-900">{{ provider.regimenFiscal ?? 'No especificado' }}</dd>
            </div>
          </dl>
        </div>
      </section>
    </div>

    <section class="section-card min-w-0" aria-labelledby="provider-tax-title">
      <div class="section-card-header">
        <h3 id="provider-tax-title" class="section-card-title flex items-center gap-2">
          <svg class="h-5 w-5 text-secondary-400" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
          Configuracion fiscal
        </h3>
        <p class="section-card-subtitle">Impuestos y retenciones definidos para el proveedor.</p>
      </div>

      <dl class="grid grid-cols-1 gap-px bg-secondary-200 sm:grid-cols-2 xl:grid-cols-4">
        <div class="min-w-0 bg-info-50 p-5 text-center">
          <dt class="text-xs font-semibold uppercase text-info-700">IVA</dt>
          <dd class="mt-2 break-words text-xl font-bold text-info-900">{{ provider.impuestoPorcentaje ?? 0 }}%</dd>
          <dd class="mt-1 break-words text-xs text-info-700">{{ provider.impuestoNombre ?? 'No configurado' }}</dd>
        </div>
        <div class="min-w-0 p-5 text-center {{ provider.flags.retencionIsr ? 'bg-warning-50' : 'bg-secondary-50' }}">
          <dt class="text-xs font-semibold uppercase {{ provider.flags.retencionIsr ? 'text-warning-700' : 'text-secondary-500' }}">Ret. ISR</dt>
          <dd class="mt-2 text-xl font-bold {{ provider.flags.retencionIsr ? 'text-warning-900' : 'text-secondary-600' }}">{{ provider.flags.retencionIsr ? 'Si' : 'No' }}</dd>
          <dd class="mt-1 break-words text-xs {{ provider.flags.retencionIsr ? 'text-warning-700' : 'text-secondary-500' }}">{{ provider.retencionIsrNombre ?? 'No aplica' }}</dd>
        </div>
        <div class="min-w-0 p-5 text-center {{ provider.flags.retencionIva ? 'bg-purple-50' : 'bg-secondary-50' }}">
          <dt class="text-xs font-semibold uppercase {{ provider.flags.retencionIva ? 'text-purple-700' : 'text-secondary-500' }}">Ret. IVA</dt>
          <dd class="mt-2 text-xl font-bold {{ provider.flags.retencionIva ? 'text-purple-900' : 'text-secondary-600' }}">{{ provider.flags.retencionIva ? 'Si' : 'No' }}</dd>
          <dd class="mt-1 break-words text-xs {{ provider.flags.retencionIva ? 'text-purple-700' : 'text-secondary-500' }}">{{ provider.retencionIvaNombre ?? 'No aplica' }}</dd>
        </div>
        <div class="min-w-0 p-5 text-center {{ provider.flags.aplicaIdp ? 'bg-success-50' : 'bg-secondary-50' }}">
          <dt class="text-xs font-semibold uppercase {{ provider.flags.aplicaIdp ? 'text-success-700' : 'text-secondary-500' }}">IDP</dt>
          <dd class="mt-2 text-xl font-bold {{ provider.flags.aplicaIdp ? 'text-success-900' : 'text-secondary-600' }}">{{ provider.flags.aplicaIdp ? 'Si' : 'No' }}</dd>
          <dd class="mt-1 text-xs {{ provider.flags.aplicaIdp ? 'text-success-700' : 'text-secondary-500' }}">Combustibles</dd>
        </div>
      </dl>
    </section>
  </div>
{% endblock %}