@extends('form.index')
@section('title', 'Crear Promocion.')
@section('title-form', 'Crear Promocion')
@section('route-form', route('promociones.store'))
@section('content-form')
    <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') }}">
		@error('nombre')
			<div id="title-feedback" class="is-invalid ">
				<small class="text-danger">*{{ $message }}</small>
			</div>
		@enderror
	</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') ?? date('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') }}">
		</div>
		<input type="hidden" name="productos">
		<input type="hidden" name="cantidades">
		<input type="hidden" name="cantidades_revendedores">
	</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>
	<button type="submit" class="btn btn-success mb-1" id="btnForm" onclick="enviarForm(event);">Crear Promocion</button>

	<script>
		let lista = new Array();
		document.addEventListener('DOMContentLoaded', () => {
			validarFechas();
		});

		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;
			form.submit();
		}
	</script>
@endsection