@extends('layouts.client')


<style>
    /*.taskdata {*/
        /*margin-top: 5%;*/
        /*width: 90%;*/
        /*height: 7%;*/

    /*}*/
    .containerFr {

        width: 80%;
        height: auto;
        float: left;
        padding: 3%;
    }


    .taskdata {
        margin-top: 5%;
        margin-left: 3%;

    }
    .panel-heading{
      /*  margin-bottom: 2%;  */
    }

    .fecha_cre{
        margin-left:8px !important;
        width:130px;
        padding-left: 4px;
    }

    .fecha_end{
        margin-left:8px !important;
        width:130px;
        padding-left: 4px;
    }



    .selecttaskdata{
        margin-left: 2%;
    }
    .contenedor-BA{
        padding: 1%;
        margin-top: 2%;

    }

    .BA-form {

        height: auto;

    }
    .form-groupBA{
        width: 80%;
        float: left;
        margin: 1%;
    }
    #bt-selectTaskdata{
        /*float: right;*/
    }
</style>

@section('content')

    <div class="panel panel-default " style="width: 76%;padding: 1%;margin-left: 12%;">
        <div >
            <div >
                <!--?= $page ?-->
                @if(session()->has('message'))
                    <div class="alert alert-success alert-dismissable">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

                        {{ session()->get('message') }}
                    </div>
                @endif
                @if(session()->has('error'))
                    <div class="alert alert-danger alert-dismissable">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

                        {{ session()->get('error') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif




                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Filtro de tareas - {{ $user->name }} {{ $user->surname }}
                            @if($user->hasRole('teamleader') || $user->hasRole('administrator'))
                                &nbsp;&nbsp;&nbsp;<a class="btn btn-default" href="{{ URL::to('/') }}/task/create-selector">Crear tarea</a>
                            @elseif($user->hasRole('supervisor') )
                                &nbsp;&nbsp;&nbsp;<a class="btn btn-default" href="{{ URL::to('/') }}/tasks/teamLeader">Crear tarea</a>
                            @endif
                        </div>

                        <div class="panel-body">

            <form class="form-inline taskdata-form" action="{{URL::to('/') }}/filterTask" name="form_filter" method="post">
              
               {!! Form::token() !!}        
       

            <div class="row"  style="margin-bottom: 32px;">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Buscar por titulo:</label>
                         <input type="text" name="name_title" autocomplete="off" placeholder="Ingrese una busqueda" id="name_title" style="width: 300px;margin-left: 12px;padding-left: 4px" class="name_title" class="form-control"  value="">
                    </div>
                </div>

            </div>



                <div class="form-group mx-sm-3 mb-2" style="clear:both">
                    <label >Linea de Produccion:</label>
                        &nbsp;&nbsp;<select class="js-example-placeholder-single line_prod" id="line_prod" name="line_prod" style="width:250px !important;border-color: #dbd9d9;">
                        <option  value=""></option>
                        @foreach ($pipelines as $td)
                            <option  value="{{$td->id}}">{{ $td->name }}</option>
                        @endforeach
                      
                    </select>
                </div>


                <div class="form-group mx-sm-3 mb-2" style="margin-left: 34px !important;">
                    <label >Estado:</label>
                        &nbsp;&nbsp;<select class="js-example-placeholder-single select_status" readonly id="select_status" name="select_status[]" style="width:250px !important;border-color: #dbd9d9;" multiple="multiple">

                       
                        @foreach ($status as $st)
                            <option @if (isset($currentStatus) && $currentStatus == $st->id) selected @endif   value="{{$st->id}}">{{ $st->name }}</option>
                        @endforeach
                      
                    </select>
                </div>


                <div class="form-group mx-sm-3 mb-2" style="margin-left: 34px !important;">
                    <label >Unidad:</label>
                        &nbsp;&nbsp;<select class="js-example-placeholder-single select_unit" id="select_unit" name="select_unit[]" style="width:250px !important;border-color: #dbd9d9;" multiple="multiple">

                        @foreach ($units as $uni)
                            <option @if (isset($currentUnit) && $currentUnit == $uni->id) selected @endif  value="{{$uni->id}}">{{ $uni->name }}</option>
                        @endforeach
                      
                    </select>
                </div>




            <div class="row" id="formDate" style="display:block;margin-top: 34px;">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Fecha Creacion:</label>
                        <input type="text" name="fecha_cre" id="fecha_cre" readonly class="fecha_cre" class="form-control" placeholder="AAAA/MM/DD" value="">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Fecha Hasta:</label>
                        <input type="text" name="fecha_end" id="fecha_end" readonly class="fecha_end" class="form-control" placeholder="AAAA/MM/DD" value="">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label>Ocultar Subtareas:</label>
                      <input type="checkbox" id="not_subtask" class="not_subtask" value=""> 

                    </div>
                </div>




            </div>
            <div style="margin-top: 45px !important">
            <button type="button" style="margin-top: 20px !important;width:90px !important" class="btn btn-secundary mb-2 sender_submit" >Enviar</button>  

            <button type="button" style="margin-top: 20px !important;margin-left: 9px;width:90px !important" class="btn btn-secundary mb-2 reset_submit" >Reset</button>  
        </div>

            </form>

                <br>
                <br>
      
            {{--No has creado ninguna tarea por el momento. <br> <br>--}}
                        </div>
                    </div>
                    {{--panel --}}
                    {{--old guide--}}
                    <a style="display:none" href="{{URL::to('/')}}/instructive" style="color:#000;">Guía de Uso GUNTREF</a>

        </div>
    </div>


    </div>


    <div class="panel panel-default panel_ajax" style="width: 76%;padding: 1%;margin-left: 12%;display:none">

    <div class="panel-heading">  Resultados de busqueda - Admin Guntref</div>

        <div class="panel-body results_ajax" style="margin-top: 0px !important">


             </div>

        </div>

     

        @endsection


         @section('scripts')


        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script>





            var disableddates = ["12-25-2018","1-1-2019","5-1-2018","5-25-2018","7-9-2018"];//mes,dia,año ,acà se agrega días feriados inamovibles


            $.datepicker.regional['es'] = {
                closeText: 'Cerrar',
                prevText: '<Ant',
                nextText: 'Sig>',
                currentText: 'Hoy',
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                weekHeader: 'Sm',
                dateFormat: 'yy-mm-dd',
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);




  


        </script>

        <script type="text/javascript">

            $(document).ready(function() {

/*

            $(".select_status").on("click",function(){

                console.log("dasdasdad");

            var esc = $.Event("keydown", { keyCode: 27 });
            $("body").trigger(esc);

            });

*/

            $(".select2-search__field").attr("autocomplete","off");


            $(".sender_submit").on("click",function(){


                called(1);


            });


            $(".reset_submit").on("click",function(){

                
                $(".line_prod").val('').trigger('change');

                $(".select_status").val('').trigger('change');

                $(".select_unit").val('').trigger('change');

                $(".name_title").val('');

                $('#fecha_cre').val("");
                $('#fecha_end').val("");


            });


            
                $('#fecha_cre').datepicker();
                $('#fecha_end').datepicker();



                $('.panel-body').find('.accordion-toggle').click(function(){
                    $(this).next().slideToggle('fast');
                    $(".accordion-content").not($(this).next()).slideUp('fast');
                    $(".accordion-toggle").css('background','#d5d1d0');
                    $(this).css('background','#ffffff');

                });
            });



            //no toma el datatable
            notdatatable = true;

            $(document).ready(function() {


                $('.js-example-placeholder-single').select2({
                    placeholder: 'Seleccione un pipeline'
                });

                 $('#select_unit').select2({
                    placeholder: 'Seleccione una unidad'
                });




                $('#select_status').select2({
                    placeholder: 'Seleccione un estado'
                });


                $('#selectprofile').select2({
                    placeholder: 'Seleccione un perfil'
                });
                $('#selectstatu').select2({
                    placeholder: 'Seleccione un estado'
                });

                $('.busquedaAvanzada').click(function (e) {

                    if($("#collapseExampleBA").is(":visible"))
                    {
                        $('.taskdata').show();
                    }
                    else
                    {
                        $('.taskdata').hide();
                    }

                })


            });



        function called(page){


               $_token = $('meta[name=csrf-token]').attr('content') ;
                  
                //  var userid = userid;
                  
                    $.ajax({

                        headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') },
                        url:"{{ URL::to('/') }}/filterTask_data",
                        type: 'GET',
                        cache: false,
                        data: { 'limit_page':$(".limit_page").val(),'name_title':$(".name_title").val(),'select_unit':$(".select_unit").val(),'select_status':$(".select_status").val(),'page':page,'line_prod': $(".line_prod").val(),'fecha_cre': $(".fecha_cre").val(),'fecha_end': $(".fecha_end").val(), '_token': $_token }, 
                        datatype: 'html',
                        beforeSend: function() {
                            //something before send
                        },
                        success: function(data) {
                            console.log('success');
                            console.log(data);
                            //success
                            //var data = $.parseJSON(data);
                            if(data.success == true) {
                           
                              //user_jobs div defined on page
                              $('.results_ajax').html(data.html);

                              $(".panel_ajax").show();

                               

                                    $(".results_table").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 700);


                              

                            $.each($(".pagination").children(),function(r,t){


                                    if($(this).children().attr("href")){

                                    // console.log($(this).children().attr("href"));

                                    page= getAllUrlParams($(this).children().attr("href")).page; 

                                   //  $(this).children().attr("rel",page);

                                    $(this).children().attr("onclick","called("+page+")");

                                    $(this).children().attr("href","javascript:void(0)");

                                }


                            });
                            
                           
                            } else {
                              
                              // $('#user_jobs').html(data.html + '55');
                           
                            }
                        },
                        error: function(xhr,textStatus,thrownError) {
                            alert(xhr + "\n" + textStatus + "\n" + thrownError);
                        }
                    });


        }



        function getAllUrlParams(url) {

          // get query string from url (optional) or window
          var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

          // we'll store the parameters here
          var obj = {};

          if (queryString) {

            queryString = queryString.split('#')[0];
            var arr = queryString.split('&');

            for (var i = 0; i < arr.length; i++) {

              var a = arr[i].split('=');

              var paramName = a[0];
              var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

              paramName = paramName.toLowerCase();
              if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

              if (paramName.match(/\[(\d+)?\]$/)) {

                var key = paramName.replace(/\[(\d+)?\]/, '');
                if (!obj[key]) obj[key] = [];


                if (paramName.match(/\[\d+\]$/)) {

                  var index = /\[(\d+)\]/.exec(paramName)[1];
                  obj[key][index] = paramValue;
                } else {

                  obj[key].push(paramValue);
                }
              } else {
  
                if (!obj[paramName]) {
        
                  obj[paramName] = paramValue;
                } else if (obj[paramName] && typeof obj[paramName] === 'string'){
          
                  obj[paramName] = [obj[paramName]];
                  obj[paramName].push(paramValue);
                } else {
       
                  obj[paramName].push(paramValue);
                }
              }
            }
          }

          return obj;
        }

        $('#print').click(function () {
            var divToPrint = document.getElementById('areaToPrint');
            newWin = window.open("");
            newWin.document.write(divToPrint.outerHTML);
            newWin.print();
            //newWin.close();
        })


        </script>


    @endsection

        <style>


        @media(min-width:992px){
      
            .col-md-3{
                width: 21% !important;
            }

        }


        .select2-selection__choice{

            height: 25px;
            line-height: 24px;
            position:relative;
            top:-2px;

        }



            .accordion-toggle {cursor: pointer; background: #d5d1d0; }
            .accordion-content {display: none;}

        td{
                height: 40px;
        }

        .pagination{margin-top: 40px !important;}

        </style>