{{--Vista Creada por Samuel Rodriguez 17/08/18--}}

@extends('layouts/master')
<style>

    {{--ESTILOS DE LAS TABLAS--}}
        .table-titulos{background-color: #d9edf7; border-color: #bce8f1;}
    .font{font-family: "Arial", sans-serif;  font-size: 12px; }
    .activado input[type=radio]:checked + label { color: #286090;}
    .total{color: red;  background-color: #d9edf7; border-color: #bce8f1; font-weight: bold}


    {{--ESTILO DEL DIV FLOTANTE--}}
            .stickyfloat_element {right: 0;  text-align: center;  position: absolute;  width: 100%;  height: 40px;
        line-height: 50px; background-color: #d9edf7; border-color: #bce8f1;  border-radius: 25px; font-size: 12px;
        font-family: "Arial", sans-serif; font-weight: bold; color: red;
        -webkit-transition: top 0.8s ease-in-out;  transition: top 0.8s ease-in-out;}

    {{--APLICA PARA EL PORTAL DE PAGO ELECTRONICO--}}
</style>

@php
    // dump($data["fromGE"]);
@endphp
@if($data["fromGE"] == true)

    <style>
        .solo-laravel {
            display: none !important;
        }

        body {
            padding-top: 18px !important;
        }

        body * {
            font-size: 11px !important;
        }
    </style>
@endif


<script>

    window.setInterval("RefresacarPagina()", 600000);

    function RefresacarPagina() {
        location.reload();
    }

    var TotalPieza=0;
    var TotalPeso=0;
    function formato(texto){
        return texto.replace(/^(\d{4})-(\d{2})-(\d{2})$/g,'$3/$2/$1');
    }
    function number_format(amount, decimals) {

        amount += ''; // por si pasan un numero en vez de un string
        amount = parseFloat(amount.replace(/[^0-9\.]/g, '')); // elimino cualquier cosa que no sea numero o punto

        decimals = decimals || 0; // por si la variable no fue fue pasada

        // si no es un numero o es igual a cero retorno el mismo cero
        if (isNaN(amount) || amount === 0)
            return parseFloat(0).toFixed(decimals);

        // si es mayor o menor que cero retorno el valor formateado como numero
        amount = '' + amount.toFixed(decimals);

        var amount_parts = amount.split('.'),
            regexp = /(\d+)(\d{3})/;

        while (regexp.test(amount_parts[0]))
            amount_parts[0] = amount_parts[0].replace(regexp, '$1' + '.' + '$2');

        return amount_parts.join(',');
    }
    function getModalData(codguia) {
        console.log('GUIA: '+codguia);
        $.ajax({
            url:  '{{url('canguroazul/montosGuias')}}',
            async: true,
            type: 'get',
            data: {codguia:codguia},
            success: function (data) {
                console.log(data);
                $('#contenedor').html('');
                if (data.error==true){
                    // console.log(data.mensaje.mensaje['mensaje']);
                    $('#contenedor').html(data.mensaje.mensaje['mensaje']);
                    $('#myModalError').modal('show');

                }else {
                    if (data.datamonto.consultamonto.codrespuesta == 'COD_000') {
                        var pendiente = parseFloat(data.datamonto.consultamonto.entidadRespuesta[0].montodoc) - parseFloat(data.datamonto.consultamonto.entidadRespuesta[0].totalpagado);
                        var tdpendiente='';
                        //alert(number_format(parseFloat(pendiente),2));
                        if(parseFloat(pendiente)>0) {
                            tdpendiente='<td style="color:red"><b>'+ number_format(parseFloat(pendiente),2) +'</b></td>';
                        }
                        if(parseFloat(pendiente)==0) {
                            tdpendiente='<td style="color:black"><b>'+ number_format(parseFloat(pendiente),2) +'</b></td>';
                        }
                        if(parseFloat(pendiente)<0) {
                            tdpendiente='<td style="color:green"><b>-'+ number_format(parseFloat(pendiente),2) +'</b></td>';
                        }
                        //alert(tdpendiente);
                        $('#miModalCod tbody').html('');
                        $('#miModalCod').find('tbody').append('<td>' + number_format(data.datamonto.consultamonto.entidadRespuesta[0].montodoc, 2) + '</td>'+ tdpendiente +'<td>' + number_format(data.datamonto.consultamonto.entidadRespuesta[0].totalpagado, 2) + '</td>' );

                        if(data.detalle==true) {
                            console.log('Detalle del Pago');
                            console.log(data.datamonto.consultadetalle);
                            if (data.datamonto.consultadetalle.codrespuesta == 'COD_000') {
                                $('#miModalCod').find('tbody').append('<tr><td></td><td></td><td></td></tr>');
                                $('#miModalCod').find('tbody').append('<tr bgcolor="#A1A5A2"><td></td><td>RESUMEN DEL PAGO</td><td></td></tr>');
                                $('#miModalCod').find('tbody').append('<tr bgcolor="#D9DDDA"><td>Id de Pago</td><td>Tipo de Pago</td><td>Monto</td></tr>');
                                if (data.datamonto.consultadetalle.entidadRespuesta.length > 0) {
                                    $.each(data.datamonto.consultadetalle.entidadRespuesta, function (index, value) {
                                        $('#miModalCod').find('tbody').append('<tr><td>'+ value.idpago +'</td><td>'+value.listtipotransbancaria.nombre+'</td><td><b>'+ number_format(value.monto,2) +'</b></td></tr>');
                                    });
                                }
                            }
                        }
                        $('#miModalCod').modal('show');
                        $('#nroguiacod').html(' GUIA: ' + codguia);
                    }
                }
            },
            error: function(mensaje) {
                console.log(mensaje);
            },
        });
    }
    function getModalTracking(codguia) {
        // console.log('GUIA Tracking: '+codguia);
        $.ajax({
            url:  '{{url('canguroazul/trackingAliado')}}',
            async: true,
            type: 'get',
            data: {codguia:codguia},
            success: function (data) {
                console.log(data);
                $('#contenedor').html('');
                if (data.error==true){
                    $('#contenedor').html('NO EXISTE INFORMACIÓN PARA ESTE ENVIO');
                    $('#myModalError').modal('show');
                }else {
                    var mensajero = '';
                    var NumRuta = '';
                    if (data.data.codrespuesta = 'COD_000') {
                        $('#nroguia').html(codguia);
                        $('#trackingModal tbody').html('');
                        console.log(data.data.entidadRespuesta.tracking);
                        if (data.data.entidadRespuesta.tracking.length > 0) {
                            $.each(data.data.entidadRespuesta.tracking, function (index, value) {

                                //var detalle="<b>Datos Envío</b><br><table><tr><th><span class='glyphicon glyphicon-user'></span>Receptor: </th><td style='text-align:left;'>"+ value.receptor + "</td></tr><tr><th><span class='glyphicon glyphicon-qrcode'></span>Sello:</th><td style='text-align:left;'>" + value.sello + "</td></tr><tr><th><span class='glyphicon glyphicon-time'></span>Hora:</th><td style='text-align:left;'>" + value.horareal + "</td></tr><th><span class='glyphicon glyphicon-send'></span>Mensajero:</th><td style='text-align:left;'>" + value.mensajero.nombre + "</td></tr></table>";
                                console.log('Observacion: '+value);
                                if (value.mensajero != null) {
                                    mensajero = value.mensajero.nombre;
                                }
                                if (value.ruta != null) {
                                    NumRuta = value.ruta.numeroruta;
                                }
                                var FechaPro = moment(value.fechapro).format('DD/MM/YYYY');
                                var FechaHoraReal = moment(value.fechahorareal).format('DD/MM/YYYY h:mm a');
                                var FechaHoraRealCan = moment(value.fechahorareal).format('DD/MM/YYYY h:mm a');


                                $('#trackingModal').find('tbody').append('<tr><td>' + FechaPro + '</td><td>' + value.estatus.siglas + '</td><td>' + value.estatus.nombre + '</td><td>' + value.observacion + '</td><td>' + value.oficina.nombre + '</td></tr>');

                            });
                            $('#trackingModal').modal('show');
                        }else{
                            $('#contenedor').html('NO EXISTE TRACKING PARA ESTE ENVIO');
                            $('#myModalError').modal('show');
                        }
                    }
                }
            },
            error: function(mensaje) {
                //console.log(mensaje);
            },
        });
    }

    function workingDaysBetweenDates(d0, d1) {
        var holidays = [d0,d1];
        var startDate = parseDate(d0);
        var endDate = parseDate(d1);
        // Validate input
        if (endDate < startDate) {
            return 0;
        }
        // Calculate days between dates
        var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
        startDate.setHours(0,0,0,1);  // Start just after midnight
        endDate.setHours(23,59,59,999);  // End just before midnight
        var diff = endDate - startDate;  // Milliseconds between datetime objects
        var days = Math.ceil(diff / millisecondsPerDay);

        // Subtract two weekend days for every week in between
        var weeks = Math.floor(days / 7);
        days -= weeks * 2;

        // Handle special cases
        var startDay = startDate.getDay();
        var endDay = endDate.getDay();

        // Remove weekend not previously removed.
        if (startDay - endDay > 1) {
            days -= 2;
        }
        // Remove start day if span starts on Sunday but ends before Saturday
        if (startDay == 0 && endDay != 6) {
            days--;
        }
        // Remove end day if span ends on Saturday but starts after Sunday
        if (endDay == 6 && startDay != 0) {
            days--;
        }
        /* Here is the code */
        for (var i in holidays) {
            if ((holidays[i] >= d0) && (holidays[i] <= d1)) {
                days--;
            }
        }
        return days+2;
    }

    function parseDate(input) {
        // Transform date from text to date
        var parts = input.match(/(\d+)/g);
        // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
        return new Date(parts[0], parts[1]-1, parts[2]); // months are 0-based
    }


    function getMisTransacciones() {

        var TipoFecha=$('#tipofecha').val();
        var TipoEstatus=$('#estatusguia').val();
        var FechaDesde=$('#fechadesde').val();
        var FechaHasta=$('#fechahasta').val();
        var CodCliente=$('#codigocli').val();

        var table =$('#example').DataTable();
        $.ajax({
            url:  "{{url('canguroazul/reportes')}}",
            async: true,
            type: 'get',
            data: {codcliente:CodCliente,tipoestatus:TipoEstatus,tipofecha:TipoFecha,fechadesde:FechaDesde,fechahasta:FechaHasta},
            beforeSend: function () {
                // setting a timeout

                var pleaseWait = $('#pleaseWaitDialog');

                showPleaseWait = function () {
                    pleaseWait.modal({
                        backdrop: 'static',
                        keyboard: false,
                        option: 'show'
                    });
                };

                hidePleaseWait = function () {
                    pleaseWait.modal('hide');
                };

                showPleaseWait();
            },

            success: function (data) {
                //alert('Hollaaaaaa');

                hidePleaseWait();
                //console.log('Respuesta: ');
                //console.log(data);

                if (data.data.codrespuesta=='COD_000') {
                    table.clear().draw();
                    console.log('Entra aqui...');

                    var servicio = '';
                    var oficina = '';
                    var reclamo = '';
                    var gestion = '';
                    TotalPieza= 0;
                    TotalPeso =0;
                    $.each(data.data.entidadRespuesta, function (index, value) {
                        var serv = value[0].codservicio;
                        TotalPieza= parseFloat(TotalPieza)+parseFloat(value[0].numeropie);
                        TotalPeso =parseFloat(TotalPeso)+parseFloat(value[0].pesobru);

                        if (serv == 1) {
                            var codguiacod=value[0].codguia;
                            $.ajax({
                                url:  '{{url('canguroazul/montosGuias')}}',
                                async: false,
                                type: 'get',
                                cache : false,
                                data: {codguia:codguiacod},
                                success: function (datam) {
                                    console.log("Aqui 1");
                                    if (datam.error==true){
                                        servicio = '<b title="' + value[0].servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value[0].codguia + ');" style="cursor: pointer" >' + value[0].servicio.siglas + ' </a></b>';
                                    }else {
                                        console.log(datam);
                                        if (datam.datamonto.consultadetalle.codrespuesta == 'COD_000') {
                                            servicio = '<b title="' + value[0].servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value[0].codguia + ');" style="cursor: pointer" >' + value[0].servicio.siglas + ' <span class="glyphicon glyphicon-credit-card"></span></a></b>';
                                        }else{
                                            servicio = '<b title="' + value[0].servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value[0].codguia + ');" style="cursor: pointer" >' + value[0].servicio.siglas + ' </a></b>';
                                        }
                                    }
                                },
                                error: function(mensaje) {
                                    console.log(mensaje);
                                }
                            });
                        } else {
                            servicio = '<a title="' + value[0].servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default; color: #4F8A10;" >' + value[0].servicio.siglas + '</a>';
                        }
                        var dt = new Date();
                        var dtfecha= moment(dt).format('YYYY-MM-DD');
                        var fechaInicio = value[0].fechaod;
                        var diashabilesestatusod = workingDaysBetweenDates(fechaInicio,dtfecha)-1;

                        console.log('Guia: ' + value[0].codguia + ' - Dias: '+ diashabilesestatusod);

                        var diasretrasoestatusod=diashabilesestatusod-value[0].diasfer;

                        var dias_vence=0;
                        dias_vence = diasretrasoestatusod-value[0].diasmax;

                        console.log('Dias Vence: '+ dias_vence);

                        Dias='<td>'+ dias_vence +'</td>';
                        if (dias_vence>0){
                            Dias='<td style="color:red;"><b>'+ dias_vence  +'</b></td>';
                        }
                        if (dias_vence<0){
                            Dias='<td style="color:green;"><b>'+ dias_vence * -1 +'</b></td>';
                        }

                        if ((value[0].oficinaorigen.siglas == '') || (value[0].oficinaorigen.siglas == null)) {
                            oficina = '<b title="' + value[0].oficinaoperativa.nombre + '" class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default; color: #4F8A10">' + value[0].oficinaoperativa.siglas + '</b>';
                        } else {
                            oficina = '<b title="' + value[0].oficinaorigen.nombre + '" class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default; color: #4F8A10">' + value[0].oficinaorigen.siglas + '</b>';
                        }

                        if (value[0].calidadcasosenv != null || '') {
                            reclamo = '<b><a title="' + value[0].calidadcasosenv.calidadcasos.calidadestatus.descripcion + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default">SI</a></b>';
                        }else{
                            reclamo='';
                        }
                        if (value[0].trackingges.length > 0) {
                            var cg = value[0].trackingges.length - 1;
                            gestion = '<b><a title="' + value[0].trackingges[cg].estatusges.nombreges + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default">SI</a></b>';
                        }else{

                            gestion=''
                        }
                        //setTimeout(50000);
                        table.rows.add($(
                            "<tr><td></td><td><a style='cursor: pointer' title='GUIA " + value[0].codguia + "' class='blue-tooltip tool' data-toggle='tooltip' data-placement='top' onclick='javascript:getModalTracking(" + value[0].codguia + ");' >" + value[0].codguia + "</a></td><td>" + formato(value[0].fecha) + "</td><td>" + formato(value[0].fechapro) + "</td><td>" + servicio + "</td><td><b title='" + value[0].estatus.nombre + "' class='blue-tooltip tool data-toggle='tooltip' data-placement='top' style='cursor:default; color: #4F8A10'>" + value[0].estatus.siglas + "</b></td>" + Dias + "<td>" + value[0].destinatario + "</td><td>" + value[0].numeropie + "</td><td>" + value[0].pesobru + "</td><td>" + oficina + "</td><td>" + reclamo + "</td><td>" + gestion + "</td></tr>"
                        )).draw();

                        table.columns.adjust().draw();

                    });
                    $('#totalpiezas').val(TotalPieza);
                    $('#totalpeso').val(TotalPeso.toFixed(2));

                }else{
                    console.log('No hay Registros...')
                }

            },
            error: function(mensaje) {
                //hidePleaseWait();
            },
        });
    }


</script>

@section('content')
    {{-- TABLA EXTERNA--}}

    <input type="hidden" id="codigocli" value="{{ $data['codcliente'] }}">
    <div class="col-lg-12 col-md-12">
        <br>
        <form>
            <div class="panel panel-primary" style="width:100%;">
                <div class="panel-heading">
                    <strong>
                        <h3 class="panel-title">
                            <div align="center">
                                <b class="font">
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    LISTADO DE GU&Iacute;AS PENDIENTES POR LIQUIDAR
                                </b>
                            </div>
                        </h3>
                    </strong>
                </div>
                <div class="panel-body table-responsive">
                    {{--TABLA  PARAMETROS--}}
                    <div class="btn btn-defaul" style="font-size: 11px;"><span class="glyphicon glyphicon-info-sign color"></span>
                        <b>Nota:</b> Puede seleccionar los siguientes campos para hacer una búsquedad avanzada.
                    </div>
                    <table class="table table-hover table-sorter font activado" border="0" style=" padding:0; margin:0;" >
                        <tr>
                            <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <label for="ofi_destino">Oficina Destino: </label>
                                <select id="estatusguia" class="selectpicker" title="Seleccione el Tipo de Estatus" data-style="btn-primary" data-width="fit">
                                    <option value="1" selected="selected">TODOS</option>
                                    <option value="2" >ANACO</option>
                                    <option value="3" >ARAGUA</option>
                                    <option value="4" >BARCELONA</option>
                                    <option value="5" >BARINAS</option>
                                </select>
                            </td>
                            <td>
                                <div class="input-group col-xs-12 col-md-12 col-sm-12">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar una oficina'></i></span>
                                    <select onchange="return rutaXoficina()" class="form-control selectpicker show-tick" data-live-search="true" data-size="10" data-msg-required="Este campo es Requerido." data-rule-required="true" name="codoficina" id="codoficina" required data-placement="bottom">
                                        @php
                                            $codoficina = 46
                                        @endphp
                                        @if($codoficina == 46)
                                            <option value= "0" >TODAS LAS OFICINAS</option>
                                            @foreach($consultaOficinas['entidadRespuesta'] as $oficina){
                                            <option value={{$oficina['codoficina']}}> {{$oficina['nombre']}}</option>
                                            }
                                            @endforeach
                                        @else

                                            <option value={{$codoficina}}> {{$nombre}}</option>
                                            }

                                        @endif

                                    </select>

                                </div>
                            </td>

                            <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <label for="estatus">Estatus: </label>
                                <select id="estatusguia" class="selectpicker" title="Seleccione el Tipo de Estatus" data-style="btn-primary" data-width="fit">
                                    <option value="1" selected="selected">TODOS</option>
                                    <option value="2" >ANACO</option>
                                    <option value="3" >ARAGUA</option>
                                    <option value="4" >BARCELONA</option>
                                    <option value="5" >BARINAS</option>
                                </select>
                            </td>
                            <td class="" colspan="6"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <label for="ruta">Ruta: </label>
                                <select id="estatusguia" class="selectpicker" title="Seleccione el Tipo de Estatus" data-style="btn-primary" data-width="fit">
                                    <option value="1"  selected="selected">TODOS</option>
                                    <option value="2" >ANACO</option>
                                    <option value="3" >ARAGUA</option>
                                    <option value="4" >BARCELONA</option>
                                    <option value="5" >BARINAS</option>
                                </select>
                            </td>

                            <TR>

                        </TR>
                        <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                            <label for="fecha_gui">Fecha de Guia</label>
                            <center>
                            <div class='input-group date input-group-sm' id='datetimepicker6'>
                                <input  id="fechadesde" type="text" class="form-control" placeholder="DESDE" size="10">
                                <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                            </div>
                            <br>
                            <div class='input-group date input-group-sm' id='datetimepicker7'>
                                <input id="fechahasta" type="text" class="form-control"  placeholder="HASTA" size="10">
                                <span class="input-group-addon bg-gradient-primary ">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                            </div>
                            </center>
                        </td>
                        <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                            <label for="fecha_pro">Fecha Proceso</label>
                            <center>
                                <div class='input-group date input-group-sm' id='datetimepicker8'>
                                    <input  id="fechadesde1" type="text" class="form-control" placeholder="DESDE" size="10">
                                    <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                </div>
                                <br>
                                <div class='input-group date input-group-sm' id='datetimepicker9'>
                                    <input id="fechahasta1" type="text" class="form-control"  placeholder="HASTA" size="10">
                                    <span class="input-group-addon bg-gradient-primary ">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                </div>
                            </center>
                        </td>
                        <td class="" colspan="6"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                            <label for="fecha_odso">Fecha OD/SO</label>
                            <center>
                                <div class='input-group date input-group-sm' id='datetimepicker10'>
                                    <input  id="fechadesde2" type="text" class="form-control" placeholder="DESDE" size="10">
                                    <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                </div>
                                <br>
                                <div class='input-group date input-group-sm' id='datetimepicker11'>
                                    <input id="fechahasta2" type="text" class="form-control"  placeholder="HASTA" size="10">
                                    <span class="input-group-addon bg-gradient-primary ">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                </div>
                            </center>
                        </td>
                        <tr>
                            <td class="" colspan="12"  data-width="fit"  style="text-align: center; background-color: #d9edf7;">
                                <label class="table-titulos"> Cliente:</label>
                            </td>
                        </tr>
                        </tr>
                        <tr>
                            <td class="" colspan="4"  data-width="fit"  style="text-align: center; position: relative; background-color: #d9edf7;" >

                                <label>cod_cliente</label>
                               <center><input id="cod_clietne" type="text" class="form-control" style="width: 80%;" ></center>
                            </td>
                            <td class="" colspan="6"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <label>nombre cliente</label>
                                <center><input id="nom_cliente" type="text" class="form-control" style="width: 80%;" ></center>
                            </td>
                        </tr>
                        <tr>
                            <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <input type="checkbox" id="sevm" class="form-control">
                                <label> Sólo Envíos con Valor de Mercancia:</label>
                            </td>
                            <td class="" colspan="3"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <input type="checkbox" id="sevm" class="form-control">
                                <label>Guías sin Recibo Cobranza:</label>
                            </td>
                            <td class="" colspan="6"  data-width="fit"  style="text-align: center; background-color: #d9edf7;" >
                                <input type="checkbox" id="sevm" class="form-control">
                                <label>Exportar a Excel:</label>
                            </td>
                           <!--<td class="" colspan="3" style="text-align: left;background-color: #d9edf7;">
                                <button type="button" onclick="javascript:getMisTransacciones()" id="btnbuscar" name="btnbuscar" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-search"></span> Buscar</button>
                            </td>-->
                        </tr>

                    </table>
                    <br>

                    {{--TABLA DE DATOS--}}
                    <table id="example" class="display font" cellspacing="0" width="100%" style="text-align: center">
                        <thead>
                        <td colspan="13" style="font-size: 11px; text-align: left" ><span class="glyphicon glyphicon-info-sign color"></span>Nota: Al posicionar el mouse sobre los iconos del formulario, podra ver una breve descripci&oacute;n del campo.</td>
                        <tr>
                            <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="IDENTIFICADOR">Id</b></td>
                            <td class="table-titulos" data-placeholder ="&nbsp;&nbsp; GUIA "><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="GUÍA">Gu&iacute;a</b></td>
                            <td class="table-titulos" data-placeholder ="&nbsp;FECHA"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="FECHA DE CREACIÓN">Fecha<br>Creaci&oacute;n</b></td>
                            <td class="table-titulos" data-placeholder ="&nbsp;FECHA"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="FECHA DE ACTUALIZACIÓN">Fecha<br>Proceso</b></td>
                            <td class="table-titulos filter-select"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="SERVICIO">Servicio<br></b>
                                <span title="" class="" data-toggle="tooltip" data-placement="top"  style="cursor: pointer"></span>
                            </td>
                            <td class="table-titulos filter-select"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="ESTATUS">Estatus<br></b>
                                <span title="" class="" data-toggle="tooltip" data-placement="top"  style="cursor: pointer"></span>
                            </td>
                            <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="D&Iacute;AS SIN ACTUALIZAR">D&iacute;as</b></td>
                            <td class="table-titulos" data-placeholder ="------ INGRESE UN NOMBRE ------"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="DESTINATARIO">Destinatario</b></td>

                            <td class="table-titulos" ><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="PIEZAS">Pza</b></td>
                            <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="PESO">Peso<br>(Kg)</b></td>
                            <td class="table-titulos filter-select"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="OFICINA">Oficina<br>Origen</b></td>
                            <td class="table-titulos filter-select"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="RECLAMO">Reclamo<br></b>
                                <span title="RECLAMO" class="" data-toggle="tooltip" data-placement="top"  style="cursor: pointer"></span>
                            </td>
                            <td class="table-titulos filter-select"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="GESTI&Oacute;N">Gesti&oacute;n <br></b>
                                <span title="" class="" data-toggle="tooltip" data-placement="top"  style="cursor: pointer"></span>
                            </td>
                        </tr>
                        </thead>
                        <tfoot></tfoot>
                        <thead>

                        <tr>
                            <td class="total">Total</td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"><input style="text-align: center;" size="4" id="totalpiezas" type="text" value="0" readonly></td>
                            <td class="total"><input style="text-align: center;" size="4" id="totalpeso" type="text" value="0" readonly></td>
                            <td class="total"></td>
                            <td class="total"></td>
                            <td class="total"></td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            {{--Boton--}}
            <div style="margin-bottom:8px; text-align:center;">
                <a id="btnRegresar" href="http://desarrollo3.grupozoom.com/faaszoom/public/canguroazul/selectreportes" class="btn btn-primary solo-laravel" role="button">Regresar</a>
            </div>
        </form>
    </div>
    {{--MODAL DATOS COD--}}
    <div class="container">
        <div class="modal fade" id="miModalCod" style="margin-top: 150px;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="panel panel-primary" style="width:100%;   border-color: rgba(255,255,255,0.9)">
                        <div class="panel-heading">
                            <strong>
                                <h3 class="panel-title">
                                    <div align="center">
                                        <button class="close glyphicon glyphicon-remove" aria-hidden="true" data-dismiss="modal"></button>
                                        <b class="font">
                                            <span class="glyphicon glyphicon-search"></span><b><span id="nroguiacod"></span></b>
                                        </b>
                                    </div>
                                </h3>
                            </strong>
                        </div>
                        <div class="panel-body table-responsive">
                            <div class="btn btn-defaul" style="font-size: 11px;"><span class="glyphicon glyphicon-info-sign color"></span>
                                <b >Nota:</b> Al posicionar el mouse sobre los iconos del formulario, podra ver
                                una breve descripci&oacute;n del campo.
                            </div>
                            <table id="" class="table table-hover tablesorter text-center font">
                                <thead>
                                <tr>
                                    <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="FACTURADO Bs">Facturado<br>Bs</b></td>
                                    <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="PENDIENTE Bs">Pendiente<br>Bs</b></td>
                                    <td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="PAGADO Bs">Pagado<br>Bs</b></td>
                                    <!--<td class="table-titulos"><b class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" title="PAGO TRACKING">Pago<br>Tracking</b></td>-->
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="modal-footer">
                                <button class="btn btn-primary center-block" data-dismiss="modal">Aceptar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="trackingModal" tabindex="-1"
         role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content"> <!--style="width: 100%;margin-left: -1%;">-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title center" id="myModalLabel">Seguimiento del Envío-Nro.Guía: <b><span id="nroguia"></span></b></h3>
                </div>

                <div class="modal-body">
                    <table class="table table-striped" id="trackTable">
                        <thead>
                        <tr class="bg-primary">
                            <th>Fecha Proceso</th>
                            <th>Siglas</th>
                            <th>Estatus</th>
                            <th>Observación</th>
                            <th>Oficina</th>

                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Cerrar
                    </button>
                </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 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>
    <!-- Modal -->
    <div class="modal fade" id="myModalError" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" >
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h1 class="modal-title"><span class="glyphicon glyphicon-alert" style="color:red;"></span> MENSAJE DEL SISTEMA</h1>
                </div>
                <div class="modal-body">
                    <h3><p><section type="hidden" id="contenedor" ></section></p></h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>

        </div>
    </div>

    @endsection
    {{--SCRIPT EFECTO ZEBRA Y PAGINADOR DE LA TABLA--}}
    @section('script')

    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('DataTables/datatables.min.css') }}"/>
    <script type="text/javascript" src="{!! asset('DataTables/datatables.min.js') !!}"></script>
    <script>
        function rutaXoficina() {

            $.ajax({
                url: 'https://webservices.grupozoom.com/baaszoom/public/canguroazul/cuentasWs',
                data: {
                    'codoficina': $('#codoficina').val()

                },

                type: 'get',
                dataType: 'json',
                success: function (data) {
                    console.log('codoficina');
                    console.log(data);
                    if (($('#codoficina').val()) == 0 ){
                        var lista = '<option value="0" >TODAS LAS RUTAS</option>';
                        $('#ruta').html(lista);
                    }else {
                        if (data.codrespuesta == "COD_000") {

                            var lista = '<option value="0" >TODAS LAS RUTAS</option>';
                            $.each(data.entidadRespuesta, function (index, record) {
                                lista += '<option value="' + record.numerorut + '">' + 'RUTA ' + record.numerorut + '</option>';
                            });
                            $('#ruta').html(lista);
                        }
                    }
                }
            });
        }
    </script>

    {{--SCRIPT NUMERACION DE LA TABLA (ID)--}}
    <script>
        $(document).ready(function() {

            var t =$('#example').DataTable( {
                columnDefs: [ {
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                } ],
                order: [[ 6, 'asc' ]],
                dom: 'Bfrtip',
                buttons: [
                    'excel'
                ],
                pageLength: 15,
                language: {
                    "processing": "Procesando...",
                    "lengthMenu": "Mostrar _MENU_ registros",
                    "zeroRecords": "No se encontraron resultados",
                    "emptyTable": "Ningún dato disponible en esta tabla",
                    "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "infoPostFix": "",
                    "search": "Búsqueda:",
                    "url": "",
                    "infoThousands": ",",
                    "loadingRecords": "Cargando...",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                }

            } );

            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();

            getMisTransacciones();

        } );
    </script>

    {{--SCRIPT CALENDARIO--}}
    <script type="text/javascript">
        $(function () {
            //calendario fecha guia
            $('#datetimepicker6').datetimepicker({
                format: 'DD-MM-YYYY'
            });
            $('#datetimepicker7').datetimepicker({
                useCurrent: false, //Important! See issue #1075
                format: 'DD-MM-YYYY'
            });
            $("#datetimepicker6").on("dp.change", function (e) {
                $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker7").on("dp.change", function (e) {
                $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
            });

            //calendaario fecha proceso
            $('#datetimepicker8').datetimepicker({
                format: 'DD-MM-YYYY'
            });
            $('#datetimepicker9').datetimepicker({
                useCurrent: false, //Important! See issue #1075
                format: 'DD-MM-YYYY'
            });
            $("#datetimepicker8").on("dp.change", function (e) {
                $('#datetimepicker9').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker9").on("dp.change", function (e) {
                $('#datetimepicker8').data("DateTimePicker").maxDate(e.date);
            });


            $('#datetimepicker10').datetimepicker({
                format: 'DD-MM-YYYY'
            });
            $('#datetimepicker11').datetimepicker({
                useCurrent: false, //Important! See issue #1075
                format: 'DD-MM-YYYY'
            });
            $("#datetimepicker10").on("dp.change", function (e) {
                $('#datetimepicker11').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker11").on("dp.change", function (e) {
                $('#datetimepicker10').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>
@endsection