@extends('construction.admin.master.master')

@section('css')
    <link rel="stylesheet" href="{{url(asset('admin/assets/vendor/datatables/media/css/dataTables.bootstrap5.css'))}}" />
@endsection


@section('content')
    <div class="row">
        <div class="col">
            <section class="card">
                <header class="card-header">
                    <div class="card-actions">
                        <a href="#" class="card-action card-action-toggle" data-card-toggle></a>
                        <a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
                    </div>
                    <h4 class="card-title">{{$pageName}}</h4>
                </header>
                <div class="card-body">
                    <table class="table table-bordered table-striped table-no-more mb-0" id="datatable-tabletools" style="width: 100%">
                        <thead>

                        <tr>
                            <th class="text-end">Parcela</th>
                            <th class="text-end">Status</th>
                            <th class="text-end">Tipo</th>
                            <th class="text-end">Venc.</th>
{{--                            <th class="text-end">Valor</th>--}}
                            <th class="text-center">Valor Pag.</th>
                            <th class="text-center">Data Pag.</th>
{{--                            <th class="text-end">Descrição</th>--}}
{{--                            <th class="d-lg-none">Cadastrato em</th>--}}
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($pagamentos as $pagamento)
                            <tr>
                                <td data-title="Parcela">{{$pagamento->Parcela}}</td>
                                <td data-title="Status"><span class="badge badge-success" style="font-weight: 100;"><i class="fa-regular fa-circle-check"></i> Pago</span></td>
                                <td data-title="Tipo">{{$pagamento->Tipo}}</td>
                                <td data-title="Vencimento">{{$pagamento->Vencimento}}</td>
{{--                                <td data-title="Valor">{{$pagamento->Valor}}</td>--}}
                                <td data-title="Valor Pago" class="text-center">R${{$pagamento->ValorPago}}</td>
                                <td data-title="Data Pagamento" class="text-center">{{$pagamento->DataPagamento}}</td>
{{--                                <td data-title="Descrição">{{$pagamento->Descricao}}</td>--}}
{{--                                <td><button class="btn" onclick="preenche('{{$filial->Id}}','{{$pagamento->Id}}','{{route('admin.financeiro.pagamentos.emitir.boleto')}}')"><i class="icon-printer icons"></i></button></td>--}}
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/jquery.dataTables.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/dataTables.bootstrap5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/dataTables.buttons.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.bootstrap4.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.html5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.print.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/JSZip-2.5.0/jszip.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/pdfmake.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/vfs_fonts.js'))}}"></script>
    <!-- Examples -->
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.default.js'))}}"></script>
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.row.with.details.js'))}}"></script>
{{--    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.tabletools.js'))}}"></script>--}}

    <script>

        (function($) {

            'use strict';

            var datatableInit = function() {
                var $table = $('#datatable-tabletools');

                var table = $table.dataTable({
                    sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
                    buttons: [
                        // {
                        // 	extend: 'print',
                        // 	text: 'Print'
                        // },
                        {
                            extend: 'excel',
                            text: 'Excel'
                        },
                        {
                            extend: 'pdf',
                            text: 'PDF',
                            customize : function(doc){
                                var colCount = new Array();
                                $('#datatable-tabletools').find('tbody tr:first-child td').each(function(){
                                    if($(this).attr('colspan')){
                                        for(var i=1;i<=$(this).attr('colspan');$i++){
                                            colCount.push('*');
                                        }
                                    }else{ colCount.push('*'); }
                                });
                                doc.content[1].table.widths = colCount;
                            }
                        }
                    ],

                    responsive: true,
                    "order": [[ 0, "desc" ]],
                    "pageLength": 10,
                    "language": {
                        "sEmptyTable": "Nenhum registro encontrado",
                        "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                        "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sInfoThousands": ".",
                        "sLengthMenu": " Exibir _MENU_ entradas",
                        "sLoadingRecords": "Carregando...",
                        "sProcessing": "Processando...",
                        "sZeroRecords": "Nenhum registro encontrado",
                        "sSearch": "Pesquisar",
                        "oPaginate": {
                            "sNext": "Próximo",
                            "sPrevious": "Anterior",
                            "sFirst": "Primeiro",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": Ordenar colunas de forma ascendente",
                            "sSortDescending": ": Ordenar colunas de forma descendente"
                        }
                    }
                });

                $('<div />').addClass('dt-buttons mb-2 pb-1 text-end').prependTo('#datatable-tabletools_wrapper');

                $table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );

                $('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
            };

            $(function() {
                datatableInit();
            });

        }).apply(this, [jQuery]);
    </script>
@endsection
@section('modais')

@endsection