@extends('layouts.app')

@section('content')
<div class="container">
	<div class="row justify-content-center">
		<div class="col-lg-11">
			<form method="POST" action="{{ route('admin_fit.bill.store') }}" id="billForm" class="card shadow-sm border-0">
				@csrf
				<div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
					<div>
						<h5 class="mb-0">Nueva factura</h5>
						<small class="text-muted">Carga de productos y cálculo automático</small>
					</div>
					<a href="{{ route('admin_fit.bill.index') }}" class="btn btn-sm btn-outline-secondary">
						<i class="bi bi-chevron-left"></i> Volver
					</a>
				</div>
				<div class="card-body bg-white">
					@if ($errors->any())
						<div class="alert alert-danger">
							<ul class="mb-0">
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif

					<div class="row g-3 mb-4">
						<div class="col-md-3">
							<label for="status" class="form-label">Estado</label>
							<select id="status" name="status" class="form-select @error('status') is-invalid @enderror" required>
								<option value="pendiente" {{ old('status', 'pendiente') === 'pendiente' ? 'selected' : '' }}>Pendiente</option>
								<option value="completada" {{ old('status') === 'completada' ? 'selected' : '' }}>Completada</option>
								<option value="anulada" {{ old('status') === 'anulada' ? 'selected' : '' }}>Anulada</option>
							</select>
						</div>

						<div class="col-md-3">
							<label for="amount_rate_input" class="form-label">Tasa</label>
							<input type="number" id="amount_rate_input" class="form-control @error('amount_rate') is-invalid @enderror" value="{{ old('amount_rate', $activeRateValue ?? 1) }}" min="0.0001" step="0.0001">
							<small class="text-muted">Activa del día por defecto</small>
						</div>

						<div class="col-md-6">
							<div class="border rounded p-2 bg-light h-100 d-flex align-items-center">
								<small class="text-muted mb-0">
									El número de factura, vencimiento (+1 mes) y alerta (73 días antes) se calculan automáticamente por el sistema.
								</small>
							</div>
						</div>

						<div class="col-md-8">
							<label for="supplier_search" class="form-label fw-semibold">Proveedor <span class="text-danger">*</span></label>
							<div class="input-group">
								<input type="text" id="supplier_search" class="form-control border-primary" placeholder="Buscar proveedor por nombre o RIF" autocomplete="off">
								<button type="button" id="supplierSearchBtn" class="btn btn-primary"><i class="bi bi-search"></i> Buscar</button>
								<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#quickSupplierModal"><i class="bi bi-plus-circle"></i> Nuevo</button>
							</div>
							<input type="hidden" name="supplier_id" id="supplier_id" value="{{ old('supplier_id') }}">
							<div id="supplierResults" class="list-group mt-2 d-none"></div>
							<div class="form-text mt-1" id="supplierSelectedLabel">
								<span class="badge bg-secondary">Proveedor seleccionado:</span> <span class="fw-bold text-primary">Ninguno</span>
							</div>
						</div>
					</div>

					<div class="border rounded p-3 bg-light-subtle">
						<div class="row g-2 align-items-end">
							<div class="col-md-6">
								<label for="product_search" class="form-label fw-semibold">Producto <span class="text-danger">*</span></label>
								<div class="input-group">
									<input type="text" id="product_search" class="form-control border-success" placeholder="Buscar producto por nombre o código" autocomplete="off">
									<button type="button" id="productSearchBtn" class="btn btn-success"><i class="bi bi-search"></i> Buscar</button>
									<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#quickProductModal"><i class="bi bi-plus-circle"></i> Nuevo</button>
								</div>
								<div id="productResults" class="list-group mt-2 d-none"></div>
							</div>
							<div class="col-md-2">
								<label for="product_quantity" class="form-label">Cantidad</label>
								<input type="number" id="product_quantity" class="form-control" min="1" step="1" value="1">
							</div>
							<div class="col-md-4 text-md-end">
								<div class="small mb-2" id="selectedProductLabel">
									<span class="badge bg-secondary">Producto seleccionado:</span> <span class="fw-bold text-success">Ninguno</span>
								</div>
								<button type="button" id="addBillDetailBtn" class="btn btn-dark w-100 w-md-auto"><i class="bi bi-plus-square"></i> Agregar al detalle</button>
							</div>
						</div>
					</div>

					<div class="table-responsive mt-3">
						<table class="table table-sm align-middle" id="billDetailsTable">
							<thead>
								<tr>
									<th>Producto</th>
									<th class="text-end">Base</th>
									<th class="text-center">Cant.</th>
									<th class="text-end">Subtotal base</th>
									<th class="text-end">Subtotal final</th>
									<th class="text-center">Acción</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>

					<div class="row g-3 mt-1">
						<div class="col-md-3">
							<div class="border rounded p-2 bg-white">
								<small class="text-muted d-block">Total base</small>
								<strong id="summaryAuxTotal">0.00</strong>
							</div>
						</div>
						<div class="col-md-3">
							<div class="border rounded p-2 bg-white">
								<small class="text-muted d-block">Total final</small>
								<strong id="summaryTotal">0.00</strong>
							</div>
						</div>
						<div class="col-md-3">
							<div class="border rounded p-2 bg-white">
								<small class="text-muted d-block">Deuda base</small>
								<strong id="summaryAuxDebt">0.00</strong>
							</div>
						</div>
						<div class="col-md-3">
							<div class="border rounded p-2 bg-white">
								<small class="text-muted d-block">Deuda final</small>
								<strong id="summaryDebt">0.00</strong>
							</div>
						</div>
					</div>

					<input type="hidden" name="bill_details_json" id="bill_details_json" value="{{ old('bill_details_json', '[]') }}">
					<input type="hidden" name="amount_rate" id="amount_rate" value="{{ old('amount_rate', $activeRateValue ?? 1) }}">
					<input type="hidden" name="total" id="total" value="{{ old('total', 0) }}">
					<input type="hidden" name="debt" id="debt" value="{{ old('debt', 0) }}">
					<input type="hidden" name="aux_total" id="aux_total" value="{{ old('aux_total', 0) }}">
					<input type="hidden" name="aux_debt" id="aux_debt" value="{{ old('aux_debt', 0) }}">

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

<div class="modal fade" id="quickSupplierModal" tabindex="-1" aria-labelledby="quickSupplierModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-primary text-white">
				<h5 class="modal-title" id="quickSupplierModalLabel"><i class="bi bi-person-plus"></i> Crear proveedor rápido</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
			</div>
			<div class="modal-body">
				<form id="quickSupplierForm">
					<div class="mb-3">
						<label for="quick_supplier_name" class="form-label">Nombre del proveedor <span class="text-danger">*</span></label>
						<input type="text" id="quick_supplier_name" class="form-control border-primary" maxlength="80" required autofocus>
					</div>
					<div id="quickSupplierError" class="text-danger small d-none"></div>
					<div class="d-flex justify-content-end">
						<button type="submit" class="btn btn-primary"><i class="bi bi-check-circle"></i> Crear y seleccionar</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="quickProductModal" tabindex="-1" aria-labelledby="quickProductModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-success text-white">
				<h5 class="modal-title" id="quickProductModalLabel"><i class="bi bi-box-seam"></i> Crear producto rápido</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
			</div>
			<div class="modal-body">
				<form id="quickProductForm">
					<div class="mb-2">
						<label for="quick_product_name" class="form-label">Nombre del producto <span class="text-danger">*</span></label>
						<input type="text" id="quick_product_name" class="form-control border-success" maxlength="255" required autofocus>
					</div>
					<div class="row g-2">
						<div class="col-md-6">
							<label for="quick_product_purchase_price" class="form-label">Precio compra <span class="text-danger">*</span></label>
							<input type="number" id="quick_product_purchase_price" class="form-control border-success" min="0" step="0.01" required>
						</div>
						<div class="col-md-6">
							<label for="quick_product_stock" class="form-label">Stock inicial</label>
							<input type="number" id="quick_product_stock" class="form-control border-success" min="0" step="1" value="0">
						</div>
					</div>
					<div class="mt-2">
						<label for="quick_product_description" class="form-label">Descripción</label>
						<input type="text" id="quick_product_description" class="form-control border-success" maxlength="255">
					</div>
					<div id="quickProductError" class="text-danger small d-none mt-2"></div>
					<div class="d-flex justify-content-end mt-3">
						<button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i> Crear y seleccionar</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@endsection

@push('scripts')
<script src="/js/billCreatePOS.js"></script>
@endpush