@extends('layouts.app_hr')

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

@section('content')
    <div class="container">
        <h2>{{ __('hr.attendance_details') }}</h2>
        <select id="financialPeriodSelect" class="form-control">
            @foreach ($financialPeriods as $period)
                <option value="{{ $period->id }}" {{ $period->is_open ? 'selected' : '' }}>
                    {{ $period->year_and_month }}
                </option>
            @endforeach
        </select>

        <table id="employeeAttendanceTable" class="table table-bordered">
            <thead>
            <tr>
                <th>{{ __('hr.date') }}</th>
                <th>{{ __('hr.check_in_time') }}</th>
                <th>{{ __('hr.check_out_time') }}</th>
                <th>{{ __('hr.status') }}</th>
                <th>{{ __('hr.status') }}</th>
            </tr>
            </thead>
        </table>
    </div>
@endsection

<div class="modal fade" id="editAttendanceModal" tabindex="-1" aria-labelledby="editAttendanceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editAttendanceForm">
                @csrf
                <input type="hidden" name="id" id="attendanceRecordId">
                <div class="modal-header">
                    <h5 class="modal-title" id="editAttendanceModalLabel">{{ __('messages.edit_attendance_record') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="checkInTime" class="form-label">{{ __('hr.check_in_time') }}</label>
                        <input type="text" class="form-control timepicker" name="check_in_time" id="checkInTime" required>
                    </div>
                    <div class="mb-3">
                        <label for="checkOutTime" class="form-label">{{ __('hr.check_out_time') }}</label>
                        <input type="text" class="form-control timepicker" name="check_out_time" id="checkOutTime" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">{{ __('messages.save') }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('messages.close') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>


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

            flatpickr(".timepicker", {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i", // صيغة 24 ساعة
                time_24hr: true     // استخدام صيغة 24 ساعة
            });

            let financialPeriodId = $('#financialPeriodSelect').length ? $('#financialPeriodSelect').val() : null;

           let table = $('#employeeAttendanceTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('attendance.employee.records', $userId) }}",
                    data: function (d) {
                        d.financial_period_id = financialPeriodId; // تمرير الشهر المالي مع الطلب
                    }
                },
                columns: [
                    {data: 'work_date', name: 'work_date'},
                    {data: 'check_in_time', name: 'check_in_time'},
                    {data: 'check_out_time', name: 'check_out_time'},
                    {data: 'status', name: 'status'},
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return `
                        <div>
                            <a href="#" class="btn btn-sm btn-warning edit-attendance"
                                data-id="${row.id}"
                                data-date="${row.date}"
                                data-check-in="${row.check_in_time}"
                                data-check-out="${row.check_out_time}">
                                {{ __('messages.edit') }}
                            </a>
                        </div>
                    `;
                        }
                    }
                ]
            });
            $('#financialPeriodSelect').on('change', function () {
                financialPeriodId = $(this).val();
                table.ajax.reload();
            });
            $(document).on('click', '.edit-attendance', function (e) {
                e.preventDefault();
                const recordId = $(this).data('id');
                const checkIn = $(this).data('check-in');
                const checkOut = $(this).data('check-out');

                // تعيين القيم داخل المودال
                $('#attendanceRecordId').val(recordId);
                $('#checkInTime').val(checkIn);
                $('#checkOutTime').val(checkOut);

                // عرض المودال
                $('#editAttendanceModal').modal('show');
            });

            // تحديث سجل الحضور
            $('#editAttendanceForm').submit(function (e) {
                e.preventDefault();
                const formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: "{{ route('attendance.update') }}",
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.msg);
                            $('#editAttendanceModal').modal('hide');
                            $('#employeeAttendanceTable').DataTable().ajax.reload();
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function () {
                        toastr.error('{{ __("messages.something_went_wrong") }}');
                    }
                });
            });
        });
    </script>
@endsection