@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;
	}

	.allocation-panel {
		border: 1px solid #b6d4fe;
		background: linear-gradient(135deg, #f5faff 0%, #ffffff 100%);
		border-radius: 0.7rem;
		padding: 0.8rem;
	}

	.allocation-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.55rem;
	}

	.allocation-item {
		border: 1px solid #dbe7ff;
		border-radius: 0.6rem;
		padding: 0.5rem 0.65rem;
		background: #ffffff;
	}

	.allocation-item__label {
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #4b5563;
		display: block;
	}

	.allocation-item__value {
		font-size: 1.1rem;
		font-weight: 800;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	.allocation-item--assigned .allocation-item__value {
		color: #0f5132;
	}

	.allocation-item--remaining .allocation-item__value {
		color: #0b4f9c;
	}

	.allocation-equation {
		font-size: 0.82rem;
		font-weight: 600;
		color: #334155;
		margin-top: 0.5rem;
	}

	.allocation-help {
		margin-top: 0.55rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
	}

	.allocation-help__message {
		font-size: 0.8rem;
		color: #495057;
	}

	.allocation-help__message strong {
		color: #0b4f9c;
	}

	#applyRemainingButton {
		font-weight: 700;
	}

	.sale-checkbox-input {
		width: 1.15rem;
		height: 1.15rem;
		margin-top: 0.2rem;
		border: 2px solid #0f172a;
		background-color: #ffffff;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
	}

	.sale-checkbox-input:checked {
		background-color: #0d6efd;
		border-color: #0d6efd;
	}

	.sale-checkbox-input:focus {
		box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.85);
	}

	.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;
		}
		.sale-checkbox-input {
			width: 1.1rem;
			height: 1.1rem;
		}
		.allocation-grid {
			grid-template-columns: 1fr;
		}

	}
</style>

<div class="container">
	<div class="row gx-3 gy-4 align-items-start">
		<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.store') }}" enctype="multipart/form-data" id="payForm">
				@csrf
				<input type="hidden" name="user_id" value="{{ $userSelected }}">
				
				<div class="card shadow-sm mb-4">
					<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
						<span>Registrar Pago</span>
						<a href="{{ url()->previous() ?: 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">
							<label class="form-label">Seleccionar Usuario con Deuda</label>
							<select name="user_id_filter" id="userDebtFilter" class="form-select text-white"  autocomplete="off">
								<option value="">Todos los usuarios</option>
								@foreach(($listUserDebts ?? []) as $debtUser)
									<option value="{{ $debtUser['user_id'] }}" {{ (string) ($userSelected ?? '') === (string) $debtUser['user_id'] ? 'selected' : '' }}>
										{{ trim(($debtUser['name'] ?? '') . ' ' . ($debtUser['last_name'] ?? '')) ?: ('Usuario #' . $debtUser['user_id']) }}
									</option>
								@endforeach
							</select>
							<div class="valid-feedback">Usuario seleccionado correctamente.</div>
						</div>
						<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', isset($isFullInput) ? (int) $isFullInput : 1) ? '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">
									@php
										$todayDate = date('Y-m-d');
										$minPayDate = date('Y-m-d', strtotime('-60 days'));
									@endphp
									<label class="form-label">Fecha de Pago <span class="text-danger">*</span></label>
									<input type="date" name="pay_date" class="form-control is-required" min="{{ $minPayDate }}" max="{{ $todayDate }}" value="{{ old('pay_date', $selectedPayDate ?? $todayDate) }}" required>
									<div class="valid-feedback">Fecha válida.</div>
								</div>
								<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' }}"
												{{ old('pay_type_id') == $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>
						</div>

						<div class="mb-3">
							<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 }}" {{ old('bank_id') == $bank->id ? 'selected' : '' }}>{{ ($bank->code ? '(' . $bank->code . ') ' : '') . $bank->name }}</option>
								@endforeach
							</select>
							<div class="valid-feedback">Banco válido.</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') }}" 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') }}">
									<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') }}">
									<div class="valid-feedback">Número válido.</div>
								</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') == 'Aprobado' ? 'selected' : '' }}>Aprobado</option>
										<option value="Rechazado" {{ old('status') == 'Rechazado' ? 'selected' : '' }}>Rechazado</option>
										<option value="Pendiente" {{ old('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/*">
							<div class="valid-feedback">Comprobante válido.</div>
							<small class="text-muted">Opcional. Se guarda manteniendo la proporción de la imagen.</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>

							@if(isset($debts) && $debts->count())
								@php
									$totalUserDebt = (float) $debts->sum(function ($sale) {
										return (float) ($sale->debt ?? 0);
									});
									$totalUserAuxDebt = (float) $debts->sum(function ($sale) {
										return (float) ($sale->aux_debt ?? 0);
									});
								@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="allocation-panel mb-3" id="paymentAllocationSummary">
										<div class="allocation-grid">
											<div class="allocation-item allocation-item--assigned">
												<span class="allocation-item__label">Asignado</span>
												<span id="paymentAssignedTotal" class="allocation-item__value">0,00</span>
											</div>
											<div class="allocation-item allocation-item--remaining">
												<span class="allocation-item__label">Restante por distribuir</span>
												<span id="paymentRemainingTotal" class="allocation-item__value">0,00</span>
											</div>
										</div>
										<div class="allocation-equation">
											Pago total - Asignado = Restante
										</div>
										<div class="allocation-help" id="allocationHelper">
											<span class="allocation-help__message" id="applyRemainingHint"></span>
											<button type="button" id="applyRemainingButton" class="btn btn-sm btn-outline-primary d-none">
												<i class="bi bi-magic"></i> Aplicar restante automaticamente
											</button>
										</div>
									</div>

									<div class="row">
										@foreach($debts as $sale)
											<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 sale-checkbox-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"
																	{{ in_array($sale->id, old('sale_ids', [])) ? '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), 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((float) ($sale->debt ?? 0), 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>
								</div>
								<div class="small text-danger mt-2 d-none" id="debtValidationMessage"></div>
							@else
								<div class="alert alert-light mb-0">No tienes deudas pendientes para asociar.</div>
							@endif
						</div>

						<div class="d-flex justify-content-end">
							<button type="submit" class="btn btn-success">Guardar</button>
						</div>
					</div>
				</div>
			</form>
		</div>

		<div class="col-lg-4 col-md-5">
			<div class="card mb-3 shadow-sm d-none d-md-block sticky-top" style="top: 1rem;">
				<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> ID o nombre del tipo de pago (transferencia, efectivo, etc).</p>
					<p class="mb-2"><strong>Usuario:</strong> ID del usuario que realiza el pago.</p>
					<p class="mb-2"><strong>Fecha de Pago:</strong> Fecha en que se realizó el pago.</p>
					<p class="mb-2"><strong>Monto:</strong> Monto total pagado.</p>
					<p class="mb-2"><strong>Banco:</strong> Banco desde donde se realizó el pago (opcional).</p>
					<p class="mb-2"><strong>Referencia:</strong> Número de referencia bancaria (opcional).</p>
					<p class="mb-2"><strong>Teléfono:</strong> Número de documento o tarjeta asociado al pago (opcional).</p>
					<p class="mb-2"><strong>Comprobante:</strong> Imagen del pago (opcional).</p>
					<p class="mb-2"><strong>Estado:</strong> Estado del pago (pendiente, aprobado, rechazado).</p>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection