{{--Vista Creada por Junior Medina 12/12/18--}}
<!-- Vista Creada por Junior Medina 12/12/18 -->
@extends('layouts/master')
@section('content')
    <!-- Librerias Styles para la Página -->
    <link rel="stylesheet" href="/faaszoom/public/bootstrap_3_3_6/datepicker/bootstrap-datetimepicker.css" />
    <style>
        .style_1{
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 5px;
            min-width:240px;
        }
        .tooltip-inner {
            background-color: #0076C0;
            color: #FFFFFF;
            border: 1px solid #004672;-
            padding: 4px;
            font-size: 14px;
        }
        p {
            margin: 0 0 0px !important;
        }
        #procesando {
            display: none;
            position: absolute;
            top: 25%;
            left: 37.5%;
            width: 25%;
            height: 50%;
        }
    </style>
    <input type="hidden" id="url" data-url="{{ route('getConsumirAjax') }}">
    <div class="col-sm-6 col-xs-6 col-md-6 col-sm-offset-3 container" >
        <div class="panel panel-primary">
            <div class="panel-heading"><strong><h3 class="panel-title" style="text-align: center;">
        <span class="glyphicon glyphicon-search">
        </span> Reporte Total de COD Entrando a la Oficina</h3></strong>
            </div>
            <div class="panel-body">
            <!--VARIABLE DE SECCION PARA LOGRAR MOSTRAR PAGINA EN CANJURO AZUL-->
                <form role="form" action="{{ url($rutaSession.'/'.'ReporteEntrandoCOD') }}" id="BusquedaGuiaForm" method="post">
                    <div class="col-md-10 col-xs-10 col-md-10 col-sm-offset-1">
                        <div class="panel panel-default style_1">
                            <div class="panel-body">
                                <div class="row">
                                    <label for="OficDestino">Seleccione Oficina Destino</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkofidestino" checked>
                                        </span>
                                        <select class="form-control" id="OficDestino" name="OficDestino">
                                            <option value="" disabled="">Seleccione Oficina Destino</option>
                                            @if(Session::get('entidadRespuesta.codoficina') == 46 )
                                            <option value="0" selected>TODAS</option>
                                            @endif
                                            @foreach($response['entidadRespuesta'] as $oficina)
                                                @if(Session::get('entidadRespuesta.codoficina') != 46 && Session::get('entidadRespuesta.codoficina') == $oficina['codoficina'])
                                                <option selected value="{{ $oficina['codoficina'] }}">{{ $oficina['nombre'] }}</option>
                                                @elseif (Session::get('entidadRespuesta.codoficina') == 46)
                                                    <option value="{{ $oficina['codoficina'] }}">{{ $oficina['nombre'] }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="Ruta">Seleccione la Ruta</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkruta" checked>
                                        </span>
                                        <select class="form-control" id="Ruta" name="Ruta">
                                            <option value="" disabled="">Seleccione una Ruta</option>
                                            <option value="0" selected>TODAS</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="Estatus">Seleccione Estatus</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkestatus" checked>
                                        </span>
                                        <select class="form-control" id="Estatus" name="Estatus">
                                                <option value="" disabled="">Seleccione un tipo de estatus</option>
                                                <option value="0" selected>TODOS</option>
                                                @foreach($testatus['entidadRespuesta'] as $tipo_estatus)
                                                    <option value="{{ $tipo_estatus['codtipoestatus'] }}">{{ $tipo_estatus['nombre'] }}</option>
                                                @endforeach
                                            </select>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default style_1">
                            <div class="panel-body" >
                                <div class="row">
                                    <label for="fecha">Seleccione Fecha de la Guía</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkFecha">
                                        </span>
                                        <input type='text' class="form-control" name="fechadesde" id="fechadesde"  placeholder="Ingrese Fecha Desde" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha de la guía'></span>
                                        </span>
                                        <input type='text' class="form-control" name="fechahasta" id="fechahasta"   placeholder="Ingrese Fecha Hasta" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha de la guía'></span>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="fechapro">Seleccione Fecha del Proceso</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkFechaPro">
                                        </span>
                                        <input type='text' class="form-control" name="fechaprodesde" id="fechaprodesde"  placeholder="Ingrese Fecha Desde" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha del proceso'></span>
                                        </span>
                                        <input type='text' class="form-control" name="fechaprohasta" id="fechaprohasta"  placeholder="Ingrese Fecha Hasta" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha del proceso'></span>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="fechaod">Seleccione Fecha del OD/SO</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkFechaOD">
                                        </span>
                                        <input type='text' class="form-control" name="fechaoddesde" id="fechaoddesde"   placeholder="Ingrese Fecha Desde" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha del OD/SO'></span>
                                        </span>
                                        <input type='text' class="form-control" name="fechaodhasta" id="fechaodhasta"   placeholder="Ingrese Fecha Hasta" required disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha del OD/SO'></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default style_1">
                            <div class="panel-body" >
                                <div class="row">
                                    <label for="fechapro">Cliente</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <input type="checkbox" id="checkcodcliente">
                                        </span>
                                        <input type='text' class="form-control" name="codcliente" id="codcliente"  placeholder="Ingrese el código del cliente" disabled/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-barcode" data-toggle="tooltip" data-placement="top" title='Ingrese el código del cliente'></span>
                                        </span>
                                        <input type='text' class="form-control" name="nombreClient" id="test" onclick="getClientes()" onkeyup="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()" placeholder="Nombre Cliente" data-placement="bottom" disabled/>

                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="top" title='Ingrese el nombre del cliente'></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default style_1">
                            <div class="panel-body" >
                                <div class="row">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="valor_mercancia" value="1" id="valor_mercancia">
                                        <label class="form-check-label" for="defaultCheck1">
                                            Sólo Envíos con Valor de Mercancia
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="cobranza" value="1" id="cobranza">
                                        <label class="form-check-label" for="defaultCheck1">
                                            Guías pendientes por cobrar
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-md-offset-4">
                            <button type="submit" class="btn btn-primary" id="load" disabled><p data-toggle="tooltip" data-placement="top" title="Debe seleccionar al menos un tipo de fecha">Aceptar</p></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="margin-top: 150px;">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Por favor espere...</h4>
                    </div>
                    <div class="modal-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="margin-top: 150px;">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                    <div style="text-align: center;"><img src='{!! URL::asset('img/zoom-gif.gif') !!}' width="50%" height="50%" /></div>
                </div>
            </div>
        </div>
    </div>--}}
@endsection
@section('script')
    <script src="/faaszoom/public/bootstrap_3_3_6/datepicker/bootstrap-datetimepicker.min.js"></script>
    <script>
        var Ruta;
        $( document ).ready(function() {
            if($("#OficDestino").val() != 46){
                getRutas();
            }
            $('select#OficDestino').change(function() {
                getRutas();
            });

            $('[data-toggle="tooltip"]').tooltip();
            /************************  FECHAS *************************/
            var date = new Date();
            date.setDate(date.getDate());
            $.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',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                autoclose: true,
                yearSuffix: ''
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);

            var date = new Date();

            $(function () {
                $('#fechadesde').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechahasta').data("DateTimePicker").minDate(e.date)
                });
            });

            $(function () {
                $('#fechahasta').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechadesde').data("DateTimePicker").maxDate(e.date)
                });
            });

            $('#fechadesde').val(moment(date).format('DD/MM/YYYY'));
            $('#fechahasta').val(moment(date).format('DD/MM/YYYY'));


            $(function () {
                $('#fechaprodesde').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechaprohasta').data("DateTimePicker").minDate(e.date)
                });
            });

            $(function () {
                $('#fechaprohasta').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechaprodesde').data("DateTimePicker").maxDate(e.date)
                });
            });

            $('#fechaprodesde').val(moment(date).format('DD/MM/YYYY'));
            $('#fechaprohasta').val(moment(date).format('DD/MM/YYYY'));


            $(function () {
                $('#fechaoddesde').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechaodhasta').data("DateTimePicker").minDate(e.date)
                });
            });

            $(function () {
                $('#fechaodhasta').datetimepicker({
                    maxDate: date,
                    format: 'DD/MM/YYYY',
                    useCurrent: true,
                    dayViewHeaderFormat: 'MMMM YYYY',
                    showTodayButton: true,
                    widgetPositioning: {
                        vertical: 'bottom'
                    }
                }).on('dp.change', function (e) {
                    $('#fechaoddesde').data("DateTimePicker").maxDate(e.date)
                });
            });

            $('#fechaoddesde').val(moment(date).format('DD/MM/YYYY'));
            $('#fechaodhasta').val(moment(date).format('DD/MM/YYYY'));

          /*****************************************************************/


            /***********************VALIDACIONES****************************/

            $('#checkofidestino').change(function(){
                if( $('#checkofidestino').prop('checked') ) {
                    $('select#OficDestino').removeAttr('disabled');
                }else{
                    $('select#OficDestino').attr('disabled','disabled');
                }
            });

            $('#checkruta').change(function(){
                if( $('#checkofidestino').prop('checked') ||$('select#OficDestino').prop('select') ) {
                    $('select#Ruta').removeAttr('disabled');
                }else{
                    $('select#Ruta').attr('disabled','disabled');
                }
            });

            $('#checkestatus').change(function(){
                if( $('#checkestatus').prop('checked') ) {
                    $('select#Estatus').removeAttr('disabled');
                }else{
                    $('select#Estatus').attr('disabled','disabled');
                }
            });

            $('#checkFecha').change(function(){
                if( $('#checkFecha').prop('checked') ) {
                    $('#fechadesde').removeAttr('disabled');
                    $('#fechahasta').removeAttr('disabled');
                }else{
                    $('#fechadesde').attr('disabled','disabled');
                    $('#fechahasta').attr('disabled','disabled');
                }
            });

            $('#checkFechaPro').change(function(){
                if( $('#checkFechaPro').prop('checked') ) {
                    $('#fechaprodesde').removeAttr('disabled');
                    $('#fechaprohasta').removeAttr('disabled');
                }else{
                    $('#fechaprodesde').attr('disabled','disabled');
                    $('#fechaprohasta').attr('disabled','disabled');
                }
            });

            $('#checkFechaOD').change(function(){
                if( $('#checkFechaOD').prop('checked') ) {
                    $('#fechaoddesde').removeAttr('disabled');
                    $('#fechaodhasta').removeAttr('disabled');
                }else{
                    $('#fechaoddesde').attr('disabled','disabled');
                    $('#fechaodhasta').attr('disabled','disabled');
                }
            });

            $('#checkcodcliente').change(function(){
                if( $('#checkcodcliente').prop('checked') ) {
                    $('#codcliente').removeAttr('disabled');
                    $('#test').removeAttr('disabled');
                }else{
                    $('#codcliente').attr('disabled','disabled');
                    $('#test').attr('disabled','disabled');
                }
            });

            $('#checkFecha').change(function(){
                if( $('#checkFecha').prop('checked')) {
                    $('#load').removeAttr('disabled');
                    $('#load *[title]').tooltip('disable');
                }else{
                    $('#load').attr('disabled','disabled');
                }
            });

            $('#checkFechaPro').change(function(){
                if( $('#checkFechaPro').prop('checked')) {
                    $('#load').removeAttr('disabled');
                    $('#load *[title]').tooltip('disable');
                }else{
                    $('#load').attr('disabled','disabled');
                }
            });

            $('#checkFechaOD').change(function(){
                if( $('#checkFechaOD').prop('checked')) {
                    $('#load').removeAttr('disabled');
                    $('#load *[title]').tooltip('disable');
                }else{
                    $('#load').attr('disabled','disabled');
                }
            });

            //LOADING DE REGISTRARSE
            $('#load').on('click', function() {
                    $('#pleaseWaitDialog').modal('show');
                    var elem = document.getElementById("progressBar");
                    var width = 1;
                    var id = setInterval(frame, 10);

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

        /****************************SERVICIOS************************/
        function getRutas() {
            console.log('entro');
            var codoficina = $("#OficDestino").val();
            var url = $("#url").data('url'),
                method = 'GET',
                pagina = 'canguroazul/',
                params = {
                    // token: CSRF_TOKEN,
                    webservice: 'getOficinasRutasWS',
                    //webservice: 'cuentasWs',
                    pagina: pagina,
                    method: method,
                    campos: ['codoficina'],
                    valores: [codoficina]
                };
            $.ajax({
                //async : false,
                type: 'GET',
                url: url,
                data: params,
                datatype: 'JSON',
                success: function (data) {
                    var obj = data;
                    $("select#Ruta").empty();
                    $("select#Ruta").append('<option value="">TODAS</option>');
                    if(obj.codrespuesta=="COD_000") {
                        Ruta  = obj.entidadRespuesta;
                        //console.log(Ruta);
                        $.each(Ruta,function(key, Ruta) {
                            var nombre = Ruta.nombre;
                            var nombre_com = Ruta.nombre;
                            nombre = nombre.toUpperCase();
                            nombre_com = nombre_com.toUpperCase();
                            nombre = nombre.substring(0, 30);
                            $("select#Ruta").append('<option value="'+Ruta.codruta+'" title="'+nombre_com+'">'+Ruta.numerorut+' - '+nombre+'</option>');
                        });
                    }
                }, error: function (mensaje) {
                    console.log(mensaje)
                }
            });
        }




        function getClientes() {
            //var val = ($("#OficDestino").val());
            var val = 46;

            $("#test").autocomplete({
                source: function (request, response) {
                    var url = $("#url").data('url'),
                        method = 'GET',
                        pagina = 'canguroazul/',
                        params = {
                            // token: CSRF_TOKEN,
                            webservice: 'getInfoBuscarClienteRecolectaWs',
                            pagina: pagina,
                            method: method,
                            campos: ['nombre', 'codoficina'],
                            valores: [$('#test').val(), val]
                        };
                    $.ajax({
                        //async : false,
                        type: 'GET',
                        url: url,
                        data: params,
                        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) {
                    $("#codcliente").val(ui.item.id);
                },
                minLength: 3
            });
        }
    </script>
@endsection