@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.AddNewAttendance') }}</h4>
                    <h6>{{ __('sitelabel.CreatenewAttendance') }}</h6>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <form action="{{ url('/') }}/attendanceprocess" method="post">
                        @csrf
                        <div class="row">
                            <!-- Employee Dropdown -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Employee') }} <span class="manitory">*</span></label>
                                    <select name="cmbEmployee" id="cmbEmployee" class="select">
                                        <option value="">{{ __('sitelabel.SelectEmployee') }}</option>
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->Id }}">
                                                {{ $employee->ControlNumber }} - {{ $employee->FullName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cmbEmployee')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Display Employee Job Details -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Factory') }}</label>
                                    <input type="text" id="txtFactory" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Group') }}</label>
                                    <input type="text" id="txtGroup" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Department') }}</label>
                                    <input type="text" id="txtDepartment" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Designation') }}</label>
                                    <input type="text" id="txtDesignation" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Category') }}</label>
                                    <input type="text" id="txtCategory" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ShiftName') }}</label>
                                    <input type="text" id="txtShiftName" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ShiftCode') }}</label>
                                    <input type="text" id="txtShiftCode" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ShiftStartTime') }}</label>
                                    <input type="text" id="txtShiftStartTime">
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ShiftEndTime') }}</label>
                                    <input type="text" id="txtShiftEndTime" readonly>
                                </div>
                            </div>


                            <!-- Start Date -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.StartDate') }} <span class="manitory">*</span></label>
                                    <input type="text" name="txtStartDate" id="txtStartDate" class="form-control">
                                    @error('txtStartDate')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- End Date -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.EndDate') }} <span class="manitory">*</span></label>
                                    <input type="text" name="txtEndDate" id="txtEndDate" class="form-control">
                                    @error('txtEndDate')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Check-In Time -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.CheckInTime') }} <span class="manitory">*</span></label>
                                    <input type="time" name="txtCheckInTime" id="txtCheckInTime" class="form-control">
                                    @error('txtCheckInTime')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Check-Out Time -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.CheckOutTime') }} <span class="manitory">*</span></label>
                                    <input type="time" name="txtCheckOutTime" id="txtCheckOutTime" class="form-control">
                                    @error('txtCheckOutTime')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>


                            <!-- Attendance Status -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" checked>
                                </div>
                            </div>

                            <!-- Form Buttons -->
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">{{ __('sitelabel.Save') }}</button>
                                <button type="button" onclick="javascript:window.location='{{ url('/attendance') }}';"
                                    class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- Include Flatpickr CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

@section('script')
    <script>
        $(document).ready(function() {
            // Initialize select2 dropdown
            $('.select').select2({
                theme: "bootstrap-5",
                width: '100%',
                placeholder: "Select an option",
                allowClear: true
            });

            // Initialize flatpickr for date inputs
            flatpickr("#txtStartDate", {
                dateFormat: "Y-m-d",
                allowInput: true,
                disableMobile: true
            });
            flatpickr("#txtEndDate", {
                dateFormat: "Y-m-d",
                allowInput: true,
                disableMobile: true
            });

            $('#cmbEmployee').change(function() {
                var employeeId = $(this).val();
                if (employeeId) {
                    $.ajax({
                        url: '{{ route('api/getEmployeeDetails') }}',
                        type: 'GET',
                        data: {
                            employeeId: employeeId
                        },
                        success: function(response) {
                            // Clear previous values
                            $('#txtFactory, #txtGroup, #txtDepartment, #txtDesignation, #txtCategory')
                                .val('');
                            $('#txtShiftName, #txtShiftCode, #txtShiftStartTime, #txtShiftEndTime')
                                .val('');

                            if (response.employeeDetails) {
                                $('#txtFactory').val(response.employeeDetails.FactoryName ||
                                    '');
                                $('#txtGroup').val(response.employeeDetails.GroupName || '');
                                $('#txtDepartment').val(response.employeeDetails
                                    .DepartmentName || '');
                                $('#txtDesignation').val(response.employeeDetails
                                    .DesignationName || '');
                                $('#txtCategory').val(response.employeeDetails.CategoryName ||
                                    '');
                            }

                            if (response.shiftDetails) {
                                $('#txtShiftName').val(response.shiftDetails.ShiftName || '');
                                $('#txtShiftCode').val(response.shiftDetails.ShiftCode || '');
                                $('#txtShiftStartTime').val(response.shiftDetails.StartTime ||
                                    '');
                                $('#txtShiftEndTime').val(response.shiftDetails.EndTime || '');


                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                            // Clear all fields on error
                            $('#txtFactory, #txtGroup, #txtDepartment, #txtDesignation, #txtCategory')
                                .val('');
                            $('#txtShiftName, #txtShiftCode, #txtShiftStartTime, #txtShiftEndTime')
                                .val('');
                        }
                    });
                } else {
                    // Clear all fields if no employee is selected
                    $('#txtFactory, #txtGroup, #txtDepartment, #txtDesignation, #txtCategory').val('');
                    $('#txtShiftName, #txtShiftCode, #txtShiftStartTime, #txtShiftEndTime').val('');
                }
            });
        });
    </script>
@endsection