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

@section('content')
<div>
    <div>
        <select id="filterSelect" class="form-control" style="width:100%;">
            <option value="">-- Pilih Jenis Rekap --</option>
            <option value="2">JUMLAH PENERIMAAN</option>
            <option value="3">REGISTRASI LAPORAN/TEMUAN</option>
            <option value="4">HASIL PENANGANAN PELANGGARAN</option>
            <option value="5">JENIS PELANGGARAN</option>
            <option value="6">DUGAAN PELANGGARAN NETRALITAS ASN</option>
            <option value="7">TREN PELANGGARAN ADMINISTRASI</option>
            <option value="8">TREN TINDAK PIDANA</option>
            <option value="9">TREN PELANGGARAN KODE ETIK</option>
            <option value="10">TREN PELANGGARAN HUKUM LAINNYA</option>
            <option value="11">DATA PELANGGARAN PROVINSI</option>
        </select>
    </div>
    
    <div id="rekap2-wrapper" style="display:none;">
        <table width="100%" id="rekap2" 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>    
    
    <div id="rekap3-wrapper" style="display:none;">
        <table width="100%" id="rekap3" 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;">TEMUAN</th>
                    <th style="vertical-align: middle; text-align: center;">LAPORAN</th>
                    <th style="vertical-align: middle; text-align: center;">TIDAK REGISTRASI</th>
                    <th style="vertical-align: middle; text-align: center;">BELUM REGISTRASI</th>
                </tr>
            </thead>
        </table>
    </div>    
    
    <div id="rekap4-wrapper" style="display:none;">
        <table width="100%" id="rekap4" 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>    
    
    <div id="rekap5-wrapper" style="display:none;">
        <table width="100%" id="rekap5" 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;">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>
    
    <div id="rekap6-wrapper" style="display:none;">
        <table width="100%" id="rekap6" class="table table-bordered table-striped">
            <thead style="background-color: #c1b6b6;">
                <tr>
                    <th style="vertical-align: middle; text-align: center;">TEMUAN</th>
                    <th style="vertical-align: middle; text-align: center;">LAPORAN</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 PELANGGARAN</th>
                </tr>
            </thead>
        </table>
    </div>
    
    <div id="rekap7-wrapper" style="display:none;">
        <table width="100%" id="rekap7" class="table table-bordered table-striped">
            <thead style="background-color: #c1b6b6;">
                <tr>
                    <th style="vertical-align: middle; text-align: center;">TREN</th>
                    <th style="vertical-align: middle; text-align: right;">JUMLAH</th>
                </tr>
            </thead>
        </table>
    </div>
    
    <div id="rekap8-wrapper" style="display:none;">
        <table width="100%" id="rekap8" class="table table-bordered table-striped">
            <thead style="background-color: #c1b6b6;">
                <tr>
                    <th style="vertical-align: middle; text-align: center;">TREN</th>
                    <th style="vertical-align: middle; text-align: right;">JUMLAH</th>
                </tr>
            </thead>
        </table>
    </div>

    <div id="rekap9-wrapper" style="display:none;">
        <table width="100%" id="rekap9" class="table table-bordered table-striped">
            <thead style="background-color: #c1b6b6;">
                <tr>
                    <th style="vertical-align: middle; text-align: center;">TREN</th>
                    <th style="vertical-align: middle; text-align: right;">JUMLAH</th>
                </tr>
            </thead>
        </table>
    </div>

    <div id="rekap10-wrapper" style="display:none;">
        <table width="100%" id="rekap10" class="table table-bordered table-striped">
            <thead style="background-color: #c1b6b6;">
                <tr>
                    <th style="vertical-align: middle; text-align: center;">TREN</th>
                    <th style="vertical-align: middle; text-align: right;">JUMLAH</th>
                </tr>
            </thead>
        </table>
    </div>

    <div id="rekap11-wrapper" style="display:none;">
        <table width="100%" id="rekap11" class="table table-bordered tableexp">
            <thead style="background-color: #c1b6b6;">
                <tr role="row">
                    <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 role="row">
                    <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>    
</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>
var id_jenislaporan = ;
$(function() {
    var table2 = $('#rekap2').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew2.daftar") }}',*/
        ajax: null,
        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',
        
    });

    var table3 = $('#rekap3').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew3.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'tahapan', name: 'tahapan' },
            { data: 'temuan', name: 'temuan' },
            { data: 'laporan', name: 'laporan' },
            { data: 'tidak_registrasi', name: 'tidak_registrasi' },
            { data: 'belum_registrasi', name: 'belum_registrasi' },
        ],
        columnDefs: [
            { targets: '_all', className: 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        
    });

    var table4 = $('#rekap4').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew4.daftar") }}',*/
        ajax: null,
        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',
        
    });

    var table5 = $('#rekap5').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew5.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'tahapan', name: 'tahapan' },
            { data: 'administrasi', name: 'administrasi' },
            { data: 'kode_etik', name: 'kode_etik' },
            { data: 'pidana', name: 'pidana' },
            { data: 'hukum_lain', name: 'hukum_lain' },
        ],
        columnDefs: [
            { targets: '_all', className: 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        
    });

    var table6 = $('#rekap6').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew6.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'temuan', name: 'temuan' },
            { data: 'laporan', name: 'laporan' },
            { 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',
        
    });

    var table7 = $('#rekap7').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew7.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'jumlah_row', name: 'jumlah_row' },
        ],
        columnDefs: [
        {
          "targets": 0,
          "className": 'text-left',
        },
        {
          "targets": 1,
          "className": 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        order: [[1, 'desc']],
    });

    var table8 = $('#rekap8').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew8.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'jumlah_row', name: 'jumlah_row' },
        ],
        columnDefs: [
        {
          "targets": 0,
          "className": 'text-left',
        },
        {
          "targets": 1,
          "className": 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        order: [[1, 'desc']],
    });

    var table9 = $('#rekap9').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew9.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'jumlah_row', name: 'jumlah_row' },
        ],
        columnDefs: [
        {
          "targets": 0,
          "className": 'text-left',
        },
        {
          "targets": 1,
          "className": 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        order: [[1, 'desc']],
    });

    var table10 = $('#rekap10').DataTable({
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew10.daftar") }}',*/
        ajax: null,
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'jumlah_row', name: 'jumlah_row' },
        ],
        columnDefs: [
        {
          "targets": 0,
          "className": 'text-left',
        },
        {
          "targets": 1,
          "className": 'text-center' } // semua kolom rata tengah
        ],
        dom: 'Bfrtip',
        order: [[1, 'desc']],
    });
    
    var table11 = $('#rekap11').DataTable({
        scrollX: true,
        scrollY: 500,
        processing: true,
        serverSide: false,
        /*ajax: '{{ route("m_rekapnew.daftar") }}',
        ajax: {
            url: '{{ route("m_rekapnew.daftar") }}',
            data: function (d) {
                d.filter = $('#filterSelect').val();
            },
            dataSrc: "" 
        },*/        
        ajax: null, 
        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']],
        deferLoading: 0,
    });
    
    function sembunyikanwrapper() {
        table2.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap2-wrapper').hide();
        table3.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap3-wrapper').hide();
        table4.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap4-wrapper').hide();
        table5.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap5-wrapper').hide();
        table6.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap6-wrapper').hide();
        
        table7.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap7-wrapper').hide();
        
        table8.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap8-wrapper').hide();
        
        table9.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap9-wrapper').hide();
        
        table10.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap10-wrapper').hide();
        
        table11.clear().draw(); // kosongkan tabel jika filter dikosongkan
        $('#rekap11-wrapper').hide();
    }
    
    $('#filterSelect').on('change', function() {
        let val = $(this).val();
    
        if (val == '2') {
            // Set URL AJAX saat dibutuhkan
            table2.ajax = {
                url: '{{ route("m_rekapnew2.daftar") }}',
                data: function (d) {
                    d.filter = val;
                    d.id_jenislaporan = id_jenislaporan;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew2.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table2.clear();
                    table2.rows.add(response.data).draw();
                    $('#rekap2-wrapper').show();
                }
            });
        } else if (val == '3') {
            // Set URL AJAX saat dibutuhkan
            table3.ajax = {
                url: '{{ route("m_rekapnew3.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew3.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table3.clear();
                    table3.rows.add(response.data).draw();
                    $('#rekap3-wrapper').show();
                }
            });
        } else if (val == '4') {
            // Set URL AJAX saat dibutuhkan
            table4.ajax = {
                url: '{{ route("m_rekapnew4.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew4.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table4.clear();
                    table4.rows.add(response.data).draw();
                    $('#rekap4-wrapper').show();
                }
            });
        } else if (val == '5') {
            // Set URL AJAX saat dibutuhkan
            table5.ajax = {
                url: '{{ route("m_rekapnew5.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew5.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table5.clear();
                    table5.rows.add(response.data).draw();
                    $('#rekap5-wrapper').show();
                }
            });
        } else if (val == '6') {
            // Set URL AJAX saat dibutuhkan
            table6.ajax = {
                url: '{{ route("m_rekapnew6.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew6.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table6.clear();
                    table6.rows.add(response.data).draw();
                    $('#rekap6-wrapper').show();
                }
            });
        } else if (val == '7') {
            // Set URL AJAX saat dibutuhkan
            table7.ajax = {
                url: '{{ route("m_rekapnew7.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew7.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table7.clear();
                    table7.rows.add(response.data).draw();
                    $('#rekap7-wrapper').show();
                }
            });
        } else if (val == '8') {
            // Set URL AJAX saat dibutuhkan
            table8.ajax = {
                url: '{{ route("m_rekapnew8.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew8.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table8.clear();
                    table8.rows.add(response.data).draw();
                    $('#rekap8-wrapper').show();
                }
            });
        } else if (val == '9') {
            // Set URL AJAX saat dibutuhkan
            table9.ajax = {
                url: '{{ route("m_rekapnew9.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew9.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table9.clear();
                    table9.rows.add(response.data).draw();
                    $('#rekap9-wrapper').show();
                }
            });
        } else if (val == '10') {
            // Set URL AJAX saat dibutuhkan
            table10.ajax = {
                url: '{{ route("m_rekapnew10.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew10.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table10.clear();
                    table10.rows.add(response.data).draw();
                    $('#rekap10-wrapper').show();
                }
            });
        } else if (val == '11') {
            // Set URL AJAX saat dibutuhkan
            table11.ajax = {
                url: '{{ route("m_rekapnew.daftar") }}',
                data: function (d) {
                    d.filter = val;
                },
                dataSrc: 'data'
            };
    
            // Panggil load manual via jQuery AJAX
            $.ajax({
                url: '{{ route("m_rekapnew.daftar") }}',
                data: { filter: val, id_jenislaporan: id_jenislaporan },
                success: function (response) {
                    // Pastikan DataTables pakai hasil response.data
                    sembunyikanwrapper();
                    table11.clear();
                    table11.rows.add(response.data).draw();
                    $('#rekap11-wrapper').show();
                }
            });
        } else {
            sembunyikanwrapper();
        }
    });
    
});
</script>
@endsection