@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;">SELURUH<br>TAHAPAN</th>
                <th style="vertical-align: middle; text-align: center;">TAHAPAN<br>KAMPANYE</th>
                <th style="vertical-align: middle; text-align: center;">TAHAPAN<br>MASA TENANG</th>
                <th style="vertical-align: middle; text-align: center;">TAHAPAN PEMUNGUTAN<br>DAN PENGHITUNGAN SUARA</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_rekapnew2.daftar") }}',
        columns: [
            { data: 'jenis', name: 'jenis' },
            { data: 'seluruh_tahapan', name: 'seluruh_tahapan' },
            { data: 'tahapan_kampanye', name: 'tahapan_kampanye' },
            { data: 'tahapan_masa_tenang', name: 'tahapan_masa_tenang' },
            { data: 'tahapan_pemungutan', name: 'tahapan_pemungutan' },
        ],
        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