@extends('be.layout-index-rekappemilu')

@section('content')
<div>
    <!--
    <h3>Users Table with Dynamic Columns</h3>
    <button class="btn btn-primary mb-2" id="toggleColumns">Toggle Columns</button>

    <table id="users-table" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>No</th>
                <th>Status Laporan</th>
                <th>Ringkasan</th>
            </tr>
        </thead>
    </table>
    -->
    <table width="100%" id="users-table" class="table table-bordered table-striped">
        <thead style="background-color: #c1b6b6;">
            <tr>
                <th style="vertical-align: middle; text-align: center;">TAHAPAN</th>
                <th style="vertical-align: middle; text-align: center;">PELANGGARAN</th>
                <th style="vertical-align: middle; text-align: center;">BUKAN PELANGGARAN</th>
                <th style="vertical-align: middle; text-align: center;">PROSES PENANGANAN</th>
            </tr>
        </thead>
    </table>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css"/>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>

<script>
$(function() {
    var table = $('#users-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("m_rekapnew4.daftar") }}',
        columns: [
            { data: 'tahapan', name: 'tahapan' },
            { data: 'pelanggaran', name: 'pelanggaran' },
            { data: 'bukan_pelanggaran', name: 'bukan_pelanggaran' },
            { data: 'proses_penanganan', name: 'proses_penanganan' },
        ],
        columnDefs: [
            { targets: '_all', className: 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        
    });

    // Example custom button to toggle all columns
    $('#toggleColumns').on('click', function() {
        table.columns().every(function(index) {
            var column = table.column(index);
            column.visible(!column.visible());
        });
    });
});
</script>
@endsection