@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])

<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="d-flex align-items-center">
                <p class="mb-0 ms-2 mt-2">{{ $title }}</p>
                <a href="{{ route('faculty.faculty_take_attendance') }}"
                    class="btn btn-primary btn-sm ms-auto me-2 mt-2">Take Attendance</a>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="col-12 col-sm-12 col-md-12 p-3">
                    <div class="info-box bg-light shadow">
                        <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text"><b>Staff Attendance Report</b></span>
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Total No. Of Staff</th>
                                        <th class="text-center">{{ $staffCount }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Whole Day Attended Staff</td>
                                        <td class="text-center">{{ $wholeDayPresent }}</td>
                                    </tr>
                                    <tr>
                                        <td>Whole Day Absent Staff</td>
                                        <td class="text-center">{{ $wholeDayAbsent }}</td>
                                    </tr>
                                    <tr>
                                        <td>Half Day Present / Absent Attendant Staff</td>
                                        <td class="text-center">{{ $halfDay }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- New section for date range -->
                    <!-- Check Attendance by Date Range Section -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h5>Check Attendance by Date Range</h5>
                        </div>
                        <div class="card-body">
                            <form id="attendanceRangeForm">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="from_date">From Date</label>
                                            <input type="date" id="from_date" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label for="to_date">To Date</label>
                                            <input type="date" id="to_date" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn btn-primary mt-4"
                                            id="check_attendance_button">Check Attendance</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Table to display attendance results -->
                    <div class="table-responsive">
                        <div id="attendance_results" class="mt-4">
                            <!-- Results will appear here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('#attendanceRangeForm').on('submit', function (e) {
                e.preventDefault();
                var fromDate = $('#from_date').val();
                var toDate = $('#to_date').val();

                // Check if both dates are selected
                if (fromDate && toDate) {
                    fetchAttendanceData(fromDate, toDate);
                } else {
                    alert('Please select both From and To dates');
                }
            });

            function fetchAttendanceData(fromDate, toDate) {
                $.ajax({
                    url: '{{ route('attendance.checkByDateRange') }}',
                    method: 'GET',
                    data: {
                        from_date: fromDate,
                        to_date: toDate
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            displayAttendanceResults(data.attendance, fromDate, toDate);
                        } else {
                            alert('No attendance data found for the selected dates');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log('Error fetching attendance data:', error);
                    }
                });
            }

            function displayAttendanceResults(attendance, fromDate, toDate) {
                console.log(attendance);
                var tableHtml = '<table class="table table-hover table-sm text-center" id="myTable">';

                var dateRange = getDateRange(attendance);
                var stringDate = getStringDate(attendance);
                tableHtml += '<thead><tr><th>Staff Name / Code</th>';

                $.each(stringDate, function (index, date) {
                    tableHtml += '<th>' + date + '</th>';
                });
                tableHtml += '</tr></thead><tbody>';

                var staffNames = getUniqueStaffNames(attendance);
                $.each(staffNames, function (index, staffName) {
                    tableHtml += '<tr><td>' + staffName + '</td>';

                    $.each(dateRange, function (index, date) {
                        var status = getAttendanceStatus(attendance, staffName, date);
                        tableHtml += '<td>' + status + '</td>';
                    });

                    tableHtml += '</tr>';
                });

                tableHtml += '</tbody></table>';
                $('#attendance_results').html(tableHtml);
                $('#myTable').DataTable({
                    layout: {
                        topStart: {
                            buttons: ['excel', 'pdf', 'print', 'colvis', 'pageLength']
                        },
                    }
                });
            }

            function getDateRange(attendance) {
                var dateArray = [];
                $.each(attendance, function (index, att) {
                    if ($.inArray(att.date, dateArray) === -1) {
                        dateArray.push(att.date);
                    }
                });
                return dateArray;
            }

            function getStringDate(attendance) {
                var dateArray = [];

                $.each(attendance, function (index, att) {
                    // Convert the date from yyyy-mm-dd to dd-mm-yyyy as a string
                    var date = new Date(att.date);
                    var formattedDate = ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear();

                    // Add the formatted date as string to the array if it's not already present
                    if ($.inArray(formattedDate, dateArray) === -1) {
                        dateArray.push(formattedDate);
                    }
                });

                return dateArray;
            }


            function getUniqueStaffNames(attendance) {
                var staffNames = [];
                $.each(attendance, function (index, item) {
                    if ($.inArray(item.staff_name, staffNames) === -1) {
                        staffNames.push(item.staff_name);
                    }
                });
                return staffNames;
            }

            function getAttendanceStatus(attendance, staffName, date) {
                var status = '';
                $.each(attendance, function (index, item) {
                    if (item.staff_name === staffName && item.date === date) {
                        status = item.status === 'Present' ? 'P' :
                            item.status === 'Half Day Leave' ? 'H' : 'A';
                    }
                });
                var badge = '';
    if (status === 'P') {
        badge = '<span class="badge bg-success">P</span>'; // For Present
    } else if (status === 'H') {
        badge = '<span class="badge bg-warning">H</span>'; // For Half Day Leave
    } else if (status === 'A') {
        badge = '<span class="badge bg-danger">A</span>'; // For Absent
    }
    
    return badge;
            }
        });


    </script>
@endpush
@push('styles')
    <style>
        .bg-light {
            background-color: #8eccdf !important;
        }

        .bg-pink {
            background-color: #e83e8c !important;
        }

        .bg-yellow {
            background-color: #ffc107 !important;
        }

        .table-striped tbody tr:nth-child(odd) {
            background-color: #87c2d4;
            /* Set your preferred color for odd rows */
            color: black;
        }

        .table-striped>tbody>tr:nth-of-type(odd)>* {
            --bs-table-accent-bg: var(--bs-table-striped-bg);
            color: #000000;
        }

        .table {
            color: black;
        }
    </style>
@endpush