@extends('layouts.app')
@section('content')
<style>
	.debt-card {
		border: 1px solid #dee2e6;
		border-radius: 0.6rem;
		padding: 0.75rem;
		background: #fff;
	}

	.debt-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.4rem;
	}

	.debt-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.25rem 0.55rem;
		border-radius: 999px;
		font-size: 0.8rem;
		background: #f8f9fa;
		border: 1px solid #e9ecef;
	}

	.debt-detail-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		padding-left: 0;
		list-style: none;
		margin-bottom: 0;
	}

	.debt-detail-list li {
		background: #f8f9fa;
		border: 1px solid #e9ecef;
		border-radius: 0.4rem;
		padding: 0.3rem 0.5rem;
		font-size: 0.8rem;
	}

	.debt-summary-totals {
		text-align: right;
		font-size: 1.2rem;
		line-height: 1.3;
	}

	.debt-total-row {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0.45rem;
	}

	.debt-total-badge {
		display: inline-flex;
		align-items: baseline;
		gap: 0.5rem;
		padding: 0.45rem 0.8rem;
		border-radius: 0.65rem;
		border: 1px solid #ced4da;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
	}

	.debt-total-label {
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: #495057;
	}

	.debt-total-number {
		font-size: 1.2rem;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		color: #111827;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	}

	.debt-total-badge--primary {
		background: linear-gradient(135deg, #fff4e5 0%, #fffdf8 100%);
		border-color: #f0c27b;
	}

	.debt-total-badge--primary .debt-total-number {
		color: #8a4b00;
	}

	.debt-total-badge--accent {
		background: linear-gradient(135deg, #e8f3ff 0%, #f8fbff 100%);
		border-color: #9fc5f8;
	}

	.debt-total-badge--accent .debt-total-number {
		color: #0b4f9c;
	}

	.payment-field-disabled {
		opacity: 1;
		background-color: #f1f3f5 !important;
		border-color: #ced4da !important;
		color: #6c757d !important;
		cursor: not-allowed;
	}

	.is-required {
		border-color: #dc3545 !important;
		box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.15);
	}

	@media (max-width: 767.98px) {
		.debt-card {
			padding: 0.65rem;
		}
		.debt-chip {
			font-size: 0.75rem;
		}
		.debt-summary-totals {
			text-align: left;
			margin-top: 0.5rem;
		}
		.debt-total-row {
			justify-content: flex-start;
		}
		.debt-total-badge {
			padding: 0.4rem 0.65rem;
			gap: 0.35rem;
		}
		.debt-total-number {
			font-size: 1.05rem;
		}
	}
</style>

<div class="container">
	<div class="row justify-content-center g-4">
		<div class="col-lg-8 col-md-7">
			@if ($errors->any())
				<div class="alert alert-danger">
					<ul class="mb-0">
						@foreach ($errors->all() as $error)
							<li>{{ $error }}</li>
						@endforeach
					</ul>
				</div>
			@endif

			@if (session('success'))
				<div class="alert alert-success">{{ session('success') }}</div>
			@endif

			<form method="POST" action="{{ route('admin_fit.pay.update', $pay->id) }}" enctype="multipart/form-data" id="payForm">
				@csrf
				@method('PUT')
				<input type="hidden" name="user_id" value="{{ $pay->user_id }}">
				
				<div class="card shadow-sm mb-4">
					<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
						<span>Editar Pago #{{ $pay->id }}</span>
						<a href="{{ route('admin_fit.pay.index') }}" class="btn btn-sm btn-secondary">
							<i class="bi bi-chevron-left"></i> Volver al listado
						</a>
					</div>
					
					<div class="card-body bg-white">
						<div class="mb-3 form-check form-switch">
							<input class="form-check-input" type="checkbox" id="isFullInputSwitch" name="is_full_input" value="1" {{ old('is_full_input', $pay->is_full_input ?? 0) ? 'checked' : '' }}>
							<label class="form-check-label fw-bold" for="isFullInputSwitch">
								Modo Completo (Requiere todos los campos)
							</label>
							<div class="form-text">Desactiva para solo requerir los campos mínimos (usuario, banco si aplica, sin comprobante).</div>
						</div>

						<div class="mb-3">
							<div class="row g-2">
								<div class="col-md-6">
									<label class="form-label">Usuario</label>
									<input type="text" class="form-control" value="{{ trim(($pay->user?->name ?? '') . ' ' . ($pay->user?->people?->last_name ?? '')) ?: ('Usuario #' . $pay->user_id) }}" disabled>
								</div>
								<div class="col-md-6">
									<label class="form-label">Fecha de Pago <span class="text-danger">*</span></label>
									<input type="date" name="pay_date" class="form-control is-required" value="{{ old('pay_date', $pay->pay_date ? \Illuminate\Support\Carbon::parse($pay->pay_date)->format('Y-m-d') : '') }}" required>
									<div class="invalid-feedback">La fecha de pago es obligatoria.</div>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<div class="row g-2">
								<div class="col-md-6">
									<label class="form-label" id="payTypeLabel">Tipo de Pago <span class="text-danger">*</span></label>
									<select name="pay_type_id" id="payTypeField" class="form-select is-required" required>
										<option value="">Seleccione tipo de pago</option>
										@foreach($pay_typeSeeder as $type)
											@php
												$normalizedPayTypeName = mb_strtolower(trim((string) $type->name));
												$isCashPayType = str_contains($normalizedPayTypeName, 'efectivo') || str_contains($normalizedPayTypeName, 'efctivo');
											@endphp
											<option
												value="{{ $type->id }}"
												data-is-cash="{{ $isCashPayType ? '1' : '0' }}"
												{{ (string) old('pay_type_id', $pay->pay_type_id) === (string) $type->id ? 'selected' : '' }}
											>
												{{ $type->name }}
											</option>
										@endforeach
									</select>
									<div class="valid-feedback">Tipo de pago seleccionado.</div>
									<div class="invalid-feedback">Debes seleccionar un tipo de pago.</div>
								</div>
								<div class="col-md-6">
									<label class="form-label" id="bankFieldLabel">Banco</label>
									<select name="bank_id" id="bankField" class="form-select">
										<option value="">Seleccione un banco</option>
										@foreach($banks as $bank)
											<option value="{{ $bank->id }}" {{ (string) old('bank_id', $pay->bank_id) === (string) $bank->id ? 'selected' : '' }}>{{ ($bank->code ? '(' . $bank->code . ') ' : '') . $bank->name }}</option>
										@endforeach
									</select>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<div class="row g-2">
								<div class="col-md-6">
									<label class="form-label">Monto <span class="text-danger">*</span></label>
									<input type="text" name="amount" class="form-control mountFormat is-required" value="{{ old('amount', number_format((float) ($pay->amount ?? 0), 2, ',', '.')) }}" required>
									<div class="valid-feedback">Monto válido.</div>
									<div class="invalid-feedback">El monto es obligatorio y debe ser mayor a cero.</div>
								</div>
								<div class="col-md-6">
									<label class="form-label" id="referenceFieldLabel">Referencia</label>
									<input type="text" name="reference" id="referenceField" class="form-control" value="{{ old('reference', $pay->reference) }}">
									<div class="valid-feedback">Referencia válida.</div>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<div class="row g-2">
								<div class="col-md-6">
									<label class="form-label" id="idCardNumberFieldLabel">Número de Teléfono</label>
									<input type="text" name="id_card_number" id="idCardNumberField" class="form-control" value="{{ old('id_card_number', $pay->id_card_number) }}">
								</div>
								<div class="col-md-6">
									<label class="form-label">Estado</label>
									<select name="status" class="form-select" id="statusSelect" required>
										<option value="">Seleccione estado</option>
										<option value="Aprobado" {{ old('status', $pay->status) == 'Aprobado' ? 'selected' : '' }}>Aprobado</option>
										<option value="Rechazado" {{ old('status', $pay->status) == 'Rechazado' ? 'selected' : '' }}>Rechazado</option>
										<option value="Pendiente" {{ old('status', $pay->status) == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
									</select>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<label class="form-label" id="receiptImageFieldLabel">Comprobante de Pago (Imagen)</label>
							<input type="file" name="url_pay_imagen" class="form-control" accept="image/*">
							<small class="text-muted">Opcional. Si cargas una nueva imagen, reemplazará el comprobante actual.</small>
						</div>

						<div class="alert alert-info mt-2 d-none" id="approvedStatusMessage">
							Al aprobar este pago, el monto se aplicará automáticamente a los saldos del cliente.
						</div>

						<hr class="my-4">

						<div class="mb-3" id="debtsSection">
							<h5 class="mb-3"><i class="bi bi-link-45deg"></i> Asociar Deudas al Pago</h5>
							<p class="text-muted">Selecciona las deudas a las que deseas aplicar este pago. Puedes ver el total y el restante en tiempo real.</p>

							@php
								$totalUserDebt = (float) $debts->sum(function ($sale) {
									return (float) ($sale->debt ?? 0);
								});
								$totalUserAuxDebt = (float) $debts->sum(function ($sale) {
									return (float) ($sale->aux_debt ?? 0);
								});
								$existingPayDetails = $pay->payDetails->keyBy('sale_id');
							@endphp

							<div class="alert alert-warning">
								<div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-2">
									<div class="fw-bold">Deudas pendientes</div>
									<div class="debt-summary-totals">
										<div class="debt-total-row">
											<div class="debt-total-badge debt-total-badge--primary">
												<span class="debt-total-label">Total</span>
												<span id="userTotalDebtValue" class="debt-total-number">{{ number_format($totalUserDebt, 2, ',', '.') }}</span>
											</div>
										</div>
										<div class="debt-total-row mb-0">
											<div class="debt-total-badge debt-total-badge--accent">
												<span class="debt-total-label">Total Ref</span>
												<span id="userTotalAuxDebtValue" class="debt-total-number">{{ number_format($totalUserAuxDebt, 2, ',', '.') }}</span>
											</div>
										</div>
									</div>
								</div>

								<div class="small text-dark mb-3" id="paymentAllocationSummary">
									Asignado: <span id="paymentAssignedTotal" class="fw-bold">0,00</span>
									| Restante: <span id="paymentRemainingTotal" class="fw-bold">0,00</span>
								</div>

								@if($debts->count())
									<div class="row">
										@foreach($debts as $sale)
											@php
												$existingDetail = $existingPayDetails->get($sale->id);
												$isChecked = $existingDetail !== null;
												$existingAmount = $existingDetail ? (float) $existingDetail->amount : 0;
											@endphp
											<div class="col-md-6">
												<div class="debt-card mb-2">
													<div class="row g-2 align-items-end mb-2">
														<div class="col-7">
															<div class="form-check">
																<input
																	class="form-check-input"
																	type="checkbox"
																	name="sale_ids[]"
																	value="{{ $sale->id }}"
																	data-debt="{{ (float) ($sale->debt ?? 0) }}"
																	data-aux-debt="{{ (float) ($sale->aux_debt ?? 0) }}"
																	id="sale_{{ $sale->id }}"
																	data-sale-checkbox="1"
																	{{ $isChecked ? 'checked' : '' }}
																>
																<label class="form-check-label fw-bold" for="sale_{{ $sale->id }}">
																	Venta #{{ $sale->id }}
																</label>
															</div>
															<div class="debt-meta">
																<span class="debt-chip">
																	<strong>Deuda:</strong>
																	{{ number_format((float) ($sale->debt ?? 0), 2, ',', '.') }}
																</span>
																<span class="debt-chip">
																	<strong>Resto:</strong>
																	<span
																		id="sale_remaining_{{ $sale->id }}"
																		data-sale-remaining="1"
																		data-sale-id="{{ $sale->id }}"
																		data-debt="{{ (float) ($sale->debt ?? 0) }}"
																		class="fw-bold"
																	>
																		{{ number_format((float) ($sale->debt ?? 0) - $existingAmount, 2, ',', '.') }}
																	</span>
																</span>
															</div>
														</div>
														<div class="col-5">
															<label class="form-label mb-1 small" for="sale_amount_{{ $sale->id }}">Monto a abonar</label>
															<input
																type="text"
																name="sale_amounts[{{ $sale->id }}]"
																id="sale_amount_{{ $sale->id }}"
																class="form-control form-control-sm mountFormat"
																data-sale-amount="1"
																data-sale-id="{{ $sale->id }}"
																data-max-debt="{{ (float) ($sale->debt ?? 0) }}"
																value="{{ old('sale_amounts.' . $sale->id, number_format($existingAmount, 2, ',', '.')) }}"
																placeholder="0,00"
															>
															<div class="valid-feedback">Monto válido para esta deuda.</div>
															<div class="invalid-feedback">El monto no puede ser mayor a la deuda pendiente.</div>
														</div>
													</div>
													<ul class="debt-detail-list">
														@foreach($sale->saleDetails as $detail)
															<li>
																@if($detail->product_id)
																	Producto: {{ $detail->product->product_name ?? 'Producto no disponible' }}
																@elseif($detail->membership_user_id)
																	Membresia: {{ $detail->membershipUser->membership->name ?? 'Membresia no disponible' }}
																@endif
																| Cant: {{ $detail->quantity }}
																| Subtotal: {{ number_format((float) ($detail->subtotal ?? 0), 2, ',', '.') }}
															</li>
														@endforeach
													</ul>
												</div>
											</div>
										@endforeach
									</div>
								@else
									<div class="alert alert-light mb-0">El usuario no tiene deudas pendientes para asociar.</div>
								@endif
							</div>
							<div class="small text-danger mt-2 d-none" id="debtValidationMessage"></div>
						</div>

						<div class="d-flex justify-content-end gap-2">
							<a href="{{ route('admin_fit.pay.index') }}" class="btn btn-outline-secondary">Cancelar</a>
							<button type="submit" class="btn btn-warning">Actualizar</button>
						</div>
					</div>
				</div>
			</form>
		</div>

		<div class="col-lg-4 col-md-5">
			<div class="card mb-3 shadow-sm">
				<div class="card-header bg-info text-white">Comprobante Actual</div>
				<div class="card-body bg-white">
					<div class="pay-image-preview-wrapper bg-light border rounded d-flex align-items-center justify-content-center" style="min-height: 340px; max-height: 60vh; overflow: auto; padding: 0.75rem;">
						@if (!empty($pay->url_pay_imagen))
							<img
								src="{{ route('admin_fit.pay.image', ['filename' => $pay->url_pay_imagen]) }}"
								alt="Comprobante del pago {{ $pay->id }}"
								class="pay-image-preview img-fluid"
								style="max-height: 56vh; width: auto; object-fit: contain;"
							>
						@else
							<div class="text-muted text-center px-4">
								<p class="mb-1">Este pago no tiene comprobante cargado.</p>
								<small>Cuando subas una imagen, la verás aquí con espacio suficiente para formato vertical.</small>
							</div>
						@endif
					</div>
				</div>
			</div>

			<div class="card mb-3 shadow-sm">
				<div class="card-header bg-info text-white">Ayuda por Campo</div>
				<div class="card-body small bg-white">
					<p class="mb-2"><strong>Tipo de Pago:</strong> Método usado para registrar el pago.</p>
					<p class="mb-2"><strong>Fecha de Pago:</strong> Día en que el cliente realizó la operación.</p>
					<p class="mb-2"><strong>Monto:</strong> Total pagado por el cliente.</p>
					<p class="mb-2"><strong>Banco:</strong> Banco desde donde se realizó la operación (opcional).</p>
					<p class="mb-2"><strong>Referencia:</strong> Número o código de referencia del pago.</p>
					<p class="mb-2"><strong>Teléfono:</strong> Número de teléfono asociado al pago.</p>
					<p class="mb-2"><strong>Estado:</strong> Cambia entre Pendiente, Aprobado o Rechazado.</p>
					<p class="mb-0"><strong>Comprobante:</strong> Puedes reemplazar la imagen con una nueva.</p>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection