{% extends 'base.html.twig' %}
{% block title %}Proveedor: {{ provider.razonSocial }}{% 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('proveedor_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Proveedores</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">{{ provider.razonSocial }}</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">
				{{ provider.razonSocial }}
			</h2>
			<p class="mt-1 flex items-center text-sm text-secondary-500">
				<span class="truncate">{{ provider.clasificacion ?? 'Sin clasificación' }} · {{ provider.nit }}</span>
				{% if provider.activo %}
					<span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Activo</span>
				{% else %}
					<span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactivo</span>
				{% endif %}
			</p>
		</div>
		<div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
			<a href="{{ path('proveedor_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 text-secondary-500" 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="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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
				</svg>
				Editar
			</a>
		</div>
	</div>
{% endblock %}

{% block content %}
	<div class="space-y-6">
		{# Header Card #}
		<div class="bg-gradient-to-r from-primary-600 to-primary-800 rounded-lg shadow-lg px-6 py-8 text-white">
			<div class="flex flex-wrap justify-between items-center gap-6">
				<div>
					<p class="text-primary-200 text-sm uppercase tracking-wider">Código Interno</p>
					<p class="text-2xl font-bold">{{ provider.codigo ?? 'Pendiente' }}</p>
				</div>
				<div class="flex gap-8">
					<div class="text-center">
						<p class="text-primary-200 text-sm">Saldo Inicial</p>
						<p class="text-xl font-semibold">Q {{ provider.saldoInicial|default(0)|number_format(2, '.', ',') }}</p>
					</div>
					<div class="text-center">
						<p class="text-primary-200 text-sm">Límite Crédito</p>
						<p class="text-xl font-semibold">Q {{ provider.limiteCredito|default(0)|number_format(2, '.', ',') }}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			{# Datos Generales #}
			<div class="lg:col-span-2 bg-white shadow rounded-lg">
				<div class="px-6 py-5 border-b border-secondary-200">
					<h3 class="text-lg font-medium text-secondary-900">Datos Generales</h3>
				</div>
				<div class="px-6 py-5">
					<dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
						<div>
							<dt class="text-sm font-medium text-secondary-500">NIT</dt>
							<dd class="mt-1 text-sm text-secondary-900 font-semibold">{{ provider.nit }}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Razón Social</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.razonSocial }}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Nombre Comercial</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.comercial ?? 'No registrado' }}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Teléfono</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.telefono ?? 'No registrado' }}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Correo Electrónico</dt>
							<dd class="mt-1 text-sm text-secondary-900">
								{% if provider.email %}
									<a href="mailto:{{ provider.email }}" class="text-primary-600 hover:text-primary-800">{{ provider.email }}</a>
								{% else %}
									No registrado
								{% endif %}
							</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Contacto</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.contacto ?? 'No registrado' }}</dd>
						</div>
						<div class="sm:col-span-2">
							<dt class="text-sm font-medium text-secondary-500">Dirección</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.direccion ?? 'No registrada' }}</dd>
						</div>
					</dl>
				</div>
			</div>

			{# Ubicación y Clasificación #}
			<div class="bg-white shadow rounded-lg">
				<div class="px-6 py-5 border-b border-secondary-200">
					<h3 class="text-lg font-medium text-secondary-900">Ubicación</h3>
				</div>
				<div class="px-6 py-5">
					<dl class="space-y-4">
						<div>
							<dt class="text-sm font-medium text-secondary-500">País</dt>
							<dd class="mt-1 text-sm text-secondary-900 flex items-center">
								<span class="mr-2">🌎</span>{{ provider.pais ?? 'Guatemala' }}
							</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Clasificación</dt>
							<dd class="mt-1">
								<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
									{{ provider.clasificacion ?? 'Sin clasificación' }}
								</span>
							</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Condición de Pago</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.condicionPago ?? 'Contado' }}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-secondary-500">Régimen Fiscal</dt>
							<dd class="mt-1 text-sm text-secondary-900">{{ provider.regimenFiscal ?? 'No especificado' }}</dd>
						</div>
					</dl>
				</div>
			</div>
		</div>

		{# Configuración Fiscal #}
		<div class="bg-white shadow rounded-lg">
			<div class="px-6 py-5 border-b border-secondary-200">
				<h3 class="text-lg font-medium text-secondary-900 flex items-center">
					<svg class="h-5 w-5 mr-2 text-secondary-400" 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>
					Configuración Fiscal
				</h3>
			</div>
			<div class="px-6 py-5">
				<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
					<div class="text-center p-4 bg-blue-50 rounded-lg">
						<p class="text-xs text-blue-600 uppercase font-medium">IVA</p>
						<p class="text-xl font-bold text-blue-800">{{ provider.impuestoPorcentaje ?? 0 }}%</p>
						<p class="text-xs text-blue-600">{{ provider.impuestoNombre ?? 'No configurado' }}</p>
					</div>
					<div class="text-center p-4 {{ provider.flags.retencionIsr ? 'bg-amber-50' : 'bg-secondary-50' }} rounded-lg">
						<p class="text-xs {{ provider.flags.retencionIsr ? 'text-amber-600' : 'text-secondary-500' }} uppercase font-medium">Ret. ISR</p>
						<p class="text-xl font-bold {{ provider.flags.retencionIsr ? 'text-amber-800' : 'text-secondary-600' }}">
							{{ provider.flags.retencionIsr ? 'Sí' : 'No' }}
						</p>
						<p class="text-xs {{ provider.flags.retencionIsr ? 'text-amber-600' : 'text-secondary-400' }}">
							{{ provider.retencionIsrNombre ?? 'No aplica' }}
						</p>
					</div>
					<div class="text-center p-4 {{ provider.flags.retencionIva ? 'bg-purple-50' : 'bg-secondary-50' }} rounded-lg">
						<p class="text-xs {{ provider.flags.retencionIva ? 'text-purple-600' : 'text-secondary-500' }} uppercase font-medium">Ret. IVA</p>
						<p class="text-xl font-bold {{ provider.flags.retencionIva ? 'text-purple-800' : 'text-secondary-600' }}">
							{{ provider.flags.retencionIva ? 'Sí' : 'No' }}
						</p>
						<p class="text-xs {{ provider.flags.retencionIva ? 'text-purple-600' : 'text-secondary-400' }}">
							{{ provider.retencionIvaNombre ?? 'No aplica' }}
						</p>
					</div>
					<div class="text-center p-4 {{ provider.flags.aplicaIdp ? 'bg-green-50' : 'bg-secondary-50' }} rounded-lg">
						<p class="text-xs {{ provider.flags.aplicaIdp ? 'text-green-600' : 'text-secondary-500' }} uppercase font-medium">IDP</p>
						<p class="text-xl font-bold {{ provider.flags.aplicaIdp ? 'text-green-800' : 'text-secondary-600' }}">
							{{ provider.flags.aplicaIdp ? 'Sí' : 'No' }}
						</p>
						<p class="text-xs {{ provider.flags.aplicaIdp ? 'text-green-600' : 'text-secondary-400' }}">
							Combustibles
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}