@extends('layouts.mainlayout')

@section('title', 'Daily Employee Report')

@section('main')


    <div class="card">
        <div class="mt-2">
            <div class="row input-daterange">
            </div>
            <div class="row">
            <div class="col-md-3 mb-3 mt-2 ml-3">
                <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
                </div>
                <div class="page-header">
                    <div class="page-header-content header-elements-inline">
                        <div class="header-elements d-none text-center text-md-left mb-2 mb-md-0">
                            @if(auth()->user()->can('View All Attendance Report') || auth()->user()->can('View Team Attendance Report'))
                            <div class="btn-group mt-2">
                                <button type="button" class="btn bg-indigo-400" id ="selectOption" ><i class="icon-stack2 mr-2"></i>Select Team</button>
                                <button type="button" class="btn bg-indigo-400 dropdown-toggle" data-toggle="dropdown"></button>
                                <div class="dropdown-menu dropdown-menu-right" style="max-height: 300px; overflow-y: auto;">
                                    <a href="JavaScript:void(0);" class="dropdown-item reportfilter active" value="0"><i class="icon-users4"></i>All</a>
                                    @foreach ($teams as $team)
                                        <a href="JavaScript:void(0);" class="dropdown-item reportfilter" value="{{$team->id}}"><i class="icon-users4"></i>{{ $team->team }}</a>
                                    @endforeach
                                </div>
                            </div>
                            </div>

                    </div>
                </div>
                            <div class="btn-group mt-2 col-md-2">
                            
                                
                                <select name="selectuserOption" id="selectuserOption" class="form-control select-multiple-drag required bg-indigo-400" disabled>
                                    <option value="0" selected="">Select Employee</option>
                                    @foreach ($users as $user)
                                       <option value="{{$user->id}}">{{ $user->name}}&nbsp; {{$user->lastName }}</option>
                                    @endforeach
                                    
                                </select>
                           
                        </div>
                            @endif
                      &nbsp;  
                <div class="button-responsive">
                <button type="submit" id="filter" class="btn btn-success mb-3 mt-2 " disabled>Generate report</button> 
                <button type="reset" id="reset" onClick="window.location.reload();" class="btn btn-danger ml-3 mb-3 mt-2">Reset</button>
            </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            const $employeeDropdown = $('#selectuserOption');

            // Handle team selection
            $(document).on('click', '.reportfilter', function () {
                let teamId = $(this).attr('value');
                $('#selectOption').text($(this).text());
                $('#selectOption').val(teamId);

                // Enable or disable the employee dropdown based on team selection
                if (teamId !== "0") {
                    $employeeDropdown.prop('disabled', false);
                } else {
                    $employeeDropdown.prop('disabled', true);
                    $employeeDropdown.val("0"); // Reset selection if no team is chosen
                }
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            const $employeeDropdown = $('#selectuserOption');
            const $generateReportButton = $('#filter');

            // Handle team selection
            $(document).on('click', '.reportfilter', function () {
                let teamId = $(this).attr('value');
                $('#selectOption').text($(this).text());
                $('#selectOption').val(teamId);

                // Enable or disable the employee dropdown based on team selection
                if (teamId !== "0") {
                    $employeeDropdown.prop('disabled', false);
                } else {
                    $employeeDropdown.prop('disabled', true).val("0");
                    $generateReportButton.prop('disabled', true); // Disable button if no team is chosen
                }
            });

            // Enable the "Generate report" button when an employee is selected
            $employeeDropdown.change(function () {
                if ($(this).val() !== "0") {
                    $generateReportButton.prop('disabled', false);
                } else {
                    $generateReportButton.prop('disabled', true);
                }
            });
        });
    </script>

    <div>
        <canvas id="attendanceChart" width="400" height="200"></canvas>
    </div>
    





   
@endsection
@section('js')
<script type="text/javascript">
$(function() {

    var start = moment().startOf('month');
    var end = moment().endOf('month');

    function cb(start, end) {
        $('#reportrange span').html(start.format("{{strtoupper(Config('settings.date_format'))}}") + ' - ' + end.format("{{strtoupper(Config('settings.date_format'))}}"));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>
    <script>
        //This is being used to transfer base64 images from the other blade file
        let toBeEncodedImages = [];
        let encodedImages = [];
        let attendanceChart = null; // Declare chart variable globally


        $(window).on('load', function() { // makes sure the whole site is loaded 
            $('#status').fadeOut(); // will first fade out the loading animation 
            $('#preloader').fadeOut(); // will fade out the white DIV that covers the website. 
        })

        $(document).ready(function () {
            initializeDateFilter();
            initializeLeaveReportFilter();
            var startDate = new Date(new Date().getFullYear()-1, 0, 1);
            var endDate = new Date(new Date().getFullYear()+1, 0, 0);
        });
        
  




        function initializeDateFilter(){
            //console.log("isnde")
            
            $('#filter').click(function(){
                $('#status').fadeIn(); // will first fade out the loading animation 
                $('#preloader').fadeIn(); // will fade out the white DIV that covers the website. 
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                });   
                // get the values teamId, from date and to date
                var teamId = $('.reportfilter.active').attr('value');
                var month_year = $('#month_year').val();
                var userid = $('#selectuserOption').val();
                // console.log(teamId, month_year, userid)
                var from_date =  $('#reportrange').data('daterangepicker').startDate;
                var to_date = $('#reportrange').data('daterangepicker').endDate;
                var formData = new FormData();
                formData.append('teamId', teamId);
                formData.append('month_year', month_year);
                formData.append('userid', userid);
                formData.append('fromDate', from_date);
                formData.append('toDate', to_date); 
                var baseurl =  document.getElementById('baseurl').value;




        $.ajax({
            type: 'POST',
            url: baseurl + '/daily-employee-report/get-attendance-report',
            processData: false,
            contentType: false,
            data: formData,
            success: function(data) {
                    if (!data || data.length === 0) {

                    // Reset the chart if it exists
                    if (attendanceChart !== null) {
                        attendanceChart.destroy();
                        attendanceChart = null;
                    }

                    // Clear the canvas to remove any previous chart data
                    const canvas = document.getElementById('attendanceChart');
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);



                    $('#status').fadeOut();
                    $('#preloader').fadeOut();

                    alert("No attendance data available");
                    return; // Exit early to avoid further processing
                }

                // Destroy the chart if it exists before creating a new one
                if (attendanceChart !== null) {
                    attendanceChart.destroy();
                }



                // Create chart context
                const ctx = document.getElementById('attendanceChart').getContext('2d');

                // Process data to handle shifts spanning past midnight
                const attendancePoints = data.map(entry => {
                    if (!entry.check_in || !entry.shift_start || !entry.shift_end || !entry.buffer_on_checkin) {
                        console.warn('Missing required data fields in entry:', entry);
                        return null; // Skip only invalid entries without check-in
                    }

                    // Parse times into floating-point hours
                    const checkInTime = parseTime(entry.date, entry.check_in);
                    const checkOutTime = entry.check_out ? parseTime(entry.date, entry.check_out) : null;
                    const shiftStartTime = parseTime(entry.date, entry.shift_start);
                    const shiftEndTime = parseTime(entry.date, entry.shift_end);

                    // Calculate buffer-adjusted shift start time
                    const [bufferHours, bufferMinutes] = entry.buffer_on_checkin.split(':').map(Number);
                    const bufferAdjustedShiftStart = shiftStartTime + (bufferHours + bufferMinutes / 60);

                    // Handle overnight shift by splitting it into two parts if needed
                    const isOvernightShift = shiftEndTime < shiftStartTime;
                    return {
                        date: entry.date,
                        checkInTime: checkInTime,
                        checkOutTime: checkOutTime,
                        shiftStartTime1: bufferAdjustedShiftStart,
                        shiftEndTime1: isOvernightShift ? 24 : shiftEndTime, // End at 24 (midnight) if overnight shift
                        shiftStartTime2: isOvernightShift ? 0 : null, // Start from midnight for the next part if overnight
                        shiftEndTime2: isOvernightShift ? shiftEndTime : null, // End at actual shift end if overnight
                        lateCheckin: checkInTime > bufferAdjustedShiftStart,
                        earlyCheckout: checkOutTime !== null && checkOutTime < shiftEndTime // Check for early checkout if check-out is present
                    };
                }).filter(Boolean); // Remove only null entries with missing check-in data

                // Extract dates as labels for the chart
                const labels = attendancePoints.map(point => point.date);

                // Create Chart.js line chart
                attendanceChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Check-in',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.checkInTime })),
                                backgroundColor: attendancePoints.map(point => point.lateCheckin ? 'red' : 'black'),
                                pointRadius: attendancePoints.map(point => point.lateCheckin ? 10 : 5),
                                borderColor: 'black',
                                borderWidth: 0, // Remove the line by setting borderWidth to 0
                                fill: false
                            },
                            {
                                label: 'Check-out',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.checkOutTime })),
                                backgroundColor: attendancePoints.map(point => point.earlyCheckout ? 'red' : 'black'),
                                pointRadius: attendancePoints.map(point => point.earlyCheckout ? 10 : 5),
                                borderColor: 'black',
                                borderWidth: 0, // Remove the line
                                fill: false
                            },
                            {
                                label: 'Shift Start Time',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.shiftStartTime1 })),
                                backgroundColor: 'transparent',
                                borderColor: 'rgba(0, 128, 0, 0)', // Invisible line
                                borderWidth: 0, // Remove the line
                                pointRadius: 0,
                                fill: false,
                                showInLegend: false,
                            },
                            {
                                label: 'Shift End Time',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.shiftEndTime1 })),
                                backgroundColor: 'rgba(0, 128, 0, 0.10)',
                                borderColor: 'rgba(0, 128, 0)',
                                borderWidth: 0, // Remove the line
                                pointRadius: 0,
                                fill: '-1',
                                showInLegend: false,
                            },
                            {
                                label: 'Shift Start Time',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.shiftStartTime2 })),
                                backgroundColor: 'transparent',
                                borderColor: 'rgba(0, 128, 0, 0)', // Invisible line
                                borderWidth: 0, // Remove the line
                                pointRadius: 0,
                                fill: false,
                                showInLegend: false,
                            },
                            {
                                label: 'Shift End Time',
                                data: attendancePoints.map(point => ({ x: point.date, y: point.shiftEndTime2 })),
                                backgroundColor: 'rgba(0, 128, 0, 0.10)',
                                borderColor: 'rgba(0, 128, 0)',
                                borderWidth: 0, // Remove the line
                                pointRadius: 0,
                                fill: '-1',
                                showInLegend: false,
                            }
                        ]
                    },
                    options: {
                        scales: {
                            x: {
                                type: 'category',
                                labels: labels,
                                title: {
                                    display: true,
                                    text: 'Date'
                                },
                                grid: {
                                    display: false
                                }
                            },
                            y: {
                                min: 0,
                                // Dynamically set the max value based on the latest shift end time, but capped at 24 hours
                                max: Math.min(
                                    24, 
                                    Math.max(
                                        24, 
                                        ...attendancePoints.map(point => (point.shiftEndTime2 || point.shiftEndTime1) + (point.shiftEndTime2 ? 24 : 0))
                                    )
                                ),
                                ticks: {
                                    stepSize: 0.5, // 30-minute intervals
                                    callback: function(value, index, ticks) {
                                        const entry = attendancePoints[index] || attendancePoints[0];
                                        const shiftStart = entry.shiftStartTime1; // e.g., 17.5
                                        const shiftEnd = entry.shiftEndTime2 ? entry.shiftEndTime2 + 24 : entry.shiftEndTime1; // e.g., 26.5 for 2:30 AM

                                        // Adjust tick value after midnight
                                        const adjustedValue = value < shiftStart ? value + 24 : value;

                                        // Format time label (HH:MM AM/PM)
                                        const hours = Math.floor(value % 24);
                                        const minutes = Math.round((value - Math.floor(value)) * 60);
                                        const ampm = hours >= 12 ? 'PM' : 'AM';
                                        const hour12 = hours % 12 === 0 ? 12 : hours % 12;
                                        const label = `${hour12}:${minutes < 10 ? '0' : ''}${minutes} ${ampm}`;

                                        // Show 30-minute intervals within the shift window
                                        if (adjustedValue >= shiftStart && adjustedValue <= shiftEnd) {
                                            return label;
                                        }

                                        // Show simplified labels (e.g., on-the-hour) outside shift time
                                        if (minutes === 0 && value % 1 === 0) {
                                            return label;
                                        }
                                        return '';
                                    },
                                    autoSkip: false
                                },
                                grid: {
                                    display: false
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const timeValue = context.raw.y % 24;
                                        const hours = Math.floor(timeValue);
                                        const minutes = Math.round((timeValue - hours) * 60);
                                        const ampm = hours >= 12 ? 'PM' : 'AM';
                                        const hour12 = hours % 12 === 0 ? 12 : hours % 12;
                                        const formattedTime = `${hour12}:${minutes < 10 ? '0' : ''}${minutes} ${ampm}`;

                                        if (context.dataset.label.includes('Check-in')) {
                                            return `Check-in: ${formattedTime}`;
                                        } else if (context.dataset.label.includes('Check-out')) {
                                            return `Check-out: ${formattedTime}`;
                                        }
                                        return `Time: ${formattedTime}`;
                                    }
                                }
                            }
                        }
                    }
                });

                $('#status').fadeOut();
                $('#preloader').fadeOut();

                // Helper function to parse time strings (e.g., "9:00 AM") to floating-point hour values
                function parseTime(date, timeStr) {
                    if (!timeStr) {
                        console.error('Invalid time string:', timeStr);
                        return null; // Handle invalid time gracefully
                    }

                    const [time, modifier] = timeStr.split(' ');
                    if (!time || !modifier) {
                        console.error('Malformed time string:', timeStr);
                        return null;
                    }

                    let [hours, minutes] = time.split(':').map(Number);
                    if (modifier === 'PM' && hours !== 12) hours += 12;
                    if (modifier === 'AM' && hours === 12) hours = 0;
                    return hours + minutes / 60;
                }
            },
            error: function(data) {
                $('#status').fadeOut();
                $('#preloader').fadeOut();
            }
        });


            });
        }


        function initializeLeaveReportFilter() {
            $(".reportfilter").on('click', function() {
                // below code used to set the active class on report filter button
                $('.reportfilter').removeClass('active');
                $(this).addClass('active');
            });
        }
        $(".dropdown-menu a").click(function() {
        var selText = $(this).text();
        // console.log(selText)
        var baseurl =  document.getElementById('baseurl').value;
        // console.log(baseurl)
        $(this).parents('.btn-group').find('#selectOption').html(' <i class="icon-stack2 mr-2"></i>' + selText);

        // console.log("Sending data to server:", { team: selText });

        $.ajax({
                type: 'GET',
                url: baseurl+'/get-user-list',
                data: {team:selText},
                success: function(data) {
                    $('#selectuserOption').html("");
                    $('#selectuserOption').html(data.optionData);
                },
                error: function(data) {
                    
                    
                    //alert(data.responseText);
                }
            });
        //alert(selText);
        });
    </script>
@endsection