@extends('layouts.admin')
<title>{{ config('app.name', 'Laravel') }} | Student | Details</title>
<style>
    .edit:hover,
    .delete:hover {
        color: #fff !important;
        border-radius: 5px !important;
    }

    .edit:hover {
        background-color: blue !important;
        border-color: #696cff !important;
    }

    .delete:hover {
        background-color: #e3242b !important;
        border-color: #e3242b !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .exam-list-item {
        border: 1px solid #dee2e6;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }

    .list-group {
        overflow-y: auto;
        max-height: 400px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* .userProfile_img img{
       object-fit: cover;
    } */
</style>
<link rel="stylesheet" href="{{ asset('assets/css/toggle.css') }}">
@section('main-content')
    @php
        if (!function_exists('dateformatter')) {
            function dateformatter($date1)
            {
                $year1 = substr($date1, 0, 4);
                $month1 = substr($date1, 5, 2);
                $day1 = substr($date1, 8, 2);
                return $day1 . '-' . $month1 . '-' . $year1;
            }
        }
        if (!function_exists('calculate_age')) {
            function calculate_age($dateOfBirth)
            {
                return \Carbon\Carbon::parse($dateOfBirth)->age;
            }
        }
    @endphp

    <style>
        .profile-card {
            background: linear-gradient(135deg, #f6f9ff, #ffffff);
            border-radius: 1rem;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
            transition: 0.3s;
        }

        .profile-card:hover {
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
        }

        .rounded-circle-lg {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-weight: 600;
            font-size: 20px;
            border-left: 4px solid #6366f1;
            padding-left: 10px;
            margin-bottom: 1rem;
        }

        .list-group-item {
            border: none;
            padding: 0.4rem 0;
        }

        .dashboard-header {
            background: #eef4ff;
            padding: 2rem;
            border-radius: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .course-box,
        .results-box {
            height: 100%;
        }

        .progress-bar {
            height: 6px;
            border-radius: 3px;
        }

        .text-label {
            font-weight: 500;
            font-size: 0.9rem;
        }
    </style>
    <style>
        .profile-card table td,
        .profile-card table th {
            font-size: 0.85rem;
            padding: 0.6rem 0.75rem;
        }

        .profile-card .badge {
            font-size: 0.8rem;
            padding: 0.4em 0.7em;
            border-radius: 0.5rem;
        }
    </style>
    <style>
        .student-greeting {
            background-color: #eaf4fc;
            border-radius: 1rem;
            padding: 1rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .student-greeting .info h4 {
            color: #2a5dab;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .student-greeting .info p {
            margin: 0;
            color: #333;
            font-size: 14px;
        }

        .student-greeting .info .btn {
            margin-top: 1rem;
            padding: 6px 18px;
            font-size: 14px;
            background-color: #2a5dab;
            border: none;
            border-radius: 6px;
        }

        .student-greeting img.hero-image {
            max-height: 190px;
            object-fit: contain;
        }
    </style>

    @php
        use Illuminate\Support\Carbon;

        // GROUP INVOICES BY LAST 6 MONTHS
        $filteredInvoices = $fee_dates
            ->sortByDesc(function ($inv) {
                return $inv->payment_date ?? $inv->created_at;
            })
            ->take(60); // take a safe limit

        $monthlySummary = [];
        $statusSummary = [];

        foreach ($filteredInvoices as $invoice) {
            $month = Carbon::parse($invoice->payment_date ?? $invoice->created_at)->format('M Y');

            if (!isset($monthlySummary[$month])) {
                $monthlySummary[$month] = ['total_fee' => 0, 'paid' => 0, 'remaining' => 0];
                $statusSummary[$month] = ['Completed' => 0, 'Pending' => 0, 'Partial' => 0, 'paid_amount' => 0];
            }

            // Table 1
            $monthlySummary[$month]['total_fee'] += (float) $invoice->total_fee;
            $monthlySummary[$month]['paid'] += (float) $invoice->amountpaid;
            $monthlySummary[$month]['remaining'] += (float) $invoice->remaining_fee;

            // Table 2
            $status = ucfirst($invoice->payment_status);
            if (isset($statusSummary[$month][$status])) {
                $statusSummary[$month][$status]++;
                $statusSummary[$month]['paid_amount'] += (float) $invoice->amountpaid;
            }
        }

        // Take only latest 6 months
        $monthlySummary = array_slice($monthlySummary, 0, 6, true);
        $statusSummary = array_slice($statusSummary, 0, 6, true);

        if (!function_exists('calculate_age_full')) {
            function calculate_age_full($dob)
            {
                if (empty($dob)) {
                    return 'N/A';
                }

                $birthDate = Carbon::parse($dob);
                $now = Carbon::now();

                $diff = $birthDate->diff($now);

                $parts = [];

                if ($diff->y > 0) {
                    $parts[] = $diff->y . ' year' . ($diff->y > 1 ? 's' : '');
                }
                if ($diff->m > 0) {
                    $parts[] = $diff->m . ' month' . ($diff->m > 1 ? 's' : '');
                }
                if ($diff->d > 0) {
                    $parts[] = $diff->d . ' day' . ($diff->d > 1 ? 's' : '');
                }

                // If all 0 (like newborn today)
                if (empty($parts)) {
                    return '0 days';
                }

                return implode(' ', $parts);
            }
        }
    @endphp
    <div class="container-xxl py-4">
        {{-- student Top Section --}}
        <div class="student-greeting shadow-sm">
            <div class="info">
                <h4>{{ $student->first_name ?? 'Student' }} {{ $student->last_name }},</h4>
                <p>I am studying in <strong>{{ $child_add_info->student_class }}</strong></p>
                <p class="mb-1"><strong>🎂</strong>
                    {{ !empty($student->dob) ? dateformatter($student->dob) . ' (' . calculate_age_full($student->dob) . ' old)' : 'N/A' }}
                </p>
                <a href="#studentinfolist" class="btn btn-primary btn-sm">More Details</a>
            </div>
            {{-- {{ dd($student->profile_photo_path) }} --}}
            <img src="{{ $student->profile_photo_path }}" alt="Illustration" class="hero-image">
        </div>
        <div class="row gy-4">
            <!-- Table 2: Fee Status Summary -->
            <div class="col-md-6">
                <div class="profile-card p-4 shadow-sm">
                    <h5 class="section-title">Fee Status Summary</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Month</th>
                                    <th>Completed</th>
                                    <th>Pending</th>
                                    <th>Partial</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($statusSummary))
                                    @foreach ($statusSummary as $month => $data)
                                        <tr>
                                            <td><strong>{{ $month }}</strong></td>
                                            <td><span class="badge bg-success">{{ $data['Completed'] }}</span></td>
                                            <td><span class="badge bg-danger">{{ $data['Pending'] }}</span></td>
                                            <td><span class="badge bg-warning text-dark">{{ $data['Partial'] }}</span></td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4">No fee status summary data available.</td>
                                    </tr>
                                @endif

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Table 1: Monthly Fee Breakdown -->
            <div class="col-md-6">
                <div class="profile-card p-4 shadow-sm">
                    <h5 class="section-title">Monthly Fee Breakdown</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Month</th>
                                    <th>Total Fee</th>
                                    <th>Paid</th>
                                    <th>Remaining</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($monthlySummary))
                                    @foreach ($monthlySummary as $month => $data)
                                        <tr>
                                            <td><strong>{{ $month }}</strong></td>
                                            <td><span
                                                    class="badge bg-primary">₹{{ number_format($data['total_fee']) }}</span>
                                            </td>
                                            <td><span class="badge bg-success">₹{{ number_format($data['paid']) }}</span>
                                            </td>
                                            <td>
                                                <span
                                                    class="badge {{ $data['remaining'] == 0 ? 'bg-secondary' : 'bg-danger' }}">
                                                    ₹{{ number_format($data['remaining']) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4">No monthly fee breakdown data available.</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {{-- Monthly Attendance  --}}
            <div class="col-md-6">
                <div class="profile-card p-4 shadow-sm rounded-4 bg-light border">
                    <h5 class="section-title">Monthly Attendance Breakdown</h5>

                    @php $currentMonth = \Carbon\Carbon::now()->format('Y-m'); @endphp

                    <select id="attendanceMonthSelector" class="form-control mb-3">
                        @foreach ($monthlyStats as $month => $data)
                            <option value="{{ $month }}" {{ $month === $currentMonth ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::parse($month . '-01')->format('F Y') }}
                            </option>
                        @endforeach
                    </select>

                    <div id="attendanceBreakdown">
                        <p class="text-muted">Select a month to view breakdown.</p>
                    </div>
                </div>
            </div>

            {{-- Pie Chart for Selected Month --}}
            <div class="col-md-6">
                <div class="profile-card p-4 course-box">
                    <h5 class="section-title mt-4">Fee Payment Summary</h5>

                    <select id="feeMonthSelector" class="form-control mb-3">
                        <option value="all">Last 6 Months (Overview)</option>
                        @foreach ($monthlyFeeStatus as $month => $stats)
                            <option value="{{ $month }}">{{ \Carbon\Carbon::parse($month)->format('F Y') }}
                            </option>
                        @endforeach
                    </select>

                    @if (count($monthlyFeeStatus))
                        <canvas id="feeBarChart" height="150"></canvas>
                        <canvas id="feeMonthPieChart" height="150" class="mt-4 d-none"></canvas>
                    @else
                        <div class="alert alert-warning text-center">No fee data available for the last 6 months.</div>
                    @endif

                </div>
            </div>
            {{-- Attendance --}}
            <div class="col-md-6">
                <div class="profile-card p-4">
                    <h5 class="section-title">Attendance Summary</h5>

                    <select id="monthSelector" class="form-control mb-3">
                        <option value="all">Last 6 Months (Overview)</option>
                        @foreach ($monthlyStats as $month => $stats)
                            <option value="{{ $month }}">{{ \Carbon\Carbon::parse($month)->format('F Y') }}
                            </option>
                        @endforeach
                    </select>

                    @if (count($monthlyStats))
                        <canvas id="feeChart" height="150"></canvas>
                        <canvas id="monthPieChart" height="150" class="mt-4 d-none"></canvas>
                    @else
                        <div class="alert alert-warning text-center">No attendance data available for the last 6 months.
                        </div>
                    @endif

                </div>
            </div>
            {{-- Documents --}}
            <div class="col-md-6">
                <div class="profile-card p-4">
                    <h5 class="section-title mb-3">Documents</h5>
                    <!--  Parent Documents -->
                    <h6 class="fw-bold text-primary mt-2">Parent Documents</h6>
                    <ul class="list-group p-2 mb-3">
                        <li class="list-group-item">Aadhar Card:
                            @if ($parent->aadhar_card)
                                <a href="{{ $parent->aadhar_card }}" target="_blank"
                                    class="badge bg-primary float-end">View</a>
                            @else
                                <span class="badge bg-secondary float-end">Not Uploaded</span>
                            @endif
                        </li>
                    </ul>
                    <!--  Student Documents -->
                    <h6 class="fw-bold text-success mt-3">Student Documents</h6>
                    <ul class="list-group p-2">
                        <li class="list-group-item">Birth Certificate:
                            @if ($child_add_info->birth_certificate)
                                <a href="{{ $child_add_info->birth_certificate }}" target="_blank"
                                    class="badge bg-primary float-end">View</a>
                            @else
                                <span class="badge bg-secondary float-end">Not Uploaded</span>
                            @endif
                        </li>
                        <li class="list-group-item">Vaccination:
                            @if ($child_add_info->vaccination_certificate)
                                <a href="{{ $child_add_info->vaccination_certificate }}" target="_blank"
                                    class="badge bg-primary float-end">View</a>
                            @else
                                <span class="badge bg-secondary float-end">Not Uploaded</span>
                            @endif
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row gy-4 justify-content-center" id="studentinfolist" style="margin-bottom: 20px;">
                {{-- Primary Parent Info --}}
                @if ($parents)
                    <div class="col-md-4">
                        <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                            <h4 class="mb-3 text-primary">Primary Parent</h4>
                            <img src="{{ $parents->user_image ?? asset('assets/images/users/avatar.jpg') }}"
                                class="rounded-circle border border-3 mb-3" alt="Parent Photo"
                                style="width: 100px; height: 100px; object-fit: cover;">
                            <h5 class="mb-1">{{ $parents->first_name }} {{ $parents->last_name }}</h5>
                            <p class="text-muted small mb-2">{{ $parents->occupation ?? 'Occupation not specified' }}</p>
                            <hr class="my-3">
                            <div class="text-start ps-3">
                                <p class="mb-1"><strong>📞 Phone:</strong> {{ $parents->phone_number ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>📧 Email:</strong> {{ $parents->email ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>👪 Relation:</strong> {{ $parents->relation ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>🎂 DOB:</strong>
                                    {{ !empty($parents->dob) ? dateformatter($parents->dob) . ' (' . calculate_age($parents->dob) . ' y/o)' : 'N/A' }}
                                </p>
                                <p class="mb-0"><strong>🚻 Gender:</strong> {{ ucfirst($parents->gender ?? 'N/A') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
                {{-- Secondary Parent Info --}}
                @if (isset($secondary_parent) && !$secondary_parent->isEmpty())
                    @foreach ($secondary_parent as $secParent)
                        @php
                            $allEmpty =
                                empty($secParent->first_name) &&
                                empty($secParent->last_name) &&
                                empty($secParent->occupation) &&
                                empty($secParent->phone_number) &&
                                empty($secParent->email) &&
                                empty($secParent->relation) &&
                                empty($secParent->dob) &&
                                empty($secParent->gender);
                        @endphp

                        <div class="col-md-4">
                            @if ($allEmpty)
                                <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                                    <h4 class="mb-3 text-info">Secondary Parent</h4>
                                    <p class="text-muted">No Secondary Parent Info Available</p>
                                </div>
                            @else
                                <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                                    <h4 class="mb-3 text-info">Secondary Parent</h4>
                                    <img src="{{ $secParent->profile_photo_path ?? asset('assets/images/users/avatar.jpg') }}"
                                        class="rounded-circle border border-3 mb-3" alt="Parent Photo"
                                        style="width: 100px; height: 100px; object-fit: cover;">
                                    <h5 class="mb-1">{{ $secParent->first_name }} {{ $secParent->last_name }}</h5>
                                    <p class="text-muted small mb-2">
                                        {{ $secParent->occupation ?? 'Occupation not specified' }}</p>
                                    <hr class="my-3">
                                    <div class="text-start ps-3">
                                        <p class="mb-1"><strong>📞 Phone:</strong>
                                            {{ $secParent->phone_number ?? 'N/A' }}</p>
                                        <p class="mb-1"><strong>📧 Email:</strong> {{ $secParent->email ?? 'N/A' }}</p>
                                        <p class="mb-1"><strong>👪 Relation:</strong>
                                            {{ $secParent->relation ?? 'N/A' }}</p>
                                        <p class="mb-1"><strong>🎂 DOB:</strong>
                                            {{ !empty($secParent->dob) ? dateformatter($secParent->dob) . ' (' . calculate_age($secParent->dob) . ' y/o)' : 'N/A' }}
                                        </p>
                                        <p class="mb-0"><strong>🚻 Gender:</strong>
                                            {{ ucfirst($secParent->gender ?? 'N/A') }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif
                {{-- Guardian Info --}}
                @if (isset($guardian_parent) && !$guardian_parent->isEmpty())
                    @foreach ($guardian_parent as $guardian)
                        @php
                            $allEmpty =
                                empty($guardian->first_name) &&
                                empty($guardian->last_name) &&
                                empty($guardian->occupation) &&
                                empty($guardian->phone_number) &&
                                empty($guardian->email) &&
                                empty($guardian->relation) &&
                                empty($guardian->dob) &&
                                empty($guardian->gender);
                        @endphp

                        <div class="col-md-4">
                            @if ($allEmpty)
                                <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                                    <h4 class="mb-3 text-warning">Guardian</h4>
                                    <p class="text-muted">No Guardian Info Available</p>
                                </div>
                            @else
                                <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                                    <h4 class="mb-3 text-warning">Guardian</h4>
                                    <img src="{{ $guardian->profile_photo_path ?? asset('assets/images/users/avatar.jpg') }}"
                                        class="rounded-circle border border-3 mb-3" alt="Guardian Photo"
                                        style="width: 100px; height: 100px; object-fit: cover;">
                                    <h5 class="mb-1">{{ $guardian->first_name }} {{ $guardian->last_name }}</h5>
                                    <p class="text-muted small mb-2">
                                        {{ $guardian->occupation ?? 'Occupation not specified' }}</p>
                                    <hr class="my-3">
                                    <div class="text-start ps-3">
                                        <p class="mb-1"><strong>📞 Phone:</strong>
                                            {{ $guardian->phone_number ?? 'N/A' }}</p>
                                        <p class="mb-1"><strong>📧 Email:</strong> {{ $guardian->email ?? 'N/A' }}
                                        </p>
                                        <p class="mb-1"><strong>👪 Relation:</strong>
                                            {{ $guardian->relation ?? 'N/A' }}
                                        </p>
                                        <p class="mb-1"><strong>🎂 DOB:</strong>
                                            {{ !empty($guardian->dob) ? dateformatter($guardian->dob) . ' (' . calculate_age($guardian->dob) . ' y/o)' : 'N/A' }}
                                        </p>
                                        <p class="mb-0"><strong>🚻 Gender:</strong>
                                            {{ ucfirst($guardian->gender ?? 'N/A') }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/moment"></script>
        <script>
            const rawData = @json($monthlyStats);
            const statusTypes = ['Present', 'Leave', 'Holiday', 'Weekend', 'Absent'];
            const statusColors = {
                'Present': '#28a745',
                'Leave': '#ffc107',
                'Holiday': '#007bff',
                'Weekend': '#6c757d',
                'Absent': '#dc3545'
            };
            const months = Object.keys(rawData);
            // Prepare summary for 6-month bar chart
            const summary = {};
            statusTypes.forEach(type => summary[type] = []);
            months.forEach(month => {
                statusTypes.forEach(type => {
                    summary[type].push(rawData[month][type] || 0);
                });
            });
            const feeCtx = document.getElementById('feeChart').getContext('2d');
            const pieCtx = document.getElementById('monthPieChart').getContext('2d');
            let feeChart = new Chart(feeCtx, {
                type: 'bar',
                data: {
                    labels: months,
                    datasets: statusTypes.map(type => ({
                        label: type,
                        data: summary[type],
                        backgroundColor: statusColors[type],
                        stack: 'stack1'
                    }))
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    scales: {
                        x: {
                            stacked: true
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true
                        }
                    }
                }
            });
            let pieChart;
            document.getElementById('monthSelector').addEventListener('change', function() {
                const selected = this.value;
                if (selected === 'all') {
                    // Show bar, hide pie
                    document.getElementById('feeChart').classList.remove('d-none');
                    document.getElementById('monthPieChart').classList.add('d-none');
                    feeChart.data.labels = months;
                    feeChart.data.datasets.forEach((dataset, i) => {
                        dataset.data = summary[statusTypes[i]];
                    });
                    feeChart.update();
                } else {
                    // Hide bar, show pie
                    document.getElementById('feeChart').classList.add('d-none');
                    document.getElementById('monthPieChart').classList.remove('d-none');
                    const data = rawData[selected];
                    const pieData = {
                        labels: statusTypes,
                        datasets: [{
                            data: statusTypes.map(type => data[type] || 0),
                            backgroundColor: statusTypes.map(type => statusColors[type])
                        }]
                    };
                    if (pieChart) pieChart.destroy();
                    pieChart = new Chart(pieCtx, {
                        type: 'pie',
                        data: pieData,
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                },
                                title: {
                                    display: true,
                                    text: `Attendance in ${selected}`
                                }
                            }
                        }
                    });
                }
            });
        </script>

        <script>
            const feeRawData = @json($monthlyFeeStatus);
            const feeStatusTypes = ['Completed', 'Pending', 'Partial'];
            const feeStatusColors = {
                'Completed': '#83BDECFF',
                'Pending': '#FFFD74',
                'Partial': '#D65A31'
            };
            const feeMonths = Object.keys(feeRawData);
            // Prepare 6-month bar data summary
            const feeSummary = {};
            feeStatusTypes.forEach(type => feeSummary[type] = []);
            feeMonths.forEach(month => {
                feeStatusTypes.forEach(type => {
                    feeSummary[type].push(feeRawData[month][type] || 0);
                });
            });
            const feeBarCtx = document.getElementById('feeBarChart').getContext('2d');
            const feePieCtx = document.getElementById('feeMonthPieChart').getContext('2d');
            let feeBarChart = new Chart(feeBarCtx, {
                type: 'bar',
                data: {
                    labels: feeMonths.map(m => moment(m + "-01").format("MMM YYYY")),
                    datasets: feeStatusTypes.map(type => ({
                        label: type,
                        data: feeSummary[type],
                        backgroundColor: feeStatusColors[type],
                        stack: 'stack1'
                    }))
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    scales: {
                        x: {
                            stacked: true
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true
                        }
                    }
                }
            });
            let feePieChart;
            document.getElementById('feeMonthSelector').addEventListener('change', function() {
                const selected = this.value;
                if (selected === 'all') {
                    // Show stacked bar chart
                    document.getElementById('feeBarChart').classList.remove('d-none');
                    document.getElementById('feeMonthPieChart').classList.add('d-none');
                    feeBarChart.data.labels = feeMonths.map(m => moment(m + "-01").format("MMM YYYY"));
                    feeStatusTypes.forEach((type, i) => {
                        feeBarChart.data.datasets[i].data = feeSummary[type];
                    });
                    feeBarChart.update();
                } else {
                    // Show monthly pie chart
                    document.getElementById('feeBarChart').classList.add('d-none');
                    document.getElementById('feeMonthPieChart').classList.remove('d-none');
                    const monthData = feeRawData[selected] || {};
                    const pieData = {
                        labels: feeStatusTypes,
                        datasets: [{
                            data: feeStatusTypes.map(type => monthData[type] || 0),
                            backgroundColor: feeStatusTypes.map(type => feeStatusColors[type])
                        }]
                    };
                    if (feePieChart) feePieChart.destroy();
                    feePieChart = new Chart(feePieCtx, {
                        type: 'pie',
                        data: pieData,
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                },
                                title: {
                                    display: true,
                                    text: `Fee Status in ${moment(selected + "-01").format('MMMM YYYY')}`
                                }
                            }
                        }
                    });
                }
            });
        </script>

        <script>
            const attendanceData = @json($monthlyStats);

            const colors = {
                Present: 'bg-success',
                Leave: 'bg-warning',
                Holiday: 'bg-primary',
                Weekend: 'bg-secondary',
                Absent: 'bg-danger'
            };

            const selector = document.getElementById('attendanceMonthSelector');
            const container = document.getElementById('attendanceBreakdown');

            function renderAttendance(month) {
                const stats = attendanceData[month];
                if (!stats) {
                    container.innerHTML = '<p class="text-muted">No data available for selected month.</p>';
                    return;
                }

                // Total days in the calendar month
                const totalDaysInMonth = stats['TotalDays'] || (new Date(month.split('-')[0], parseInt(month.split('-')[1]), 0))
                    .getDate();

                // Status keys in preferred order
                const keys = ['Present', 'Leave', 'Holiday', 'Weekend', 'Absent'];

                // Recorded count sum (only statuses, exclude TotalDays)
                const recordedTotal = keys.reduce((s, k) => s + (stats[k] || 0), 0);

                // Build header: totals and summary
                let html = '';
                html += `<div class="mb-2"><strong>Total days in month:</strong> ${totalDaysInMonth}</div>`;
                html +=
                    `<div class="mb-2"><strong>Recorded days:</strong> ${recordedTotal} (${ totalDaysInMonth > 0 ? ((recordedTotal/totalDaysInMonth) * 100).toFixed(1) : 0 }%)</div>`;

                if (recordedTotal !== totalDaysInMonth) {
                    // If the counting range doesn't match full calendar month (edge cases), show a note
                    html +=
                        `<div class="mb-3 text-muted small">Note: recorded days (${recordedTotal}) may differ from calendar days (${totalDaysInMonth}) because the data range is limited.</div>`;
                }

                // Optional summary badges
                html += `<div class="mb-3">`;
                keys.forEach(k => {
                    const v = stats[k] || 0;
                    html += `<span class="badge ${colors[k]} me-1">${k}: ${v}</span>`;
                });
                html += `</div>`;

                // For each status show "X days (Y%)" and a progress bar based on calendar month
                keys.forEach(key => {
                    const value = stats[key] || 0;
                    const percentage = totalDaysInMonth > 0 ? ((value / totalDaysInMonth) * 100).toFixed(1) : 0;

                    html += `
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <div>${key} — <strong>${value} day${value !== 1 ? 's' : ''}</strong></div>
                        <div class="fw-bold">${percentage}%</div>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar ${colors[key]}" role="progressbar"
                            style="width: ${percentage}%;" aria-valuenow="${percentage}" aria-valuemin="0"
                            aria-valuemax="100"></div>
                    </div>
                </div>
            `;
                });

                container.innerHTML = html;
            }

            // Render initial selection
            selector.addEventListener('change', function() {
                renderAttendance(this.value);
            });

            document.addEventListener('DOMContentLoaded', function() {
                // render the currently selected option
                const month = selector.value;
                renderAttendance(month);
            });
        </script>

    @endsection