@extends('layouts.dashboard')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/emp-dashboard.css') }}">
    <style>

    </style>
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="container-fluid legend-wrapper pb-3">
        <div class="row equal-row">
            <!-- Profile Card -->
            <div class="col-md-4 d-flex">
                <div class="card profile-card shadow-sm w-100">
                    <div class="card-header bg-blue-dark p-2">
                        <div class="d-flex mb-0 bg-blue-dark align-items-center w-100">
                            <!-- Profile Image -->
                            <img src="{{ $employee->profile_image ?? 'https://ui-avatars.com/api/?name=' . urlencode($employee->name) . '&size=50' }}"
                                class="img-fluid rounded-circle" alt="User Avatar" style="width: 40px; height:40px">

                            <div class="ml-3">
                                <!-- Name -->
                                <h5 class="mb-0 text-white">{{ $employee->name }}</h5>
                                <!-- Designation + Department -->
                                <p class="role mb-0 text-light">
                                    {{ $employee->designation->name ?? 'N/A' }}
                                    <span class="text-danger ml-1 mr-1">•</span>
                                    {{ $employee->department->name ?? 'N/A' }}
                                </p>
                            </div>
                            <!-- Edit Icon -->
                            <div class="d-flex flex-column ml-auto">
                                <a href="{{ route('employee.profile') }}" class="text-white" title="Edit Profile">
                                    <i class="fas fa-edit"></i>
                                </a>

                                @php
                                    
                                    $punchUrl = url('voice-verify/' . base64_encode(2) . '/' . base64_encode($employee->id)); 
                                @endphp

                                <div class="d-flex align-items-center mt-2">
                                    <a href="javascript:void(0);" onclick="copyToClipboard('{{ $punchUrl }}')"
                                        class="text-white" title="Copy Punch In / Out Url">
                                        <i class="fas fa-copy"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <div class="profile-info text-dark" style="overflow: hidden;">

                            <!-- Phone -->
                            <div class="d-flex align-items-center mb-1">
                                <i class="fas fa-phone-alt text-primary fa-md mr-3"></i>
                                <div>
                                    <strong>Phone Number</strong><br>
                                    <span class="text-muted">{{ $employee->mobile_number ?? 'N/A' }}</span>
                                </div>
                            </div>
                            <!-- Email -->
                            <div class="d-flex align-items-center mb-1">
                                <i class="fas fa-envelope text-danger fa-md mr-3"></i>
                                <div>
                                    <strong>Email Address</strong><br>
                                    <span class="text-muted">{{ $employee->email }}</span>
                                </div>
                            </div>

                            <!-- Date of Joining -->
                            <div class="d-flex align-items-center mb-1">
                                <i class="fas fa-calendar-check text-success fa-md mr-3"></i>
                                <div>
                                    <strong>Joined on</strong><br>
                                    <span class="text-muted">
                                        {{ $employee->doj ? \Carbon\Carbon::parse($employee->doj)->format('d M Y') : 'N/A' }}
                                    </span>
                                </div>
                            </div>

                            <!-- Reported Office -->
                            <div class="d-flex align-items-center">
                                <i class="fas fa-map-marker-alt text-warning fa-md mr-3"></i>
                                <div>
                                    <strong>Report Office</strong><br>
                                    <span class="text-muted">{{ $employee->branch->office_name ?? 'N/A' }}</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mt-3">
                                <a href="javascript:;" class="d-flex align-items-center view-documents"
                                    data-id="{{ $employee->id }}">
                                    <i class="fas fa-file-alt text-info fa-md mr-3"></i>
                                    <div>
                                        <strong class="text-dark">View All Document</strong>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Attendance Card (Left Big) -->
            <div class="col-md-4 d-flex">
                <div class="card w-100 text-center attendance-bg h-100 border border-warning d-flex flex-column">
                    <div class="card-header bg-blue-dark p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="font-weight-bold mb-0 text-center m-auto">Attendance</h6>
                        </div>
                    </div>
                    <div class="card-body flex-grow-1 d-flex flex-column">
                        <h6 class="font-weight-bold">Punch In / Out Url</h6>
                        <a href="{{ $punchUrl }}" onclick="copyToClipboard('{{ $punchUrl }}')"
                            class="text-warning font-weight-bold mb-3 d-flex" target="_blank"
                            title="Link Punch In / Out Url">
                            <i class="fas fa-link"></i>
                            <small class="badge bg-warning text-dark text-wrap ml-2">{{ $punchUrl }}</small>
                        </a>
                        <div class="d-flex justify-content-center align-items-center mb-3">
                            <div
                                class="rounded-circle border d-flex flex-column justify-content-center align-items-center p-3">
                                <small class="text-muted">Total Hours</small>
                                <h6 id="totalHours" class="mb-0 font-weight-bold">00:00:00</h6>
                            </div>
                        </div>
                        <p class="">
                            <i class="fas fa-fingerprint text-success"></i> Punch In at
                            <span id="punchInTime">Not punched in yet</span>
                        </p>
                        <p class="mb-0">
                            <i class="fas fa-sign-out-alt text-danger"></i> Punch Out at
                            <span id="punchOutTime">--:--</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 d-flex">
                <div class="card shadow-sm w-100 d-flex flex-column">
                    <div class="card-header bg-blue-dark p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="font-weight-bold mb-0">Recent Leave Updates</h6>
                        </div>
                    </div>
                    <div class="card-body flex-grow-1 d-flex flex-column p-3">
                        <!-- Recent Leave Updates -->
                        <div class="recent-box mb-2">
                            <ul id="leave-updates" class="list-unstyled mb-0">
                                {{-- Casual Leave --}}
                                <li class="leave-item mb-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>CL - Casual Leave</span>
                                        <span class="badge badge-light font-weight-normal">
                                            {{ $remainingLeaves['cl'] ?? 0 }} left
                                        </span>
                                    </div>
                                </li>

                                {{-- Paid Leave --}}
                                <li class="leave-item mb-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>PL - Paid Leave</span>
                                        <span class="badge badge-light font-weight-normal">
                                            {{ $remainingLeaves['pl'] ?? 0 }} left
                                        </span>
                                    </div>
                                </li>

                                {{-- Restricted Holiday --}}
                                <!-- <li class="leave-item mb-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>RH - Restricted Holiday</span>
                                        <span class="badge badge-light font-weight-normal">
                                            {{ $remainingLeaves['rh'] ?? 0 }} left
                                        </span>
                                    </div>
                                </li> -->

                                {{-- Comp. Off --}}
                                <li class="leave-item">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>CO - Comp. Off</span>
                                        <span class="badge badge-light font-weight-normal">
                                            {{ $com_off->count ?? 0 }} left
                                        </span>
                                    </div>

                                </li>
                            </ul>

                            <a href="#" id="toggleLeave" class="d-block mt-2 text-primary text-sm text-right">Show More</a>
                        </div>

                        <!-- Upcoming Holidays -->
                        {{-- Upcoming Holidays --}}
                        <div class="up-wrapper">
                            <h6 class="font-weight-bold border-bottom pb-2">Upcoming Holidays</h6>
                            @foreach($holidays as $holiday)
                                <div class="mb-3 list-wrapp">
                                    <div class="d-flex justify-content-between">
                                        <span>
                                            <strong>{{ $holiday->name }}</strong>
                                            <span class="text-muted">(1 day)</span>
                                        </span>
                                        <span class="text-success font-weight-bold">Holiday</span>
                                    </div>
                                    <div class="text-muted small">
                                        {{ \Carbon\Carbon::parse($holiday->date)->format('D, M d, Y') }}
                                    </div>
                                </div>
                            @endforeach
                            <a href="{{ url('/employee/holiday-list') }}"
                                class="d-block text-primary text-sm text-right">Show All</a>
                        </div>

                        <!-- Button pushed to bottom -->
                        <div class="mt-auto">
                            <a href="{{ url('/employee/leave-apply') }}"
                                class="btn btn-sm btn-orange w-100 applyLeaveBtn">Apply New Leave</a>
                            <!-- <button class="btn btn-sm btn-orange w-100 applyLeaveBtn" data-toggle="modal" data-target="#applyLeaveModal">Apply New Leave</button> -->
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="mb-0 text-white p-0">
                                    <div class="card-body d-flex justify-content-between align-items-center p-0">
                                        <div class="d-flex justify-content-between align-items-center w-100">
                                            <div>
                                                <h6 class="mb-0 text-dark">Leave Policy</h6>
                                            </div>
                                            <button class="btn btn-sm btn-info" data-toggle="modal"
                                                data-target="#policyModal">View </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <div class="row mt-3">
            <!-- Attendance Chart -->
            <div class="col-md-4 d-flex">
                <div class="card shadow-sm w-100 he-100">
                    <div class="card-header bg-blue-dark p-2">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <h3 class="card-title mb-0">Attendance View</h3>

                            <!-- Month-Year Picker -->
                            @php
                                $now = now();
                                $minDate = $now->copy()->subYears(2)->startOfYear()->format('Y-m');
                                $maxDate = $now->format('Y-m');
                            @endphp

                            <input type="month" id="monthYearPicker"
                                class="form-control form-control-sm w-auto month-picker" value="{{ $now->format('Y-m') }}"
                                min="{{ $minDate }}" max="{{ $maxDate }}">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 d-flex align-items-center justify-content-center">
                                <canvas id="leaveChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card  shadow-sm w-100 he-100 card-widget">
                    <div class="card-header bg-blue-dark p-2">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <h3 class="card-title mb-0">Leave Notifications</h3>
                            <div class="card-tools">
                                <a href="#" class="btn btn-tool btn-sm">View All</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-2">
                        <ul class="products-list product-list-in-card pr-2">
                            <li class="item d-flex">
                                <div class="image-div">
                                    <img src="{{ $employee->profile_image ?? 'https://ui-avatars.com/api/?name=' . urlencode($employee->name) . '&size=60' }}"
                                        class="img-fluid rounded-circle" alt="User Avatar" style="width: 60px; height:60px">
                                </div>
                                <div class="product-info flex-grow-1">
                                    <a href="javascript:void(0)" class="product-title text-dark">
                                        <span class="text-warning">Nimesh Lad</span> requested 3 days of leave
                                        <span class="product-description d-block text-muted">
                                            Type: <span class="text-warning">Paid Leave</span> | Dates: 2025-10-05 to
                                            2025-10-07
                                        </span>
                                        <span class="product-description d-block text-sm text-muted font-weight-normal">
                                            Requested Today at 10:00 AM
                                        </span>
                                    </a>
                                    <div class="leave-btn-container ml-auto d-flex flex-column flex-md-row mt-2">
                                        <button type="button" class="btn btn-custom-approve">Approve</button>
                                        <button type="button" class="btn btn-custom-decline">Decline</button>
                                    </div>
                                </div>

                            </li>
                            <li class="item d-flex">
                                <div class="image-div">
                                    <img src="{{ $employee->profile_image ?? 'https://ui-avatars.com/api/?name=' . urlencode($employee->name) . '&size=60' }}"
                                        class="img-fluid rounded-circle" alt="User Avatar" style="width: 60px; height:60px">
                                </div>
                                <div class="product-info flex-grow-1">
                                    <a href="javascript:void(0)" class="product-title text-dark">
                                        <span class="text-warning">Nimesh Lad</span>'s leave request was <span
                                            class="text-success">Approved</span>
                                        <span class="product-description d-block text-muted">
                                            Type: <span class="text-warning">Sick Leave</span> | Date: 2025-10-01
                                        </span>
                                        <span class="product-description d-block text-sm text-muted font-weight-normal">
                                            Today at 9:30 AM
                                        </span>
                                    </a>
                                    <div class="leave-btn-container ml-auto d-flex flex-column flex-md-row mt-2">
                                        <span class="badge badge-success">Approved</span>
                                    </div>
                                </div>
                            </li>
                            <li class="item d-flex">
                                <div class="image-div">
                                    <img src="{{ $employee->profile_image ?? 'https://ui-avatars.com/api/?name=' . urlencode($employee->name) . '&size=60' }}"
                                        class="img-fluid rounded-circle" alt="User Avatar" style="width: 60px; height:60px">
                                </div>
                                <div class="product-info flex-grow-1">
                                    <a href="javascript:void(0)" class="product-title text-dark">
                                        <span class="text-warning">Nimesh Lad</span> requested 1 day of leave
                                        <span class="product-description d-block text-muted">
                                            Dates: 2025-11-20
                                        </span>
                                        <span class="product-description d-block text-sm text-muted font-weight-normal">
                                            Requested Today at 11:20 AM
                                        </span>
                                    </a>
                                    <div class="leave-btn-container ml-auto d-flex flex-column flex-md-row mt-2">
                                        <button type="button" class="btn btn-custom-approve">Approve</button>
                                        <button type="button" class="btn btn-custom-decline">Decline</button>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Apply Leave Modal -->
    <div class="modal fade" id="applyLeaveModal" tabindex="-1" role="dialog" aria-labelledby="applyLeaveModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header bg-orange text-white py-2">
                    <h5 class="modal-title text-white" id="applyLeaveModalLabel">Apply New Leave</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body" id="leave-apply-modal-body">

                </div>

            </div>
        </div>
    </div>
    <!-- end of applyy leave modal -->
    <!-- document upload modal -->
    <!-- Modal -->
    <div class="modal fade" id="documentsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Employee Documents</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="documentsContent">
                    <p>Loading...</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Document Preview Modal -->
    <div class="modal fade" id="docPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content bg-dark text-white">
                <div class="modal-body text-center position-relative">
                    <button type="button" class="close text-white position-absolute" style="right:15px; top:10px;"
                        data-dismiss="modal">
                        &times;
                    </button>
                    <img id="docPreviewImg" src="" class="img-fluid rounded" style="max-height:80vh; object-fit:contain;" />

                    <!-- Prev Button -->
                    <button class="btn btn-light position-absolute" id="prevDoc"
                        style="left:15px; top:50%; transform:translateY(-50%);">
                        <i class="fas fa-chevron-left"></i>
                    </button>

                    <!-- Next Button -->
                    <button class="btn btn-light position-absolute" id="nextDoc"
                        style="right:15px; top:50%; transform:translateY(-50%);">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- end of document upload modal -->
   <div class="modal fade" id="policyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Leave Policy</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0">
                @if($latestPolicy)
                    <iframe src="{{ asset(''.$latestPolicy->file_path) }}" style="width:100%; height:80vh;" frameborder="0"></iframe>
                @else
                    <div class="text-center p-4">
                        <p class="text-muted">No Leave Policy available yet.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'Url Copied',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true
                });
            }).catch(function (err) {
                console.error("Failed to copy: ", err);
            });
        }
    </script>
    <!-- upload document -->
    <!-- upload document -->
    <script>
        $(document).on("click", ".view-documents", function () {
            let empId = $(this).data("id");

            $("#documentsContent").html("<p>Loading...</p>");
            $("#documentsModal").modal("show");

            $.ajax({
                url: `/turantams/employee/${empId}/documents`,
                type: "GET",
                success: function (data) {
                    let html = `<ul class="list-group w-100">`;

                    Object.keys(data).forEach(function (key, index) {
                        if (data[key]) {
                            let title = key
                                .replace("_card", "")
                                .replace("_image", "")
                                .replace(/_/g, " ")
                                .replace(/\b\w/g, (c) => c.toUpperCase());

                            let fileUrl = `${data[key]}`;
                            console.log('vvvv:', fileUrl);
                            let fileType = fileUrl.split('.').pop().toLowerCase();
                            let isImage = ["jpg", "jpeg", "png", "gif", "webp"].includes(fileType);

                            html += `
                            <li class="list-group-item d-flex justify-content-between align-items-center doc-list-item">
                                <div class="d-flex align-items-center">
                                    ${isImage
                                    ? `<img src="${fileUrl}" class="rounded mr-3 doc-img">`
                                    : `<i class="fas fa-file-alt fa-2x text-secondary mr-2"></i>`}
                                    <div>
                                        <h6 class="mb-0">${title}</h6>
                                        <small class="text-muted">${isImage ? "Image File" : "Document"}</small>
                                    </div>
                                </div>
                                <div class="doc-actions">
                                    ${isImage ? `
                                        <button class="btn btn-light btn-sm preview-doc" data-index="${index}" data-url="${fileUrl}" title="Preview">
                                            <i class="fas fa-eye"></i>
                                        </button>` : ``}
                                    <a href="${fileUrl}" download class="btn btn-light btn-sm" title="Download">
                                        <i class="fas fa-download"></i>
                                    </a>
                                </div>
                            </li>
                        `;
                        }
                    });

                    html += `</ul>`;

                    if (html === `<ul class="list-group w-100"></ul>`) {
                        html = "<p class='text-muted'>No documents uploaded.</p>";
                    }

                    $("#documentsContent").html(html);
                },
                error: function () {
                    $("#documentsContent").html("<p class='text-danger'>Failed to load documents.</p>");
                },
            });
        });
    </script>
    <!-- preview image -->
    <script>
        let previewDocs = [];
        let currentIndex = 0; // current image index

        function setPreviewDocs() {
            previewDocs = [];
            $(".preview-doc").each(function () {
                previewDocs.push($(this).data("url"));
            });
        }

        // Eye button click event
        $(document).on("click", ".preview-doc", function () {
            setPreviewDocs();
            currentIndex = parseInt($(this).data("index"));

            $("#docPreviewImg").attr("src", previewDocs[currentIndex]);
            $("#docPreviewModal").modal("show");
        });

        // Next button
        $(document).on("click", "#nextDoc", function () {
            currentIndex = (currentIndex + 1) % previewDocs.length;
            $("#docPreviewImg").attr("src", previewDocs[currentIndex]);
        });

        // Prev button
        $(document).on("click", "#prevDoc", function () {
            currentIndex = (currentIndex - 1 + previewDocs.length) % previewDocs.length;
            $("#docPreviewImg").attr("src", previewDocs[currentIndex]);
        });
    </script>
    <!-- end of preview image -->
    <!-- timer -->
    <script>
        function updatePunchInfo() {
            fetch("{{ route('employee.today.punchinfo') }}")
                .then(res => res.json())
                .then(data => {
                    // Punch In
                    document.getElementById('punchInTime').textContent = data.punchInTime || 'Not punched in yet';

                    // Punch Out
                    document.getElementById('punchOutTime').textContent = data.punchOutTime || '--:--';

                    // Total Hours
                    document.getElementById('totalHours').textContent = data.totalHours || '00:00:00';
                })
                .catch(err => console.error("Error fetching punch info:", err));
        }

        // Initial load
        updatePunchInfo();

        // Update every second for live total hours
        setInterval(updatePunchInfo, 1000);
    </script>
    <!-- hide show more -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const list = document.getElementById('leave-updates'),
                items = list.querySelectorAll('.leave-item'),
                toggleBtn = document.getElementById('toggleLeave');
            let expanded = false;

            const bgClasses = ['bg-primary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info', 'bg-dark']
                .sort(() => 0.5 - Math.random());

            items.forEach((item, index) => {
                const bg = bgClasses[index % bgClasses.length];
                item.classList.add(bg, 'text-white', 'p-1', 'rounded', 'fade-in');
            });

            function updateList() {
                items.forEach((item, i) => item.style.display = (expanded || i < 2) ? 'block' : 'none');
                toggleBtn.textContent = expanded ? 'Show Less' : 'Show More';
            }

            toggleBtn.addEventListener('click', e => {
                e.preventDefault();
                expanded = !expanded;
                updateList();
            });

            updateList(); // Initial setup
        });
    </script>
    <!-- leave chart -->
    <script>
        let attendanceChart; // Renamed for clarity, since it shows attendance data

        function loadAttendanceChart(year, month) {
            fetch(`{{ route('employee.attendance.overview') }}?year=${year}&month=${month}`)
                .then(res => {
                    if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
                    return res.json();
                })
                .then(data => {
                    const chartData = [data.onTime, data.late, data.absent];
                    const chartLabels = ['On Time', 'Late Attendance', 'Absent'];
                    const chartColors = ['#28a745', '#fd7e14', '#dc3545'];

                    if (attendanceChart) {
                        // Update existing chart
                        attendanceChart.data.datasets[0].data = chartData;
                        attendanceChart.update();
                    } else {
                        const ctx = document.getElementById('leaveChart').getContext('2d');
                        attendanceChart = new Chart(ctx, { // Using the clearer variable name
                            type: 'doughnut',
                            data: {
                                labels: chartLabels,
                                datasets: [{
                                    data: chartData,
                                    backgroundColor: chartColors,
                                    borderWidth: 0
                                }]
                            },
                            options: {
                                responsive: true,
                                cutout: '70%',
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'bottom',
                                        labels: {
                                            usePointStyle: true,
                                            pointStyle: 'circle',
                                            padding: 15,
                                            generateLabels: function (chart) {
                                                const data = chart.data;
                                                return data.labels.map(function (label, i) {
                                                    const value = data.datasets[0].data[i];
                                                    const backgroundColor = data.datasets[0].backgroundColor[i];
                                                    return {
                                                        text: `${label} (${value})`,
                                                        fillStyle: backgroundColor,
                                                        strokeStyle: backgroundColor,
                                                        pointStyle: 'circle',
                                                        hidden: isNaN(value) || chart.getDatasetMeta(0).data[i].hidden,
                                                        index: i
                                                    };
                                                });
                                            }
                                        }
                                    }
                                }
                            },
                            plugins: [{
                                id: 'centerText',
                                afterDraw: function (chart) {
                                    const {
                                        ctx,
                                        chartArea: {
                                            width,
                                            height,
                                            top,
                                            left
                                        }
                                    } = chart;
                                    const dataset = chart.data.datasets[0];
                                    const values = dataset.data;
                                    const colors = dataset.backgroundColor;

                                    ctx.save();
                                    ctx.textBaseline = 'middle';

                                    const x = left + width / 2;
                                    const y = top + height / 2;

                                    // --- CORRECTED LOGIC START ---
                                    let textParts = [];
                                    let totalWidth = 0;
                                    ctx.font = '14px Arial';

                                    // 1. Prepare segments (value + separator) and calculate total width
                                    values.forEach((val, i) => {
                                        let valText = (i < values.length - 1) ? val + " / " : val;
                                        const partWidth = ctx.measureText(valText).width;
                                        textParts.push({
                                            text: valText,
                                            width: partWidth,
                                            color: colors[i]
                                        });
                                        totalWidth += partWidth;
                                    });

                                    // 2. Calculate the starting X for the *entire* centered text block
                                    let startX = x - totalWidth / 2;
                                    
                                    // 3. Draw each segment sequentially using LEFT alignment
                                    ctx.textAlign = 'left'; 
                                    textParts.forEach(part => {
                                        ctx.fillStyle = part.color;
                                        ctx.fillText(part.text, startX, y);
                                        
                                        // Move startX for the next segment
                                        startX += part.width;
                                    });
                                    // --- CORRECTED LOGIC END ---

                                    ctx.restore();
                                }
                            }]
                        });
                    }
                })
                .catch(err => console.error("Error fetching attendance:", err));
        }

        // Initial load (current month)
        const today = new Date();
        loadAttendanceChart(today.getFullYear(), today.getMonth() + 1);

        // Month-Year picker change
        document.getElementById('monthYearPicker').addEventListener('change', (e) => {
            const [year, month] = e.target.value.split("-");
            loadAttendanceChart(parseInt(year), parseInt(month));
        });
    </script>
@endpush