@php
    $academicPerformance = $academicPerformance ?? null;
    $performanceQuarter = $academicPerformance['quarter'] ?? [
        'label' => 'Current Quarter',
        'start' => now()->startOfQuarter()->toDateString(),
        'end' => now()->endOfQuarter()->toDateString(),
        'no' => now()->quarter,
        'year' => now()->year,
    ];
    $performanceSummary = $academicPerformance['summary'] ?? [
        'finished' => 0,
        'renewed' => 0,
        'auto_renew' => 0,
        'retention' => 0,
        'old_data' => 0,
        'percentage' => 0,
    ];
    $performanceStudents = $academicPerformance['students'] ?? [
        'finished' => [],
        'renewed' => [],
        'auto_renew' => [],
        'retention' => [],
        'old_data' => [],
    ];
    $percentage = $performanceSummary['percentage'] ?? 0;
    $performanceRank = $academicPerformance['rank'] ?? [
        'position' => 0,
        'total' => 0,
    ];
    $academicPerformanceDataUrl = request()->routeIs('profile')
        ? route('profile.academic_performance_data')
        : route('staffs.academic_performance_data', $staff->id);
@endphp

<div class="ui-card ui-card--table">
    <div class="ui-card__header">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="text-muted small" id="academic-performance-quarter-label">
                {{ $performanceQuarter['label'] }} ({{ $performanceQuarter['start'] }} to
                {{ $performanceQuarter['end'] }})
            </div>

            <span class="ui-pill ui-pill--success" id="academic-performance-rank">
                Rank #{{ $performanceRank['position'] ?? 0 }} of {{ $performanceRank['total'] ?? 0 }}
            </span>

            <form id="academic-performance-filter-form"
                data-url="{{ $academicPerformanceDataUrl }}"
                class="d-flex align-items-center gap-2 flex-nowrap mb-0">
                <select name="academic_performance_quarter" class="form-select form-select-sm"
                    style="min-width: 110px;">
                    @for ($quarter = 1; $quarter <= 4; $quarter++)
                        <option value="{{ $quarter }}" {{ (int) request('academic_performance_quarter', $performanceQuarter['no']) === $quarter ? 'selected' : '' }}>
                            Q{{ $quarter }}
                        </option>
                    @endfor
                </select>

                <select name="academic_performance_year" class="form-select form-select-sm" style="min-width: 120px;">
                    @for ($year = now()->year + 1; $year >= now()->year - 5; $year--)
                        <option value="{{ $year }}" {{ (int) request('academic_performance_year', $performanceQuarter['year']) === $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endfor
                </select>
            </form>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th class="text-center">Rank</th>
                    <th class="text-center">Finished</th>
                    <th class="text-center">Renewed</th>
                    <th class="text-center">Auto renew sales</th>
                    <th class="text-center">Auto renew retention</th>
                    <th class="text-center">Old Data</th>
                    <th class="text-center">Percentage</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">
                        <span class="ui-pill ui-pill--success" id="academic-performance-rank-cell">
                            {{ $performanceRank['position'] ?? 0 }}
                        </span>
                    </td>
                    <td class="text-center">
                        {{-- <button type="button"
                            class="btn btn-link p-0 text-decoration-none academic-performance-modal-open"
                            data-metric-key="finished" data-metric-title="Finished Students"> --}}
                            <span class="ui-pill ui-pill--neutral"
                                id="academic-performance-finished">{{ $performanceSummary['finished'] ?? 0 }}</span>
                            {{-- </button> --}}
                    </td>
                    <td class="text-center">
                        {{-- <button type="button"
                            class="btn btn-link p-0 text-decoration-none academic-performance-modal-open"
                            data-metric-key="renewed" data-metric-title="Renewed Students"> --}}
                            <span class="ui-pill ui-pill--info"
                                id="academic-performance-renewed">{{ $performanceSummary['renewed'] ?? 0 }}</span>
                            {{-- </button> --}}
                    </td>
                    <td class="text-center">
                        <span class="ui-pill ui-pill--success"
                            id="academic-performance-auto-renew">{{ $performanceSummary['auto_renew'] ?? 0 }}</span>
                    </td>
                    <td class="text-center">
                        <span class="ui-pill ui-pill--warn"
                            id="academic-performance-retention">{{ $performanceSummary['retention'] ?? 0 }}</span>
                    </td>
                    <td class="text-center">
                        <span class="ui-pill ui-pill--secondary"
                            id="academic-performance-old-data">{{ $performanceSummary['old_data'] ?? 0 }}</span>
                    </td>
                    <td class="text-center">
                        <div class="d-flex align-items-center justify-content-center gap-2">
                            <div class="progress w-50" style="height: 6px;">
                                <div id="academic-performance-percentage-bar"
                                    class="progress-bar {{ $percentage >= 50 ? 'bg-success' : ($percentage >= 20 ? 'bg-warning' : 'bg-danger') }}"
                                    role="progressbar" style="width: {{ min(100, $percentage) }}%"
                                    aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="ui-title" id="academic-performance-percentage">{{ $percentage }}%</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="academicPerformanceStudentsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title fw-bold" id="academicPerformanceStudentsTitle">Students</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered align-middle mb-0">
                        <thead>
                            <tr>
                                <th style="width: 80px;">#</th>
                                <th>Student</th>
                            </tr>
                        </thead>
                        <tbody id="academicPerformanceStudentsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let metricStudents = @json($performanceStudents);
        const filterForm = document.getElementById('academic-performance-filter-form');
        const quarterLabel = document.getElementById('academic-performance-quarter-label');
        const rankEl = document.getElementById('academic-performance-rank');
        const rankCellEl = document.getElementById('academic-performance-rank-cell');
        const finishedEl = document.getElementById('academic-performance-finished');
        const renewedEl = document.getElementById('academic-performance-renewed');
        const autoRenewEl = document.getElementById('academic-performance-auto-renew');
        const retentionEl = document.getElementById('academic-performance-retention');
        const oldDataEl = document.getElementById('academic-performance-old-data');
        const percentageEl = document.getElementById('academic-performance-percentage');
        const percentageBar = document.getElementById('academic-performance-percentage-bar');
        const modalEl = document.getElementById('academicPerformanceStudentsModal');
        const modalTitle = document.getElementById('academicPerformanceStudentsTitle');
        const modalBody = document.getElementById('academicPerformanceStudentsBody');

        if (!modalEl || !window.bootstrap) {
            return;
        }

        const modal = new bootstrap.Modal(modalEl);

        const setLoading = (isLoading) => {
            filterForm?.querySelectorAll('select').forEach((select) => {
                select.disabled = isLoading;
            });
        };

        const updatePercentage = (percentage) => {
            const value = Number(percentage || 0);

            percentageEl.textContent = `${value}%`;
            percentageBar.style.width = `${Math.min(100, value)}%`;
            percentageBar.setAttribute('aria-valuenow', value);
            percentageBar.classList.remove('bg-success', 'bg-warning', 'bg-danger');
            percentageBar.classList.add(value >= 50 ? 'bg-success' : (value >= 20 ? 'bg-warning' : 'bg-danger'));
        };

        const updatePerformance = (performance) => {
            const summary = performance.summary || {};
            const quarter = performance.quarter || {};
            const rank = performance.rank || {};

            metricStudents = performance.students || { finished: [], renewed: [], auto_renew: [], retention: [], old_data: [] };
            quarterLabel.textContent = `${quarter.label || 'Selected Quarter'} (${quarter.start || '-'} to ${quarter.end || '-'})`;
            rankEl.textContent = `Rank #${rank.position || 0} of ${rank.total || 0}`;
            rankCellEl.textContent = rank.position || 0;
            finishedEl.textContent = summary.finished ?? 0;
            renewedEl.textContent = summary.renewed ?? 0;
            autoRenewEl.textContent = summary.auto_renew ?? 0;
            retentionEl.textContent = summary.retention ?? 0;
            oldDataEl.textContent = summary.old_data ?? 0;
            updatePercentage(summary.percentage ?? 0);
        };

        filterForm?.querySelectorAll('select').forEach((select) => {
            select.addEventListener('change', function () {
                const url = new URL(filterForm.dataset.url, window.location.origin);
                const formData = new FormData(filterForm);

                formData.forEach((value, key) => url.searchParams.set(key, value));
                setLoading(true);

                fetch(url.toString(), {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                })
                    .then((response) => {
                        if (!response.ok) {
                            throw new Error('Failed to load performance data.');
                        }

                        return response.json();
                    })
                    .then((response) => {
                        if (response.success && response.performance) {
                            updatePerformance(response.performance);
                        }
                    })
                    .catch(() => {
                        alert('Could not load academic performance. Please try again.');
                    })
                    .finally(() => setLoading(false));
            });
        });

        document.querySelectorAll('.academic-performance-modal-open').forEach((btn) => {
            btn.addEventListener('click', function () {
                const metricKey = this.getAttribute('data-metric-key');
                const title = this.getAttribute('data-metric-title') || 'Students';
                const students = metricStudents[metricKey] || [];

                modalTitle.textContent = title;
                modalBody.innerHTML = '';

                if (!students.length) {
                    modalBody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">No students found.</td></tr>';
                } else {
                    students.forEach((student, index) => {
                        const row = document.createElement('tr');
                        row.innerHTML = `<td>${index + 1}</td><td>${student.name || 'Student'}</td>`;
                        modalBody.appendChild(row);
                    });
                }

                modal.show();
            });
        });
    });
</script>