@extends('layouts.index')
@section('contenido')
<div class="content">
	<div class="card">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">NUEVA LISTA DE PRECIOS</h5>
			<div class="header-elements">
				<div class="list-icons">
				    <a class="list-icons-item" data-action="collapse"></a>
				</div>
			</div>
		</div>

		<div class="card-body">
			<form action="{{ route('marketing.guardar_lista') }}" method="POST">
                @csrf
                <input id="contador" type="hidden" name="contador" value="1">
                <fieldset>
                    <div class="collapse show">
                        <div class="form-group">
                            <label>Nombre de la lista*</label>
                            <input type="text" class="form-control" name="nombre_lista" value="{{ old('nombre_lista') }}" placeholder="" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>¿Seleccione a que tipo de socio aplica esta lista?</label>
                        <select class="form-control" name="id_tipo_socio">
                            @foreach ($tiposSocios as $socio)
                                <option {{ old('id_tipo_socio') == $socio['id'] ? "selected" : "" }} value="{{$socio['id']}}">{{$socio['descripcion_tipo_socio']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <h5>LISTADA DE PRECIOS</h5>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <table id="tablaJS" class="table">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Precio base</th>
                                        <th>Precio piso</th>
                                        <th>Bonificación</th>
                                        <th>Bonificación EVA</th>
                                        <th>% EVA</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="iniciar">
                                        <td>
                                            <select class="form-control" name="id_producto[]">
                                                @foreach ($productos as $producto)
                                                    <option value="{{$producto['id']}}">{{$producto['nombre']}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input  type="text" class="form-control" name="precioBase[]" placeholder="Precio base"></td>
                                        <td><input  type="text" class="form-control" name="precioPiso[]" placeholder="Precio piso"></td>
                                        <td class="text-center">
                                            <select multiple="multiple" class="form-control select" name="id_bonificacion1[]">
                                                @foreach ($bonificaciones as $bonificacion)
                                                    <option value="{{$bonificacion['id']}}">{{$bonificacion['nombre']}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="text-center">
                                            <select multiple="multiple" class="form-control select" name="id_bonificacion_eva1[]">
                                                @foreach ($bonificaciones as $bonificacion)
                                                    <option value="{{$bonificacion['id']}}">{{$bonificacion['nombre']}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input type="number" class="form-control" name="porcentaje_eva[]" placeholder="Porcentaje EVA"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <button id="nuevoProducto" type="button" class="btn btn-success">Nuevo producto</button>

                        </div>
                    </div>
                </fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">Guardar Lista de producto<i class="icon-floppy-disk ml-2"></i></button>
				</div>
            </form>

		</div>
	</div>
</div>

@endsection

@section('javascript')
<script>
    jQuery( document ).ready(function() {
        $('#nuevoProducto').on('click',function(){
            var contador=parseInt($('#contador').val())+1;
            var targetTable=$(this).parent().find('table').find('tbody');
            let  $inputIniciales=$( targetTable ).find('tr').first().clone();
            $($inputIniciales).appendTo(targetTable).find('input').val('');
            $($inputIniciales).find('.text-center').find('.select2-container').remove();
            var padre1=$($inputIniciales).find('.text-center').eq(0);
            var padre2=$($inputIniciales).find('.text-center').eq(1);
            $(padre1).find('.select2-hidden-accessible').attr('name','id_bonificacion'+contador+'[]');
            $(padre2).find('.select2-hidden-accessible').attr('name','id_bonificacion_eva'+contador+'[]');
            $('.select').select2();
            $('#contador').val(contador);
        })
        $('.select').select2();
    });
</script>
@endsection