@extends('layouts.app_hr')

@section('title', __('hr.attendance_records'))

@section('content')
    <!-- Content Header -->
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item"><a href="#">{{__('home.home')}}</a></li>
                <li class="breadcrumb-item active">{{__('hr.attendance_records')}}</li>
            </ol>
        </nav>
    </section>

    <div class="container">
        <div class="card">
            <div class="card-body">
                <!-- Financial Period Filter -->
                <div class="mb-3">
                    <label for="financialPeriodFilter">{{ __('hr.financial_period') }}</label>
                    <select id="financialPeriodFilter" class="form-control">
                        <!-- سيتم ملء الخيارات عبر JavaScript -->
                    </select>
                </div>

                <!-- Attendance Table -->
                <table id="attendance_table" class="table table-bordered">
                    <thead>
                    <tr>
                        <th>{{ __('hr.employee_name') }}</th>
                        <th>{{ __('hr.work_days') }}</th>
                        <th>{{ __('hr.absent_days') }}</th>
                        <th>{{ __('hr.vacation_days') }}</th>
                        <th>{{ __('messages.actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function () {


            // Load financial periods
            $.ajax({
                url: "{{ route('financial_periods.list') }}",
                method: 'GET',
                success: function (data) {
                    let periodSelect = $('#financialPeriodFilter');
                    periodSelect.empty();
                    $.each(data.data, function (index, period) {
                        periodSelect.append(`<option value="${period.id}">${period.year_and_month}</option>`);
                    });
                    periodSelect.val(data.default_id);
                }
            });

            // Initialize DataTable
            var table = $('#attendance_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('attendance.index') }}",
                    data: function (d) {
                        d.financial_period_id = $('#financialPeriodFilter').val();
                    }
                },
                columns: [
                    {data: 'employee_name', name: 'employee_name'},
                    {data: 'work_days', name: 'work_days'},
                    {data: 'absent_days', name: 'absent_days'},
                    {data: 'vacation_days', name: 'vacation_days'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false},
                ]
            });

            // Reload table on financial period change
            $('#financialPeriodFilter').change(function () {
                table.ajax.reload();
            });
        });
    </script>
@endsection