@extends('layouts/master')
@section('content')
<!-- 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">
<!-- 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);
    }
    .m-b-30 {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 20px;
    }

    .table-earning thead th {
        background: rgb(30, 115, 183);
        font-size: 14px;
        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;
    }
    .badge {
        color:#FFFFFF;
        background-color: #00000;
    }

    .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: white;

    }
    .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 {
        margin-top: -15px;
        margin-bottom: 2px;
        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 {
        margin-top: -15px;
        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 {
        margin-top: -15px;
        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;
    }
</style>
<input type="hidden" id="url" data-url="{{ route('getConsumirAjax') }}">
<div class="col-md-12 margen">
    <div class="panel panel-theme">
        <div class="panel-heading"><h5 class="text-center card-subtitle panel-title">REPORTE DEVOLUCIONES NO SINCRONIZADAS</h5></div>
        <div class="panel-body">
            <div class="row col-md-12">
                <div class="table-responsive table--no-card m-b-30">
                    <br>
                    <table id="ReporteCalidad" class="table table-borderless table-striped table-earning">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nro Guia</th>
                            <th>Servicio</th>
                            <th>Fecha</th>
                            <th>Cliente</th>
                            <th>Teléfono</th>
                        </tr>
                        </thead>
                        <tbody>
                        @php $i=1;
                        @endphp
                        @foreach($response['entidadRespuesta'] as $reporte)
                            @php
                                $date = date_create($reporte['fecha']);
                                $fecha = date_format($date, 'd-m-Y');
                            @endphp
                        <tr>
                            <td>{{$i}}</td>
                            <td><a href="LiquidacionAliados/TrackingReporteCalidad?id={{$reporte['codguia']}}" target="_blank">{{$reporte['codguia']}}</a></td>
                            <td>{{$reporte['servicio']['nombre']}}</td>
                            <td>{{$fecha}}</td>
                            <td>{{$reporte['codcliente'].' - '.$reporte['usuario_g_e']['nombre']}}</td>
                            <td>{{$reporte['usuario_g_e']['telefono']}}</td>
                        </tr>
                            @php $i++ @endphp
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="id_modal_conf"></div>
<div id="id_modal_conf_quitar"></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-1.10.9.bootstrap4.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.bootstrap4.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>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        var Fecha_ = new Date();
        var options = { year: 'numeric', month: 'long', day: 'numeric' };
        Fecha_ = Fecha_.toLocaleDateString("es-ES", options);
        $('#ReporteCalidad').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"
                }
            },
            dom: 'Bfrtip',
            buttons: [
                {
                    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]
                    },
                    title: 'REPORTE CALIDAD ALIADOS '+Fecha_,
                    filename: 'REPORTE CALIDAD ALIADOS '+Fecha_
                },
                {
                    extend: 'pdf',
                    text: '<i class="fa fa-file-pdf-o"></i> PDF',
                    className: 'btn pdf',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, 6 ,7]
                    },
                    title: 'REPORTE CALIDAD ALIADOS '+Fecha_,
                    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',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, 6 ,7]
                    },
                    title: 'REPORTE CALIDAD ALIADOS '+Fecha_
                }
            ]
        });
    });
</script>
@endsection