@extends('form.index')
@section('title', 'Actualizar Promocion.')
@section('title-form', 'Actualizar Promocion.')
@section('route-form', route('promociones.update', $promocion->id))
@section('content-form')
	@method('PUT')
    <div class="form-group">
		<label for="nombre">Nombre</label>
		<input type="text" class="form-control" id="nombre" name="nombre" aria-describedby='title-feedback'
			value="{{ old('nombre') ?? $promocion->nombre }}">
	</div>
	<div class="form-group row">
		<div class="col-11">
			<label for="codigo">Enlace</label>
			<input type="text" class="form-control" id="codigo" name="codigo" aria-describedby='title-feedback'
				value="{{ old('codigo') ?? $promocion->codigo }}" readonly>
		</div>
		<div class="col-1">
			<br>
			<button
				type="button"
				class="btn btn-xs btn-light"
				onclick="handleEnableTextCode(this)"
				><i class="fa fa-edit"></i>
			</button>
		</div>
	</div>
	<div class="form-group row">
		<div class="col-6">
			<label for="desde">Desde</label>
			<input 
				type="date" 
				name="desde" 
				id="desde" 
				class="form-control"
				min="2025-05-12"
				onchange="validarFechas()"
				placeholder="dd-mm-yyyy"
				value="{{ old('desde') ?? $promocion->desde->format('Y-m-d') }}">
		</div>
		<div class="col-6">
			<label for="hasta">Hasta</label>
			<input 
				type="date" 
				name="hasta" 
				id="hasta"
				onchange="validarFechas()"
				placeholder="dd-mm-yyyy"
				class="form-control"
				value="{{ old('hasta') ?? $promocion->hasta->format('Y-m-d') }}">
		</div>
		<input type="hidden" name="productos" value="">
		<input type="hidden" name="cantidades" value="">
		<input type="hidden" name="cantidades_revendedores" value="">
	</div>
	<div class="card mb-2">
		<div class="card-body p-2">
			<!-- Modal -->
			<div class="modal fade" id="abmProducto" tabindex="-1" role="dialog" aria-labelledby="abmProductoLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
					<h5 class="modal-title" id="abmProductoLabel">Productos de la promoción</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<label for="item_producto">Producto</label>
							<select name="item_producto" class="form-control">
								<option value="" disabled selected>SELECCIONE...</option>
								@foreach ($productos as $key => $value)
									<option data-name="{{$key}}" value="{{$value}}">{{$key}}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group">
							<label for="item_producto">Cantidad</label>
							<input type="number" name="item_cantidad" value="1" class="form-control">
						</div>
						<div class="form-group">
							<label for="item_producto_revendedor">Cantidad Revendedor</label>
							<input type="number" name="item_cantidad_revendedor" value="1" class="form-control">
						</div>
					</div>
					<div class="modal-footer">
					<button type="button" class="btn btn-primary" onclick="event.preventDefault(); agregarALista();" id="addProductToPromotion">Agregar</button>
					</div>
				</div>
				</div>
			</div>
			<button id="nuevoProducto" class="btn btn-info btn-xs m-3 float-right" onclick="event.preventDefault(); $('#abmProducto').modal('show');">Cargar Producto</button>
			<table class="table">
				<thead>
					<tr>
						<th>Producto</th>
						<th>Cantidad</th>
						<th>Cantidad[Revendedor]</th>
						<th>Opción</th>
					</tr>
				</thead>
				<tbody id="listProductos"></tbody>
			</table>
		</div>
	</div>
	<div class="form-group justify-align-items mx-auto">
		<button type="submit" class="btn btn-success mb-1" id="btnForm" onclick="enviarForm(event);">Actualizar Promocion</button>
		<a href="{{route('promociones.index')}}" class="btn btn-secondary float-right">Volver</a>
	</div>

	<script>
		let lista = new Array();
		document.addEventListener('DOMContentLoaded', () => {
			validarFechas();
			@foreach($promocion->productos as $producto)
				lista.push({
					id_producto: '{{$producto->id}}',
					producto: '{{$producto->nombre}}',
					cantidad: {{$producto->pivot->cantidad}},
					cantidadRevendedor: {{$producto->pivot->cantidad_revendedor}}
				})
			@endforeach
			document.querySelector("select[name='item_producto']").selectedIndex=0;
			document.querySelector("input[name='item_cantidad']").value = 1;
			document.querySelector("input[name='item_cantidad_revendedor']").value = 1;
			recargarLista();
		});

		const recargarLista = () => {
			let tbody = '';
			lista.map((el, index) => {
				tbody += `
					<tr>
						<td>${el.producto}</td>
						<td>${el.cantidad}</td>
						<td>${el.cantidadRevendedor}</td>
						<td>
							<button class='btn btn-xs' onclick="event.preventDefault(); quitarProductoDeLaLista(${index})" title='Quitar de la lista'>
								<i class='fa fa-trash'></i>	
							</button>
						</td>
					</tr>
				`;
			});
			let selectOptions = document.querySelector("select[name='item_producto']").options;
			for (let option of selectOptions) {
				if (lista.find(el => el.id_producto === option.value)) {
					option.setAttribute('disabled', true);
				} else {
					option.removeAttribute('disabled');
				}
				option.setAttribute('selected', false);
			}
			document.querySelector("#listProductos").innerHTML = tbody;
		}
		const agregarALista = () => {
			const select = document.querySelector("select[name='item_producto']");
			const cantidad = document.querySelector("input[name='item_cantidad']");
			const cantidadRevendedor = document.querySelector("input[name='item_cantidad_revendedor']");
			if (
				select.options[select.selectedIndex].value == '' ||
				cantidad.value < 1 ||
				cantidadRevendedor.value < 1
			) {
				alert('todos los campos son obligatorios');
			} else {
				lista.push({
					id_producto: select.options[select.selectedIndex].value,
					producto: select.options[select.selectedIndex].getAttribute('data-name'),
					cantidad: cantidad.value,
					cantidadRevendedor: cantidadRevendedor.value
				});
				recargarLista();
				select.selectedIndex=0;
				cantidad.value = 1;
				cantidadRevendedor.value = 1;
				$("#abmProducto").modal('hide');
			}
		}

		const quitarProductoDeLaLista = (id) => {
			lista.splice(id, 1);
			recargarLista();
		}

		const validarFechas = () => {
			const desde = document.querySelector("input[name='desde']");
			const hasta = document.querySelector("input[name='hasta']");
			hasta.setAttribute('min', desde.value)
		}

		const enviarForm = (event) => {
			event.preventDefault();
			document.querySelector("input[name='productos']").value = lista.map(el => el.id_producto);
			document.querySelector("input[name='cantidades']").value = lista.map(el => el.cantidad);
			document.querySelector("input[name='cantidades_revendedores']").value = lista.map(el => el.cantidadRevendedor);
			const form = document.querySelector("#btnForm").parentElement.parentElement;
			form.submit();
		}

		const handleEnableTextCode = (btn) => {
			const inputCode = document.getElementById('codigo');
			inputCode.readOnly = !inputCode.readOnly;
			if (!inputCode.readOnly) {
				btn.innerHTML = "<i class='fa fa-check'></i>"
				btn.classList.remove('btn-light')
				btn.classList.add('btn-outline-success');
				inputCode.focus();
			} else {
				btn.innerHTML = "<i class='fa fa-edit'></i>"
				btn.classList.remove('btn-outline-success')
				btn.classList.add('btn-light');
			}
		}
	</script>
@endsection