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

            <form method="post" action="{{ url('/editemployeeexcludeattendanceprocess') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="hbid" value="{{ $excludeAttendance->Id }}">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Employee') }}<span class="text-danger">*</span></label>
                                    <select class="form-control" id="cmbEmployee" name="cmbEmployee">
                                        <option value="">{{ __('sitelabel.SelectEmployee') }}</option>
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->Id }}" data-control="{{ $employee->ControlNo }}" 
                                                {{ old('cmbEmployee', $excludeAttendance->EmployeeId) == $employee->Id ? 'selected' : '' }}>
                                                {{ $employee->EmployeeName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cmbEmployee')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-6 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ControlNo') }}<span class="text-danger">*</span></label>
                                    <select class="form-control" id="cmbControlNo" name="cmbControlNo">
                                        <option value="">{{ __('sitelabel.SelectControlNo') }}</option>
                                        @foreach ($controls as $control)
                                            <option value="{{ $control->Id }}" 
                                                {{ old('cmbControlNo', $excludeAttendance->ControlNo) == $control->Id ? 'selected' : '' }}>
                                                {{ $control->ControlNo }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cmbControlNo')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-6 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" 
                                            {{ old('chkStatus', $excludeAttendance->Status) == 1 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="chkStatus">
                                            {{ __('sitelabel.Active') }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 mt-3">
                                <button type="submit" class="btn btn-primary me-2">{{ __('sitelabel.Update') }}</button>
                                <a href="{{ url('/employeeexcludeattendance') }}" class="btn btn-dark">{{ __('sitelabel.Back') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Employee data mapping
        const employeeData = @json($employeeMapping);
        
        $(document).ready(function() {
            // Initialize select2
            $('#cmbEmployee, #cmbControlNo').select2({
                theme: "bootstrap-5",
                width: '100%'
            });

            // When employee changes, update control number dropdown
            $('#cmbEmployee').on('change', function() {
                const selectedEmployeeId = $(this).val();
                if (!selectedEmployeeId) return;

                // Find the employee object
                const employee = employeeData.find(emp => emp.id == selectedEmployeeId);
                if (employee) {
                    // Find the control option with matching control number
                    $('#cmbControlNo option').each(function() {
                        if ($(this).text().trim() === employee.controlNo) {
                            $('#cmbControlNo').val($(this).val()).trigger('change');
                            return false;
                        }
                    });
                }
            });

            // When control number changes, update employee dropdown
            $('#cmbControlNo').on('change', function() {
                const selectedControlId = $(this).val();
                if (!selectedControlId) return;

                const selectedControlText = $('#cmbControlNo option:selected').text().trim();
                
                // Find employee with this control number
                const employee = employeeData.find(emp => emp.controlNo === selectedControlText);
                if (employee) {
                    $('#cmbEmployee').val(employee.id).trigger('change');
                }
            });

            // Trigger change on page load if there's a pre-selected value
            if ($('#cmbEmployee').val()) {
                $('#cmbEmployee').trigger('change');
            } else if ($('#cmbControlNo').val()) {
                $('#cmbControlNo').trigger('change');
            }
        });
    </script>
@endsection