{{--Vista Creada por Victor Moncada 12/09/17--}} {{--Modificada por Anthonny Garcia 22/11/17--}}
{{--Modificada por Javier Marcano 02/04/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--}}

        .excel {
        margin-top: 2px;
        margin-bottom: 2px;
        /*background-color: #3ca23c !important;*/
        background: #3ca23c !important;
        color: white !important;
        border-color: #3ca23c !important; ;
    }

    .excel:hover{
        transform: scale(1.1);
        border-color: #aaa;
        transition: all .2s;
    }
    .pdf {
        margin-top: 2px;
        /*background-color: #dc2f2f !important;*/
        background : #dc2f2f !important;
        color: white !important;
        border-color:#dc2f2f !important ;
    }
    .pdf:hover{
        transform: scale(1.1);
        border-color: #aaa;
        transition: all .2s;
    }
</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('HOLAAAAAAAAA' +data.mensaje.mensaje['entidadRespuesta'][0]);

                    if(data.mensaje.mensaje['codrespuesta'] == "CODE_000"){
                        mensaje_1= data.mensaje.mensaje['mensaje'];
                    }else if(data.mensaje.mensaje['codrespuesta']== "CODE_004"){
                        mensaje_1= data.mensaje.mensaje['entidadRespuesta'][0];
                    }
                    $('#contenedor').html(mensaje_1);
                    $('#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 table =$('#example').DataTable();
        table.clear().draw();


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

        var table =$('#example').DataTable();

            $.ajax({
            url:  "{{url('canguroazul/reportesAliados')}}",
            async: true,
            type: 'get',
            data: {codcliente:CodCliente,tipoestatus:TipoEstatus,tipofecha:TipoFecha,fechadesde:FechaDesde,fechahasta:FechaHasta,fechaProDesde:FechaProDesde,fechaProHasta:FechaProHasta},
                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) {
                 //   console.debug('data: ' + JSON.stringify(data));
                //alert('Hollaaaaaa');

                    hidePleaseWait();
                    //console.log('Respuesta: ');
                    //console.log(data);
                   // console.debug('respuesta ' + 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) {
                       // if((value[0].codservicio != "") || (value[0].codservicio != null) || (value[0].codservicio != NULL)){
                     //   console.debug('servicio ' + value.codservicio);
                            var serv = value.codservicio;
                        TotalPieza = parseFloat(TotalPieza) + parseFloat(value.numeropie);
                        TotalPeso = parseFloat(TotalPeso) + parseFloat(value.pesobru);
                        var fecha_;
                        if(value.fecha === null){
                            fecha_ = '';
                        }else{
                            fecha_ = formato(value.fecha);
                        }

                        var fecha_pro;
                        if(value.fechapro === null){
                            fecha_pro = '';
                        }else{
                            fecha_pro = formato(value.fechapro);
                        }

                        if (serv == 1) {
                            {{--var codguiacod = value.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.servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value.codguia + ');" style="cursor: pointer" >' + value.servicio.siglas + ' </a></b>';
                                    // } else {
                                    //     // console.log(datam);
                                    //     // if (datam.datamonto.consultadetalle.codrespuesta == 'COD_000') {
                                    //         servicio = '<b title="' + value.servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value.codguia + ');" style="cursor: pointer" >' + value.servicio.siglas + ' <span class="glyphicon glyphicon-credit-card"></span></a></b>';
                                    //     // } else {
                                    //     //     servicio = '<b title="' + value.servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor: pointer; color: #4F8A10;" ><a  onclick="javascript:getModalData(' + value.codguia + ');" style="cursor: pointer" >' + value.servicio.siglas + ' </a></b>';
                                    //     // }
                                    // }
                                // },
                                // error: function (mensaje) {
                                //     console.log(mensaje);
                                // }
                            // });
                        } else {
                            if(value.servicio == null){
                                servicio = "";
                            }else{
                                servicio = '<a title="' + value.servicio.nombre + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default; color: #4F8A10;" >' + value.servicio.siglas + '</a>';

                            }
                        }
                   // }
                        var dt = new Date();
                        var dtfecha= moment(dt).format('YYYY-MM-DD');
                        if(value.fechaod == null){
                            var fechaInicio = value.fecha;
                        }else {
                            var fechaInicio = value.fechaod;
                        }
                       // console.debug(fechaInicio);
                        var diashabilesestatusod = workingDaysBetweenDates(fechaInicio,dtfecha)-1;

                        //console.log('Guia: ' + value.codguia + ' - Dias: '+ diashabilesestatusod);

                        var diasretrasoestatusod=diashabilesestatusod-value.diasfer;

                        if((value.servicioestatus == null) || (value.servicioestatus.diasmax == null)|| (value.servicioestatus.diasmax == "")){
                            var diasmax_ = 15;
                        }else{
                            var diasmax_ = value.servicioestatus.diasmax;
                        }
                      //  console.log('Dias max: '+ diasmax_);

                        var dias_vence=0;

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

                        if (value.calidadcasosenv != null || '') {
                            reclamo = '<b><a title="' + value.calidadcasosenv.calidadcasos.calidadestatus.descripcion + '"  class="blue-tooltip tool" data-toggle="tooltip" data-placement="top" style="cursor:default">SI</a></b>';
                        }else{
                            reclamo='';
                        }
                        if (value.trackingges.length > 0) {
                            var cg = value.trackingges.length - 1;
                            gestion = '<b><a title="' + value.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.codguia + "' class='blue-tooltip tool' data-toggle='tooltip' data-placement='top' onclick='javascript:getModalTracking(" + value.codguia + ");' >" + value.codguia + "</a></td><td>" + (fecha_) + "</td><td>" + (fecha_pro) + "</td><td>" + servicio + "</td><td><b title='" + value.estatus.nombre + "' class='blue-tooltip tool data-toggle='tooltip' data-placement='top' style='cursor:default; color: #4F8A10'>" + value.estatus.siglas + "</b></td>" + Dias + "<td>" + value.destinatario.toUpperCase() + "</td><td>" + value.numeropie + "</td><td>" + value.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--}}
        {{--@php dd($Entregados) @endphp--}}
    <input type="hidden" id="codigocli" value="{{ $data['codcliente'] }}">
    <div class="col-lg-12 col-lg-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" style=" padding:0; margin:0;">
                            <tr>
                                <td class="" colspan="2"  data-width="fit"  style="text-align: left; background-color: #d9edf7;" >
                                    <select id="estatusguia" class="selectpicker" title="Seleccione el Tipo de Estatus" data-style="btn-primary" data-width="fit">
                                        <option value="1" data-icon="glyphicon glyphicon-check" selected="selected">Pendientes</option>
                                        <option value="2" data-icon="glyphicon glyphicon-remove">Devueltos</option>
                                        <option value="3" data-icon="glyphicon glyphicon-ok">Entregados</option>
                                        {{--<option value="4" data-icon="glyphicon glyphicon-lock">Cerrados</option>--}}
                                        <option value="5" data-icon="glyphicon glyphicon-th-list">Todos</option>
                                    </select>
                                </td>
                                <td class="" colspan="2"  data-width="fit"  style="text-align: left; background-color: #d9edf7;" >
                                    <select id="tipofecha" class="selectpicker" title="Seleccione el Tipo de Fecha" data-style="btn-primary" data-width="fit">
                                        <option value="1" data-icon="glyphicon glyphicon-calendar" selected="selected">Fecha Creación</option>
                                        <option value="2" data-icon="glyphicon glyphicon-time">Fecha Proceso</option>
                                    </select>
                                </td>
                                <td colspan="3" style="text-align: left; background-color: #d9edf7;">
                                    <div>
                                        <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>
                                    </div>
                                </td>
                                <td colspan="3" style="text-align: left; background-color: #d9edf7;">
                                    <div>
                                        <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>
                                    </div>
                                </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>
                            <br>
                            <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" style="margin-top: 150px;">>
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header table-titulos" >

                    <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-primary " data-dismiss="modal">Cerrar</button>
                </div>
            </div>

        </div>
    </div>

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

    <link rel="stylesheet" type="text/css" href="{{ asset('DataTables/datatables.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('/plugins/font-awesome/css/fontawesome.css') }}">
    <link href="{!! asset('/plugins/fontawesome/font-awesome.css')  !!}" rel="stylesheet">
    <link href="{!! asset('/plugins/font-awesome/css/all.css')  !!}" rel="stylesheet">
    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('DataTables/datatables.min.js') !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/font-awesome/js/fontawesome.js')  !!}"></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'//,'pdfHtml5'
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel-o"></i> Excel',
                       // title: 'Reporte de Guias',
                        titleAttr: 'Excel',
                        className: 'btn btn-app export excel'
                    },
                    {
                        extend:    'pdfHtml5',
                        text:      '<i class="fa fa-file-pdf-o"></i> PDF',
                       // title:'Reporte de Envios Retenidos',
                        orientation: 'landscape',
                        titleAttr: 'PDF',
                        className: 'btn btn-app-pdf export pdf',

                        customize:function(doc) {

                            doc.styles.title = {
                                color: '#4c8aa0',
                                fontSize: '20',
                                alignment: 'center'
                            },
                                doc.styles['td:nth-child(2)'] = {
                                    width: '100px',
                                    background : 'white',
                                    'max-width': '100px'
                                },
                                doc.styles.tableHeader = {
                                    fillColor:'#4c8aa0',
                                    color:'white',
                                    alignment:'center'
                                },
                                doc.content[1].margin = [ 10, 0, 10, 0 ]

                        }
                    }
                ],
                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 () {
            $('#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);
            });
        });
    </script>

@endsection