@extends('form.index')
@section('title', $cupon ? 'Editar Cupon' : 'Crear Cupon')
@section('title-form', $cupon ? 'Editar Cupon' : 'Crear Cupon')
@section('route-form', $cupon ? route('cupon.update', $cupon) : route('cupon.store'))
@section('content-form')
    <div class="row">
        @if ($cupon)
            @method('PUT')
        @endif
        <div class="form-group col-md-9">
            <label for="codigo">Código</label>
            <input
                type="text"
                name="codigo"
                id="codigo"
                class="form-control"
                placeholder="Dejar en blanco si desea que el sistema genere uno automáticamente"
                value="{{ old('codigo') ?? ($cupon ? $cupon->codigo : '') }}">
        </div>
        <div class="form-group col-md-3">
            <label for=""></label>
            <button type="button" name='genCod' class="btn btn-outline-secondary form-control" onclick="genUuid()">Generar Código</button>
        </div>
        <div class="form-group col-md-3">
            <label for="fecha_desde">Desde</label>
            <input
                type="date"
                name="fecha_desde"
                id="fecha_desde"
                class="form-control"
                value="{{ old('fecha_desde') ?? ($cupon ? $cupon->fecha_desde->format('Y-m-d') : date('Y-m-d')) }}">
        </div>
        <div class="form-group col-md-3">
            <label for="fecha_hasta">Hasta</label>
            <input
                type="date"
                name="fecha_hasta"
                id="fecha_hasta"
                class="form-control"
                value="{{ old('fecha_hasta') ?? ($cupon ? $cupon->fecha_hasta->format('Y-m-d') : date('Y-m-d', strtotime('+1 day'))) }}">
        </div>
        <div class="form-group col-md-3">
            <label for="porcentaje">Valor (%)</label>
            <input
                type="number"
                step="0.01"
                name="porcentaje"
                id="porcentaje"
                class="form-control"
                value="{{ old('porcentaje') ?? ($cupon ? $cupon->porcentaje : '10') }}">
        </div>
        <div class="form-group col-md-3">
            <label for="duracion_relativa">Duracion relativa</label>
            <input 
                type="number"
                name="duracion_relativa"
                class="form-control"
                min="0"
                required
                value="{{ old('duracion_relative') ?? ($cupon ? $cupon->duracion_relativa : '0') }}">
        </div>
       <div class="form-group col-md-8">
            <label for="gruop_por">Aplicar descuento para</label><br>
            <div class="form-check form-check-inline">
                <input class="form-check-input"
                    onchange="aplicarDescuento(this)"
                    type="radio"
                    name="group_discount"
                    id="radio-gral" value="gral"
                    {{ old('group_discount') ? (old('group_discout') == 'gral' ? 'checked' : '') : ($cupon ? ($cupon->valido == 'gral' ? 'checked' : '') : '') }}>
                <label class="form-check-label" for="radio-gral">Compra en Gral</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input"
                    onchange="aplicarDescuento(this)"
                    type="radio"
                    name="group_discount"
                    id="radio-cliente" value="cliente"
                    {{ old('group_discount') ? (old('group_discout') == 'cliente' ? 'checked' : '') : ($cupon ? ($cupon->valido == 'cliente' ? 'checked' : '') : '') }}>
                <label class="form-check-label" for="radio-cliente">Para un cliente</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input"
                    onchange="aplicarDescuento(this)"
                    type="radio"
                    name="group_discount"
                    id="radio-producto" value="producto"
                    {{ old('group_discount') ? (old('group_discout') == 'producto' ? 'checked' : '') : ($cupon ? ($cupon->valido == 'producto' ? 'checked' : '') : '') }}>
                <label class="form-check-label" for="radio-producto">Para un producto</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input"
                    onchange="aplicarDescuento(this)"
                    type="radio"
                    name="group_discount"
                    id="radio-categoria" value="categoria"
                    {{ old('group_discount') ? (old('group_discout') == 'categoria' ? 'checked' : '') : ($cupon ? ($cupon->valido == 'categoria' ? 'checked' : '') : '') }}>
                <label class="form-check-label" for="radio-categoria">Para una categoria</label>
            </div>
       </div>
        <div class="form-group col-md-4 group" id='group-cliente' {{ $cupon ? ($cupon->valido == 'cliente' ? '' : 'hidden') : 'hidden' }}>
            <label for="usuario_id">Cliente</label>
            <select name="usuario_id" id="usuario_id" class="select2 form-control" style="height: 100%; width:100%;">
                <option value="" selected>Para todos</option>
                @foreach ($clientes as $cliente)
                    <option value="{{ $cliente->id }}"
                        {{ old('usuario_id') ?
                        (old('usuario_id') == $cliente->id ? 'selected' : '') :
                        ($cupon ? ($cupon->usuario?->getKey() == $cliente->id ? 'selected' : '') : '') }}
                    >{{ $cliente->nombre }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4 group" id='group-producto' {{ $cupon ? ($cupon->valido == 'producto' ? '' : 'hidden') : 'hidden' }}>
            <label for="producto_id">Productos</label>
            <select name="producto_id" id="producto_id" class="select2 form-control" style="height: 100%; width:100%;">
                <option value="" selected>Para todos</option>
                @foreach ($productos as $key => $value)
                    <option value="{{ $key }}"
                    {{ old('producto_id') ?
                    (old('producto_id') == $key ? 'selected' : '') :
                    ($cupon ? ($cupon->producto?->getKey() == $key ? 'selected' : '') : '' ) }}
                    >{{ $value }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4 group" id='group-categoria' {{ $cupon ? ($cupon->valido == 'categoria' ? '' : 'hidden') : 'hidden' }}>
            <label for="categoria_id">Categoría</label>
            <select name="categoria_id" id="categoria_id" class="form-control">
                <option value="" selected>Para todas</option>
                @foreach ($categorias as $key => $value)
                    <option value="{{ $key }}"
                    {{ old('categoria_id') ?
                    (old('categoria_id') == $key ? 'selected' : '') :
                    ($cupon ? ($cupon->categoria?->getKey() == $key ? 'selected' : '') : '') }}
                    >{{ $value }}</option>
                @endforeach
            </select>
        </div>
        {{-- Productos --}}
        <div class="form-group col-md-12">
            <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 del cupó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 $value => $key)
                                        <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>
        <input type="hidden" name="productos">
		<input type="hidden" name="cantidades">
		<input type="hidden" name="cantidades_revendedores">
    </div>
	<div class="form-group">
        <button type="submit" id="btnForm" onclick="enviarForm(event);" class="btn btn-success mb-1">Guardar</button>
        <a href="{{ route('cupon.index') }}" class="btn btn-secondary">Volver</a>
    </div>

    <script>
        $('.select2').select2();

        @if ($cupon)
            const selectName = '{{$cupon->valido}}';
            const selectValue = {{$cupon->usuario_id ?? $cupon->categoria_id ?? $cupon->producto_id ?? 0}};
        @else
            const selectName = null;
        @endif
        const genUuid = () => {
            let dt = new Date().getTime();
            let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                let r = (dt + Math.random()*16)%16 | 0;
                dt = Math.floor(dt/16);
                return (c=='x' ? r :(r&0x3|0x8)).toString(16);
            });

            document.querySelector("input[name='codigo']").value = uuid
        }

        const aplicarDescuento = (el) => {
            document.querySelectorAll(".group").forEach(el => {
                el.setAttribute('hidden', true);
                el.children[1].value = '';
            })
            if (el.value != 'gral') {
                let div = document.querySelector(`#group-${el.value}`)
                div.removeAttribute('hidden');
                if (selectName) {
                    if (selectName == el.value) {
                        div.children[1].value=selectValue
                    }
                }
            }
        }

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