{{--
Ender Bastidas
10/05/2018

Modificado por Yoniquer Chacon
01-08-2018
Modificado por Ivan Salazar
05-08-2018

--}}

@extends('layouts/master')
@section('header')

    {{--<link href="{!! asset('/css/jquery.dataTables.min.css')  !!}" rel="stylesheet">
    <link href="{!! asset('/css/dataTables.bootstrap.min.css')  !!}" rel="stylesheet">
    <link rel="stylesheet" href="{!! asset('css/jquery.tablesorter.pager.css') !!}" type="text/css">
    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>--}}
    @php

        $fecha = new DateTime();
        $fecha = $fecha->format('d-m-Y');

    @endphp
@endsection
@section('content')

    @include('Wscanguroazul.Recolecta.menurecolectas')

    @if(session('msj') && session('cod') == false)
        <div class="alert alert-danger col-sm-6 col-sm-push-1">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('msj') }}</strong>
        </div>
    @endif

    @if(session('msj') && session('cod') == true)
        <div class="alert alert-success col-sm-6 col-sm-push-1">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('msj') }}</strong>
        </div>
    @endif

<div class="col-md-9 admin-content" id="">
    <div class="row">
        <div class="col-sm-11">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-refresh"></i> Actualizar Datos:</h3>
                </div>
                <div class="panel-body">
                    <div class="container">
                        <div class="row">
                            <div class="card-body">

                                <form method="post" action="{{ route('listaRecolecta') }}"
                                      accept-charset="UTF-8" enctype="multipart/form-data" id="listaRecolecta">

                                    <div class="row">
                                        <div class="col-md-6 col-md-offset-3">
                                            <label for="codrecolecta" class="text-primary"><b>TIPO DE RECOLECTA:</b></label>
                                            <div style="margin-bottom: 15px" class='input-group col-xs-3 col-md-3 col-sm-3'>
                                            <span class="input-group-addon">
                                                <label>Eventual</label>
                                                    <input type="radio" name="rdbtiporec" value="1" checked="checked" id="recolectaEventual"  data-toggle="tooltip" data-placement="top" title='Por Eventuales'>
                                                </span>

                                                <span class="input-group-addon">
                                                <label>Fijas</label>
                                                    <input type="radio" name="rdbtiporec" id="recolectaFijas"   value="2"  data-toggle="tooltip" data-placement="top" title='Por Fijas'>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" id="fechas">
                                        <div class="col-md-3 col-md-offset-1 form-group" >
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon">
                                                    <input type="checkbox" id="checkfecha" name="checkfecha" value="1" data-toggle="tooltip" data-placement="top" title='Por Fecha'>
                                                </span>
                                                <input type='text' class="form-control desde1 desdeCalendar"
                                                       name="fechadesde" id="datetimepickerdesde"
                                                       value="{{$fecha}}"
                                                       placeholder="Ingrese Fecha Desde"
                                                       data-msg-required="Este campo es Requerido."
                                                       data-rule-required="true"
                                                />
                                                <span class="input-group-addon" >
                                                    <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha Desde'></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='hasta'>
                                                <input type='text' class="form-control hasta hastaCalendar"
                                                       name="fechahasta" id="datetimepickerhasta"
                                                       value="{{$fecha}}"
                                                       placeholder="Ingrese Fecha Hasta"

                                                       data-msg-required="Este campo es Requerido."
                                                       data-rule-required="true"
                                                />
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha Hasta'></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" id="clientFija" hidden>
                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon">
                                                    <input type="checkbox" id="checkClienteFijo" name="checkClienteFijo" value="5" data-toggle="tooltip" data-placement="top" title='Por cliente recolecta fija'>
                                                </span>
                                                <input type='number' class="form-control desde1 desdeCalendar" name="codclientefija"  id="codclientefija" placeholder="Codigo Cliente" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='nombreCliente'>
                                                <input type='text' class="form-control hasta hastaCalendar" name="nombreClientFijo" id="test" onclick="getClientes()" onkeyup="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()" placeholder="Nombre Cliente" data-placement="bottom" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" id="casillero" hidden>
                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <input type="checkbox"  id="checkCasillero" name="checkCasillero" value="6" data-toggle="tooltip" data-placement="top" title='Por Casillero'>
                                                </span>
                                                <input type="number" class="form-control nrotrans" name="Casillero" min="0" id="Casillero" placeholder="Ingrese Casillero">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="clienteCodigo">
                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <input type="checkbox"  id="checkCodCliente" name="checkCodCliente" value="2" data-toggle="tooltip" data-placement="top" title='Por Código Cliente'>
                                                </span>
                                                <input type="number" class="form-control nrotrans" name="codcliente" min="0" id="codcliente" placeholder="Ingrese C&oacute;digo Cliente">
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row" id="rangoRecolecta">
                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon">
                                                    <input type="checkbox" id="checkRecolecta" name="checkRecolecta" value="3" data-toggle="tooltip" data-placement="top" title='Por Recolecta Inicial y Final'>
                                                </span>
                                                <input type='number' class="form-control desde1 desdeCalendar" name="codrecolectaini"  placeholder="Recolecta Inicial" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='hasta'>
                                                <input type='number' class="form-control hasta hastaCalendar" name="codrecolectafin" placeholder="Recolecta Final" data-placement="bottom" />
                                            </div>
                                        </div>
                                        <br>

                                    </div>
                                    <div class="panel-body col-md-offset-6">
                                        <button class="btn btn-primary" type="submit"><span class=" glyphicon glyphicon-ok"></span> Aceptar</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="font-size:12px;">
                    <span class="glyphicon glyphicon-info-sign red"></span> <b>Nota:</b> Al posicionar el "mouse" sobre los iconos del formulario, podrá ver una breve descripci&oacute;n del campo
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@section('script')
    <script type="text/javascript">
        $('#myTabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
        $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
        $('#myTabs a:first').tab('show') // Select first tab
        $('#myTabs a:last').tab('show') // Select last tab
        $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
        $('#someTab').tab('show')
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            e.target // newly activated tab
            e.relatedTarget // previous active tab
        })

        // VALIDO LOS CAMPOS DEL FORMULARIO

        $('document').ready(function () {
            $("#crearRecolecta").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });

        $('document').ready(function () {
            $("#buscarRecolecta2").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });

        $(function () {
            $('#datetimepicker').datetimepicker({
                format: 'DD/MM/YYYY',
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
        var minDate = moment().subtract(15, 'days');
        var maxDate = moment().add(15,'days');
        $(function () {
            $('#datetimepickerdesde').datetimepicker({
                minDate: minDate,
                maxDate: maxDate,
                format: 'DD-MM-YYYY',
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
        $(function () {
            $('#datetimepickerhasta').datetimepicker({
                format: 'DD-MM-YYYY',
                minDate: minDate,
                maxDate: maxDate,
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
    </script>

    <script>
        $(document).ready(function()
        {
            var navItems = $('.admin-menu li > a');
            var navListItems = $('.admin-menu li');
            var allWells = $('.admin-content');
            var allWellsExceptFirst = $('.admin-content:not(:first)');

            allWellsExceptFirst.hide();
            navItems.click(function(e)
            {
                e.preventDefault();
                navListItems.removeClass('active');
                $(this).closest('li').addClass('active');

                allWells.hide();
                var target = $(this).attr('data-target-id');
                $('#' + target).show();
            });
        });
    </script>


    <script>
        $('#enviar').on('click', function() {
            var RegistroForm=$('#crearRecolecta').valid();
            //alert(RegistroForm);
            if(RegistroForm==true) {
                $('#procesando').modal('show');
                var elem = document.getElementById("progressBar");
                var width = 1;
                var id = setInterval(frame, 30);

                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("label").innerHTML = width * 1 + '%';
                    }
                }
            }
        });


        $(function(){
            $('#recolectaEventual').change(function(){
                if(!$(this).prop('checked')){
                    $('#fechas').hide();
                    $('#clienteCodigo').hide();
                    $('#rangoRecolecta').hide();
                    $('#clientFija').show();
                    $('#casillero').show();

                }else{
                    $('#fechas').show();
                    $('#clienteCodigo').show();
                    $('#rangoRecolecta').show();
                    $('#clientFija').hide();
                    $('#casillero').hide();

                }

            })

        });

        $(function(){
            $('#recolectaFijas').change(function(){
                if(!$(this).prop('checked')){
                    $('#fechas').show();
                    $('#clienteCodigo').show();
                    $('#rangoRecolecta').show();
                    $('#clientFija').hide();
                    $('#casillero').hide();

                }else{
                    $('#fechas').hide();
                    $('#clienteCodigo').hide();
                    $('#rangoRecolecta').hide();
                    $('#clientFija').show();
                    $('#casillero').show();
                    document.getElementById('checkClienteFijo').checked=true;

                }

            })

        });

        $('document').ready(function () {
            document.getElementById('checkfecha').checked=true;
        });


        function getClientes() {
            var val = "";

            $("#test").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: 'GET',
                        url: 'https://webservices.grupozoom.com/baaszoom/public/canguroazul/getInfoBuscarClienteRecolectaWs',
                        data: {
                           /* term: request.term*/
                            'nombre': $('#test').val(),'codoficina': val
                        },
                        dataType: "json",
                        success: function (data) {
                            console.log(data.codoficina);
                            response($.map(data.entidadRespuesta, function (item) {
                                return {
                                    label: item.nombre + ' ['+item.codcliente+']' + ' ['+item.oficinaNombre+']' ,
                                    id: item.codcliente
                                };
                            }));
                        }

                    });
                },
                select: function(event, ui) {
                    $("#codclientefija").val(ui.item.id);
                },
                minLength: 3
            });
        }



    </script>

@endsection