@extends('template.app') 
 
@section('navbarNav') 
    <div class="" id="navbarNav">
        <ul class="navbar-nav" id="leftNav">
            <li class="nav-item">
            <a class="nav-link" id="sidebar-toggle" href="#"><i data-feather="arrow-left"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Dashboard</a>
            </li> 
        </ul>
    </div>
@endsection

@section('css') 
<link href="{{ asset('assets/default/plugins/apexcharts/apexcharts.css') }}" rel="stylesheet">
@endsection

@section('content') 

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group">
                    <label class="mt-2">Filter Pencarian : </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterProdi">Filter Program Studi : </label> -->
                    <select class="form-select" id="filterProdi"> 
                        <option selected value="">Pilih Program Studi</option>
                        @foreach ($prodi as $row)
                            <option @if ($row->name == 'Teknik Informatika') selected @endif value="{{ $row->name }}">{{ $row->name }}</option> 
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3 d-none">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterSemester">Filter Semester : </label> -->
                    <select class="form-select" id="filterSemester"> 
                        <option selected value="">Pilih Semester</option> 
                        <option value="GASAL">GASAL</option> 
                        <option value="GENAP">GENAP</option> 
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterTriwulan">Filter Triwulan : </label> -->
                    <select class="form-select" id="filterTriwulan"> 
                        <option selected value="">Pilih Triwulan</option> 
                        <option value="1">1</option> 
                        <option value="2">2</option> 
                        <option value="3">3</option> 
                        <option value="4">4</option> 
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterAkademik">Filter Tahun Akademik : </label> -->
                    <select class="form-select" id="filterAkademik"> 
                        <option selected value="">Pilih Tahun Akademik</option>
                                                    <option  
                                value="2025/2026" 
                                selected                                >
                                2025/2026                            </option>
                                                    <option  
                                value="2024/2025" 
                                                                >
                                2024/2025                            </option>
                                                    <option  
                                value="2023/2024" 
                                                                >
                                2023/2024                            </option>
                                                    <option  
                                value="2022/2023" 
                                                                >
                                2022/2023                            </option>
                                                    <option  
                                value="2021/2022" 
                                                                >
                                2021/2022                            </option>
                                            </select>
                </div>
            </div>
        </div>
    </div>
</div>
 
    
<div class="accordion row" id="accordionExample"> 
</div>
 
     

@endsection
@section('js')
    <script src="{{ asset('assets/default/plugins/apexcharts/apexcharts.min.js') }}"></script> 
    <script src="{{ asset('assets/default/plugins/chartjs/chart.bundle.min.js') }}"></script> 
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

    <script>   
        $("#filterProdi").on("change", function(e) {   
            getIndikator();
        });
        $("#filterSemester").on("change", function(e) {   
            getIndikator();
        });
        $("#filterTriwulan").on("change", function(e) {   
            getIndikator();
        });
        $("#filterAkademik").on("change", function(e) {   
            getIndikator();
        });

        getIndikator();
        function getIndikator(){

            var filter = [];
            filter.push('kategori', 'prodi', 'semester', 'triwulan', 'akademik');
            var filterValue = [];
            filterValue.push($("#filterFakultas").val(), $("#filterProdi").val(), $("#filterSemester").val(), $("#filterTriwulan").val(), $("#filterAkademik").val());

    
            $.ajax({ 
                type : "GET", 
                url :  "{{url('api/indikator')}}",
                data : {   
                    // 'dataTable': true,
                    "filter[]" : filter, 
                    "filterValue[]" : filterValue
                },   
                dataType: 'JSON',  
                success : function(res){
                    // console.log(res);
                    if(res['status'] == "200"){

                        const groupByParent = res['data'].reduce((acc, val) => {
                            const by = val.parent_indikator;
                            (acc[by] = acc[by] || []).push(val);
                            return acc;
                        }, {});
                        const resultArrayParent = Object.values(groupByParent);
                        console.log(resultArrayParent);

                        let isiParent = '';
                        for (let i = 0; i < resultArrayParent.length; i++) {
                            var no = i + 1;
                            
                            var show = 'show';
                            if(no == 1){
                                show = 'show';
                            }else{
                                show = '';
                            }

                            var isiBody = '';
                            if(parseInt(resultArrayParent[i][0]['total_data'])){        // Jika Value ANGKA
                                isiBody = `<canvas id="indikatorNilaiAngka${resultArrayParent[i][0]['parent_indikator']}"></canvas>`;
                            }else{

                                let isiIndikatorHuruf = '';
                                for (let ix = 0; ix < resultArrayParent[i].length; ix++) {
                                    isiIndikatorHuruf += `  
                                        <div class="transactions-list">
                                            <div class="tr-item">
                                                <div class="tr-company-name">
                                                    <div class="tr-icon tr-card-icon tr-card-bg-info text-info" style="padding: 12px 17px;">
                                                        <i class="fa fa-book" aria-hidden="true"></i>
                                                    </div>
                                                    <div class="tr-text">
                                                        <h4>${resultArrayParent[i][ix]['nama_indikator']}</h4>
                                                        <p></p>
                                                    </div>
                                                </div>
                                                <div class="tr-rate">
                                                    <p><span class="text-warning" style="font-size: 25px;">${resultArrayParent[i][ix]['total_data']}</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    `; 
                                }

                                isiBody = `
                                <div id="indikatorNilaiHuruf${resultArrayParent[i][0]['parent_indikator']}"> 
                                    ${isiIndikatorHuruf}
                                </div>
                                `;
                            }

                            isiParent += `
                            <div class="col-sm-6 col-md-6">
                                <div class="card">
                                    <div class="card-header" style="padding: 10px; background-color: #116E63;" id="heading1">
                                        <h2 class="mb-0">
                                            <span style="color: white;" class="btn text-left" >
                                            ${resultArrayParent[i][0]['parent']['name']} 
                                            </span>
                                        </h2>
                                    </div>

                                    <div class="card-body row">
                                        
                                        ${isiBody}
                                        
                                        
                                    </div> 
                                </div>
                            </div>
                            `;


                        }
                        $("#accordionExample").html(isiParent);

                     
                        for (let i = 0; i < resultArrayParent.length; i++) { 
                            var dummyIndikator = new Array(); 
                            var nilaiTotalIndikator = new Array(); 

                            var dummylabelIndikator = new Array(); 
                            var labelTotalIndikator = new Array(); 

                            var dummyColorIndikator = new Array(); 
                            var colorTotalIndikator = new Array(); 
                            for (let ix = 0; ix < resultArrayParent[i].length; ix++) {
                                
                                nilaiTotalIndikator.push(parseInt(resultArrayParent[i][ix]['total_data']) || resultArrayParent[i][ix]['total_data']);
                                dummyIndikator = nilaiTotalIndikator;

                                labelTotalIndikator.push(resultArrayParent[i][ix]['singkatan_indikator']);
                                dummylabelIndikator = labelTotalIndikator;

                                colorTotalIndikator.push(getRandomColor());
                                dummyColorIndikator = colorTotalIndikator;
                            } 
                            // console.log('total Nilai', dummyIndikator);

                            if(parseInt(resultArrayParent[i][0]['total_data'])){        // Jika Value ANGKA
                                const ctx = document.getElementById(`indikatorNilaiAngka${resultArrayParent[i][0]['parent_indikator']}`).getContext('2d'); 
         
                                new Chart(ctx, {
                                    type: "doughnut",
                                    data: {
                                        labels: dummylabelIndikator,
                                        datasets: [{
                                            label: "My First Dataset",
                                            data: dummyIndikator,
                                            backgroundColor: dummyColorIndikator
                                        }]
                                    },
                                    options: {
                                        responsive: true,  // Membuat chart responsif
                                        maintainAspectRatio: false,  // Tidak mempertahankan rasio, agar chart bisa menyesuaikan dengan ukuran container
                                        plugins: {
                                            datalabels: {
                                                color: '#fff',  // Warna teks label
                                                // formatter: function(value, context) {
                                                //     return value;  // Tampilkan nilai
                                                // },
                                                // anchor: 'end',  // Menempatkan label di luar chart
                                                // align: 'end',   // Mengatur arah label agar ada jarak
                                                // offset: 10,     // Jarak label dari chart
                                                // borderWidth: 2,  // Ukuran garis penghubung
                                                // borderColor: '#000', // Warna garis penghubung
                                                // borderRadius: 3,     // Radius border label (opsional)
                                                // backgroundColor: 'rgba(255, 255, 255, 0.75)', // Latar belakang label
                                                // borderDash: [0, 0],  // Garis penghubung berbentuk dash
                                                // clamp: true,    // Membatasi label agar tetap berada di luar chart
                                                // callout: {
                                                //     enabled: true,  // Aktifkan garis penghubung
                                                //     borderColor: '#000',  // Warna garis penghubung (hitam)
                                                //     borderWidth: 1,  // Tebal garis penghubung
                                                //     margin: 10  // Panjang garis penghubung
                                                // }
                                            }
                                        },
                                        layout: {
                                            padding: {
                                                top: 10,  // Menambahkan padding agar label tidak bertumpuk di bagian atas
                                                bottom: 40  // Menambahkan padding di bagian bawah
                                            }
                                        },
                                        legend: {
                                            display: true,  // Sembunyikan legend jika tidak diperlukan, untuk memberikan lebih banyak ruang untuk label
                                            // position: 'bottom',  // Posisikan legend di bawah chart
                                        },
                                        tooltips: {
                                            enabled: false  // Matikan tooltip, karena nilai sudah ditampilkan
                                        }
                                    }
                                });
                            } 
                        }
                    }
                }
            });
        }

        
 
    </script> 
@endsection