<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
    @if($employee ?? ''  && $employee->id)
        @method('PUT')
    @endif
    @csrf
    <div class="modal-header">
        <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fal fa-user me-1"></i> {{$head ?? ''}} </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="modal-form">
            <div class="form-group mb-3">
                <label for="" class="d-block mb-2"> {{ __('employees.name') }} <span style="color:red">*</span></label>
                <input type="text" name="name" class="form-control" value="{{$employee->name ?? ''}}" placeholder=" {{ __('employees.name') }}">
            </div>
            <div class="form-group mb-3">
                <label for="" class="d-block mb-2"> {{ __('employees.email') }} <span style="color:red">*</span></label>
                <input type="email" name="email" class="form-control" value="{{$employee->email ?? ''}}" placeholder="example@gmail.com">
            </div>
            <div class="form-group mb-3">
                <label for="" class="d-block mb-2"> {{ __('employees.phone') }} </label>
                <div class="input-group">
                    <select name="phone_country_id" id="" class="form-control form-select">
                        @foreach($countries as $row)
                            <option {{ ($employee->phone_country_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{$row->id}}"> {{$row->country_key}} </option>
                        @endforeach
                    </select>
                    <input type="text" name="phone" class="form-control col-8" placeholder="000 000 000" value="{{$employee->phone ?? ''}}" aria-label="Username" aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="form-group mb-3">
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('users.role') }} </label>
                    <select onchange="SelectRole()" id="role" name="role" id="" class="form-control form-select">
                        @foreach($roles as $row)
                            <option {{ (isset($employee) ? $employee->role : null) == $row ? 'selected' : '' }} value="{{$row}}">{{__('users.roles.'.$row)}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group mb-3 modules_data">
                <label for="" class="d-block mb-2"> {{ __('employees.manager_id') }} <span style="color:red">*</span></label>
                <select  name="manager_id" id="manager_id" class="form-control form-select">
                    <option value=""> {{ __('dashboard.select') }} </option>
                    {{--
                    @foreach($managers as $row)
                        <option {{ ($employee->manager_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->name }} </option>
                    @endforeach
                    --}}
                </select>
            </div>

            <div class="form-group mb-3">
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('users.password') }} </label>
                    <input type="password" name="password" class="form-control" placeholder="{{ __('users.password') }}">
                </div>
            </div>
            <div class="form-group mb-3">
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('users.password_confirmation') }} </label>
                    <input type="password" name="password_confirmation" class="form-control" placeholder="{{ __('users.password_confirmation') }}">
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="" class="d-block mb-2"> {{ __('employees.sector_id') }} </label>
            </div>
            <div class="col-lg-12 mt-3">
                <div class="form-group">
                    <div class="form-check pb-2 border-bottom">
                      <input class="form-check-input selectSectors" type="checkbox"  id="selectSectors">
                      <label class="form-check-label ms-2" for="selectSectors"> Select All Sectors </label>
                    </div>
                </div>
            </div> 
            <div class="form-group mb-3 col-12 row">
                @foreach ($sectors as $row)
                    <div class="col-lg-3">
                        <div class="form-group mt-3">
                            <div class="form-check">
                                <input class="form-check-input sectors" type="checkbox" name="sector_id[]" {{ in_array($row->id,$user_sectors) ? 'checked' : '' }} value="{{ $row->id }}" id="sector{{ $row->id }}">
                                <label class="form-check-label" for="sector{{ $row->id }}"> {{ $row->title }} </label>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="col-lg-12 ">
                <label for="" class="d-block mb-2"> {{ __('users.Modules') }} </label>
                
                <div class="clearfix"></div>
                <div class="row">
                    <div class="col-lg-12 mt-3">
                        <div class="form-group">
                            <div class="form-check pb-2 border-bottom">
                              <input class="form-check-input selectModules" type="checkbox"  id="selectModules">
                              <label class="form-check-label ms-2" for="selectModules"> Select All Modules </label>
                            </div>
                        </div>
                    </div> 
                    @foreach($modules as $key => $group_modules)
                        <div class="col-lg-12">
                            <hr>
                            <h5 class="d-block mb-2">{{ __($key.'.head') }}</h5>
                        </div>
                    
                        <div class="col-lg-12 mt-3">
                            <div class="form-group">
                                <div class="form-check pb-2 border-bottom">
                                    <input class="form-check-input selectSpecificModules"
                                           data-id="{{ $key }}"
                                           type="checkbox"
                                           id="selectSpecificModules_{{ $key }}">
                                    <label class="form-check-label ms-2" for="selectSpecificModules_{{ $key }}">
                                        Select All
                                    </label>
                                </div>
                            </div>
                        </div>
                    
                        @foreach($group_modules as $row)
                            <div class="col-lg-3">
                                <div class="form-group mt-3">
                                    <div class="form-check">
                                        <input class="form-check-input modules modules_{{ $key }}"
                                               type="checkbox"
                                               name="modules[]"
                                               value="{{ $row->id }}"
                                               id="modules{{ $row->id }}"
                                               {{ in_array($row['id'], $user_modules) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="modules{{ $row->id }}">
                                            {{ $row['description'] }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close"><span> {{ __('dashboard.cancel') }} </span></button>
        <button type="submit" class="blue-butn butn-st2 butn-md"><span> {{ __('dashboard.save') }} </span></button>
    </div>
</form>
<script>
document.querySelectorAll('.selectSpecificModules').forEach(selectAllCheckbox => {
    selectAllCheckbox.addEventListener('change', function () {
        const groupId = this.dataset.id;
        const groupCheckboxes = document.querySelectorAll('.modules_' + groupId);
        groupCheckboxes.forEach(cb => cb.checked = this.checked);
    });
});

document.querySelectorAll('.modules').forEach(moduleCheckbox => {
    moduleCheckbox.addEventListener('change', function () {
        const groupClass = Array.from(this.classList)
            .find(c => c.startsWith('modules_'))
            ?.replace('modules_', '');
        if (!groupClass) return;

        const groupCheckboxes = document.querySelectorAll('.modules_' + groupClass);
        const allChecked = Array.from(groupCheckboxes).every(cb => cb.checked);
        const selectAll = document.querySelector('.selectSpecificModules[data-id="' + groupClass + '"]');
        if (selectAll) selectAll.checked = allChecked;
    });
});


        document.getElementById('selectModules').addEventListener('change', function () {
            let allLengthCheckboxes = document.querySelectorAll('.modules');
            allLengthCheckboxes.forEach(cb => cb.checked = this.checked);
        });

        document.querySelectorAll('.modules').forEach(cb => {
            cb.addEventListener('change', function () {
                let allLengthCheckboxes = document.querySelectorAll('.modules');
                let allChecked = [...allLengthCheckboxes].every(cb => cb.checked);
                document.getElementById('selectModules').checked = allChecked;
            });
        });
        
        document.getElementById('selectSectors').addEventListener('change', function () {
            let allLengthCheckboxes = document.querySelectorAll('.sectors');
            allLengthCheckboxes.forEach(cb => cb.checked = this.checked);
        });

        document.querySelectorAll('.sectors').forEach(cb => {
            cb.addEventListener('change', function () {
                let allLengthCheckboxes = document.querySelectorAll('.sectors');
                let allChecked = [...allLengthCheckboxes].every(cb => cb.checked);
                document.getElementById('selectSectors').checked = allChecked;
            });
        });
        
    function SelectRole()
    {
        let role = $("#role").val()
        if(role == "{{ $manager }}")
        {
            $('.modules_data').hide();
        }
        else
        {
            let dataToSend = 'role=' + role;

            @if(isset($employee))
                dataToSend += '&employee_id={{ $employee->id }}';
            @endif
            $.ajax({
                url : "{{ route('admin.fetch.managers') }}",
                type : 'GET',
                data : dataToSend,
                success:function(data)
                {
                    $('#manager_id').html(data);
                    @if(isset($employee))
                        $('#manager_id').val('{{ $employee->manager_id }}').trigger('change');
                    @endif
                }
            })
            $('.modules_data').show();
        }
    }

        $('#role').trigger('change');
</script>
<script src="{{url('')}}/assets/admin/js/custom/imageUpload.js"></script>
