@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 rowspan="2" style="vertical-align: middle; text-align: center;">NO</th>
                <th rowspan="2" style="vertical-align: middle; text-align: center;">PROVINSI</th>
                <th colspan="3" style="vertical-align: middle; text-align: center;">TEMUAN</th>
                <th colspan="3" style="vertical-align: middle; text-align: center;">LAPORAN</th>
                <th colspan="2" style="vertical-align: middle; text-align: center;">HASIL PENANGANAN PELANGGARAN</th>
                <th colspan="4" style="vertical-align: middle; text-align: center;">JENIS PELANGGARAN</th>
                <th rowspan="2" style="vertical-align: middle; text-align: center;">PROSES PENANGANAN PELANGGARAN</th>
            </tr>
            <tr>
                <th style="vertical-align: middle; text-align: center;">REGISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">TIDAK REGISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">BELUM REGISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">REGISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">TIDAK REGISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">BELUM DIREGISTRASI</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;">ADMINISTRASI</th>
                <th style="vertical-align: middle; text-align: center;">KODE ETIK</th>
                <th style="vertical-align: middle; text-align: center;">PIDANA</th>
                <th style="vertical-align: middle; text-align: center;">HUKUM LAIN</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_rekapnew.daftar") }}',
        columns: [
            { data: 'no_urut', name: 'no_urut' },
            { data: 'provinsi', name: 'provinsi' },
            { data: 'temuan_registrasi', name: 'temuan_registrasi' },
            { data: 'temuan_tidak_registrasi', name: 'temuan_tidak_registrasi' },
            { data: 'temuan_belum_registrasi', name: 'temuan_belum_registrasi' },
            
            { data: 'laporan_registrasi', name: 'laporan_registrasi' },
            { data: 'laporan_tidak_registrasi', name: 'laporan_tidak_registrasi' },
            { data: 'laporan_belum_registrasi', name: 'laporan_belum_registrasi' },
            
            { data: 'pelanggaran', name: 'pelanggaran' },
            { data: 'bukan_pelanggaran', name: 'bukan_pelanggaran' },
            
            { data: 'administrasi', name: 'administrasi' },
            { data: 'kode_etik', name: 'kode_etik' },
            { data: 'pidana', name: 'pidana' },
            { data: 'hukum_lain', name: 'hukum_lain' },
            { data: 'proses_penanganan', name: 'proses_penanganan' },
        ],
        dom: 'Bfrtip',
        order: [[1, 'asc']],
    });

    // 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