@extends('layouts.app')

@section('content')
<style>
	.pos-page {
		--pos-bg: #f0f2f7;
		--pos-card: #ffffff;
		--pos-border: #e4e7ef;
		--pos-text: #1b1f2b;
		--pos-muted: #6d7385;
		--pos-accent: #3559ff;
		--pos-accent-strong: #222736;
		--pos-accent-soft: #e8edff;
		min-height: calc(100vh - 115px);
background: radial-gradient(1200px 450px at -10% -20%, #222736 0%, #000000d9 15%), radial-gradient(800px 320px at 110% 120%, #111217 0%, transparent 10%), #f0f2f7;
		border-radius: 20px;
		border: 1px solid #dce2ef;
		padding: 1rem;
	}

	.pos-layout {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1rem;
		margin: 0;
	}

	.pos-panel {
		background: #fff;
		border: 1px solid #dde3f1;
		border-radius: 18px;
		box-shadow: 0 12px 30px rgba(18, 26, 52, 0.06);
		backdrop-filter: blur(6px);
	}

	.pos-panel-left {
		padding: 1rem;
	}

	.pos-panel-right {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		min-height: 640px;
	}

	.pos-top-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		margin-bottom: 0.8rem;
	}

	.pos-title {
		font-weight: 700;
		color: var(--pos-text);
		margin: 0;
		font-size: 1.65rem;
	}

	.pos-subtitle {
		margin: 0;
		color: var(--pos-muted);
		font-size: 0.92rem;
	}

	.pos-search-wrap {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0.75rem;
	}

	.pos-search-wrap .form-control,
	.pos-search-wrap .btn,
	.pos-category-chip,
	.pos-checkout-btn {
		border-radius: 14px !important;
	}

	.pos-search-wrap .form-control,
	.pos-page .form-control,
	.pos-page .form-select {
		background: #fff !important;
		color: #10131a !important;
		border: 1px solid #dce1ed !important;
	}

	.pos-category-row {
		display: flex;
		gap: 0.6rem;
		overflow-x: auto;
		padding-bottom: 0.4rem;
		margin-bottom: 0.9rem;
	}

	.pos-category-chip {
		border: 1px solid var(--pos-border);
		background: #fff;
		color: #243048;
		padding: 0.45rem 0.9rem;
		font-size: 0.85rem;
		font-weight: 600;
		white-space: nowrap;
		transition: all 0.2s ease;
	}

	.pos-category-chip.active {
		background: var(--pos-accent-strong);
		color: #fff;
		border-color: var(--pos-accent-strong);
	}

	.pos-products-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.8rem;
	}

	.pos-product-card {
		background: var(--pos-card);
		border: 1px solid var(--pos-border);
		border-radius: 16px;
		padding: 0.7rem;
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
		min-height: 190px;
	}

	.pos-product-media {
		height: 86px;
		border-radius: 12px;
		background: linear-gradient(135deg, #edf1ff 0%, #eef3f9 100%);
		border: 1px solid #e2e8f5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4f5e7f;
		font-size: 1.35rem;
		font-weight: 700;
	}

	.pos-product-name {
		margin: 0;
		color: var(--pos-text);
		font-weight: 700;
		font-size: 0.96rem;
		line-height: 1.25;
	}

	.pos-product-desc {
		margin: 0;
		color: #7a8193;
		font-size: 0.78rem;
		min-height: 1.05rem;
	}

	.pos-product-footer {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pos-price {
		font-weight: 700;
		color: #101726;
		font-size: 1.02rem;
	}

	.pos-add-btn {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		border: none;
		background: linear-gradient(135deg, #00bd09 0%, #18b32c 100%);
		color: #fff;
		font-size: 1.1rem;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.pos-stock {
		font-size: 0.75rem;
		color: #5f6880;
	}

	.pos-order-title {
		margin: 0;
		font-size: 1.4rem;
		font-weight: 700;
		color: #111827;
	}

	.pos-order-list {
		margin-top: 0.75rem;
		flex: 1;
		min-height: 220px;
		max-height: 430px;
		overflow-y: auto;
		padding-right: 0.2rem;
	}

	.pos-empty-cart {
		border: 1px dashed #cfd7ea;
		border-radius: 14px;
		padding: 1rem;
		color: #67708a;
		text-align: center;
		background: #f8faff;
	}

	.pos-order-item {
		border: 1px solid var(--pos-border);
		border-radius: 12px;
		padding: 0.65rem;
		background: #fff;
		margin-bottom: 0.6rem;
	}

	.pos-order-item-title {
		margin: 0;
		color: #131a2a;
		font-weight: 600;
		font-size: 0.95rem;
	}

	.pos-order-item-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.4rem;
	}

	.pos-qty-controls {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
	}

	.pos-qty-btn {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		border: none;
		background: #202635;
		color: #fff;
		font-weight: 700;
		font-size: 0.92rem;
	}

	.pos-remove-btn {
		border: none;
		background: transparent;
		color: #e55353;
		font-size: 0.82rem;
		font-weight: 600;
	}

	.pos-summary {
		border: 1px solid var(--pos-border);
		background: #fff;
		border-radius: 14px;
		padding: 0.8rem;
		margin-top: 0.8rem;
	}

	.pos-summary-row {
		display: flex;
		justify-content: space-between;
		gap: 0.75rem;
		color: #474b5c;
		font-size: 0.95rem;
		margin-bottom: 0.25rem;
	}

	.pos-summary-row.total {
		margin-top: 0.45rem;
		padding-top: 0.55rem;
		border-top: 1px solid #e6ebf7;
		color: #111928;
		font-size: 1.25rem;
		font-weight: 700;
	}

	.pos-checkout-btn {
		margin-top: 0.8rem;
		border: none;
		background: linear-gradient(135deg, #2fff39 0%, #18b32c 100%);
		color: #fff;
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: 1rem;
		font-weight: 700;
	}

	@media (max-width: 1199.98px) {
		.pos-products-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 991.98px) {
		.pos-panel-right {
			min-height: initial;
		}

		.pos-order-list {
			max-height: 300px;
		}
	}

	@media (max-width: 575.98px) {
		.pos-page {
			padding: 0.6rem;
			border-radius: 14px;
		}

		.pos-top-row {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.55rem;
		}

		.pos-top-row .badge {
			width: 100%;
			text-align: center;
		}

		.pos-panel-left,
		.pos-panel-right {
			padding: 0.75rem;
		}

		.pos-search-wrap {
			flex-direction: column;
		}

		.pos-search-wrap .btn {
			width: 100%;
		}

		.pos-products-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 399.98px) {
		.pos-page {
			padding: 0.5rem;
		}

		.pos-title {
			font-size: 1.35rem;
		}

		.pos-order-title {
			font-size: 1.2rem;
		}

		.pos-summary-row {
			font-size: 0.9rem;
		}

		.pos-summary-row.total {
			font-size: 1.08rem;
		}

		.pos-qty-btn {
			width: 26px;
			height: 26px;
		}
	}
</style>

<div
	id="posApp"
	class="pos-page"
	data-products-url="{{ route('admin_fit.pos.products') }}"
	data-users-url="{{ route('admin_fit.pos.users') }}"
	data-sale-url="{{ route('admin_fit.pos.sale.store') }}"
>
	<div class="pos-layout row g-3 align-items-start">
		<section class="pos-panel pos-panel-left col-12 col-lg-8">
			<div class="pos-top-row">
				<div>
					<h1 class="pos-title">POS</h1>
					<p class="pos-subtitle">Punto de venta para productos activos.</p>
				</div>
				<span class="badge text-bg-light border">Stock en tiempo real</span>
			</div>

			<div class="pos-search-wrap">
				<input
					type="text"
					id="posSearchInput"
					class="form-control"
					placeholder="Buscar por nombre, descripción o código"
					value="{{ $searchValue ?? '' }}"
				>
				<button type="button" class="btn btn-outline-secondary" id="posClearSearchBtn">Limpiar</button>
			</div>

			<div class="pos-category-row" id="posCategoryRow">
				<button
					type="button"
					class="pos-category-chip {{ empty($categoryId) ? 'active' : '' }}"
					data-category-id=""
				>
					Todos
				</button>
				@foreach ($categories as $category)
					<button
						type="button"
						class="pos-category-chip {{ (int) ($categoryId ?? 0) === (int) $category->id ? 'active' : '' }}"
						data-category-id="{{ $category->id }}"
					>
						{{ $category->category_name }}
					</button>
				@endforeach
			</div>

			<div id="posProductGrid" class="pos-products-grid">
				@foreach ($products as $product)
					<article class="pos-product-card">
						<div class="pos-product-media">{{ strtoupper(substr($product['name'], 0, 2)) }}</div>
						<h3 class="pos-product-name">{{ $product['name'] }}</h3>
						<div class="pos-product-footer">
							<div>
								<div class="pos-price">$ {{ number_format((float) $product['sale_price'], 2, ',', '.') }}</div>
								<div class="pos-stock">Stock: {{ (int) $product['current_stock'] }}</div>
							</div>
							<button
								type="button"
								class="pos-add-btn"
								data-add-product="{{ $product['id'] }}"
								aria-label="Agregar producto"
							>+
							</button>
						</div>
					</article>
				@endforeach
			</div>
		</section>

		<aside class="pos-panel pos-panel-right col-12 col-lg-4">
			<h2 class="pos-order-title">Orden Actual</h2>
			<small class="text-muted">Agrega productos desde el catalogo de la izquierda.</small>

			<div class="mt-3">
				<label for="posUserSearchInput" class="form-label mb-1">Buscar cliente</label>
				<input
					type="text"
					id="posUserSearchInput"
					class="form-control"
					placeholder="Nombre, apellido o telefono"
					value="{{ $userSearchValue ?? '' }}"
				>
				<div
					id="posUsersList"
					class="border rounded-3 p-2 mt-2"
					style="max-height: 170px; overflow-y: auto; background: #fff;"
				>
					@forelse ($users as $user)
						<button
							type="button"
							class="btn btn-light border w-100 text-start mb-2 pos-user-item"
							data-user-id="{{ $user['id'] }}"
						>
							<div class="fw-semibold">{{ $user['full_name'] }}</div>
							<div class="small text-muted">{{ $user['phone'] ?: 'Sin telefono' }}</div>
						</button>
					@empty
						<div class="small text-muted">No hay usuarios disponibles.</div>
					@endforelse
				</div>
				<div class="small mt-2 text-muted">
					Cliente seleccionado:
					<strong id="posSelectedUserLabel">Ninguno</strong>
				</div>
			</div>

			<div id="posOrderList" class="pos-order-list">
				<div class="pos-empty-cart" id="posEmptyCart">Aun no hay productos en la orden.</div>
			</div>

			<div class="pos-summary">
				<div class="pos-summary-row">
					<span>Subtotal</span>
					<strong id="posSubtotalValue">$ 0,00</strong>
				</div>
				<div class="pos-summary-row">
					<span>Descuento</span>
					<strong id="posDiscountValue">$ 0,00</strong>
				</div>
				<div class="pos-summary-row">
					<span>Cargos</span>
					<strong id="posServiceValue">$ 0,00</strong>
				</div>
				<div class="pos-summary-row total">
					<span>Total</span>
					<strong id="posTotalValue">$ 0,00</strong>
				</div>
			</div>

			<button type="button" id="posCheckoutBtn" class="pos-checkout-btn">Confirmar Venta</button>
			<div id="posFeedback" class="mt-2"></div>
		</aside>
	</div>
</div>
@endsection