<script lang="ts">
	import * as Card from '$lib/components/ui/card';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';

	let { 
		pedimento,
		formData = $bindable(),
		exists = $bindable()
	}: { 
		pedimento: Pedimento | null;
		formData?: any;
		exists?: boolean;
	} = $props();

	// Inicializar formData inmediatamente
	const paymentsData = pedimento?.pedimento_payments;
	if (paymentsData) {
		exists = true;
		if (!formData) {
			formData = {
				acknowledgment: paymentsData.acknowledgment || '',
				operation_number: paymentsData.operation_number || '',
				bank_code: paymentsData.bank_code || '',
				cashier: paymentsData.cashier || '',
				date: paymentsData.date ? paymentsData.date.substring(0, 10) : '',
				time: paymentsData.time || '',
				shift: paymentsData.shift || '',
				total_cash_paid: paymentsData.total_cash_paid || '',
				total_contributions: paymentsData.total_contributions || '',
				counter_payment: paymentsData.counter_payment || '',
				pece_code: paymentsData.pece_code || '',				
			};
		}
	} else {
		exists = false;
		if (!formData) {
			formData = {
				acknowledgment: '',
				operation_number: '',
				bank_code: '',
				cashier: '',
				date: '',
				time: '',
				shift: '',
				total_cash_paid: '',
				total_contributions: '',
				counter_payment: '',
				pece_code: '',				
			};
		}
	}
</script>

<Card.Root>
	<Card.Header>
		<Card.Title>Información de Pagos</Card.Title>
		<Card.Description>
			Gestiona la información de pagos del pedimento
		</Card.Description>
	</Card.Header>
	<Card.Content>
		<div class="space-y-6">
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
				<!-- Acuse -->
				<div class="space-y-2">
					<Label for="acknowledgment">Acuse</Label>
					<Input
						id="acknowledgment"
						bind:value={formData.acknowledgment}
						maxlength={20}
						placeholder="Acuse"
					/>
				</div>

				<!-- Número de Operación -->
				<div class="space-y-2">
					<Label for="operation_number">Número de Operación</Label>
					<Input
						id="operation_number"
						bind:value={formData.operation_number}
						maxlength={14}
						placeholder="Número de operación"
					/>
				</div>

				<!-- Código Bancario -->
				<div class="space-y-2">
					<Label for="bank_code">Código Bancario</Label>
					<Input
						id="bank_code"
						type="number"
						bind:value={formData.bank_code}
						placeholder="Código del banco"
					/>
				</div>

				<!-- Cajero -->
				<div class="space-y-2">
					<Label for="cashier">Cajero</Label>
					<Input
						id="cashier"
						bind:value={formData.cashier}
						maxlength={2}
						placeholder="Cajero"
					/>
				</div>

				<!-- Fecha -->
				<div class="space-y-2">
					<Label for="date">Fecha</Label>
					<Input
						id="date"
						type="date"
						bind:value={formData.date}
					/>
				</div>

				<!-- Hora -->
				<div class="space-y-2">
					<Label for="time">Hora</Label>
					<Input
						id="time"
						type="time"
						bind:value={formData.time}
					/>
				</div>

				<!-- Turno -->
				<div class="space-y-2">
					<Label for="shift">Turno</Label>
					<Input
						id="shift"
						bind:value={formData.shift}
						maxlength={1}
						placeholder="Turno"
					/>
				</div>

				<!-- Total Pagado en Efectivo -->
				<div class="space-y-2">
					<Label for="total_cash_paid">Total Pagado en Efectivo</Label>
					<Input
						id="total_cash_paid"
						type="number"
						bind:value={formData.total_cash_paid}
						placeholder="Total en efectivo"
					/>
				</div>

				<!-- Total Contribuciones -->
				<div class="space-y-2">
					<Label for="total_contributions">Total Contribuciones</Label>
					<Input
						id="total_contributions"
						type="number"
						bind:value={formData.total_contributions}
						placeholder="Total contribuciones"
					/>
				</div>

				<!-- Pago en Mostrador -->
				<div class="space-y-2">
					<Label for="counter_payment">Pago en Mostrador</Label>
					<Input
						id="counter_payment"
						type="number"
						bind:value={formData.counter_payment}
						placeholder="Pago en mostrador"
					/>
				</div>

				<!-- Código PECE -->
				<div class="space-y-2">
					<Label for="pece_code">Código PECE</Label>
					<Input
						id="pece_code"
						bind:value={formData.pece_code}
						maxlength={5}
						placeholder="Código PECE"
					/>
				</div>
				
			</div>
		</div>
	</Card.Content>
</Card.Root>
