{{-- resources/views/admin/analysis/_hth_scripts.blade.php --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    $(document).ready(function() {
        if ($.fn.select2) { $('.select2').select2({ theme: "bootstrap-5", width: '100%' }); }

        function resetSelect(selector, placeholder) {
            $(selector).html('<option value="">'+placeholder+'</option>').prop('disabled', true).val('').trigger('change.select2');
        }

        $('#category_id').on('change', function() {
            var cid = $(this).val();
            resetSelect('#athlete_id', '-- Loading... --');
            resetSelect('#discipline_id', '-- Pilih Atlet Dulu --');
            resetSelect('#pasi_rival_id', '-- Pilih Nomor Lomba Dulu --');
            resetSelect('#competitor_id', '-- Pilih Nomor Lomba Dulu --');
            $('#btn-analyze').prop('disabled', true);

            if(cid) {
                var url = "{{ route('admin.analysis.get_athletes_by_category', ':id') }}".replace(':id', cid);
                $.get(url, function(data) {
                    var $el = $('#athlete_id');
                    $el.html('<option value="">-- Pilih Atlet --</option>');
                    $.each(data, function(k, v) { 
                        $el.append('<option value="'+v.id+'">'+v.name+' ('+v.province_name+')</option>'); 
                    });
                    $el.prop('disabled', false);
                    
                    var oldAth = $('#old_athlete_id').val();
                    if(oldAth) { $el.val(oldAth).trigger('change'); $('#old_athlete_id').val(''); }
                });
            } else {
                resetSelect('#athlete_id', '-- Pilih Kategori Dulu --');
            }
        });

        $('#athlete_id').on('change', function() {
            var athleteId = $(this).val();
            var categoryId = $('#category_id').val(); 
            resetSelect('#discipline_id', '-- Loading... --');
            resetSelect('#pasi_rival_id', '-- Pilih Nomor Lomba Dulu --');
            resetSelect('#competitor_id', '-- Pilih Nomor Lomba Dulu --');
            $('#btn-analyze').prop('disabled', true);

            if(athleteId && categoryId) {
                var url = "{{ url('admin/analysis/get-disciplines') }}/" + athleteId + "/" + categoryId;
                $.get(url, function(data) {
                    var $el = $('#discipline_id');
                    if(data.length === 0) {
                        $el.html('<option value="">-- Tidak ada data lomba --</option>');
                    } else {
                        $el.html('<option value="">-- Pilih Nomor Lomba --</option>');
                        $.each(data, function(k, v) { 
                            var genderLabel = v.gender.charAt(0).toUpperCase() + v.gender.slice(1); 
                            $el.append('<option value="'+v.id+'">'+v.name+' ('+genderLabel+')</option>'); 
                        });
                        $el.prop('disabled', false);

                        var oldDisc = $('#old_discipline_id').val();
                        if(oldDisc) { $el.val(oldDisc).trigger('change'); $('#old_discipline_id').val(''); }
                    }
                });
            }
        });

        $('#discipline_id').on('change', function() {
            var disciplineId = $(this).val();
            var athleteId = $('#athlete_id').val();

            resetSelect('#pasi_rival_id', '-- Loading... --');
            resetSelect('#competitor_id', '-- Loading... --');
            $('#btn-analyze').prop('disabled', true);

            if(disciplineId && athleteId) {
                
                var urlPasi = "{{ url('admin/analysis/get-pasi-rivals') }}/" + disciplineId + "/" + athleteId;
                
                $.get(urlPasi, function(data) {
                    var $el = $('#pasi_rival_id');
                    $el.html('<option value="">-- Kosongkan jika tidak perlu --</option>');
                    
                    if(data.length === 0) {
                        $el.html('<option value="">-- Tidak ada rival internal lain --</option>');
                    } else {
                        $.each(data, function(k, v) { 
                            if(String(v.id) !== String(athleteId)) {
                                $el.append('<option value="'+v.id+'">'+v.name+' ('+v.province_name+')</option>'); 
                            }
                        });
                    }
                    $el.prop('disabled', false);

                    var oldPasi = $('#old_pasi_rival_id').val();
                    if(oldPasi) { $el.val(oldPasi).trigger('change.select2'); $('#old_pasi_rival_id').val(''); }
                });

                var urlComp = "{{ route('admin.analysis.get_competitors_by_discipline', ':id') }}".replace(':id', disciplineId);
                $.get(urlComp, function(data) {
                    var $el = $('#competitor_id');
                    $el.html('<option value="">-- Kosongkan jika tidak perlu --</option>');
                    
                    if(data.length === 0) {
                        $el.html('<option value="">-- Tidak ada rival Intl. --</option>');
                    } else {
                        $.each(data, function(k, v) { 
                            $el.append('<option value="'+v.id+'">'+v.name+' ('+v.country_code+')</option>'); 
                        });
                    }
                    $el.prop('disabled', false);

                    var oldComp = $('#old_competitor_id').val();
                    if(oldComp) { $el.val(oldComp).trigger('change.select2'); $('#old_competitor_id').val(''); }
                    
                    $('#btn-analyze').prop('disabled', false);
                });
            }
        });

        $('#athlete_id').on('change', function() {
             resetSelect('#pasi_rival_id', '-- Pilih Nomor Lomba Dulu --');
        });

        if ($('#category_id').val()) {
            $('#category_id').trigger('change');
        }

        function renderSeparateDoughnutCharts() {
            var ctxPB = document.getElementById('doughnutChartPB');
            var ctxSB = document.getElementById('doughnutChartSB');
            
            if(!ctxPB || !ctxSB) return;

            var hasPasi = ctxPB.getAttribute('data-has-pasi') === '1';
            var hasComp = ctxPB.getAttribute('data-has-comp') === '1';

            var labels = [ctxPB.getAttribute('data-ath-name') + ' (Utama)'];
            if(hasPasi) labels.push(ctxPB.getAttribute('data-pasi-name') + ' (Internal)');
            if(hasComp) labels.push(ctxPB.getAttribute('data-comp-name') + ' (Intl)');

            var dataPB = [parseFloat(ctxPB.getAttribute('data-ath-pb')) || 0];
            if(hasPasi) dataPB.push(parseFloat(ctxPB.getAttribute('data-pasi-pb')) || 0);
            if(hasComp) dataPB.push(parseFloat(ctxPB.getAttribute('data-comp-pb')) || 0);

            var dataSB = [parseFloat(ctxSB.getAttribute('data-ath-sb')) || 0];
            if(hasPasi) dataSB.push(parseFloat(ctxSB.getAttribute('data-pasi-sb')) || 0);
            if(hasComp) dataSB.push(parseFloat(ctxSB.getAttribute('data-comp-sb')) || 0);

            var bgColors = ['#1572e8']; 
            if(hasPasi) bgColors.push('#fdaf4b'); 
            if(hasComp) bgColors.push('#f3545d'); 

            var commonOptions = {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '50%', 
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { usePointStyle: true, padding: 20 }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return ' ' + context.label + ': ' + context.formattedValue;
                            }
                        }
                    }
                }
            };

            if(window.chartPB) window.chartPB.destroy();
            window.chartPB = new Chart(ctxPB.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: dataPB,
                        backgroundColor: bgColors,
                        borderWidth: 2,
                        hoverOffset: 10
                    }]
                },
                options: commonOptions
            });

            if(window.chartSB) window.chartSB.destroy();
            window.chartSB = new Chart(ctxSB.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: dataSB,
                        backgroundColor: bgColors,
                        borderWidth: 2,
                        hoverOffset: 10
                    }]
                },
                options: commonOptions
            });
        }

        renderSeparateDoughnutCharts();
    });
</script>