@extends('layouts.index')
@section('contenido')
<style>
    #tablaJS_wrapper{
        width: 100%;
    }
</style>
<div class="content">
	<div class="card">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">NUEVA PARRILLA</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_parrilla') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input id="contador" type="hidden" class="form-control" name="contador" value="1">
                <fieldset>
                    <div class="form-group">
                        <label>Seleccione línea</label>
                        <select class="form-control" name="id_linea">
                            @foreach ($lineas as $linea)
                                <option value="{{$linea['id']}}">{{$linea['descripcion_linea']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Seleccione especialidad</label>
                        <select class="form-control" name="id_especialidad">
                            @foreach ($especialidades as $especialidad)
                                <option value="{{$especialidad['id']}}">{{$especialidad['descripcion_especialidad']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Fecha inicio:</label>
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar22"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" name="fecha_inicio" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Fecha final:</label>
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar22"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" name="fecha_final" value="">
                        </div>
                    </div>
                    <div id="presentacionesContenedor">
                        <div id="presentacion1" class="form-group itemsParrilla visible" data-contador="1">
                            <h5>ESPACIO PROMOCIONAL</h5>
                            <div class="collapse show">
                                <div class="form-group">
                                    <label>Producto a presentar</label>
                                    <select class="form-control" name="id_producto[]">
                                        @foreach ($ventas as $venta)
                                            <option value="{{$venta['id']}}">{{$venta['nombre']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="collapse show">
                                <div class="form-group">
                                    <label>Descripcion</label>
                                    <textarea id="w3review" class="form-control" maxlength="255" name="descripcion[]" rows="4" cols="50"></textarea>
                                </div>
                            </div>
                            <div class="collapse show">
                                <div class="form-group">
                                    <label>Documento Promocional</label>
                                    <input type="file" name="documento" class="form-control" accept="application/pdf,image/*,.xls,.xlsx,.doc, .docx,.ppt, .pptx" >
                                </div>
                            </div>
                            <br>
                            <h5>Entrega de recursos</h5>
                            <div class="row">

                                <table id="tablaJS" class="table datatable-basic">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Recurso</th>
                                            <th>Producto a presentar</th>
                                            <th>Cantidad</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tabla1">

                                        <tr class="iniciar1">
                                            <td><a class='eliminarFila' onclick="eliminarFila(this)"><i class="icon-trash"></i></a></td>
                                            <td>
                                                <select class="form-control recurso" onchange="getRecurso(this)" name="id_tipo_recurso1[]">
                                                    <option value="1">MUESTRA MÉDICA</option>
                                                    <option value="2">PROMOCIONAL</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control producto" name="id_producto1[]">
                                                    @foreach ($muestrasMedicas as $muestraMedica)
                                                        <option value="{{$muestraMedica['id']}}">{{$muestraMedica['nombre']}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="number" class="form-control cantidad" oninput="validity.valid||(value='');" min="0" name="cantidad_producto1[]" placeholder="Cantidad" required></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button id="" onclick="insertarCampo(this)" type="button" class="btn btn-success nuevoProducto">Nuevo recurso</button>

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


                </fieldset>

				<div class="text-right">
                    <button id="nuevaPresentacion" type="button" class="btn btn-success">Agregar Presentación</button>
					<button type="submit" class="btn btn-primary">Guardar Parrilla<i class="icon-floppy-disk ml-2"></i></button>
				</div>
            </form>

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

@endsection

@section('javascript')
<script>
    var productosPromocionales={!! $productosPromocionalesJson !!};
   var muestrasMedicasJson={!! $muestrasMedicasJson !!};
   function insertarCampo(el) {
       var targetTable=$(el).parent().find('table').find('tbody');
       let  $inputIniciales=$( targetTable ).find('tr').first().clone();
       $($inputIniciales).appendTo(targetTable).find('input').val('');
       
       $($inputIniciales).find('.producto').empty();
       var opcionesR="";
       $.each( muestrasMedicasJson, function( key, value ) {
           opcionesR+='<option value="'+value.id+'">'+value.nombre+'</option>';
       });
       $($inputIniciales).find('.producto').append(opcionesR);
   }
   function eliminarFila(elemento){
       var parentElem = elemento.parentElement;
       var eliminarElemento=parentElem.parentElement;
       eliminarElemento.parentNode.removeChild(eliminarElemento);
   }
   function getRecurso(elemento){
       var buscarPadre = elemento.parentElement.parentElement;
       var recursoSeleccionado = elemento.value;
       var recursoCon=muestrasMedicasJson;
       if(recursoSeleccionado==2){
           var recursoCon=productosPromocionales;
       }
       $(buscarPadre).find('.producto').empty();
       var opcionesR="";
       $.each( recursoCon, function( key, value ) {
           opcionesR+='<option value="'+value.id+'">'+value.nombre+'</option>';
       });

       $(buscarPadre).find('.producto').append(opcionesR);
   }
   jQuery( document ).ready(function() {
       $('#nuevaPresentacion').on('click',function(){
           var contador=parseInt($('#contador').val())+1;
           $('#contador').val(contador)
           var selectorAgregar='#presentacion'+contador;
           $(selectorAgregar).addClass('visible');
           //Clonar presentacion
           var targetTD='presentacion'+contador;
           let  $inputIniciales=$( "#presentacion1" ).clone().attr('id',targetTD);
           $($inputIniciales).appendTo("#presentacionesContenedor").find('input').val('');
           $($inputIniciales).appendTo("#presentacionesContenedor").find('textarea').val('');
           //Cambiar name
           $('#'+targetTD).find('.recurso').attr('name','id_tipo_recurso'+contador+'[]');
           $('#'+targetTD).find('.producto').attr('name','id_producto'+contador+'[]');
           $('#'+targetTD).find('.cantidad').attr('name','cantidad_producto'+contador+'[]');
           //Eliminar los recursos
           $.each($('#'+targetTD).find('.recurso').parent().parent(), function( key, value ) {
               if(key>0){
                   $(this).remove();

               }
           });
           $('#'+targetTD).find('.producto').empty();
           var opcionesR="";
           $.each( muestrasMedicasJson, function( key, value ) {
               opcionesR+='<option value="'+value.id+'">'+value.nombre+'</option>';
           });
           $('#'+targetTD).find('.producto').append(opcionesR);
       })
      
   });
</script>
@endsection