@extends('layouts.userapp')

@section('content')
    <h3 class="gradient-text ">Attendances</h3>

    <!-- Navigation Arrows -->
    <div class="d-flex justify-content-between mb-3 mt-3">
        <button class="btn btn-primary" id="leftArrow">&larr; Previous Month</button>
        <span class="text-lg align-self-center" id="currentMonth"></span>
        <button class="btn btn-primary" id="rightArrow">Next Month &rarr;</button>
    </div>

    <div class="attendance-container">
        <div class="card mt-3" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-header d-flex justify-content-between mb-3">
            <!-- <button class="btn btn-primary" id="leftArrow">&larr; Previous Month</button> -->
                <h5>Attendance Data for <span id="currentMonthName"></span></h5>
                <!-- <button class="btn btn-primary" id="rightArrow">Next Month &rarr;</button> -->

            </div>
            <div class="card-body">
                <div class="table-responsive" id="attendanceArea">
                    <!-- Data dynamically inserted here via JavaScript -->
                </div>
            </div>
        </div>
    </div>
    
    <script>
let groupedCheckins = @json($groupedCheckins); // Pass data to JavaScript
let currentMonthIndex = 0;
const months = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
];

function generateMonthDays(year, monthIndex) {
    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate(); // Get the number of days in the month
    const days = [];
    for (let day = 1; day <= daysInMonth; day++) {
        const date = new Date(year, monthIndex, day);
        days.push({
            date: date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }),
            checkIn: null,
            checkOut: null,
            checkInLocation: 'Unknown',
            checkOutLocation: 'Unknown'
        });
    }
    return days;
}

function preprocessCheckinsForMonth(year, monthIndex, checkins) {
    const daysInMonth = generateMonthDays(year, monthIndex);
    
    const checkinsByDate = checkins.reduce((acc, checkin) => {
        const checkinDate = new Date(checkin.checkin_datetime).toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        });

        if (!acc[checkinDate]) {
            acc[checkinDate] = { 
                date: checkinDate, 
                checkIn: null, 
                checkOut: null, 
                checkInLocation: 'Unknown', 
                checkOutLocation: 'Unknown' 
            };
        }

        if (checkin.checkin_type === 'IN') {
            acc[checkinDate].checkIn = new Date(checkin.checkin_datetime).toLocaleTimeString('en', {
                hour: '2-digit',
                minute: '2-digit'
            });
            acc[checkinDate].checkInLocation = checkin.checkin_locality ?? 'Unknown';
        } else if (checkin.checkin_type === 'OUT') {
            acc[checkinDate].checkOut = new Date(checkin.checkin_datetime).toLocaleTimeString('en', {
                hour: '2-digit',
                minute: '2-digit'
            });
            acc[checkinDate].checkOutLocation = checkin.checkin_locality ?? 'Unknown';
        }

        return acc;
    }, {});

    // Merge check-ins into the days of the month
    return daysInMonth.map(day => ({
        ...day,
        ...checkinsByDate[day.date] // Override default values if check-ins exist for the day
    }));
}

function renderAttendanceTable() {
    const attendanceArea = document.getElementById('attendanceArea');
    const year = new Date().getFullYear();
    const month = months[currentMonthIndex];
    attendanceArea.innerHTML = ''; // Clear previous contents completely

    console.log('Rendering month:', month);
    console.log('Data for this month:', groupedCheckins[month]);

    const checkins = groupedCheckins[month] || [];
    const processedCheckins = preprocessCheckinsForMonth(year, currentMonthIndex, checkins);

    if (processedCheckins.length === 0) {
        attendanceArea.innerHTML = `
            <div class="text-center">
                <p>No records for this month</p>
            </div>
        `;
    } else {
        attendanceArea.innerHTML = `
            <table class="table text-center table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>IN</th>
                        <th>OUT</th>
                    </tr>
                </thead>
                <tbody>
                    ${processedCheckins.map(entry => `
                        <tr>
                            <td>${entry.date}</td>
                            <td>
                                ${entry.checkIn || ''} 
                                ${entry.checkIn ? `<br><small>${entry.checkInLocation}</small>` : ''}
                            </td>
                            <td>
                                ${entry.checkOut || ''} 
                                ${entry.checkOut ? `<br><small>${entry.checkOutLocation}</small>` : ''}
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    }

    document.getElementById('currentMonthName').textContent = month;
}

// Handle navigation left
document.getElementById('leftArrow').addEventListener('click', () => {
    if (currentMonthIndex > 0) {
        currentMonthIndex--;
        renderAttendanceTable();
    }
});

// Handle navigation right
document.getElementById('rightArrow').addEventListener('click', () => {
    if (currentMonthIndex < months.length - 1) {
        currentMonthIndex++;
        renderAttendanceTable();
    }
});

// Render the initial view
renderAttendanceTable();

</script>


@endsection