@extends('layouts.dashboard')
<style>
    .modal-header.bg-warning {
        color: #fff !important;
    }
</style>
@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <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 -->



@if (Session::has('message'))
<div class="col-sm-12">
    <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
    </div>
</div>
@endif

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
                <div class="prog prog-1 py-0 border-success">
                    <div class="progressdiv nprogreess" data-percent="{{ 100 - ($attendanceSummary['attendanceSummary']['present_percentage'])}}" total-data="100" offuse-data="{{ $attendanceSummary['attendanceSummary']['present_percentage']}}">
                        <svg class="progress" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"
                            stroke="#c0392b ">
                            <path class="grey" d="M 45 156 A 80 80 124 1 1 137 155" fill="none" stroke-dasharray="404"
                                stroke-dashoffset="0"></path>
                            <path class="grey-path-2" d="M 45 156 A 80 80 124 1 1 137 155" fill="none"
                                stroke-dasharray="404" stroke-dashoffset="0"></path>
                            <path class="offline amber" fill="transparent" stroke-dasharray="404.5"
                                stroke-dashoffset="404" d="M 45 156 A 80 80 124 1 1 137 155"
                                style="stroke-dashoffset: 0;"></path>
                            <path class="online" fill="transparent" stroke-dasharray="404.5" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 0;"></path>
                            <path class="white1" fill="transparent" stroke-dasharray="0 408" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 5;"></path>
                        </svg>
                    </div>
                    <p class="bgp avg-value yellow-text">{{ $attendanceSummary['attendanceSummary']['present']}}</p>
                    <div class="domain-name bg-success" onclick="loadAttendanceList('present')" style="cursor: pointer;">
                        <p class="sml-txt yelw-txt text-white">Present</p>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
                <div class="prog prog-1 py-0 border-info">
                    <div class="progressdiv nprogreess" data-percent="{{ 100 - ($attendanceSummary['attendanceSummary']['on_time_percentage'])}}" total-data="100" offuse-data="{{ $attendanceSummary['attendanceSummary']['on_time_percentage'] }}">
                        <svg class="progress" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"
                            stroke="#c0392b ">
                            <path class="grey" d="M 45 156 A 80 80 124 1 1 137 155" fill="none" stroke-dasharray="404"
                                stroke-dashoffset="0"></path>
                            <path class="grey-path-2" d="M 45 156 A 80 80 124 1 1 137 155" fill="none"
                                stroke-dasharray="404" stroke-dashoffset="0"></path>
                            <path class="offline amber" fill="transparent" stroke-dasharray="404.5"
                                stroke-dashoffset="404" d="M 45 156 A 80 80 124 1 1 137 155"
                                style="stroke-dashoffset: 0;"></path>
                            <path class="online" fill="transparent" stroke-dasharray="404.5" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 0;"></path>
                            <path class="white1" fill="transparent" stroke-dasharray="0 408" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 5;"></path>
                        </svg>
                    </div>
                    <p class="bgp avg-value yellow-text">{{ $attendanceSummary['attendanceSummary']['on_time']}}</p>
                    <div class="domain-name bg-info" onclick="loadAttendanceList('on-time')" style="cursor: pointer;">
                        <p class="sml-txt yelw-txt text-white">Ontime</p>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
                <div class="prog prog-1 py-0 border-warning">
                    <div class="progressdiv nprogreess" data-percent="{{ 100 - ($attendanceSummary['attendanceSummary']['late_percentage'])}}" total-data="100" offuse-data="{{ $attendanceSummary['attendanceSummary']['late_percentage'] }}">
                        <svg class="progress" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"
                            stroke="#c0392b ">
                            <path class="grey" d="M 45 156 A 80 80 124 1 1 137 155" fill="none" stroke-dasharray="404"
                                stroke-dashoffset="0"></path>
                            <path class="grey-path-2" d="M 45 156 A 80 80 124 1 1 137 155" fill="none"
                                stroke-dasharray="404" stroke-dashoffset="0"></path>
                            <path class="offline amber" fill="transparent" stroke-dasharray="404.5"
                                stroke-dashoffset="404" d="M 45 156 A 80 80 124 1 1 137 155"
                                style="stroke-dashoffset: 0;"></path>
                            <path class="online" fill="transparent" stroke-dasharray="404.5" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 0;"></path>
                            <path class="white1" fill="transparent" stroke-dasharray="0 408" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 5;"></path>
                        </svg>
                    </div>
                    <p class="bgp avg-value yellow-text">{{ $attendanceSummary['attendanceSummary']['late']}}</p>
                    <div class="domain-name bg-warning" onclick="loadAttendanceList('late')" style="cursor: pointer;">
                        <p class="sml-txt yelw-txt text-white">Late</p>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
                <div class="prog prog-1 py-0 border-danger">
                    <div class="progressdiv nprogreess" data-percent="{{ 100 -($attendanceSummary['attendanceSummary']['absent_percentage'])}}" total-data="100" offuse-data="{{ $attendanceSummary['attendanceSummary']['absent_percentage'] }}">
                        <svg class="progress" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"
                            stroke="#c0392b ">
                            <path class="grey" d="M 45 156 A 80 80 124 1 1 137 155" fill="none" stroke-dasharray="404"
                                stroke-dashoffset="0"></path>
                            <path class="grey-path-2" d="M 45 156 A 80 80 124 1 1 137 155" fill="none"
                                stroke-dasharray="404" stroke-dashoffset="0"></path>
                            <path class="offline amber" fill="transparent" stroke-dasharray="404.5"
                                stroke-dashoffset="404" d="M 45 156 A 80 80 124 1 1 137 155"
                                style="stroke-dashoffset: 0;"></path>
                            <path class="online" fill="transparent" stroke-dasharray="404.5" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 0;"></path>
                            <path class="white1" fill="transparent" stroke-dasharray="0 408" stroke-dashoffset="404"
                                d="M 45 156 A 80 80 124 1 1 137 155" style="stroke-dashoffset: 5;"></path>
                        </svg>
                    </div>
                    <p class="bgp avg-value yellow-text">{{ $attendanceSummary['attendanceSummary']['absent']}}</p>
                    <div class="domain-name bg-danger" onclick="loadAttendanceList('absent')" style="cursor: pointer;">
                        <p class="sml-txt yelw-txt text-white">Absent</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Info boxes -->
        <!-- <div class="row">
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="info-box">
          <span class="info-box-icon bg-info elevation-1"><i class="fas fa-building"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Departments</span>
            <span class="info-box-number">
              {{ \App\Models\Department::where(['user_id'=>auth()->id()])->count() }}
            </span>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="info-box mb-3">
          <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-briefcase"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Designation</span>
            <span class="info-box-number"> {{ \App\Models\Designation::where(['user_id'=>auth()->id()])->count() }}</span>
          </div>
        </div>
      </div>
      <div class="clearfix hidden-md-up"></div>

      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="info-box mb-3">
          <span class="info-box-icon bg-success elevation-1"><i class="fas fa-code-branch"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">Branches</span>
            <span class="info-box-number">{{ \App\Models\Branch::where(['user_id'=>auth()->id()])->count() }}</span>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="info-box mb-3">
          <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">Employees</span>
            <span class="info-box-number">{{ \App\Models\Employee::where(['user_id'=>auth()->id()])->count() }}</span>
          </div>
        </div>
      </div>
    </div> -->
        <!-- ✅ Employee List Container Added Here -->
        <div class="row mt-3">
            <div class="col-12">
                <div id="employeeListContainer"></div>
            </div>
        </div>
        <!-- ✅ End of Employee List Container -->
    </div>
</section>
<!-- /.content -->
<section class="container-fluid chart-section mt-5">
    <div class="row">
        <div class="col-12">
            <form class="calender-form mt-3" action="">
                <div class="calender-wrapper">
                    <ul class="list-inline float-right">
                        <li class="list-inline-item">
                            <div class="date-picker">
                                <div class="form-group mb-0">
                                    <!-- <label for="fromDate">From Date:</label> -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="fromDate"
                                            placeholder="Select From Date">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="date-picker">
                                <div class="form-group mb-0">
                                    <!-- <label for="toDate">To Date:</label> -->
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="toDate"
                                            placeholder="Select To Date">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <button type="button" id="filterButton" class="btn btn-primary btn-sm float-right pt-2 pb-2">Filter</button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <!-- chart section -->
    <div class="row mt-2">
        <div class="col-12">
            <div class="chart-title">
                <div class="card card-warning">
                    <div class="card-header">
                        <h3 class="card-title"> Total Employees | Absent | On-Time | Late</h3>
                        <div class="card-tools">
                            <button type="button" class="btn" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="combinedLineChart1"
                                style="min-height: 250px; height: 400px; max-height: 450px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-12">
            <div class="chart-title">
                <div class="card card-warning">
                    <div class="card-header">
                        <h3 class="card-title"> Total Employees | Absent | On-Time | Late</h3>
                        <div class="card-tools">
                            <button type="button" class="btn" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="stackedBarChart"
                                style="min-height: 250px; height: 400px; max-height: 450px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
    <!-- end of chart section -->
    <!-- Modal -->
    <div class="modal fade" id="attendanceModal" tabindex="-1" role="dialog" aria-labelledby="attendanceModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="attendanceModalTitle">Attendance List</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">
                    <!-- Employee names will be injected here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>




</section>
@endsection
@push('scripts')

<script>
    let stackedBarChart; // Declare globally

    $(function() {
        var ctx = $('#combinedLineChart1').get(0).getContext('2d'),
            chart;

        let today1 = new Date();
        let firstDay = new Date(today1.getFullYear(), today1.getMonth(), 1); // First day of the month

        let todayStr = formatDate1(today1); // Format today as dd-mm-yy
        let firstDayStr = formatDate1(firstDay); // Format first day as dd-mm-yy

        fetchGraphData(firstDayStr, todayStr);


        function formatDate1(date) {
            let day = ("0" + date.getDate()).slice(-2);
            let month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are 0-based
            let year = date.getFullYear().toString().slice(-2); // Get last 2 digits of year

            return `${day}-${month}-${year}`;
        }


        function generateLabels(year, month) {

            if (month < 1 || month > 12) {
                throw new Error("Invalid month value. It should be between 1 and 12.");
            }
            let daysInMonth = new Date(year, month, 0).getDate(); // Get total days in month
            let labels = [];

            for (let day = 1; day <= daysInMonth; day++) {
                let date = new Date(year, month - 1, day); // months are 0-indexed
                if (date.getDate() !== day) {
                    throw new Error("Invalid date encountered while generating labels.");
                }
                let formattedDate = date.toLocaleDateString('en-GB', {
                    day: 'numeric',
                    month: 'short'
                });
                labels.push(formattedDate);
            }
            // Add tomorrow's date
            let tomorrow = new Date(year, month - 1, daysInMonth + 1);
            let formattedTomorrow = tomorrow.toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short'
            });
            labels.push(formattedTomorrow);
            console.log(labels);
            return labels;
        }
        // Dark Mode Switch - Update Chart Colors Instantly


        function createChart(labels, datasets) {
            if (chart) {
                chart.destroy(); // Destroy existing chart before creating a new one
            }
            let isDarkMode = $('body').hasClass('dark-mode');
            let textColor = isDarkMode ? '#ffffff' : '#000000';
            let gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(223, 223, 223, 0.2)';
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: textColor // Legend text color
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                color: textColor // X-axis title color
                            },
                            ticks: {
                                color: textColor // X-axis label color
                            },
                            grid: {
                                drawBorder: false,
                                drawTicks: false,
                                color: gridColor // X-axis grid color
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                color: textColor // Y-axis title color
                            },
                            ticks: {
                                color: textColor // Y-axis label color
                            },
                            beginAtZero: true,
                            grid: {
                                drawBorder: false,
                                drawTicks: false,
                                color: gridColor // Y-axis grid color
                            }
                        }
                    }
                }
            });
        }


        function parseDate(dateString) {
            const parts = dateString.split("-"); // Split "03-03-25" into ["03", "03", "25"]
            const day = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1; // Convert to 0-based month
            let year = parseInt(parts[2], 10);

            // Convert 2-digit year to 4-digit year (assume 2000+ for "25")
            year += (year < 50) ? 2000 : 1900; // Adjust logic if needed

            return new Date(year, month, day);
        }

        function fetchGraphData(fromDate, toDate) {
            console.log("Fetching data from:", fromDate, toDate);

            $.get("{{ route('fetch-graph-data') }}", {
                    from_date: fromDate,
                    end_date: toDate
                })
                .done(function(res) {

                    const date = parseDate(fromDate);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    //date.getDate()

                    let labels = generateLabels(year, month);
                    let datasets = [{
                            label: 'Total Employees',
                            data: res.total_employees.map(Number),
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 1)',
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: 'Absent',
                            data: res.absentEmployees.map(Number),
                            borderColor: 'rgba(153, 102, 255, 1)',
                            backgroundColor: 'rgba(153, 102, 255, 1)',
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: 'On-Time',
                            data: res.onTimeArrivals.map(Number),
                            borderColor: 'rgba(255, 206, 86, 1)',
                            backgroundColor: 'rgba(255, 206, 86, 1)',
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: 'Late Arrivals',
                            data: res.lateArrivals.map(Number),
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 1)',
                            fill: false,
                            tension: 0.4
                        }
                    ];

                    createChart(labels, datasets);
                })
                .fail(err => console.error('Error fetching graph data:', err));
        }
        $('#darkModeSwitch').on('click', function() {
            $('body').toggleClass('dark-mode');

            let isDarkMode = $('body').hasClass('dark-mode');
            let textColor = isDarkMode ? '#ffffff' : '#000000';
            let gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(223, 223, 223, 0.2)';

            // Update Combined Line Chart
            if (chart) {
                chart.options.plugins.legend.labels = {
                    color: textColor
                };
                chart.options.scales.x.title.color = textColor;
                chart.options.scales.x.ticks.color = textColor;
                chart.options.scales.x.grid.color = gridColor;
                chart.options.scales.y.title.color = textColor;
                chart.options.scales.y.ticks.color = textColor;
                chart.options.scales.y.grid.color = gridColor;
                chart.update();
            }

            // Update Stacked Bar Chart
            if (stackedBarChart) {
                stackedBarChart.options.plugins.legend.labels.color = textColor;
                stackedBarChart.options.scales.x.title.color = textColor;
                stackedBarChart.options.scales.x.ticks.color = textColor;
                stackedBarChart.options.scales.x.grid.color = gridColor;
                stackedBarChart.options.scales.y.title.color = textColor;
                stackedBarChart.options.scales.y.ticks.color = textColor;
                stackedBarChart.options.scales.y.grid.color = gridColor;
                stackedBarChart.update();
            }
        });


        // Filter Data on Button Click
        $('#filterButton').click(function() {
            let fromDate = $('#fromDate').val();
            let toDate = $('#toDate').val();
            if (fromDate && toDate) {
                fetchGraphData(fromDate, toDate);
            }
        });

        // Date pickers setup
        $("#fromDate, #toDate").datepicker({
            dateFormat: "dd-mm-yy"
        });

        $("#fromDate").on("change", function() {
            let selectedDate = $(this).datepicker("getDate"); // Get selected date
            if (!selectedDate) return;

            let minDate = new Date(selectedDate);
            let maxDate = new Date(minDate);
            maxDate.setMonth(minDate.getMonth() + 1);

            $("#toDate").datepicker("option", {
                minDate: minDate,
                maxDate: maxDate,
                dateFormat: "dd-mm-yy"
            });

            // Ensure formatted values appear correctly
            let formattedFromDate = formatDate(minDate);
            $("#fromDate").val(formattedFromDate);

            let formattedToDate = formatDate(maxDate);
            $("#toDate").val(formattedToDate);
        });
    });



    //Stack bar graph 
    $(document).ready(function() {
        const totalEmployees = 50; // Default placeholder value
        let isDarkMode = $('body').hasClass('dark-mode');
        let textColor = isDarkMode ? '#ffffff' : '#000000'; // Define textColor here

        // Fetch chart data from the server
        $.ajax({
            url: "{{ route('chart-data') }}",
            method: 'GET',
            success: function(response) {
                // Extract data
                const onTimeData = response.onTimeData;
                const lateArrivalsData = response.lateArrivalsData;
                const absentData = response.absentData;
                // Dark Mode Switch - Update Chart Colors Instantly

                // Chart Data
                const stackedBarChartData = {
                    labels: [
                        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                        'Nov', 'Dec'
                    ],
                    datasets: [{
                            label: 'Absent',
                            data: absentData,
                            backgroundColor: 'rgb(242, 31, 31)' // Red
                        },
                        {
                            label: 'On-Time',
                            data: onTimeData,
                            backgroundColor: 'rgba(75, 192, 192, 1)' // Green
                        },
                        {
                            label: 'Late Arrivals',
                            data: lateArrivalsData,
                            backgroundColor: 'rgba(255, 206, 86, 1)' // Yellow
                        },

                    ]
                };


                // Chart Options
                const stackedBarChartOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: textColor // Legend text color
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const value = context.raw;
                                    const percentage = ((value / totalEmployees) * 100).toFixed(
                                        2);
                                    return `${context.dataset.label}: ${value} (${percentage}%)`;
                                }
                            }
                        },
                        datalabels: {
                            display: true,
                            color: 'black',
                            font: {
                                size: 10,
                                weight: 'bold'
                            },
                            formatter: function(value) {
                                return value;
                            },
                            anchor: 'center',
                            align: 'center',
                        }
                    },
                    scales: {
                        x: {
                            stacked: true,
                            title: {
                                display: true,
                                color: textColor
                            },
                            ticks: {
                                color: textColor // X-axis label color
                            },
                            grid: {
                                drawBorder: false,
                                drawTicks: false,
                                color: 'rgba(223, 223, 223, 0.2)' // Adjust grid opacity
                            }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            max: totalEmployees,
                            title: {
                                display: true,
                                color: textColor
                            },
                            ticks: {
                                color: textColor // Y-axis label color
                            },
                            grid: {
                                drawBorder: false,
                                drawTicks: false,
                                color: 'rgba(223, 223, 223, 0.2)' // Adjust grid opacity
                            }
                        },

                    }
                };


                // Render the chart
                const stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d');
                stackedBarChart = new Chart(stackedBarChartCanvas, { // Assign to global variable
                    type: 'bar',
                    data: stackedBarChartData,
                    options: stackedBarChartOptions,
                    plugins: [ChartDataLabels]
                });

            },
            error: function(error) {
                console.error('Error fetching chart data:', error);
            }
        });
    });
</script>
<script>
    function progress_bar() {
        window.onload = function() {
            var totalProgress, progress, total, offuse;
            var path = document.querySelectorAll(".progress, .inner-progress");

            for (var i = 0; i < path.length; i++) {
                totalProgress = path[i]
                    .querySelector("path")
                    .getAttribute("stroke-dasharray");

                progress = path[i].parentElement.getAttribute("data-percent");
                total = path[i].parentElement.getAttribute("total-data");
                offuse = path[i].parentElement.getAttribute("offuse-data");

                var percent = parseInt(
                    document.querySelector(".progressdiv").getAttribute("data-percent")
                );
                var offsetData = parseInt(
                    document.querySelector(".progressdiv").getAttribute("offuse-data")
                );
                var usedData = percent + offsetData;
                var all = (totalProgress * progress) / total;
                var act = totalProgress - all;
                path[i].querySelector(".online").style["stroke-dashoffset"] = act;

                var offdata = (totalProgress * usedData) / total;
                var offdatas = totalProgress - offdata;
                path[i].querySelector(".offline").style["stroke-dashoffset"] = offdatas;

                path[i].querySelector(".white1").style["stroke-dashoffset"] = act + 5;
            }
        };
    }
    progress_bar();
</script>
<script>
    function loadAttendanceList(status) {
        $.get("{{ route('get-attendance-list') }}", {
            status
        }, function(response) {
            const names = response.employee_names,
                modal = $('#attendanceModal'),
                body = modal.find('.modal-body').empty(),
                header = modal.find('.modal-header').removeClass().addClass('modal-header ' + getHeaderClass(status)),
                icon = getStatusIcon(status),
                textClass = getTextColorClass(status),
                title = "Employees marked as: " + status.toUpperCase();

            $('#attendanceModalTitle').text(title);

            body.append(`<div class="total-count font-weight-bold mb-2 ${textClass}">
            Total ${capitalize(status)}: ${names.length}</div>`);

            if (names.length > 0) {
                names.forEach(name => body.append(`<p>${icon} ${name}</p>`));
            } else {
                body.append('<p class="text-danger">No employees found for this status.</p>');
            }

            modal.modal('show');
        }).fail(() => alert('Something went wrong!'));
    }

    const getHeaderClass = status => {
        switch (status.toLowerCase()) {
            case 'present':
                return 'bg-success text-white';
            case 'ontime':
                return 'bg-info text-white';
            case 'late':
                return 'bg-warning text-white';
            case 'absent':
                return 'bg-danger text-white';
            default:
                return 'bg-primary text-white';
        }
    };

    const getTextColorClass = status => {
        switch (status.toLowerCase()) {
            case 'present':
                return 'text-success';
            case 'ontime':
                return 'text-info';
            case 'late':
                return 'text-warning';
            case 'absent':
                return 'text-danger';
            default:
                return 'text-primary';
        }
    };

    const getStatusIcon = status => {
        switch (status.toLowerCase()) {
            case 'present':
                return '<i class="fa fa-check-circle text-success mr-2"></i>';
            case 'ontime':
                return '<i class="fa fa-user-check text-info mr-2"></i>';
            case 'late':
                return '<i class="fa fa-clock text-warning mr-2"></i>';
            case 'absent':
                return '<i class="fa fa-times-circle text-danger mr-2"></i>';
            default:
                return '<i class="fa fa-star text-primary mr-2"></i>';
        }
    };

    const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
</script>
<script>
    const timezoneName = "{{ auth()->user()->timezone }}";

    function updateIndiaTime() {
        const now = new Date();
        const indiaTime = now.toLocaleString("en-IN", {
            timeZone: timezoneName,
            hour12: true,
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit"
        });

        document.getElementById("india-time-label").textContent =
            `Current Time Zone: ${timezoneName} — ${indiaTime}`;
    }

    setInterval(updateIndiaTime, 1000);
    updateIndiaTime();
</script>
@endpush