@extends('layouts.app')

@section('content')
<div class="container" id="sale-edit-root"
	data-sale-id="{{ $sale->id }}"
	data-fetch-url="{{ route('admin_fit.sales.edit_data', $sale) }}"
	data-update-url="{{ route('admin_fit.sales.update', $sale) }}"
	data-index-url="{{ route('admin_fit.sales.index') }}">
	<div class="row justify-content-center bg-white p-4 p-md-5 rounded shadow-sm">
		<div class="col-12 d-flex justify-content-between align-items-start mb-4">
			<div>
				<h6 class="text-uppercase text-muted mb-1">Editar Documento</h6>
				<h2 class="mb-0">Factura de Venta</h2>
			</div>
			<a href="{{ route('admin_fit.sales.index') }}" class="btn btn-outline-secondary">Volver</a>
		</div>

		<div class="col-12">
			<div class="alert alert-danger d-none" id="sale-edit-error"></div>
			<div class="alert alert-success d-none" id="sale-edit-success"></div>
		</div>

		<div class="col-12 mb-4">
			<div class="row g-4">
				<div class="col-md-7">
					<h6 class="text-uppercase text-muted">Recibo</h6>
					<div class="row g-2">
						<div class="col-sm-6">
							<label class="form-label small text-muted mb-1">Nombre</label>
							<input type="text" id="sale-user-name" class="form-control-plaintext fw-semibold" readonly>
						</div>
						<div class="col-sm-6">
							<label class="form-label small text-muted mb-1">Apellido</label>
							<input type="text" id="sale-user-last-name" class="form-control-plaintext fw-semibold" readonly>
						</div>
					</div>
				</div>
				<div class="col-md-5 text-md-end">
					<h1 class="h2 mb-3">Documento</h1>
					<div class="mb-1">
						<span class="text-muted small text-uppercase">Número de Factura</span>
						<input type="text" id="sale-code" class="form-control-plaintext fw-semibold text-md-end" readonly>
					</div>
					<div>
						<span class="text-muted small text-uppercase">Fecha de Factura</span>
						<input type="text" id="sale-created-at" class="form-control-plaintext text-md-end" readonly>
					</div>
				</div>
			</div>
		</div>

		<div class="col-12">
			<div class="table-responsive mb-3">
				<table class="table table-sm align-middle" id="sale-details-table">
							<thead>
								<tr>
									<th>Task Description</th>
									<th class="text-center" style="width:110px;">Quantity</th>
									<th class="text-end" style="width:140px;">Unit price</th>
									<th class="text-end" style="width:140px;">Sub Total</th>
									<th class="text-center" style="width:90px;">Acción</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
				<div class="row justify-content-end">
					<div class="col-md-5 col-lg-4">
						<div class="border-top pt-3">
							<div class="d-flex justify-content-between mb-2">
								<span class="text-muted">Estado</span>
								<select id="sale-status" class="form-select form-select-sm w-auto">
									<option value="pendiente">Pendiente</option>
									<option value="pagado">Pagado</option>
									<option value="anulado">Anulado</option>
								</select>
							</div>
							<div class="d-flex justify-content-between mb-2">
								<span class="text-muted">SubTotal Ref</span>
								<input type="number" step="0.01" min="0" id="sale-aux-total" class="form-control form-control-sm text-end w-50" readonly>
							</div>
							<div class="d-flex justify-content-between mb-2">
								<span class="text-muted">Total Bs</span>
								<input type="number" step="0.01" min="0" id="sale-total" class="form-control form-control-sm text-end w-50" readonly>
							</div>
							<div class="d-flex justify-content-between fw-semibold">
								<span>Total Deuda</span>
								<input type="number" step="0.01" min="0" id="sale-debt" class="form-control form-control-sm text-end w-50 fw-semibold" readonly>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="d-flex justify-content-end mt-4 gap-2">
				<button type="button" id="sale-save-btn" class="btn btn-success">
					<i class="bi bi-floppy me-1"></i>Guardar cambios
				</button>
			</div>
	</div>
</div>
@endsection