<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
    @if($user ?? ''  && $user->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="row">
                <div class="col-lg-12">
                    <div class="form-group mb-3">
                        <div class="avatar-upload">
                            <div class="avatar-preview">
                                <div id="imagePreview" style="background-image: url({{asset($user->photo ?? 'assets/admin/images/avatar.png')}});">
                                </div>
                            </div>
                            <div class="avatar-edit">
                                <input type='file' name="photo" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                <label for="imageUpload">
                                    <i class="fal fa-upload me-2"></i> {{ __('users.photo') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-3">
                        <label for="" class="d-block mb-2"> {{ __('users.name') }} </label>
                        <input type="text" name="name" class="form-control" value="{{$user->name ?? ''}}" placeholder=" {{ __('users.name') }}">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-3">
                        <label for="" class="d-block mb-2"> {{ __('users.email') }} </label>
                        <input type="email" name="email" class="form-control" value="{{$user->email ?? ''}}" placeholder="example@gmail.com">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-3">
                        <label for="" class="d-block mb-2"> {{ __('users.phone') }} </label>
                        <div class="input-group">
                            <select name="phone_country_id" id="" class="form-control form-select">
                                @foreach($countries as $row)
                                    <option {{ ($user->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="{{$user->phone ?? ''}}" aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-3">
                        <label for="" class="d-block mb-2"> {{ __('users.role') }} </label>
                        <select name="role" id="" class="form-control form-select">
                            @foreach($roles as $row)
                                <option {{ (isset($user) ? $user->role : null) == $row ? 'selected' : '' }} value="{{$row}}">{{__('users.roles.'.$row)}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-lg-6">
                    <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="col-lg-6">
                    <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="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>
    <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 src="{{url('')}}/assets/admin/js/custom/imageUpload.js"></script>
<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;
            });
        });
</script>
