@extends('layouts.mainlayout')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap4.min.css">
@endpush
@section('content')

<p class="txt-naranja">* Ya puedes recibir tu boleta de pago en tu correo electrónico. <strong><a href="/tramites" style="color: #ff9c06">Solicítala aquí.</a></strong></p>

<div class="facturas">
    <!-- Single bloque desplegable -->
    <div class="box-desplegable">
        <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span> Últimas
            boletas </h4>
        <div class="contenido-box-desplegable">
            <div class="table-responsive-sm">
                <table id="facturas" class="table table-width-100">
                    <thead>
                        <tr>
                            <th>Referencia</th>
                            <th>Fecha Emisión</th>
                            <th>Monto Facturado</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        {!!$lista_boletas!!}
                    </tbody>
                </table>
            </div>
            <!--table-responsive-->
        </div>
    </div>
    <!-- Single bloque desplegable -->

</div>
@endsection
@push('scripts')

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.13/dataRender/datetime.js"></script>
<script>
    $(document).ready(function() {
  
    $('#facturas').DataTable({
        "order": [[ 2, "desc" ]],
        responsive: true,
        autoWith: true,
        "language": {
        "lengthMenu": "Mostrar _MENU_ registros por página",
        "zeroRecords": "No se encontraron registros",
        "info": "Mostrando _PAGE_ de _PAGES_ páginas",
        "infoEmpty": "No hay registros disponibles",
        "infoFiltered": "(filtrado de _MAX_ registros totales)",
        "search": "Buscar: ",
        "paginate":{
            "next": "Siguiente",
            "previous": "Anterior"
        }
        }
    });
    } );
    
</script>
@endpush