@extends('layouts.user_type.auth')

@section('content')
<style>
    table td.wrapped-text {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 250px;
    }
</style>

<div class="container-fluid">
    <div class="d-flex flex-wrap justify-content-between align-items-end mb-4 gap-3">
        <div>
            <h4>Employee Timeline - <span id="selected-date">{{ \Carbon\Carbon::parse($date)->format('l, F jS, Y') }}</span></h4>
        </div>
        <div class="d-flex gap-3 align-items-end flex-wrap">
            <div style="margin-bottom: 1rem;">
                <label for="date" class="form-label">Date</label>
                <input type="date" name="date" id="date"
                       value="{{ request('date', \Carbon\Carbon::parse($date)->format('Y-m-d')) }}"
                       class="form-control" required>
            </div>
            <div style="margin-bottom: 1rem;">
                <label for="employee_id" class="form-label">Employee</label>
                <select name="employee_id" id="employee_id" class="form-control">
                    <option value="">All Employees</option>
                    @foreach($allEmployees as $emp)
                        <option value="{{ $emp->id }}">{{ $emp->name ?? $emp->first_name . ' ' . $emp->middle_name . ' ' . $emp->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <button type="button" id="fetch-timeline" class="btn btn-primary mt-2">View</button>
            </div>
        </div>
    </div>

    <div id="spinner" class="hidden cp-spinner cp-eclipse"></div>
    <div id="timeline-result" class="table-responsive"></div>

</div>

<script>
    var maxDate = "";
    $(function(){
        var dtToday = new Date();
        var month = dtToday.getMonth() + 1;
        // var day = dtToday.getDate()-1;
        var day = dtToday.getDate();
        var year = dtToday.getFullYear();
        if(month < 10)
            month = '0' + month.toString();
        if(day < 10)
            day = '0' + day.toString();
        maxDate = year + '-' + month + '-' + day;
        $('#date').attr('max', maxDate);
    });
    function getOrdinalSuffix(day) {
        if (day > 3 && day < 21) return 'th'; // Handles 11th, 12th, 13th, etc.
            switch (day % 10) {
                case 1:
                return 'st';
                case 2:
                return 'nd';
                case 3:
                return 'rd';
                default:
                return 'th';
        }
    }
    var clicked = 0;
    document.getElementById('fetch-timeline').addEventListener('click', function () {
        if (clicked == 0) {
            clicked = 1;
            const date = document.getElementById('date').value;
            const employeeId = document.getElementById('employee_id').value;
            var d1 = new Date(date);
            var d2 = new Date(maxDate);
            if (d2.getTime() >= d1.getTime()) {
                if (date != "" && employeeId != "") {
                    document.getElementById('timeline-result').innerHTML = "";
                    document.getElementById('spinner').classList.remove("hidden");
                    const selectedDateElement = document.getElementById('selected-date');
                    if (selectedDateElement) {
                        const targetDate = new Date(date);
                        var weekDay = targetDate.toLocaleDateString('en-US', {weekday: "long"});
                        var month = targetDate.toLocaleDateString('en-US', {month: "long"});
                        var day = targetDate.toLocaleDateString('en-US', {day: "numeric"});
                        var year = targetDate.toLocaleDateString('en-US', {year: "numeric"});
                        const formattedDate = `${weekDay},  ${month} ${day}${getOrdinalSuffix(day)}, ${year}`;
                        selectedDateElement.textContent = formattedDate;
                    }

                    fetch(`{{ route('employee.employee-timeline-data') }}?date=${date}&employee_id=${employeeId}`)
                        .then(res => res.text())
                        .then(data => {
                            document.getElementById('timeline-result').innerHTML = data;
                            clicked = 0;
                            document.getElementById('spinner').classList.add("hidden");
                        })
                        .catch(err => {
                            clicked = 0;
                            document.getElementById('spinner').classList.add("hidden");
                            console.error('Error:', err);
                            alert('Failed to fetch data');
                        });
                } else {
                    clicked = 0;
                    alert("Please select employee and date.");
                }
            } else {
                clicked = 0;
                alert("Please select date less than today.");
            }
        }
    });
</script>
@endsection