@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;
        }

        .box_size {
            height: 50%;
        }
    </style>

    @php
        use Illuminate\Support\Carbon;

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

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

        foreach ($filteredInvoices as $invoice) {
            $month = Carbon::parse($invoice->payment_date ?? $invoice->due_date)->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);
    @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>
                <a href="#studentinfolist" class="btn btn-primary btn-sm">More Details</a>
            </div>
            <img src="{{ $student->profile_photo_path ? $student->profile_photo_path : asset('assets/images/users/illustration-laptop.png') }}"
                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>

            {{-- Monthly Attendance  --}}
            <div class="col-md-6">
                <div class="profile-card p-4 shadow-sm">
                    <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)->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>

            <!-- 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>

            {{-- Documents --}}
            <div class="col-md-6">
                <div class="profile-card p-4">
                    <h5 class="section-title">Documents</h5>
                    <ul class="list-group">
                        <li class="list-group-item">Aadhar Card:
                            @if (!empty($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>
                        <li class="list-group-item">Birth Certificate:
                            @if (!empty($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 (!empty($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" style="margin-bottom: 50px;">
                {{-- Student Info --}}
                @php
                    $cardCount = 0;

                    if ($student) {
                        $cardCount++;
                    }
                    if ($parent) {
                        $cardCount++;
                    }
                    if ($secondary_parent) {
                        $cardCount++;
                    }
                    if (!empty($guardian_parent->first_name)) {
                        $cardCount++;
                    }
                @endphp
                @if ($student)
                    <div class="col-md-4 {{ $cardCount == 4 ? 'box_size' : '' }}" id="studentinfolist">
                        <div class="profile-card p-4 shadow text-center border rounded-4 bg-light h-100">
                            <h4 class="mb-3 text-success">Student Information</h4>
                            <img src="{{ $student->profile_photo_path ?? asset('assets/images/users/avatar.jpg') }}"
                                class="rounded-circle border border-3 mb-3" alt="Student Photo"
                                style="width: 100px; height: 100px; object-fit: cover;">
                            <h5 class="mb-1">{{ $student->first_name }} {{ $student->last_name }}</h5>
                            <p class="text-muted small mb-2">Class: {{ $child_add_info->student_class ?? 'N/A' }}</p>
                            <hr class="my-3">
                            <div class="text-start ps-3">
                                <p class="mb-1"><strong>📞 Phone:</strong> {{ $student->emergency_contact ?? 'N/A' }}</p>
                                {{-- <p class="mb-1"><strong>📧 Email:</strong> {{ $student->email ?? 'N/A' }}</p> --}}
                                <p class="mb-1"><strong>🎂 DOB:</strong>
                                    {{ !empty($student->dob) ? dateformatter($student->dob) . ' (' . calculate_age($student->dob) . ' y/o)' : 'N/A' }}
                                </p>
                                <p class="mb-0"><strong>🚻 Gender:</strong> {{ ucfirst($student->gender ?? 'N/A') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Primary Parent Info --}}
                @if ($parent)
                    <div class="col-md-4 {{ $cardCount == 4 ? 'box_size' : '' }}">
                        <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="{{ $parent->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">{{ $parent->first_name }} {{ $parent->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> {{ $parent->phone ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>📧 Email:</strong> {{ $parent->email ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>👪 Relation:</strong> {{ ucfirst($parents->relation ?? 'N/A') }}
                                </p>
                                <p class="mb-1"><strong>🎂 DOB:</strong>
                                    {{ !empty($parent->dob) ? dateformatter($parent->dob) . ' (' . calculate_age($parent->dob) . ' y/o)' : 'N/A' }}
                                </p>
                                <p class="mb-0"><strong>🚻 Gender:</strong> {{ ucfirst($parent->gender ?? 'N/A') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Secondary Parent Info --}}
                @if (!empty($secondary_parent))
                    <div class="col-md-4 {{ $cardCount == 4 ? 'box_size' : '' }}">
                        <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="{{ $secondary_parent->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">{{ $secondary_parent->first_name }} {{ $secondary_parent->last_name }}
                            </h5>
                            <p class="text-muted small mb-2">
                                {{ $secondary_parent->occupation ?? 'Occupation not specified' }}</p>
                            <hr class="my-3">
                            <div class="text-start ps-3">
                                <p class="mb-1"><strong>📞 Phone:</strong>
                                    {{ $secondary_parent->phone_number ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>📧 Email:</strong> {{ $secondary_parent->email ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>👪 Relation:</strong>
                                    {{ ucfirst($secondary_parent->relation ?? 'N/A') }}</p>
                                <p class="mb-1"><strong>🎂 DOB:</strong>
                                    {{ !empty($secondary_parent->dob) ? dateformatter($secondary_parent->dob) . ' (' . calculate_age($secondary_parent->dob) . ' y/o)' : 'N/A' }}
                                </p>
                                <p class="mb-0"><strong>🚻 Gender:</strong>
                                    {{ ucfirst($secondary_parent->gender ?? 'N/A') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Guardian Info --}}
                {{-- {{ dd($guardian_parent) }} --}}
                @if (!empty($guardian_parent->first_name))
                    <div class="col-md-4 {{ $cardCount == 4 ? 'box_size' : '' }}">
                        <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_parent->user_image ?? 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_parent->first_name }} {{ $guardian_parent->last_name }}</h5>
                            {{-- <p class="text-muted small mb-2">
                                {{ $guardian_parent->occupation ?? 'Occupation not specified' }}</p> --}}
                            <hr class="my-3">
                            <div class="text-start ps-3">
                                <p class="mb-1"><strong>📞 Phone:</strong> {{ $guardian_parent->phone_number ?? 'N/A' }}
                                </p>
                                <p class="mb-1"><strong>📧 Email:</strong> {{ $guardian_parent->email ?? 'N/A' }}</p>
                                <p class="mb-1"><strong>👪 Relation:</strong> {{ ucfirst($guardian_parent->relation ?? 'N/A') }}
                                </p>
                                {{-- <p class="mb-1"><strong>🎂 DOB:</strong>
                                    {{ !empty($guardian_parent->dob) ? dateformatter($guardian_parent->dob) . ' (' . calculate_age($guardian_parent->dob) . ' y/o)' : 'N/A' }}
                                </p> --}}
                                {{-- <p class="mb-0"><strong>🚻 Gender:</strong>
                                    {{ ucfirst($guardian_parent->gender ?? 'N/A') }}
                                </p> --}}
                            </div>
                        </div>
                    </div>
                @endif
            </div>

        </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;
            }

            const total = Object.values(stats).reduce((a, b) => a + b, 0);

            let html = '';
            Object.entries(stats).forEach(([key, value]) => {
                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                html += `
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span>${key}</span>
                        <span class="fw-bold">${value}</span> <!-- Changed to show count -->
                    </div>
                    <div class="progress" style="height: 6px;">
                        <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;
        }

        selector.addEventListener('change', function() {
            renderAttendance(this.value);
        });

        // Show default on load (current month)
        document.addEventListener('DOMContentLoaded', function() {
            selector.dispatchEvent(new Event('change'));
        });
    </script>



@endsection