{% extends 'base.html.twig' %}
{% block title %}Nuevo Documento CXP{% 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">Nuevo</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">
				Nuevo Documento de Proveedor
			</h2>
			<p class="mt-1 text-sm text-secondary-500">
				Complete el formulario paso a paso
			</p>
		</div>
		<div class="mt-4 flex md:mt-0 md:ml-4">
			<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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
				Cancelar
			</a>
		</div>
	</div>
{% endblock %}

{% block content %}
	{# Wizard Progress - 3 pasos (Impuestos se configuran en Proveedor) #}
	<nav aria-label="Progress" class="mb-6">
		<ol role="list" class="flex items-center justify-between">
			<li class="relative flex-1" id="indicator-1">
				<div class="group flex flex-col border-t-4 border-primary-600 pt-4">
					<span class="text-xs font-semibold text-primary-600">PASO 1</span>
					<span class="text-sm font-medium text-secondary-900">Info General</span>
				</div>
			</li>
			<li class="relative flex-1" id="indicator-2">
				<div class="group flex flex-col border-t-4 border-secondary-200 pt-4">
					<span class="text-xs font-semibold text-secondary-500">PASO 2</span>
					<span class="text-sm font-medium text-secondary-500">Lineas</span>
				</div>
			</li>
			<li class="relative flex-1" id="indicator-3">
				<div class="group flex flex-col border-t-4 border-secondary-200 pt-4">
					<span class="text-xs font-semibold text-secondary-500">PASO 3</span>
					<span class="text-sm font-medium text-secondary-500">Resumen</span>
				</div>
			</li>
		</ol>
	</nav>

	<div class="space-y-6">
		<form id="form-documento" method="post" action="{{ path('documento_store') }}">
			{# PASO 1: Informacion General #}
			<div id="paso-1" class="bg-white shadow rounded-lg">
				<div class="px-6 py-6">
					<h3 class="text-lg font-medium text-secondary-900 mb-4">Informacion del Documento</h3>
					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Proveedor *</label>
							<select id="proveedor_id" name="proveedor_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
								<option value="">Seleccionar...</option>
								{% for prov in proveedores %}
									<option value="{{ prov.id }}"
									        data-impuesto-porcentaje="{{ prov.impuestoPorcentaje ?? 12 }}"
									        data-aplica-ret-isr="{{ prov.aplicaRetIsr ? '1' : '0' }}"
									        data-aplica-ret-iva="{{ prov.aplicaRetIva ? '1' : '0' }}"
									        data-aplica-idp="{{ prov.aplicaIdp ? '1' : '0' }}"
									        data-retencion-isr-escalonada="{{ prov.retencionIsrEscalonada ? '1' : '0' }}"
									        data-retencion-isr-limite="{{ prov.retencionIsrLimite ?? 30000 }}"
									        data-retencion-isr-porcentaje1="{{ prov.retencionIsrPorcentaje1 ?? 5 }}"
									        data-retencion-isr-porcentaje2="{{ prov.retencionIsrPorcentaje2 ?? 7 }}"
									>{{ prov.nombre }} - {{ prov.nit }}</option>
								{% endfor %}
							</select>
							<p class="mt-1 text-xs text-secondary-500">Los impuestos se aplican segun la configuracion del proveedor</p>
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Tipo Documento *</label>
							<select id="tipo_documento_id" name="tipo_documento_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
								{% for tipo in tiposDocumento %}
									<option value="{{ tipo.id }}"
									        data-genera-iva="{{ tipo.generaIva ? '1' : '0' }}"
									        data-es-factura-especial="{{ tipo.esFacturaEspecial ? '1' : '0' }}"
									        data-retiene-iva="{{ tipo.retieneIva ? '1' : '0' }}"
									        data-retiene-isr="{{ tipo.retieneIsr ? '1' : '0' }}"
									        data-porcentaje-ret-iva="{{ tipo.porcentajeRetIva ?? 100 }}"
									        data-porcentaje-ret-isr="{{ tipo.porcentajeRetIsr ?? 5 }}"
									>{{ tipo.codigo }} - {{ tipo.nombre }}</option>
								{% endfor %}
							</select>
							<p class="mt-1 text-xs text-secondary-500">Determina automaticamente el IVA</p>
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Serie</label>
							<input type="text" name="serie" id="serie" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Numero *</label>
							<input type="text" name="numero" id="numero" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Fecha Emision *</label>
							<input type="date" name="fecha_emision" id="fecha_emision" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Fecha Vencimiento *</label>
							<input type="date" name="fecha_vencimiento" id="fecha_vencimiento" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Moneda *</label>
							<select id="moneda_id" data-base-codigo="{{ monedaBase.codigo ?? 'GTQ' }}" name="moneda_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
								{% for moneda in monedas %}
									<option value="{{ moneda.id }}" data-codigo="{{ moneda.codigo }}" {{ monedaBase ? (monedaBase.codigo == moneda.codigo ? 'selected' : '') : (moneda.codigo == 'GTQ' ? 'selected' : '') }}>{{ moneda.codigo }} - {{ moneda.nombre }}</option>
								{% endfor %}
							</select>
						</div>
						<div id="tipo-cambio-container" class="hidden">
							<label class="block text-sm font-medium text-secondary-700 mb-2">Tipo de Cambio</label>
							<div class="flex items-center space-x-2">
								<input type="number" name="tipo_cambio" id="tipo_cambio" step="0.000001" min="0" value="1.000000" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
								<button type="button" id="btn-refresh-tc" class="p-2 border border-secondary-300 rounded-md hover:bg-secondary-50" title="Actualizar desde BD">
									<svg class="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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
									</svg>
								</button>
							</div>
							<p id="tipo-cambio-info" class="mt-1 text-xs text-secondary-500"></p>
                            <p id="conversion-note" class="mt-1 text-xs text-secondary-500 hidden"></p>
						</div>
						<div>
							<label class="block text-sm font-medium text-secondary-700 mb-2">Condicion Pago</label>
							<select id="condicion_pago_id" name="condicion_pago_id" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
								<option value="">Contado</option>
								{% for cond in condiciones %}
									<option value="{{ cond.id }}">{{ cond.nombre }} ({{ cond.dias }} dias)</option>
								{% endfor %}
							</select>
						</div>
					</div>
				</div>
			</div>

			{# Campos hidden para configuracion fiscal del proveedor #}
			<input type="hidden" id="impuesto_porcentaje" name="impuesto_porcentaje" value="12">
			<input type="hidden" id="aplica_ret_isr" name="aplica_ret_isr" value="0">
			<input type="hidden" id="aplica_ret_iva" name="aplica_ret_iva" value="0">
			<input type="hidden" id="aplica_idp" name="aplica_idp" value="0">

			{# PASO 2: Detalle de Lineas #}
			<div id="paso-2" class="hidden bg-white shadow rounded-lg">
				<div class="px-6 py-6">
					<div class="flex justify-between items-center mb-4">
						<h3 class="text-lg font-medium text-secondary-900">Detalle de Lineas</h3>
						<button type="button" id="btn-agregar-linea" class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-md">
							<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="M12 4v16m8-8H4"/>
							</svg>
							Agregar Linea
						</button>
					</div>
					<table class="min-w-full border border-secondary-200 rounded-lg overflow-hidden">
						<thead class="bg-secondary-50">
							<tr>
								<th class="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">Descripcion</th>
								<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500 uppercase w-24">Cant.</th>
								<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500 uppercase w-32">Precio</th>
								<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500 uppercase w-32">Total</th>
								<th class="px-4 py-2 w-16"></th>
							</tr>
						</thead>
						<tbody id="lineas-tbody" class="bg-white divide-y divide-secondary-200"></tbody>
					</table>
					<div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-secondary-50 rounded-lg">
						<div>
							<p class="text-xs text-secondary-500">Subtotal (sin IVA)</p>
							<p class="text-lg font-semibold"><span class="currency-code" data-role="currency-code">Q</span> <span id="display-subtotal">0.00</span></p>
						</div>
						<div>
							<p class="text-xs text-blue-700">IVA</p>
							<p class="text-lg font-semibold text-blue-900"><span class="currency-code" data-role="currency-code">Q</span> <span id="display-impuesto">0.00</span></p>
						</div>
						<div>
							<p class="text-xs text-red-700">Retenciones</p>
							<p class="text-lg font-semibold text-red-900">-<span class="currency-code" data-role="currency-code">Q</span> <span id="display-retencion">0.00</span></p>
						</div>
						<div class="bg-primary-50 p-2 rounded border-2 border-primary-500">
							<p class="text-xs font-bold text-primary-700">TOTAL A PAGAR</p>
							<p class="text-xl font-bold text-primary-900"><span class="currency-code" data-role="currency-code">Q</span> <span id="display-total">0.00</span></p>
						</div>
						</div>
					</div>

					{# IDP Section - Solo visible si proveedor aplica IDP #}
					<div id="idp-section" class="hidden mt-6 p-4 bg-amber-50 rounded-lg border border-amber-200">
						<h4 class="text-sm font-medium text-amber-800 mb-3">
							<svg class="inline-block w-5 h-5 mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
							</svg>
							Impuesto de Distribución Petrolera (IDP)
						</h4>
						<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
							<div>
								<label class="block text-sm font-medium text-amber-700 mb-1">Tipo Combustible</label>
								<select id="idp_tipo" name="idp_tipo" class="w-full px-3 py-2 border border-amber-300 rounded-md focus:ring-amber-500 focus:border-amber-500 bg-white">
									<option value="">Seleccionar...</option>
									{% for tasa in idpTasas %}
										<option value="{{ tasa.tipo }}" data-tasa="{{ tasa.tasaPorGalon }}">
											{{ tasa.tipo }} (Q{{ tasa.tasaPorGalon|number_format(4) }}/gal)
										</option>
									{% endfor %}
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-amber-700 mb-1">Galones</label>
								<input type="number" id="idp_galones" name="idp_galones" step="0.0001" min="0"
									   class="w-full px-3 py-2 border border-amber-300 rounded-md focus:ring-amber-500 focus:border-amber-500 bg-white"
									   placeholder="0.0000">
							</div>
							<div>
								<label class="block text-sm font-medium text-amber-700 mb-1">IDP Calculado</label>
								<div class="px-3 py-2 bg-amber-100 rounded-md font-semibold text-amber-900">
									Q <span id="display-idp">0.00</span>
								</div>
								<input type="hidden" id="idp_monto" name="idp_monto" value="0">
							</div>
						</div>
						<p class="mt-2 text-xs text-amber-600">El IDP es exento de IVA y se reporta por separado en el libro de compras</p>
					</div>
				</div>
			</div>

			{# PASO 3: Resumen #}
			<div id="paso-3" class="hidden bg-white shadow rounded-lg">
				<div class="px-6 py-6">
					<div class="text-center mb-6">
						<svg class="mx-auto h-12 w-12 text-green-500" fill="none" stroke="currentColor" viewbox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
						</svg>
						<h3 class="mt-2 text-xl font-medium text-secondary-900">Resumen del Documento</h3>
						<p class="text-sm text-secondary-500">Revise y confirme la informacion</p>
					</div>
					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
						<div class="border-b border-secondary-200 pb-2">
							<dt class="text-sm font-medium text-secondary-500">Proveedor</dt>
							<dd class="mt-1 text-sm text-secondary-900 font-semibold" id="resumen-proveedor">-</dd>
						</div>
						<div class="border-b border-secondary-200 pb-2">
							<dt class="text-sm font-medium text-secondary-500">Documento</dt>
							<dd class="mt-1 text-sm text-secondary-900 font-mono" id="resumen-documento">-</dd>
						</div>
						<div class="border-b border-secondary-200 pb-2">
							<dt class="text-sm font-medium text-secondary-500">Fecha</dt>
							<dd class="mt-1 text-sm text-secondary-900" id="resumen-fecha">-</dd>
						</div>
						<div class="border-b border-secondary-200 pb-2">
							<dt class="text-sm font-medium text-secondary-500">Total a pagar</dt>
							<dd class="mt-1 text-lg font-bold text-primary-900"><span class="currency-code" data-role="currency-code">Q</span> <span id="resumen-total">0.00</span></dd>
						</div>
					</dl>
					<div class="mt-6">
						<h4 class="text-sm font-medium text-secondary-900 mb-3">Lineas</h4>
						<table class="min-w-full border border-secondary-200 rounded-lg">
							<thead class="bg-secondary-50">
								<tr>
									<th class="px-4 py-2 text-left text-xs font-medium text-secondary-500">Descripcion</th>
									<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500">Cant.</th>
									<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500">Precio</th>
									<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500">Total</th>
								</tr>
							</thead>
							<tbody id="resumen-lineas-tbody" class="bg-white divide-y divide-secondary-200"></tbody>
						</table>
					</div>
					<div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-2">
						<div class="p-3 bg-secondary-50 rounded">
							<p class="text-xs text-secondary-500">Subtotal</p>
							<p class="font-semibold"><span class="currency-code" data-role="currency-code">Q</span> <span id="resumen-subtotal">0.00</span></p>
						</div>
						<div class="p-3 bg-blue-50 rounded">
							<p class="text-xs text-blue-700">IVA</p>
							<p class="font-semibold text-blue-900"><span class="currency-code" data-role="currency-code">Q</span> <span id="resumen-impuesto">0.00</span></p>
						</div>
						<div class="p-3 bg-red-50 rounded">
							<p class="text-xs text-red-700">Retenciones</p>
							<p class="font-semibold text-red-900">-<span class="currency-code" data-role="currency-code">Q</span> <span id="resumen-retencion">0.00</span></p>
						</div>
						<div class="p-3 bg-primary-50 rounded border-2 border-primary-500">
							<p class="text-xs font-bold text-primary-700">TOTAL A PAGAR</p>
							<p class="text-lg font-bold text-primary-900"><span class="currency-code" data-role="currency-code">Q</span> <span id="resumen-total-2">0.00</span></p>
						</div>
					</div>
				</div>
			</div>
		</form>

		{# Navigation Buttons - FUERA del form #}
		<div class="bg-white shadow rounded-lg px-6 py-4">
			<div class="flex justify-between items-center">
				<button type="button" id="btn-anterior" class="hidden inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md 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>
					Anterior
				</button>
				<div class="flex-1"></div>
				<button type="button" id="btn-siguiente" class="inline-flex items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
					Siguiente
					<svg class="-mr-1 ml-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="M9 5l7 7-7 7"/>
					</svg>
				</button>
				<button type="submit" form="form-documento" id="btn-guardar" class="hidden inline-flex items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
					<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="M5 13l4 4L19 7"/>
					</svg>
					Guardar Documento
				</button>
			</div>
		</div>
	</div>
{% endblock %}