@extends('wali_kelas.main')

@section('content')
<style>
    .table-report td{
        padding: 0.25rem !important;
    }
</style>
<section class="pb-4">
    <div class="card-tabs">
        <div class="" style="min-height:30vh">
            <div class="tab-content" id="custom-tabs-three-tabContent">
                <div class="col-md-12" style="padding-left: 1.5rem; padding-right: 1.5rem;">
                    <div class="card card-primary card-outline">
                        <div class="card-body">
                            <div class="row">
                                {{-- <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">Kelas</label>
                                        <select class="form-control form-control-sm mb-1" name="kelas" id="kelasDropdown">
                                            <option selected value="">ALL</option>
                                        </select>
                                    </div>
                                </div> --}}
                                {{-- <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">Kelompok</label>
                                        <select class="form-control form-control-sm mb-1" name="kelompok" id="kelompokDropdown">
                                            <option selected value="">ALL</option>
                                        </select>
                                    </div>
                                </div> --}}
                                {{-- <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">Tahun Ajaran</label>
                                        <select name="id_tahun_ajaran" class="form-control form-control-sm">
                                            <option selected value="">All</option>
                                            @foreach($tahun_ajaran as $ta)
                                            <option value="{{$ta->id}}">{{$ta->tahun_ajaran}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> --}}
                                {{-- <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">Jenis Sekolah</label>
                                        <select class="form-control form-control-sm mb-1" name="id_jenis_sekolah" id="jenisSekolahDrop">
                                            <option selected value="">All</option>
                                        </select>
                                    </div>
                                </div> --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Filter Kelas</label>
                                        <select class="form-control form-control-sm mb-1" name="kelas_kelompok_sekolah" id="kelasKelompokSekolahDropdown">
                                            <option selected value="">ALL</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">&nbsp;</label>
                                        <a class="form-control form-control-sm btn btn-info btn-refresh-dataTableBayarRow" href="#">Refresh</a>
                                    </div>
                                </div>
                            </div>
                   
                        </div>
                    </div>
                </div>
                <div class="col-md-12" id="boxes-element">
                    <div class="row">
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="box_total_siswa">0</h3>
                                    <p>Total Siswa (Yang Diampu)</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-users"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-teal">
                                <div class="inner">
                                    <h3 id="box_total_kelas">0</h3>
                                    <p>Total Kelas (Yang Diampu)</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-teal">
                                <div class="inner">
                                    <h3 id="box_total_kelompok">0</h3>
                                    <p>Total Kelompok (Yang Diampu)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @include('wali_kelas.tagihan_siswa_walas')
                @include('wali_kelas.tunggakan_tahun_walas')
                @include('wali_kelas.dana_ortu_asuh_walas')
            </div>
        </div>
    </div>
</section>
@endsection
@push('custom-scripts')
    <script>
        var param = {
            status_aktif: "ALL",
            status_siswa: "ALL"
        }
        function setTb(el){
            setTimeout(function () {
                el.DataTable({
                    "destroy": true,
                    "responsive": true,
                    "lengthChange": false, 
                    "autoWidth": false,
                    "searching": false,
                    "paging": true,
                    "ordering": true,
                    "deferRender": true,
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": true,
                    "sDom": 't'
                    // "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>'
                });
            }, 1000);
        }
        $(document).ready(function(e){
            setCountBoxes(param);
             
            if(window.location.hash){
                $('a[href*="'+window.location.hash+'"]').trigger('click');
                if(window.location.hash == "#walas-tagihan-siswa"){
                    setTb($("#tb_walas_tagihan_siswa"))
                }
                if(window.location.hash == "#walas-dana-ortu-asuh"){
                    setTb($("#tb_walas_dana_ortu_asuh"))
                }
                if(window.location.hash == "#walas-tunggakan-tahun-lalu"){
                    setTb($("#tb_walas_tunggakan_tahun_lalu"))
                }
                // updateSidebarActive($('a[href*="'+window.location.hash+'"]'));
                $('a[href*="'+window.location.hash+'"]').parents('.li-parent').addClass('menu-is-opening');
                $('a[href*="'+window.location.hash+'"]').parents('.li-parent').addClass('menu-open');
                $('a[href*="'+window.location.hash+'"]').parents('.li-parent').find('.nav-treeview').css('display', 'block');
            }


            var kelompokDropdown = $('#kelompokDropdown');
            $.ajax({
            url: '/get-kelompok',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                kelompokDropdown.empty();

                kelompokDropdown.append($('<option>', {
                    value: '',
                    text: 'ALL'
                }));
                data.forEach(function (value) {
                    kelompokDropdown.append($('<option>', {
                        value: value,
                        text: value
                    }));
                });
            },
            error: function () {
                console.log('Error fetching data');
            }
            });

            var kelasDropdown = $('#kelasDropdown');
            $.ajax({
            url: '/get-kelas',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                kelasDropdown.empty();

                kelasDropdown.append($('<option>', {
                    value: '',
                    text: 'ALL'
                }));

                data.forEach(function (value) {
                    kelasDropdown.append($('<option>', {
                        value: value,
                        text: value
                    }));
                });
            },
            error: function () {
                console.log('Error fetching data');
            }
            
            });

            var JenisSekolahDropdown = $('#jenisSekolahDrop');
            $.ajax({
                url: '/get-jenis-sekolah-walas',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    JenisSekolahDropdown.empty();

                    JenisSekolahDropdown.append($('<option>', {
                        value: '',
                        text: 'ALL'
                    }));

                    $.each(data, function (index, item) {
                        JenisSekolahDropdown.append($('<option>', {
                            value: item.id,
                            text: item.jenis_sekolah
                        }));
                    });
                },
                error: function () {
                    console.log('Error fetching data');
                }
            });
        });

        var kelasKelompokSekolahDropdown = $('#kelasKelompokSekolahDropdown');
            $.ajax({
            url: '/get-kelas-kelompok-sekolah',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                kelasKelompokSekolahDropdown.empty();

                kelasKelompokSekolahDropdown.append($('<option>', {
                    value: '',
                    text: 'ALL'
                }));
                let data_id = [];
                for (let i = 0; i < data.kelas.length; i++) {
                    let combinedValue = `kelas ${data.kelas[i]} ${data.kelompok[i]} ${data.jenis_sekolah[i]}`;
                    let data_id =  `${data.kelas[i]},${data.kelompok[i]},${data.id_sekolah[i]}`

                    kelasKelompokSekolahDropdown.append($('<option>', {
                        value: data_id,
                        text: combinedValue
                    }));
                }
            },
            error: function () {
                console.log('Error fetching data');
            }
            
        });

        $(document).on('click', '#walas-tagihan-siswa-tab', function(e){
            loadThis(param);
            setCountBoxes(param);
            const elementToAddAttribute = document.getElementById("boxes-element");

            if (elementToAddAttribute) {
                elementToAddAttribute.hidden = true;
            }
        });

        $(document).on('click', '#walas-dana-ortu-asuh-tab', function(e){
            loadDanaOruAsuh(param);
            setCountBoxes(param);
            const elementToAddAttribute = document.getElementById("boxes-element");

            if (elementToAddAttribute) {
                elementToAddAttribute.hidden = true;
            }
        });

        $(document).on('click', '#walas-tunggakan-tahun-lalu-tab', function(e){
            loadTunggakan(param);
            setCountBoxes(param);
            const elementToAddAttribute = document.getElementById("boxes-element");

            if (elementToAddAttribute) {
                elementToAddAttribute.hidden = true;
            }
        });

        $(document).on('change', 'select[name=id_tahun_ajaran]', function(e){
            e.preventDefault();
            param.id_tahun_ajaran = $(this).val();
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);
        });
        $(document).on('change', 'select[name=id_jenis_sekolah]', function(e){
            e.preventDefault();
            param.id_jenis_sekolah = $(this).val();
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);
        });
        $(document).on('change', 'select[name=kelas_kelompok_sekolah]', function(e){
            e.preventDefault();
            param.id_kelas_kelompok_sekolah = $(this).val();
            let valuesArray = param.id_kelas_kelompok_sekolah.split(',');
            param.kelas = valuesArray[0];
            param.kelompok = valuesArray[1];
            param.id_jenis_sekolah = valuesArray[2];
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);
        });
        $(document).on('change', 'select[name=kelas]', function(e){
            e.preventDefault();
            param.kelas = $(this).val();
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);
        });
        $(document).on('change', 'select[name=kelompok]', function(e){
            e.preventDefault();
            param.kelompok = $(this).val();
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);
        });
        $(document).on('click', '.btn-refresh-dataTableBayarRow', function(e){
            e.preventDefault();
            param.kelompok = '';
            param.kelas  = '';
            param.id_jenis_sekolah  = '';
            param.id_tahun_ajaran  = '';
            loadThis(param);
            loadTunggakan(param);
            loadDanaOruAsuh(param);
            setCountBoxes(param);

            var selectkelas_kelompok_sekolah = document.querySelector('select[name="kelas_kelompok_sekolah"]');

            selectkelas_kelompok_sekolah.value = "";

        });


        function loadThis(params){
            url = "/walas-get-tagihan-siswa";
            th = '<th width="5%">NAMA LENGKAP</th>' +
                '<th width="5%">EMAIL</th>' +
                '<th width="5%">PENDAFTARAN</th>' +
                '<th width="5%">KELAS</th>' +
                '<th width="5%">KELOMPOK</th>' +
                '<th width="5%">TOTAL TAGIHAN</th>' +
                '<th width="5%">SISA TAGIHAN</th>' +
                '<th width="5%">STATUS SISWA</th>' +
                '<th width="5%">ORTU SISWA</th>' +
                '<th width="5%">ACTION</th>';
            columns = [
                        { "data": "nama_lengkap", 'className':'text-center nowrap'},
                        { "data": "email", 'className':'text-center nowrap'},
                        { "data": "id_pendaftaran", 'className':'text-center nowrap'},
                        { "data": "kelas", 'className':'text-center nowrap'},
                        { "data": "kelompok", 'className':'text-center nowrap'},
                        { "data": "total_tagihan", 'className':'text-center nowrap'},
                        { "data": "sisa_tagihan", 'className':'text-center nowrap'},
                        { "data": "status_siswa", 'className':'text-center'},
                        { "data": "data_ortu", 'className':'text-center'},
                        { "data": "id", 'className':'text-center'},
                    ];
        
            col_def = [
                    {
                        "targets" : 2,
                        "data": "id_pendaftaran",
                        "render" : function (data, type, row) {
                            return row.text_pendaftaran;
                        }
                    },
                    {
                        "targets" : 5,
                        "data": "total_tagihan",
                        "orderable": false,
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.total_tagihan);
                        }
                    },
                    {
                        "targets" : 6,
                        "data": "sisa_tagihan",
                        "orderable": false,
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.sisa_tagihan);
                        }
                    },
                    {
                        "targets" : 9,
                        "data": "id",
                        "orderable": false,
                        "render" : function (data, type, row) {
                            btn = '<div class="btn-group">' +
                                    '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                        'Action ' +
                                    '</button>' +
                                    '<div class="dropdown-menu" role="menu" style="">' +
                                        '<a href="/walas-tagihan-siswa/detail/'+row.id_user+'" class="dropdown-item"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL</a>' +
                                        '<a href="/walas-tagihan-siswa/edit-data/'+row.id_user+'" class="dropdown-item"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                    '</div>' +
                                '</div>';
                            return btn;
                        }
                    },
                ];   
            
            order = [[0, 'asc']];
            sDom = ''; 
            buttons = [];
            
            loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableRow', 1, 0);
        }

        function loadTunggakan(params){
            url = "/walas-tunggakan-tahun-lalu";
            th = '<th width="30%">Nama Lengkap</th>' +
                '<th width="30%">Email</th>' +
                '<th width="30%">Judul</th>' +
                '<th>Jumlah Tunggakan</th>' +
                '<th>Status Tunggakan</th>' +
                '<th>Dibayar</th>' +
                '<th>Sisa</th>' +
                '<th>Created By</th>';
            columns = [
                        { "data": "nama_lengkap", 'className':'text-center'},
                        { "data": "email", 'className':'text-center'},
                        { "data": "judul", 'className':'text-center'},
                        { "data": "jumlah_tunggakan", 'className':'text-center'},
                        { "data": "status_tunggakan", 'className':'text-center'},
                        { "data": "dibayar", 'className':'text-center'},
                        { "data": "sisa_tunggakan", 'className':'text-center'},
                        { "data": "created_by", 'className':'text-center'},
                     ];
        
            col_def = [
                    {
                        "targets" : 3,
                        "data": "jumlah_tunggakan",
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.jumlah_tunggakan);
                        }
                    },
                    {
                        "targets" : 5,
                        "data": "jumlah_tunggakan",
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.dibayar);
                        }
                    },
                    {
                        "targets" : 6,
                        "data": "sisa_tunggakan",
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.sisa_tunggakan);
                        }
                    },
                    {
                        "targets" : 7,
                        "data": "created_by",
                        "render" : function (data, type, row) {
                            if(!row.created_by_user) return row.created_by;
                            return row.created_by_user.nama_lengkap;
                        }
                    },
                ];   
            
            order = [[0, 'desc']];
            sDom = '';        
            buttons = [];
            
            // loadTable(url, params, th, col_def, columns, order, sDom, buttons);
            loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableTunggakanRow', 1, 0);
        }
        function loadDanaOruAsuh(params){
            url = "/walas-dana-ortu-asuh";
            th = '<th>Nama Lengkap</th>' +
                '<th>Email</th>' +
                '<th>Dana Ortu Asuh</th>' +
                '<th>Created By</th>' +
                '<th>Created At</th>' +
                '<th width="5%">STATUS</th>';
            columns = [
                        { "data": "nama_lengkap", 'className':'text-center'},
                        { "data": "email", 'className':'text-center'},
                        { "data": "dana_ortu_asuh", 'className':'text-center'},
                        { "data": "created_by", 'className':'text-center'},
                        { "data": "created_at", 'className':'text-center'},
                        { "data": "status_aktif", 'className':'text-center'},
                     ];
        
            col_def = [
                    {
                        "targets" : 2,
                        "data": "dana_ortu_asuh",
                        "render" : function (data, type, row) {
                            return convertToRupiah(row.dana_ortu_asuh);
                        }
                    },
                    {
                        "targets" : 3,
                        "data": "created_by",
                        "render" : function (data, type, row) {
                            if(!row.created_by_user) return row.created_by;
                            return row.created_by_user.nama_lengkap;
                        }
                    },
                    {
                        "targets" : 4,
                        "data": "created_at",
                        "render" : function (data, type, row) {
                            return row.created_date;
                        }
                    },
                    {
                        "targets" : 5,
                        "data": "status_aktif",
                        "render" : function (data, type, row) {
                            var btn_bg = 'bg-green';
                            if(row.status_aktif === "NONAKTIF") btn_bg = 'bg-danger';
                            return '<a href="#" class="btn btn-sm '+btn_bg+' text-white btn-view-only">'+row.status_aktif+'</a>';
                        }
                    },
                ];   
            
            order = [[0, 'desc']];
            sDom = '';        
            buttons = [];
            
            // loadTable(url, params, th, col_def, columns, order, sDom, buttons);
            loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableDanaRow', 1, 0);
        }
        function setCountBoxes(params){
            $.ajax({
                url: '/walas-tagihan-siswa/getBoxes',
                type: "get",
                data: params
            }).done(function (result) {
                $('#box_total_siswa').html(result.total_siswa)
                $('#box_total_kelas').html(result.total_kelas)
                $('#box_total_kelompok').html(result.total_kelompok)
                $('#box_total_siswa_tagihan').html(result.total_siswa)
                $('#total_tagihan_siswa').html("Rp. "+ convertToRibuan(result.total_tagihan_kelas))
            }).fail(ajax_fail);
        }
    </script>
@endpush