@extends('layouts/master')
@section('container-fluid')
    <!-- Metas para la Página -->
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <!-- Librerias Styles para la Página -->
    <link href="{!! asset('/plugins/fontawesome/font-awesome.css')  !!}" rel="stylesheet">
    <link href="{!! asset('/plugins/DataTables/1-10-9/css/dataTables.bootstrap4.min.css')  !!}" rel="stylesheet">
    <link href="{!! asset('/plugins/DataTables/1-10-9/css/buttons.bootstrap4.min.css')  !!}" rel="stylesheet">

    {{--<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>--}}
    {{--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.css"/>--}}
    {{--<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">--}}
    {{--<link href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">--}}
    {{--<link href="{!! asset('/plugins/tablesaw-master/dist/tablesaw.css')  !!}" rel="stylesheet">--}}

    <!-- Styles página -->
    <style>
        .section__content--p35 {
            padding: 0 35px;
        }

        .table-responsive.table--no-card {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 10px;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
        }
        .m-b-30 {
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 20px;
        }

        .table-earning thead th {
            background: rgb(30, 115, 183);
            font-size: 11px;
            color: #fff;
            vertical-align: middle;
            font-weight: 200;
            text-transform: capitalize;
            line-height: 1;
            /*padding: 12px 22px;*/
            white-space: nowrap;
        }

        .table-earning thead th.text-right {
            padding-left: 15px;
            padding-right: 65px;
        }

        .table-earning tbody td {
            color: #808080;
            /*padding: 12px 22px;*/
            white-space: nowrap;
            font-size: 12px;

        }

        .table-earning tbody td.text-right {
            padding-left: 15px;
            padding-right: 65px;
        }

        .table-earning tbody tr:hover td {
            color: #555;
            cursor: pointer;
        }
        .card-subtitle {
            margin-top: -0.375rem;
            margin-bottom: 0;
        }
        /*Estilos Carmen Gomez Para Modulo de Liquidacion Alaidos Creados 05-09-2018*/

        .panel-theme {
            background-color: #FFFFFF;
            border: none;
            box-shadow: 1px 2px 6px rgba(0, 0, 0, .2);
        }

        .panel-heading {
            background-color: #0076be;
            border: none;
        }
        /*.panel-footer {*/
            /*background-color: white;*/
            /*border: none;*/
        /*}*/

        .panel-title {
            font-weight: bold;
        }
        .panel-primary {
        extend(. panel-theme);
        }

        .panel-heading {
            padding: 0.75rem 1.25rem;
            margin-bottom: 0;
            background-color: #0076be;
            color: white;
        }
        .panel-footer {
            padding: 0.75rem 1.25rem;
            margin-bottom: 0;
            background-color: #F0F0F0;
            font-size: 12px;

        }
        .margen{
            margin-top: 5%;
        }
        td{
            text-align:center;
        }
        th{
            text-align:center;
        }
        .tooltip-inner {
            background-color: #0076C0;
            color: #FFFFFF;
            border: 1px solid #004672;
            padding: 2px;
            font-size: 12px;
        }
        .excel {
            background-color: #3ca23c !important;
            color: white;
            border-color: #3ca23c !important; ;
            margin-right: 5px;
            margin-left: 5px;
        }

        .excel:hover{
            transform: scale(1.1);
            border-color: #aaa;
            transition: all .2s;
            color: white;
        }
        .pdf {
            background-color: #dc2f2f !important;
            color: white;
            border-color:#dc2f2f !important ;
            margin-right: 5px;
            margin-left: 5px;
        }
        .pdf:hover{
            transform: scale(1.1);
            border-color: #aaa;
            transition: all .2s;
            color: white;
        }
        .imprimir {
            background-color: #8766b1 !important;
            color: white;
            border-color:#8766b1 !important ;
            margin-right: 5px;
            margin-left: 5px;
        }
        .imprimir:hover{
            transform: scale(1.1);
            border-color: #aaa;
            transition: all .2s;
            color: white;
        }

        .colvis {
            background-color: #00b0ff !important;
            color: white;
            border-color: #00b0ff !important; ;
            margin-right: 5px;
            margin-left: 5px;
        }

        .colvis:hover{
            transform: scale(1.1);
            border-color: #aaa;
            transition: all .2s;
            color: white;
        }
    </style>

    <div class="row">
    <div class="col-md-6  col-sm-offset-3">
        <div class="panel panel-theme">
        <div class="panel-heading"><h5 class="text-center card-subtitle panel-title">HISTORICO MODIFICACION DATOS DE DEVOLUCION</h5></div>
        <div class="panel-body">
            <div class="col-md-12" style="text-align: center;">
            <form id="form_historico" role="form" action="{{ url('LiquidacionAliados/HistoricoModificacionDevolucion') }}" id="modifcar" name="modifcar" method="get">

                <div class="col-md-7" id="idguia">
                    <div class="input-group">
                     <span class="input-group-addon"><i class="glyphicon glyphicon-search" data-toggle="tooltip"
                                                        data-placement="left"
                                                        title='Ingrese Número de Guía'></i></span>
                    <input type="text" class="form-control" name="codguia" id="codguia"
                           required
                           placeholder="Ingrese un número de Guía"
                           maxlength="20"
                           data-container="body"
                           data-placement="bottom"
                           data-msg-required="Este campo es Requerido."
                           data-msg-minlength="Debes ingresar al menos 3 caracteres."
                           data-rule-minlength="3">
                </div>
                </div>
                    <div class="col-md-5"><button type="submit" class="btn btn-primary" id="load"
                                     data-loading-text="<i class='glyphicon glyphicon-refresh spinning '></i> Procesando.."
                                     data-style="expand-right">Aceptar
                    </button>
                    </div>


            </form>
            </div>
        </div>
            <div class="panel-footer"><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>
        </div>
        </div>
    </div>

    {{--{!! dd($response['codrespuesta']) !!}--}}

    <input type="hidden" id="url" data-url="{{ route('getConsumirAjax') }}">
    @if($response['codrespuesta']!="CODE_002" && $response['codrespuesta']!="CODE_000")
    <div class="col-md-12">
        {{--<div class="panel panel-theme">--}}
            {{--<div class="panel-heading"><h5 class="text-center card-subtitle panel-title">HISTORICO MODIFICACION DATOS DE DEVOLUCION</h5></div>--}}
            {{--<div class="panel-body">--}}

                    <div class="table-responsive">
                        <table id="HistoricoModificacionDevolucion" class="table display table-earning">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nro Guia</th>
                                <th>CodDestinario</th>
                                <th>Oficinades</th>
                                <th>Oficinaret</th>
                                <th>fecha</th>
                                <th>Direcciondes</th>
                                <th>Paisdes</th>
                                <th>Ciudaddes</th>
                                <th>inmueble</th>
                                <th>parroquia</th>
                                <th>Municipio</th>
                                <th>Estado</th>
                                <th>zonapostal</th>
                                <th>Celular</th>
                                {{--<th>codtelefonocel</th>--}}
                                <th>Nombredes</th>
                                <th>Contactodes</th>
                                <th>Documento_id</th>
                                <th>Telefono</th>
                                {{--<th>codtelefonodev</th>--}}
                                <th>Codguiage</th>
                                <th>codcasillero</th>
                                <th>fecha_mod</th>
                                <th>Hora</th>
                                <th>Usuario</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php $i=1;
                            @endphp
                            @foreach($response['entidadRespuesta'] as $data)
                                <tr>
                                <td>{!! $i !!}</td>
                              <td>{!! $data['codguia'] !!}</td>
                              <td>{!!  $data['coddestinatario'] !!}</td>
                              <td>{!!  $data['ciudaddestino']['oficinaoperativa']['nombre'] !!}</td>
                              <td>{!!  $data['oficina']['nombre'] !!}</td>
                              <td>{!!  \Carbon\Carbon::parse($data['fecha'])->format('d/m/Y') !!}</td>
                              <td>{!!  $data['direcciondes'] !!}</td>
                              <td>{!!  $data['ciudaddestino']['listpais']['nombre'] !!}</td>
                              <td>{!!  $data['ciudaddestino']['nombre'] !!}</td>
                              <td>{!!  $data['inmueble'] !!}</td>
                              <td>{!!  $data['parroquia'] !!}</td>
                              <td>{!!  $data['municipio'] !!}</td>
                              <td>{!!  $data['ciudaddestino']['estado']['nombre'] !!}</td>
                              <td>{!!  $data['zonapostal'] !!}</td>
                              <td>{!!  $data['codigocelular']['codigo'].'-'.$data['telefonocel'] !!}</td>
                              {{--<td>{!!  $data['codigocelular'] !!}</td>--}}
                              <td>{!!  $data['nombredes'] !!}</td>
                              <td>{!!  $data['contactodes'] !!}</td>
                              <td>{!!  $data['documento_id'] !!}</td>
                              <td>{!! $data['codigoarea']['codigoarea'].'-'.$data['telefonodev'] !!}</td>
                              {{--<td>{!!  $data['codtelefonodev'] !!}</td>--}}
                              <td>{!!  $data['codguiage'] !!}</td>
                              <td>{!!  $data['codcasillero'] !!}</td>
                              <td>{!!  \Carbon\Carbon::parse($data['fecha_mod'])->format('d/m/Y') !!}</td>
                              <td>{!!  $data['hora'] !!}</td>
                              <td>{!!  @$data['usuario']['nombre'] !!}</td>
                                </tr>
                              @php
                                $i++
                              @endphp
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
        @elseif($response['codrespuesta']=="CODE_000")
        <div class="row">
            <div class="col-md-8  col-sm-offset-2">
                <div class="panel panel-theme">
                <div class="panel-heading"><h5 class="text-center card-subtitle panel-title"></h5></div>
                <div class="panel-body">
        <div class="alert alert-danger" role="alert"  style="text-align:center;">{!! $response['mensaje'] !!}</div>
                </div>
                </div>
        </div>

    @endif

        {{--</div>--}}
    {{--</div>--}}
@endsection
@section('script')
    <script src="/faaszoom/public/bootstrap_3_3_6/datepicker/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/datatables.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/dataTables.bootstrap.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/datatables.buttons.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/buttons.bootstrap.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/jszip.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/pdfmake.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/vfs_fonts.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/buttons.html5.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/buttons.print.min.js')!!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/plugins/DataTables/1-10-9/buttons.colVis.min.js')!!}"></script>



    {{--<script type="text/javascript" src="DataTables/datatables.min.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.js"></script>--}}


    {{--<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.min.js"></script>--}}
    {{--<script type="text/javascript" src="{!! URL::asset('/plugins/tablesaw-master/dist/tablesaw.js')!!}"></script>--}}
    {{--<script type="text/javascript" src="{!! URL::asset('/plugins/tablesaw-master/dist/tablesaw-init.js')!!}"></script>--}}
    <script>
        $(document).ready(function () {
            $("#form_historico").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS V�LIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INV�LIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
            // $('[data-toggle="tooltip"]').tooltip();
            var Fecha_ = new Date();
            var options = { year: 'numeric', month: 'long', day: 'numeric' };
            Fecha_ = Fecha_.toLocaleDateString("es-ES", options);
            $('#HistoricoModificacionDevolucion').DataTable({
                language: {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible.",
                    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar:",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    },
                    // buttons: {
                    //     colvis: 'Columnas '
                    // }
                },
                dom: 'Bfrtip',
                columnDefs: [
                    {
                        "targets": [ 2 ],
                        "visible": false,
                    },
                    {
                        "targets": [ 3 ],
                        "visible": false
                    },
                    {
                        "targets": [ 19 ],
                        "visible": false
                    }
                    ],

                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fa fa-align-left"></i> Columnas',
                        className: 'btn colvis',
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fa fa-file-excel-o"></i> Excel',
                        className: 'btn excel',
                        // exportOptions: {
                        //     columns: [ 0, 1, 2, 3, 4, 5, 6 ,7]
                        // },
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: 'HISTORICO MODIFICACION DE DATOS DE DEVOLUCION ',
                        // filename: 'REPORTE CALIDAD ALIADOS '+Fecha_
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        className: 'btn pdf',
                        orientation:'landscape',
                        pageSize:'LEGAL',
                        // exportOptions: {
                        //     columns: [ 0, 1, 2, 3, 4, 5, 6 ,7]
                        // },
                        exportOptions: {
                            columns: ':visible',
                        },

                        title: 'HISTORICO MODIFICACION DE DATOS DE DEVOLUCION',
                        // filename: 'REPORTE CALIDAD ALIADOS '+Fecha_,
                        customize: function(doc) {
                            doc.styles.tableHeader = {
                                fillColor:'#F0EEED',
                                color:'black',
                            }
                            doc.styles.tableBodyEven = {
                                background: 'white',
                            }
                            doc.styles.tableBodyOdd = {
                                background: 'white',
                            }
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fa fa-print"></i> Print',
                        className: 'btn imprimir',
                        orientation:'landscape',
                        pageSize:'LEGAL',
                        // exportOptions: {
                        //     columns: [ 0, 1, 2, 3, 4, 5, 6 ,7]
                        // },
                        exportOptions: {
                            columns: ':visible'
                        },
                        title: 'HISTORICO MODIFICACION DE DATOS DE DEVOLUCION'
                    }
                ]
            });
        });

        // TablesawConfig = {
        //     getColumnToggleLabelTemplate: function( text ) {
        //         return "<label><input type='checkbox' checked><span>" + text + "</span></label>";
        //     }
        // };

       </script>
@endsection