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

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

<div id="alert">
    @include('components.alert')
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <form role="form" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="mb-0">{{ $title }}</p>
                            <div>
                                <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                <a href="{{ route('faculty.faculty_attendance') }}"
                                    class="btn btn-secondary btn-sm mb-3">Cancel</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body text-center">
                        <div class="row justify-content-center">
                            <!-- Attendance Date -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="attendance_date" class="form-control-label">Attendance Date</label>
                                    <input class="form-control" type="date" id="attendance_date" name="attendance_date"
                                        value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table class="table align-items-center mb-0" id="myTable">
                        <thead>
                            <tr>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    #</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Staff Name</th>
                                <th
                                    class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                    Attendance</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($staffMembers as $index => $staff)
                                <tr>
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <input type="hidden" name="staff_ids[{{ $staff->cms_staff_id }}]"
                                        value="{{ $staff->cms_staff_id }}">
                                    <td class="text-center">{{ $staff->cms_staff_id }} - {{ $staff->firstname }}</td>
                                    <td class="text-center">
                                        <select class="form-select" name="attendance_status[{{ $staff->cms_staff_id }}]"
                                            required>
                                            <option value="">Select</option>
                                            <option value="Present" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Present' ? 'selected' : '' }}>Present</option>
                                            <option value="Others" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Others' ? 'selected' : '' }}>Absent</option>
                                            <option value="Half Day Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Half Day Leave' ? 'selected' : '' }}>Half Day Leave</option>
                                            <option value="Sick Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Sick Leave' ? 'selected' : '' }}>Sick Leave</option>
                                            <option value="Casual Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Casual Leave' ? 'selected' : '' }}>Casual Leave</option>
                                            <option value="Maternity Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Maternity Leave' ? 'selected' : '' }}>Maternity Leave</option>
                                            <option value="Marriage Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Marriage Leave' ? 'selected' : '' }}>Marriage Leave</option>
                                            <option value="Paternity Leave" {{ old("attendance_status.{$staff->cms_staff_id}", 'Present') == 'Paternity Leave' ? 'selected' : '' }}>Paternity Leave</option>

                                        </select>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
    @include('layouts.footers.auth.footer')
</div>
@endsection
@push('scripts')
    <script>
           var staffs = @json($staffMembers);
        $(document).ready(function () {
            $('#attendance_date').on('change', function () {
                var date = $(this).val();

                if (date) {
                    fetchAttendanceData(date);
                }
            });

            function fetchAttendanceData(date) {
                $.ajax({
                    url: '{{ route('attendance.fetch') }}',
                    method: 'GET',
                    data: { date: date },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if (data.success) {
                            updateAttendanceStatus(data.attendance);
                        } else {
                            console.log('No attendance data found for this date');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log('Error fetching attendance data:', error);
                    }
                });
            }

            function updateAttendanceStatus(attendance) {
                if (attendance.length > 0) {
                    $.each(attendance, function (index, item) {
                        var selectBox = $('select[name="attendance_status[' + item.staff_id + ']"]');
                        if (selectBox.length) {
                            selectBox.val(item.status);
                        }
                    });
                } else {
                    $.each(staffs, function (index, item) {
                        var selectBox = $('select[name="attendance_status[' + item.cms_staff_id + ']"]');
                        if (selectBox.length) {
                            selectBox.val('');
                        }
                    });
                }

            }
        });

    </script>
@endpush