{{--
Creado por Yonarkis Linares
Fecha: 22/11/2017/

Modificado por Ender Bastidas 24/05/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')
    <div class="container">
        <div class="row">
            <div class="col-md-9 admin-content" id="agregarRecolecta">
                <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-plus"></i> Sistemas de Recolectas para Oficinas - Agregar Recolecta</h3>
                            </div>
                            <div class ="panel-body">
                                <div class="container">
                                    <div class="row">
                                        <br />
                                        <form method="post" action="{{ route('recolecta.buscarCliente') }}" accept-charset="UTF-8" enctype="multipart/form-data" id="crearRecolecta">
                                            <div align="row">
                                                <div class="col-md-3 col-md-offset-2 form-group">
                                                    <div class="input-group date col-xs-12 col-md-12 col-sm-12">
                                                        <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-filter" data-toggle="tooltip" data-placement="left" title='Ingresar codigo cliente'></span>
                                                        </span>
                                                        <input type="number" class="form-control input-sm" id="codcliente" placeholder="ingresar el codigo del cliente" name="codcliente"
                                                               data-container="body"
                                                               data-msg-required="Este campo es Requerido."
                                                               data-rule-required="true"
                                                        />
                                                        <input type="hidden" style="width : 150px; heigth : 150px" id="checkcodcliente" name="checkcodcliente"
                                                               value="on"/>
                                                        <input type="hidden" style="width : 150px; heigth : 150px" id="busqueda" name="busqueda"
                                                               value="1"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <br /><br />
                                            <div class="panel-body col-md-offset-6">
                                                <button class="btn btn-primary" id="enviar" type="submit"><span class=" glyphicon glyphicon-search"></span> Buscar</button>
                                            </div>
                                        </form>
                                    </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, podra ver una breve descripci&oacute;n del campo
                            </div>
                            <div class="modal fade" style="margin-top:18%;" id="procesando" tabindex="-1" role="dialog">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">Procesando Busqueda del Cliente Ingresado, Por Favor Espere...</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-striped progress-bar-primary active" role="progressbar" id="progressBar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                                    <div id="label">0%</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if(session('msj') && session('cod') == false)
                            <div class="alert alert-danger col-sm-8 col-sm-push-2" style="margin-top: 20px;">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>{{ session('msj') }}</strong>
                            </div>
                        @endif

                    </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'
                }

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

            });
        });
        $(function () {
            $('#datetimepickerhasta').datetimepicker({
                format: 'DD-MM-YYYY',
                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>

        $(document).ready(function() {

            //VALIDACION DE CAMPOS
            jQuery.validator.addMethod("accept", function(value, element, param) {
                return value.match(new RegExp("." + param + "$"));
            });
            $.validator.addMethod('regexp', function(value, element, param) {
                    return this.optional(element) || value.match(param);
                },
                'ingresa una cuenta valida');
            $("#listaRecolecta").validate({
                rules :{
                    checkfecha: { required : true}
                },

                messages : {
                    checkfecha: { required : "* Requerido"},
                },
                tooltip_options: {

                },
            });
            //Combo de select de Actualizar Datos view (recolectaActualizarDatos)
            $('#tipo').change(function(){

                aux = document.getElementById('tipo').value;

                if (aux == 1){

                    $('#fechadesdeselect').show("slow");
                    $('#fechahastaselect').show("slow");
                    $('#clienteselect').hide("slow");
                    $('#recolectainicial').hide("slow");
                    $('#recolectafinal').hide("slow");

                }else if (aux == 2){

                    $('#fechadesdeselect').hide("slow");
                    $('#fechahastaselect').hide("slow");
                    $('#clienteselect').show("slow");
                    $('#recolectainicial').hide("slow");
                    $('#recolectafinal').hide("slow");

                }else{

                    $('#fechadesdeselect').hide("slow");
                    $('#fechahastaselect').hide("slow");
                    $('#clienteselect').hide("slow");
                    $('#recolectainicial').show("slow");
                    $('#recolectafinal').show("slow");

                }
            });

            $('#tiponota').change(function(){

                aux = document.getElementById('tiponota').value;

                if (aux == 0){

                    $('#notaTipoBusqueda').hide("slow");
                    $('#notaFechaIngreso').hide("slow");
                    $('#notaRecolectaInicial').hide("slow");
                    $('#notaRecolectaFinal').hide("slow");
                    $('#notarutadesde').hide("slow");
                    $('#notarutahasta').hide("slow");
                }else if (aux == 1){

                    $('#notaTipoBusqueda').show("slow");
                    $('#notaFechaIngreso').show("slow");
                    $('#notaRecolectaInicial').hide("slow");
                    $('#notaRecolectaFinal').hide("slow");
                    $('#notarutadesde').hide("slow");
                    $('#notarutahasta').hide("slow");

                }else if (aux == 2){

                    $('#notaTipoBusqueda').show("slow");
                    $('#notaFechaIngreso').hide("slow");
                    $('#notaRecolectaInicial').show("slow");
                    $('#notaRecolectaFinal').show("slow");
                    $('#notarutadesde').hide("slow");
                    $('#notarutahasta').hide("slow");

                }else{

                    $('#notaTipoBusqueda').show("slow");
                    $('#notaFechaIngreso').hide("slow");
                    $('#notaRecolectaInicial').hide("slow");
                    $('#notaRecolectaFinal').hide("slow");
                    $('#notarutadesde').show("slow");
                    $('#notarutahasta').show("slow");
                }
            });

            $('#tiporeporte').change(function(){

                aux = document.getElementById('tiporeporte').value;

                if (aux == 0){
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').hide("slow");
                    $('#fechahastareporte').hide("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");

                }else if (aux == 1){
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').show("slow");
                    $('#fechahastareporte').show("slow");
                    $('#selectvehiculo').show("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");

                }else if (aux == 2){
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').show("slow");
                    $('#fechahastareporte').show("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");

                }else if (aux == 3){
                    $('#selectreportes').hide("slow");
                    $('#fechadesdereporte').hide("slow");
                    $('#fechahastareporte').hide("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#selectcliente').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");

                }else{
                    $('#selectreportes').show("slow");
                    $('#fechadesdereporte').hide("slow");
                    $('#fechahastareporte').hide("slow");
                    $('#selectvehiculo').hide("slow");
                    $('#codigocliente').hide("slow");
                    $('#nombrecliente').hide("slow");
                    $('#selectestatus').hide("slow");
                    $('#selectrecolecta').hide("slow");
                }
            });

        });
    </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, 20);

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



@endsection