@extends('layouts.app')

@section('content')
<style>
	.card-animate {
		animation: fadeInUp .7s cubic-bezier(.39,.575,.565,1) both;
	}
	@keyframes fadeInUp {
		0% { opacity: 0; transform: translateY(40px); }
		100% { opacity: 1; transform: none; }
	}
	.btn-warning {
		transition: box-shadow 0.2s, transform 0.2s;
	}
	.btn-warning:hover, .btn-warning:focus {
		box-shadow: 0 4px 16px 0 rgba(255, 193, 7, 0.15);
		transform: translateY(-2px) scale(1.03);
	}
</style>
<div class="container-fluid">
	<div class="row justify-content-center">
		<div class="col-12 col-xl-10 col-xxl-9">
			<div class="card shadow-sm card-animate">
				<div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
					<span><i class="bi bi-pencil-square"></i> Editar producto #{{ $product->id }}</span>
					<a href="{{ route('admin_fit.product.index') }}" class="btn btn-sm btn-light text-warning fw-semibold">
						<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

					<form method="POST" action="{{ route('admin_fit.product.update', $product) }}" id="productUpdateForm" autocomplete="off">
						@csrf
						@method('PUT')

						<div class="row g-4">
							<div class="col-md-8">
								<label for="product_name" class="form-label fw-semibold">Nombre del producto <span class="text-danger">*</span></label>
								<input type="text" id="product_name" name="product_name" class="form-control border-warning" value="{{ old('product_name', $product->product_name) }}" required maxlength="255" autofocus>
							</div>
							<div class="col-md-4">
								<label for="barcode" class="form-label">Código de barras</label>
								<input type="text" id="barcode" name="barcode" class="form-control border-warning" value="{{ old('barcode', $product->barcode) }}" maxlength="20">
							</div>

							<div class="col-md-6">
								<label for="sale_price" class="form-label">Precio de venta <span class="text-danger">*</span></label>
								<input type="number" id="sale_price" name="sale_price" class="form-control border-warning" value="{{ old('sale_price', $product->sale_price) }}" min="0" step="0.01" required>
							</div>
							<div class="col-md-6">
								<label for="purchase_price" class="form-label">Precio de compra <span class="text-danger">*</span></label>
								<input type="number" id="purchase_price" name="purchase_price" class="form-control border-warning" value="{{ old('purchase_price', $product->purchase_price) }}" min="0" step="0.01" required>
							</div>

							<div class="col-md-6">
								<label for="current_stock" class="form-label">Stock actual <span class="text-danger">*</span></label>
								<input type="number" id="current_stock" name="current_stock" class="form-control border-warning" value="{{ old('current_stock', $product->current_stock) }}" min="0" step="1" required>
							</div>
							<div class="col-md-6">
								<label for="minimum_stock" class="form-label">Stock mínimo</label>
								<input type="number" id="minimum_stock" name="minimum_stock" class="form-control border-warning" value="{{ old('minimum_stock', $product->minimum_stock) }}" min="0" step="1" required>
							</div>

							<div class="col-md-6">
								<label for="category_id" class="form-label">Categoría</label>
								<select id="category_id" name="category_id" class="form-select border-warning">
									<option value="">Seleccione una categoría</option>
									@foreach ($categories as $category)
										<option value="{{ $category->id }}" {{ (string) old('category_id', $product->category_id) === (string) $category->id ? 'selected' : '' }}>
											{{ $category->category_name }}
										</option>
									@endforeach
								</select>
							</div>
							<div class="col-md-6">
								<label for="supplier_id" class="form-label">Proveedor</label>
								<select id="supplier_id" name="supplier_id" class="form-select border-warning">
									<option value="">Seleccione un proveedor</option>
									@foreach ($suppliers as $supplier)
										<option value="{{ $supplier->id }}" {{ (string) old('supplier_id', $product->supplier_id) === (string) $supplier->id ? 'selected' : '' }}>
											{{ $supplier->supplier_name }}
										</option>
									@endforeach
								</select>
							</div>

							<div class="col-12">
								<label for="description" class="form-label">Descripción</label>
								<textarea id="description" name="description" class="form-control border-warning" rows="3" maxlength="2000">{{ old('description', $product->description) }}</textarea>
							</div>
						</div>

						<div class="d-flex justify-content-end mt-4">
							<button type="submit" class="btn btn-warning"><i class="bi bi-check-circle"></i> Actualizar producto</button>
						</div>
					</form>

					<div class="d-flex justify-content-start mt-3">
						<form method="POST" action="{{ route('admin_fit.product.destroy', $product) }}" onsubmit="return confirm('¿Seguro que deseas eliminar este producto?');">
							@csrf
							@method('DELETE')
							<button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Eliminar</button>
						</form>
					</div>
				</div>
				<!-- TRAZA DE INVENTARIO -->
				<div class="card mt-4 shadow-sm card-animate">
					<div class="card-header bg-light d-flex flex-wrap align-items-center justify-content-between gap-2">
						<div class="d-flex align-items-center gap-2">
							<i class="bi bi-graph-up-arrow me-2 text-warning"></i>
							<span class="fw-semibold">Trazabilidad de inventario: últimos movimientos</span>
						</div>
						<form class="d-flex flex-wrap align-items-center gap-2" method="GET" action="">
							<select name="type" class="form-select form-select-sm" style="min-width:120px">
								<option value="">Todos</option>
								<option value="sale" @if(request('type')==='sale') selected @endif>Venta</option>
								<option value="purchase" @if(request('type')==='purchase') selected @endif>Compra</option>
								<option value="adjustment" @if(request('type')==='adjustment') selected @endif>Ajuste</option>
							</select>
							<input type="date" name="from" class="form-control form-control-sm" value="{{ request('from') }}">
							<input type="date" name="to" class="form-control form-control-sm" value="{{ request('to') }}">
							<button type="submit" class="btn btn-outline-secondary btn-sm"><i class="bi bi-funnel"></i> Filtrar</button>
							<a href="?export=excel&type={{ request('type') }}&from={{ request('from') }}&to={{ request('to') }}" class="btn btn-outline-success btn-sm"><i class="bi bi-file-earmark-excel"></i> Exportar</a>
						</form>
					</div>
					<div class="card-body p-0">
						<style>
							.table-inventory-moves thead th {
								position: sticky;
								top: 0;
								background: #f8f9fa;
								z-index: 2;
							}
							.table-inventory-moves {
								min-width: 900px;
							}
							.badge-move-sale { background: #f87171 !important; color: #fff; }
							.badge-move-purchase { background: #34d399 !important; color: #fff; }
							.badge-move-adjustment { background: #60a5fa !important; color: #fff; }
							.badge-move-other { background: #a3a3a3 !important; color: #fff; }
						</style>
						<div class="table-responsive" style="max-height: 340px;">
							<table class="table table-sm table-hover align-middle mb-0 table-inventory-moves">
								<thead class="table-light">
									<tr>
										<th>Fecha</th>
										<th>Tipo</th>
										<th>Cantidad</th>
										<th>Stock antes</th>
										<th>Stock después</th>
										<th>Usuario</th>
										<th>Referencia</th>
										<th>Notas</th>
									</tr>
								</thead>
								<tbody>
									@php
										$filtered = $movements;
									@endphp
									@forelse($filtered as $move)
										<tr>
											<td>{{ $move->created_at->format('d/m/Y H:i') }}</td>
											<td>
												<span class="badge 
													@if($move->movement_type === 'sale') badge-move-sale
													@elseif($move->movement_type === 'purchase') badge-move-purchase
													@elseif($move->movement_type === 'adjustment') badge-move-adjustment
													@else badge-move-other @endif">
													{{ ucfirst($move->movement_type) }}
												</span>
											</td>
											<td class="text-end">{{ $move->quantity }}</td>
											<td class="text-end">{{ $move->stock_before }}</td>
											<td class="text-end">{{ $move->stock_after }}</td>
											<td>
												@if($move->creator)
													<span class="text-primary" data-bs-toggle="tooltip" title="{{ $move->creator->email }}">{{ $move->creator->name }}</span>
												@else
													<span class="text-muted">-</span>
												@endif
											</td>
											<td>
												@if($move->reference_type && $move->reference_id)
													<span class="text-muted">{{ $move->reference_type }} #{{ $move->reference_id }}</span>
												@else
													<span class="text-muted">-</span>
												@endif
											</td>
											<td>{{ $move->notes }}</td>
										</tr>
									@empty
										<tr>
											<td colspan="8" class="text-center text-muted">Sin movimientos recientes.</td>
										</tr>
									@endforelse
								</tbody>
							</table>
						</div>
						<script>
							document.addEventListener('DOMContentLoaded', function() {
								var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
								tooltipTriggerList.forEach(function (tooltipTriggerEl) {
									new bootstrap.Tooltip(tooltipTriggerEl);
								});
							});
						</script>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection