<script lang="ts">
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import * as Select from '$lib/components/ui/select';
	import {
		Table,
		TableBody,
		TableCell,
		TableHead,
		TableHeader,
		TableRow
	} from '$lib/components/ui/table';
	import {
		Dialog,
		DialogContent,
		DialogHeader,
		DialogTitle,
		DialogFooter
	} from '$lib/components/ui/dialog';
	import {
		Plus,
		Pencil,
		Trash2
	} from 'lucide-svelte';

	interface CuentaGarantia {
		id?: number;
		numero_contrato: string;
		tipo_cuenta: string;
		institucion_emisora: string;
		folio_constancia: string;
		fecha_constancia: string;
		total_garantia: number;
		tipo_garantia: string;
		cantidad_umc: number;
		valor_unitario_titulo: number;
		titulos_asignados: number;
	}

	interface Compensacion {
		id?: number;
		patente_original: string;
		pedimento_original: string;
		aduana_seccion_original: string;
		fecha_pago_original: string;
		gravamen: string;
		importe: number;
	}

	interface DocumentoPago {
		id?: number;
		forma_pago: string;
		dependencia: string;
		numero_documento: string;
		fecha_constancia: string;
		importe_total: number;
		saldo_disponible: number;
		importe_pedimento: number;
	}

	let {
		formData = $bindable({
			cuentas_garantia: [] as CuentaGarantia[],
			compensaciones: [] as Compensacion[],
			documentos_pago: [] as DocumentoPago[]
		})
	}: {
		formData: {
			cuentas_garantia: CuentaGarantia[];
			compensaciones: Compensacion[];
			documentos_pago: DocumentoPago[];
		};
	} = $props();

	// Estados para diálogos
	let isCuentaDialogOpen = $state(false);
	let isCompensacionDialogOpen = $state(false);
	let isDocumentoDialogOpen = $state(false);

	// Estados para edición
	let editingCuentaIndex = $state<number | null>(null);
	let editingCompensacionIndex = $state<number | null>(null);
	let editingDocumentoIndex = $state<number | null>(null);

	// Estados actuales
	let currentCuenta = $state<CuentaGarantia>({
		numero_contrato: '',
		tipo_cuenta: '0- Cuenta Aduane',
		institucion_emisora: '1',
		folio_constancia: '',
		fecha_constancia: '',
		total_garantia: 0,
		tipo_garantia: '1',
		cantidad_umc: 0,
		valor_unitario_titulo: 0,
		titulos_asignados: 0
	});

	let currentCompensacion = $state<Compensacion>({
		patente_original: '',
		pedimento_original: '',
		aduana_seccion_original: '',
		fecha_pago_original: '',
		gravamen: '',
		importe: 0
	});

	let currentDocumento = $state<DocumentoPago>({
		forma_pago: '0',
		dependencia: '',
		numero_documento: '',
		fecha_constancia: '',
		importe_total: 0,
		saldo_disponible: 0,
		importe_pedimento: 0
	});

	const unidadesMedida = ['KG', 'LT', 'PZ', 'MT', 'M2', 'M3', 'TON', 'CAJ', 'PAR'];

	// Funciones para Cuentas Garantía
	function openNewCuenta() {
		editingCuentaIndex = null;
		currentCuenta = {
			numero_contrato: '',
			tipo_cuenta: '0- Cuenta Aduane',
			institucion_emisora: '1',
			folio_constancia: '',
			fecha_constancia: '',
			total_garantia: 0,
			tipo_garantia: '1',
			cantidad_umc: 0,
			valor_unitario_titulo: 0,
			titulos_asignados: 0
		};
		isCuentaDialogOpen = true;
	}

	function openEditCuenta(index: number) {
		if (!formData?.cuentas_garantia) return;
		editingCuentaIndex = index;
		currentCuenta = { ...formData.cuentas_garantia[index] };
		isCuentaDialogOpen = true;
	}

	function saveCuenta() {
		if (!formData?.cuentas_garantia) return;
		if (editingCuentaIndex !== null) {
			formData.cuentas_garantia[editingCuentaIndex] = { ...currentCuenta };
		} else {
			formData.cuentas_garantia = [...formData.cuentas_garantia, { ...currentCuenta }];
		}
		isCuentaDialogOpen = false;
	}

	function deleteCuenta(index: number) {
		if (!formData?.cuentas_garantia) return;
		if (confirm('¿Está seguro de eliminar esta cuenta?')) {
			formData.cuentas_garantia = formData.cuentas_garantia.filter((_, i) => i !== index);
		}
	}

	// Funciones para Compensaciones
	function openNewCompensacion() {
		editingCompensacionIndex = null;
		currentCompensacion = {
			patente_original: '',
			pedimento_original: '',
			aduana_seccion_original: '',
			fecha_pago_original: '',
			gravamen: '',
			importe: 0
		};
		isCompensacionDialogOpen = true;
	}

	function openEditCompensacion(index: number) {
		if (!formData?.compensaciones) return;
		editingCompensacionIndex = index;
		currentCompensacion = { ...formData.compensaciones[index] };
		isCompensacionDialogOpen = true;
	}

	function saveCompensacion() {
		if (!formData?.compensaciones) return;
		if (editingCompensacionIndex !== null) {
			formData.compensaciones[editingCompensacionIndex] = { ...currentCompensacion };
		} else {
			formData.compensaciones = [...formData.compensaciones, { ...currentCompensacion }];
		}
		isCompensacionDialogOpen = false;
	}

	function deleteCompensacion(index: number) {
		if (!formData?.compensaciones) return;
		if (confirm('¿Está seguro de eliminar esta compensación?')) {
			formData.compensaciones = formData.compensaciones.filter((_, i) => i !== index);
		}
	}

	// Funciones para Documentos de Pago
	function openNewDocumento() {
		editingDocumentoIndex = null;
		currentDocumento = {
			forma_pago: '0',
			dependencia: '',
			numero_documento: '',
			fecha_constancia: '',
			importe_total: 0,
			saldo_disponible: 0,
			importe_pedimento: 0
		};
		isDocumentoDialogOpen = true;
	}

	function openEditDocumento(index: number) {
		if (!formData?.documentos_pago) return;
		editingDocumentoIndex = index;
		currentDocumento = { ...formData.documentos_pago[index] };
		isDocumentoDialogOpen = true;
	}

	function saveDocumento() {
		if (!formData?.documentos_pago) return;
		if (editingDocumentoIndex !== null) {
			formData.documentos_pago[editingDocumentoIndex] = { ...currentDocumento };
		} else {
			formData.documentos_pago = [...formData.documentos_pago, { ...currentDocumento }];
		}
		isDocumentoDialogOpen = false;
	}

	function deleteDocumento(index: number) {
		if (!formData?.documentos_pago) return;
		if (confirm('¿Está seguro de eliminar este documento?')) {
			formData.documentos_pago = formData.documentos_pago.filter((_, i) => i !== index);
		}
	}
</script>

<div class="space-y-4">
	<!-- Sección de Cuentas Garantía -->
	<Card>
		<CardContent class="p-6 space-y-4">
			<div class="border rounded-lg overflow-hidden">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Número Contrato</TableHead>
							<TableHead>Tipo Cuenta</TableHead>
							<TableHead>Institución Emisora</TableHead>
							<TableHead>Folio Constancia</TableHead>
							<TableHead>Fecha Constancia</TableHead>
							<TableHead class="text-right">Total Garantía</TableHead>
							<TableHead>Tipo Garantía</TableHead>
							<TableHead class="text-right">Cantidad UMC</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.cuentas_garantia || formData.cuentas_garantia.length === 0}
							<TableRow>
								<TableCell colspan={9} class="text-center text-muted-foreground py-8">
									No hay cuentas de garantía registradas
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.cuentas_garantia as cuenta, index}
								<TableRow>
									<TableCell>{cuenta.numero_contrato}</TableCell>
									<TableCell>{cuenta.tipo_cuenta}</TableCell>
									<TableCell>{cuenta.institucion_emisora}</TableCell>
									<TableCell>{cuenta.folio_constancia}</TableCell>
									<TableCell>{cuenta.fecha_constancia}</TableCell>
									<TableCell class="text-right"
										>{cuenta.total_garantia.toLocaleString('es-MX', {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2
										})}</TableCell
									>
									<TableCell>{cuenta.tipo_garantia}</TableCell>
									<TableCell class="text-right"
										>{cuenta.cantidad_umc.toLocaleString('es-MX', {
											minimumFractionDigits: 4,
											maximumFractionDigits: 4
										})}</TableCell
									>
									<TableCell>
										<div class="flex gap-1">
											<Button size="sm" variant="ghost" onclick={() => openEditCuenta(index)}>
												<Pencil size={14} />
											</Button>
											<Button size="sm" variant="ghost" onclick={() => deleteCuenta(index)}>
												<Trash2 size={14} />
											</Button>
										</div>
									</TableCell>
								</TableRow>
							{/each}
						{/if}
					</TableBody>
				</Table>
			</div>

			<div class="flex gap-2">
				<Button size="sm" onclick={openNewCuenta}>
					<Plus class="mr-1.5" size={14} />
					Nuevo
				</Button>
				<Button
					size="sm"
					variant="outline"
					disabled={formData?.cuentas_garantia?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.cuentas_garantia?.[index]) openEditCuenta(index);
					}}
				>
					<Pencil class="mr-1.5" size={14} />
					Editar
				</Button>
				<Button
					size="sm"
					variant="destructive"
					disabled={formData?.cuentas_garantia?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.cuentas_garantia?.[index]) deleteCuenta(index);
					}}
				>
					<Trash2 class="mr-1.5" size={14} />
					Borrar
				</Button>
			</div>
		</CardContent>
	</Card>

	<!-- Secciones en grid -->
	<div class="grid grid-cols-2 gap-4">
		<!-- Compensaciones -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Compensaciones</CardTitle>
			</CardHeader>
			<CardContent class="space-y-4">
				<div class="border rounded-lg overflow-hidden">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Patente Original</TableHead>
								<TableHead>Pedimento Original</TableHead>
							<TableHead>Aduana y Sección</TableHead>
							<TableHead>Fecha Pago</TableHead>
							<TableHead>Gravamen</TableHead>
							<TableHead class="text-right">Importe</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.compensaciones || formData.compensaciones.length === 0}
							<TableRow>
								<TableCell colspan={7} class="text-center text-muted-foreground py-8">
									No hay compensaciones registradas
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.compensaciones as compensacion, index}
								<TableRow>
									<TableCell>{compensacion.patente_original}</TableCell>
									<TableCell>{compensacion.pedimento_original}</TableCell>
									<TableCell>{compensacion.aduana_seccion_original}</TableCell>
									<TableCell>{compensacion.fecha_pago_original}</TableCell>
									<TableCell>{compensacion.gravamen}</TableCell>
									<TableCell class="text-right"
										>{compensacion.importe.toLocaleString('es-MX', {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2
										})}</TableCell
									>
								<TableCell>
									<div class="flex gap-1">
										<Button
											size="sm"
											variant="ghost"
											onclick={() => openEditCompensacion(index)}
										>
											<Pencil size={14} />
										</Button>
										<Button
											size="sm"
											variant="ghost"
											onclick={() => deleteCompensacion(index)}
										>
											<Trash2 size={14} />
										</Button>
									</div>
								</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>

				<div class="flex gap-2">
					<Button size="sm" onclick={openNewCompensacion}>
						<Plus class="mr-1.5" size={14} />
						Nuevo
					</Button>
					<Button
						size="sm"
						variant="outline"
						disabled={formData?.compensaciones?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.compensaciones?.[index]) openEditCompensacion(index);
						}}
					>
						<Pencil class="mr-1.5" size={14} />
						Editar
					</Button>
					<Button
						size="sm"
						variant="destructive"
						disabled={formData?.compensaciones?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.compensaciones?.[index]) deleteCompensacion(index);
						}}
					>
						<Trash2 class="mr-1.5" size={14} />
						Borrar
					</Button>
				</div>
			</CardContent>
		</Card>

		<!-- Documentos que amparan las Formas de Pago -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Documentos que amparan las Formas de Pago</CardTitle>
			</CardHeader>
			<CardContent class="space-y-4">
				<div class="border rounded-lg overflow-hidden">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Forma de Pago</TableHead>
								<TableHead>Dependencia</TableHead>
							<TableHead>Número Documento</TableHead>
							<TableHead>Fecha Constancia</TableHead>
							<TableHead class="text-right">Importe Total</TableHead>
							<TableHead class="text-right">Saldo Disponible</TableHead>
							<TableHead class="text-right">Importe Pedimento</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.documentos_pago || formData.documentos_pago.length === 0}
							<TableRow>
								<TableCell colspan={8} class="text-center text-muted-foreground py-8">
									No hay documentos registrados
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.documentos_pago as documento, index}
								<TableRow>
									<TableCell>{documento.forma_pago}</TableCell>
									<TableCell>{documento.dependencia}</TableCell>
									<TableCell>{documento.numero_documento}</TableCell>
									<TableCell>{documento.fecha_constancia}</TableCell>
									<TableCell class="text-right"
										>{documento.importe_total.toLocaleString('es-MX', {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2
										})}</TableCell
									>
									<TableCell class="text-right"
										>{documento.saldo_disponible.toLocaleString('es-MX', {
											minimumFractionDigits: 2,
											maximumFractionDigits: 2
										})}</TableCell
									>
									<TableCell class="text-right"
										>{documento.importe_pedimento.toLocaleString('es-MX', {
											minimumFractionDigits: 0,
											maximumFractionDigits: 0
										})}</TableCell
									>
								<TableCell>
									<div class="flex gap-1">
										<Button size="sm" variant="ghost" onclick={() => openEditDocumento(index)}>
											<Pencil size={14} />
										</Button>
										<Button size="sm" variant="ghost" onclick={() => deleteDocumento(index)}>
											<Trash2 size={14} />
										</Button>
									</div>
								</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>

				<div class="flex gap-2">
					<Button size="sm" onclick={openNewDocumento}>
						<Plus class="mr-1.5" size={14} />
						Nuevo
					</Button>
					<Button
						size="sm"
						variant="outline"
						disabled={formData?.documentos_pago?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.documentos_pago?.[index]) openEditDocumento(index);
						}}
					>
						<Pencil class="mr-1.5" size={14} />
						Editar
					</Button>
					<Button
						size="sm"
						variant="destructive"
						disabled={formData?.documentos_pago?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.documentos_pago?.[index]) deleteDocumento(index);
						}}
					>
						<Trash2 class="mr-1.5" size={14} />
						Borrar
					</Button>
				</div>
			</CardContent>
		</Card>
	</div>
</div>

<!-- Dialog para Cuentas Garantía -->
<Dialog bind:open={isCuentaDialogOpen}>
	<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
		<DialogHeader>
			<DialogTitle>
				{editingCuentaIndex !== null ? 'Cuentas Aduaneras a nivel Pedimento' : 'Insertando'}
			</DialogTitle>
			{#if editingCuentaIndex === null}
				<p class="text-sm text-muted-foreground">Cuentas Aduaneras a nivel Pedimento</p>
			{/if}
		</DialogHeader>

		<div class="space-y-6 py-4">
			<!-- Cuenta -->
			<div class="border rounded-lg p-4">
				<h3 class="text-sm font-semibold mb-4">Cuenta:</h3>
				<div class="space-y-4">
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="numero_contrato">Número Contrato:</Label>
						<Input
							id="numero_contrato"
							bind:value={currentCuenta.numero_contrato}
						/>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="tipo_cuenta">Tipo Cuenta:</Label>
						<Select.Root
							type="single"
							value={currentCuenta.tipo_cuenta}
							onValueChange={(v: string | undefined) => v && (currentCuenta.tipo_cuenta = v)}
						>
							<Select.Trigger id="tipo_cuenta">
								<span class="truncate">{currentCuenta.tipo_cuenta || '0- Cuenta Aduane'}</span>
							</Select.Trigger>
							<Select.Content>
								<Select.Item value="0- Cuenta Aduane">0- Cuenta Aduane</Select.Item>
							</Select.Content>
						</Select.Root>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="institucion_emisora">Institución Emisora:</Label>
						<div class="flex gap-2">
							<Select.Root
								type="single"
								value={currentCuenta.institucion_emisora}
								onValueChange={(v: string | undefined) => v && (currentCuenta.institucion_emisora = v)}
							>
								<Select.Trigger id="institucion_emisora" class="flex-1">
									<span class="truncate">{currentCuenta.institucion_emisora || '1'}</span>
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="1">1</Select.Item>
								</Select.Content>
							</Select.Root>
							<Input value="BBVA México SA" disabled class="flex-1" />
						</div>
					</div>
				</div>
			</div>

			<!-- Constancia -->
			<div class="border rounded-lg p-4">
				<h3 class="text-sm font-semibold mb-4">Constancia:</h3>
				<div class="space-y-4">
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="folio_constancia">Folio Constancia:</Label>
						<Input
							id="folio_constancia"
							bind:value={currentCuenta.folio_constancia}
						/>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="fecha_constancia">Fecha Constancia:</Label>
						<Input
							id="fecha_constancia"
							type="date"
							bind:value={currentCuenta.fecha_constancia}
						/>
					</div>
				</div>
			</div>

			<!-- Garantía -->
			<div class="border rounded-lg p-4">
				<h3 class="text-sm font-semibold mb-4">Garantía:</h3>
				<div class="space-y-4">
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="total_garantia">Total Garantía:</Label>
						<Input
							id="total_garantia"
							type="number"
							step="0.01"
							bind:value={currentCuenta.total_garantia}
							placeholder="0.00"
						/>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="tipo_garantia">Tipo Garantía:</Label>
						<div class="flex gap-2">
							<Select.Root
								type="single"
								value={currentCuenta.tipo_garantia}
								onValueChange={(v: string | undefined) => v && (currentCuenta.tipo_garantia = v)}
							>
								<Select.Trigger id="tipo_garantia" class="w-24">
									<span class="truncate">{currentCuenta.tipo_garantia || '1'}</span>
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="1">1</Select.Item>
								</Select.Content>
							</Select.Root>
							<Input value="Depósito" disabled class="flex-1" />
						</div>
					</div>
				</div>
			</div>

			<!-- Títulos -->
			<div class="border rounded-lg p-4">
				<h3 class="text-sm font-semibold mb-4">Títulos:</h3>
				<div class="space-y-4">
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="cantidad_umc">Cantidad UMC:</Label>
						<Input
							id="cantidad_umc"
							type="number"
							step="0.0001"
							bind:value={currentCuenta.cantidad_umc}
							placeholder="0.0000"
						/>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="valor_unitario_titulo">Valor unitario título:</Label>
						<Input
							id="valor_unitario_titulo"
							type="number"
							step="0.0001"
							bind:value={currentCuenta.valor_unitario_titulo}
							placeholder="0.0000"
						/>
					</div>
					<div class="grid grid-cols-2 gap-4 items-center">
						<Label for="titulos_asignados">Títulos asignados:</Label>
						<Input
							id="titulos_asignados"
							type="number"
							step="0.0001"
							bind:value={currentCuenta.titulos_asignados}
							placeholder="0.0000"
						/>
					</div>
				</div>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isCuentaDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveCuenta}>
				{editingCuentaIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Compensaciones -->
<Dialog bind:open={isCompensacionDialogOpen}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>Compensaciones</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="patente_original">Patente Original:</Label>
				<Input
					id="patente_original"
					bind:value={currentCompensacion.patente_original}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="pedimento_original">Pedimento Original:</Label>
				<Input
					id="pedimento_original"
					bind:value={currentCompensacion.pedimento_original}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="aduana_seccion_original">Aduana y Sección Original:</Label>
				<Input
					id="aduana_seccion_original"
					bind:value={currentCompensacion.aduana_seccion_original}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="fecha_pago_original">Fecha Pago Original:</Label>
				<Input
					id="fecha_pago_original"
					type="date"
					bind:value={currentCompensacion.fecha_pago_original}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="gravamen">Gravamen:</Label>
				<Input
					id="gravamen"
					bind:value={currentCompensacion.gravamen}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="importe">Importe:</Label>
				<Input
					id="importe"
					type="number"
					step="0.01"
					bind:value={currentCompensacion.importe}
					placeholder="0"
				/>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isCompensacionDialogOpen = false)}
				>Cancelar</Button
			>
			<Button onclick={saveCompensacion}>
				Aceptar
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Documentos de Pago -->
<Dialog bind:open={isDocumentoDialogOpen}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>Documentos que amparan las formas de pago: 4, 12, 15 y 19</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="forma_pago">Forma de Pago:</Label>
				<div class="flex gap-2">
					<Select.Root
						type="single"
						value={currentDocumento.forma_pago}
						onValueChange={(v: string | undefined) => v && (currentDocumento.forma_pago = v)}
					>
						<Select.Trigger id="forma_pago" class="w-20">
							<span class="truncate">{currentDocumento.forma_pago || '0'}</span>
						</Select.Trigger>
						<Select.Content>
							<Select.Item value="0">0</Select.Item>
						</Select.Content>
					</Select.Root>
					<Input value="EFECTIVO" disabled class="flex-1" />
				</div>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="dependencia">Dependencia:</Label>
				<Input
					id="dependencia"
					bind:value={currentDocumento.dependencia}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="numero_documento">Número Documento:</Label>
				<Input
					id="numero_documento"
					bind:value={currentDocumento.numero_documento}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="fecha_constancia">Fecha de Constancia:</Label>
				<Input
					id="fecha_constancia"
					type="date"
					bind:value={currentDocumento.fecha_constancia}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="importe_total">Importe Total:</Label>
				<Input
					id="importe_total"
					type="number"
					step="0.01"
					bind:value={currentDocumento.importe_total}
					placeholder="0.00"
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="saldo_disponible">Saldo Disponible:</Label>
				<Input
					id="saldo_disponible"
					type="number"
					step="0.01"
					bind:value={currentDocumento.saldo_disponible}
					placeholder="0.00"
				/>
			</div>

			<div class="grid grid-cols-2 gap-4 items-center">
				<Label for="importe_pedimento">Importe del Pedimento:</Label>
				<Input
					id="importe_pedimento"
					type="number"
					step="1"
					bind:value={currentDocumento.importe_pedimento}
					placeholder="0"
				/>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isDocumentoDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveDocumento}>
				Aceptar
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
