@extends('layout.ejecutivo')
    @section('content')
@if (session('statusA'))
    <div class="alert alert-success">
        {{ session('statusA') }}
    </div>

    <div class="alert alert-primary">
        El historial de reportes se ha actualizado.
    </div>
   @elseif(session('statusB'))
   
    <div class="alert alert-danger">
        {{ session('statusB') }}
    </div>
@endif

<link href="../../css/jquery.multiselect.css" rel="stylesheet" />
<script src="../../js/jquery.multiselect.js"></script>

<p></p>

 <div class="card "   >

            <div class="card-header" style="background-color:#097AC8  ;color:white">
              <i class="fa fa-edit" style="font-size:36px;color:white"></i> Reporte de Actividades
            </div>
                <div class="col-sm-12" style="background-color:lavender;" name="container" id="main"> 

              {!!Form::open(['route'=>'reporte_usuario.index','method'=>'POST', 'id'=> 'first'])!!}

             <div class="row">  
                 <div class="col-sm-6" style="background-color:white;">  
                    <div class="card-body">  
                      <div class="col-sm-12" style="background-color:white;">

  

                         <div class="form-group">
                            @foreach($EmpleadoInfo as $EmpleadoI)
                              <h6>{!!Form::label('Nombre del Ejecutivo : ')!!}</h6>
                              {!!Form::text('nombre_empleado',$EmpleadoI->empleado,['class' =>'form-control input-sm','readonly'=>'readonly','style'=>'background-color:#0000;', 'id' => $EmpleadoI->NoEmpleado])!!}
                          </div>    

                            {!!Form::text('nombre_empleado',$EmpleadoI->NoEmpleado,['hidden'=> 'TRUE', 'id' =>'identificador'])!!}
                            @endforeach

                          <div class="form-group">
                               <h6>{!!Form::label('Cuenta : ')!!} </h6>
                                  <div class="form-group">
                                      <select name="proyecto_op" id="proyecto_lista" class="form-control input-sm"  title=" Seleccione un proyecto" required>
                                           <option value="" selected disabled>Seleccione proyecto</option>
                                      @foreach($ProyectosDeEmpelado as $ProyectosDeE)
                                       <option value="{{$ProyectosDeE->NoProyecto}}"> {{ $ProyectosDeE->ProyectoExterno}} </option>
                                      @endforeach
                                      </select>
                                  </div>
                              </div>  

                        <div class="form-group">
                                 <h6>{!!Form::label('Proyecto : ')!!} </h6>
                                {!!Form::text('cuenta_asignada','Sin cuenta seleccionada',['class' =>'form-control input-sm','readonly'=>'readonly','style'=>'background-color:#0000;', 'id'=>'cuenta_seleccionada'])!!}
                                {!!Form::text('cuenta_asignada2','Sin cuenta seleccionada',['class' =>'form-control input-sm','readonly'=>'readonly','style'=>'background-color:#0000;', 'id'=>'cuenta_seleccionada2', 'hidden'])!!}
                        </div>    
                      </div>  

              <div class="col-sm-12" style="background-color:white;">
                    <div class="form-group">
                         <h6>{!!Form::label('Actividades Comunicación externa: ')!!} </h6>
                        <select name="actividad[]" multiple="multi" class="form-control input-sm" id="lista_actA" >
                       @foreach($ActividadesExternas as $ActividadesE) 
                        <option value="{{$ActividadesE->NoActividad}} " id="{{$ActividadesE->NoActividad}}">
                     {!!Form::label($ActividadesE->actividad)!!}
                       </option>
                      @endforeach
                    </select>
                  </div>  
             </div> 


             <div class="col-sm-12" style="background-color:white;">
                    <div class="form-group">
                         <h6>{!!Form::label('Actividades Comunicación interna: ')!!} </h6>
                        <select name="actividad[]" multiple="multiple" class="form-control input-sm" id="lista_actB">
                       @foreach($ActividadesInternas as $ActividadesI) 
                        <option value="{{$ActividadesI->NoActividad}}">
                     {!!Form::label($ActividadesI->actividad)!!}
                       </option>
                      @endforeach
                    </select>
                  </div>  
             </div> 
                    

                    <div class="col-sm-12" style="background-color:white;">
                    <div class="form-group">
                         <h6>{!!Form::label('Actividades Comunicación Digital: ')!!} </h6>
                        <select name="actividad[]" multiple="multiple" class="form-control input-sm" id="lista_actC">
                       @foreach($ActividadesDigitales as $ActividadesD) 
                        <option value="{{$ActividadesD->NoActividad}}">
                     {!!Form::label($ActividadesD->actividad)!!}
                       </option>
                      @endforeach
                    </select>
                  </div>  
             </div>     
          
                  <div class="col-sm-12" align="center">
                      <div class="form-group" align="center" >

                          {!!Form::submit('Enviar reporte',['class'=>'btn btn-success'])!!}  
                          
                      </div>
                  </div> 
            </div> 
         </div> 


                  <div class="col-sm-6" style="background-color:white;" >          
                     <div class="row" >

                        <div class="col-sm-12" align="center">

                          <br><h6>{!!Form::label('Actividades Seleccionadas: ')!!}</h6></br>
                            <div class="horas" id="horas"></div>
                        </div> 
                      </div>
                  </div>

              </div>  

      {!!Form::close()!!} 
      </div>
          <div class="card-footer"  style="background-color:#097AC8  ;color:white">
            </div>
</div>




{!! Form::open(['route' => ['reporte_usuario.show', 'proyecto_sel'], 'method' => 'PUT', 'id' => 'proyecto_cambio']) !!}
{!! Form::close() !!}


          <script type="text/javascript">
$('select[multiple]').multiselect({

  columns: 1, search: true,
            searchOptions: {
                'default': 'Buscar actividad'
            },
            

    placeholder: 'Seleccione actividad',
    onOptionClick: function( element, option ){
        var thisOpt = $(option);

        //alert(
          // 'The Option "'+ thisOpt.val() +'" was '
         //+ (thisOpt.prop('checked') ? '' : 'de') +'selected'
        //-);


        //alert(element.id);
  if(thisOpt.prop('checked')===true)
 { 
         var nombre_agregado=(option.title);
         var id_agregado= thisOpt.val();
         var lista_1="lista_actA";
         var lista_2="lista_actB";
         var lista_3="lista_actC";
         
      if( element.id==lista_1)
      {

              $("<div class='form-group' id='"+nombre_agregado+"' ><div><label>  "+nombre_agregado+"<br> Tiempo: </label></div><input name='tiempos[]' id='"+id_agregado+"' type='number' step='.50' min='.50' required/></div>").appendTo("#horas");
              //alert( nombre_agregado );
            }
            else if(element.id==lista_2)
            {
             $("<div class='form-group' id='"+nombre_agregado+"' ><div><label>"+nombre_agregado+"<br> Tiempo:</label></div><input name='tiempos[]' id='"+id_agregado+"' type='number' step='.50' min='.50' required/></div>").appendTo("#horas");
              //alert( nombre_agregado );
            }
            else if(element.id==lista_3)
            {
             $("<div class='form-group' id='"+nombre_agregado+"' ><div><label>"+nombre_agregado+"<br> Tiempo:</label></div><input name='tiempos[]' id='"+id_agregado+"' type='number' step='.50' min='.50' required/></div>").appendTo("#horas");
              //alert( nombre_agregado );
              }
  }

  if(thisOpt.prop('checked')===false)
  {
   
        var id_caja= thisOpt.val();
        var id_titulo=(option.title);
        var eliminado_caja= document.getElementById(id_caja);
        var eliminado_titulo= document.getElementById(id_titulo);
        //alert(eliminado);
        //alert(eliminado_titulo);
        $(eliminado_caja).remove();
        $(eliminado_titulo).remove();
  }   
 } 
});
</script>



  <script >
$(document).ready(function (){
 $("#proyecto_lista").change(function (e) {
  e.preventDefault();
       
  var NoProyecto = parseInt(document.getElementById('proyecto_lista').value);

  var form = $('#proyecto_cambio');
  //method= form.attr("method");
  var url = form.attr('action').replace('proyecto_sel',NoProyecto);
  var data = form.serialize();

   $.post(url,data, function (result){


  var CuentaExterno=result[0];
  var NoCuenta=result[1];
  $("#cuenta_seleccionada").attr("value",CuentaExterno);
  $("#cuenta_seleccionada2").attr("value",NoCuenta);



}).fail(function () {

            alert('Ha habido un error al cargar la cuenta asociada, recargue la página y vuelva a intentarlo');
           
        });

      });
  });
</script> 
@endsection