@extends('layouts.dashboard')

@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>
            <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>
        </div>
    </div>
</div>

@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

<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">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="name" placeholder="Enter Name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="date-picker">
                                <div class="form-group mb-0">
                                    <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">
                                    <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">
                <h3> Total Employees | Absent | On-Time | Late</h3>
                <div class="card card-warning">
                    <div class="card-header">
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">

                        <!-- ⭐ Add Chart Switch Buttons -->
                        <div class="mb-3">
                            <button type="button" id="lineChartButton" class="btn btn-success btn-sm">Line Chart</button>
                            <button type="button" id="barChartButton" class="btn btn-info btn-sm">Bar Chart</button>
                        </div>

                        <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>
    <!-- End of Chart Section -->

</section>
@endsection

@push('scripts')

<script>

$(function() {
    var ctx = $('#combinedLineChart1').get(0).getContext('2d'),
        chart,
        currentChartType = 'line'; // ⭐ Default Chart Type

    let today1 = new Date();
    let firstDay = new Date(today1.getFullYear(), today1.getMonth(), 1);

    let todayStr = formatDate1(today1);
    let firstDayStr = formatDate1(firstDay);

    fetchGraphData(firstDayStr, todayStr);

    function formatDate1(date) {
        let day = ("0" + date.getDate()).slice(-2);
        let month = ("0" + (date.getMonth() + 1)).slice(-2);
        let year = date.getFullYear().toString().slice(-2);
        return `${day}-${month}-${year}`;
    }

    function formatDate(date) {
        let day = ("0" + date.getDate()).slice(-2);
        let month = ("0" + (date.getMonth() + 1)).slice(-2);
        let year = date.getFullYear();
        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();
        let labels = [];

        for (let day = 1; day <= daysInMonth; day++) {
            let date = new Date(year, month - 1, day);
            let formattedDate = date.toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short'
            });
            labels.push(formattedDate);
        }

        let tomorrow = new Date(year, month - 1, daysInMonth + 1);
        let formattedTomorrow = tomorrow.toLocaleDateString('en-GB', {
            day: 'numeric',
            month: 'short'
        });
        labels.push(formattedTomorrow);
        return labels;
    }

    function createChart(labels, datasets) {
        if (chart) {
            chart.destroy();
        }
        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: currentChartType, // ⭐ Chart Type Line or Bar
            data: {
                labels,
                datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            color: textColor
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            color: textColor
                        },
                        ticks: {
                            color: textColor
                        },
                        grid: {
                            drawBorder: false,
                            drawTicks: false,
                            color: gridColor
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            color: textColor
                        },
                        ticks: {
                            color: textColor
                        },
                        beginAtZero: true,
                        grid: {
                            drawBorder: false,
                            drawTicks: false,
                            color: gridColor
                        }
                    }
                }
            }
        });
    }

    function parseDate(dateString) {
        const parts = dateString.split("-");
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        let year = parseInt(parts[2], 10);
        year += (year < 50) ? 2000 : 1900;
        return new Date(year, month, day);
    }

    function fetchGraphData(fromDate, toDate, name) {
        $.get('/get-graph-data', {
            from_date: fromDate,
            end_date: toDate,
            name: name
        })
        .done(function(res) {
            const date = parseDate(fromDate);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            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, 0.5)',
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'Absent',
                    data: res.absentEmployees.map(Number),
                    borderColor: 'rgba(153, 102, 255, 1)',
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'On-Time',
                    data: res.onTimeArrivals.map(Number),
                    borderColor: 'rgba(255, 206, 86, 1)',
                    backgroundColor: 'rgba(255, 206, 86, 0.5)',
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'Late Arrivals',
                    data: res.lateArrivals.map(Number),
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    fill: false,
                    tension: 0.4
                }
            ];

            createChart(labels, datasets);
        })
        .fail(err => console.error('Error fetching graph data:', err));
    }

    $('#filterButton').click(function() {
        let fromDate = $('#fromDate').val();
        let toDate = $('#toDate').val();
        let name = $('#name').val();

        if (fromDate && toDate && name) {
            fetchGraphData(fromDate, toDate, name);
        } else if (fromDate && toDate) {
            fetchGraphData(fromDate, toDate);
        } else {
            // ⭐⭐ Default case added ⭐⭐
            let today1 = new Date();
            let firstDay = new Date(today1.getFullYear(), today1.getMonth(), 1);
            let todayStr = formatDate1(today1);
            let firstDayStr = formatDate1(firstDay);
            fetchGraphData(firstDayStr, todayStr);
        }
    });

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

    $("#fromDate").on("change", function() {
        let selectedDate = $(this).datepicker("getDate");
        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"
        });

        $("#fromDate").val(formatDate(minDate));
        $("#toDate").val(formatDate(maxDate));
    });

    $('#lineChartButton').click(function() {
        currentChartType = 'line';
        $('#filterButton').trigger('click');
    });

    $('#barChartButton').click(function() {
        currentChartType = 'bar';
        $('#filterButton').trigger('click');
    });
});

</script>

@endpush