@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">PARRILLA {{$parrilla->nombre}}</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">
                @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 {{ $parrilla->id_linea == $linea['id'] ? "selected" : "" }} 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 {{$parrilla->id_especialidad == $especialidad['id'] ? "selected" : ""}} 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" value="{{date_format(date_create($parrilla->fecha_inicio), 'm-d-Y')}}" class="form-control daterange-single" name="fecha_inicio" >
                        </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="{{date_format(date_create($parrilla->fecha_final), 'm-d-Y')}}">
                        </div>
                    </div>
                    <div id="presentacionesContenedor">
                        <div id="presentacion1" class="form-group itemsParrilla visible" data-contador="1">
                            <h5>ESPACIO PROMOCIONAL</h5>
                            @foreach ($parrillaPresentacion as $presentar)
                                <div class="collapse show">
                                    <div class="form-group">
                                        <label>Orden</label>
                                        <input type="number" class="form-control" value="{{$presentar->orden}}" name="orden[]" placeholder="" required>
                                    </div>
                                </div>
                                <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 {{$presentar->id_producto == $venta['id'] ? "selected" : ""}} 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">
                                            {{$presentar->descripcion}}
                                        </textarea>
                                    </div>
                                </div>
                                <br>
                                <h5>Entrega de recursos</h5>
                                <div class="row">
                                    <table id="tablaJS" style="width: 100%;" class="table datatable-basic">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Recurso</th>
                                                <th>Producto a presentar</th>
                                                <th>Cantidad</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabla1">
                                            @foreach ($parrillaPresentacionProducto as $productos)
                                                @if ($productos->id_parrilla_presentacion==$presentar->id)
                                                <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 {{$productos->tipo_recurso == 1 ? "selected" : ""}} value="1">MUESTRA MÉDICA</option>
                                                            <option {{$productos->tipo_recurso == 2 ? "selected" : ""}} value="2">PROMOCIONAL</option>
                                                        </select>
                                                    </td>
                                                    @if ($productos->tipo_recurso == 1)
                                                        <td>
                                                            <select class="form-control producto" name="id_producto1[]">
                                                                @foreach ($muestrasMedicas as $muestraMedica)
                                                                    <option {{$productos->id_producto == $muestraMedica['id'] ? "selected" : ""}} value="{{$muestraMedica['id']}}">{{$muestraMedica['nombre']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    @else
                                                        <td>
                                                            <select class="form-control producto" name="id_producto1[]">
                                                                @foreach ($productoPromocional as $promocion)
                                                                    <option {{$productos->id_producto == $promocion['id'] ? "selected" : ""}} value="{{$promocion['id']}}">{{$promocion['nombre']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    @endif
                                                    
                                                    <td><input type="number" class="form-control cantidad"  name="cantidad_producto1[]" value="{{$productos->cantidad}}" placeholder="Cantidad" required></td>
                                                </tr>
                                                @endif
                                            @endforeach
   
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach
                        </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">Duplicar 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