<script>
    $(() => {
        $(".btn-save").on('click', function(e) {
            e.preventDefault();

            $("#formPengguna").parsley().validate();

            if ($("#formPengguna").parsley().isValid()) {
                $("#formPengguna").trigger('submit');
            }
        });
    });
</script>
<x-modal-layout class="modal-dialog-centered modal-xl">
    <x-forms.form method="POST" action="{{ $method }}" id="formPengguna" onsubmit="btnLoading('{!! __('messages.saving_state') !!}')" autocomplete="off" enctype="multipart/form-data" data-parsley-validate="">
        @csrf
        <x-forms.form-help :mode="$updateMode" />
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <x-forms.label for="groups" :value="__('lang.groups')" /><span class="asterisk">*</span>
                            <select class="form-control" name="groups" id="groups" required>
                                @if ($Roles)
                                    <option value="" selected>{{ __('messages.select_data', ['data' => __('lang.groups'),]) }}</option>
                                    @foreach ($Roles as $item)
                                        <option value="{{ $item->id }}" {{ $item->id == $penggunaData->role_id ? 'selected' : '' }}>{{ $item->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            @error('groups')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="username" :value="__('lang.username_or_email')" /><span class="asterisk">*</span>
                            <input id="username" type="text" class="form-control" name="username" value="{{ $penggunaData->username }}" placeholder="@lang('lang.place_data', ['data' => __('lang.username_or_email')])" required/>
                            @error('username')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="password" :value="__('lang.password')" />
                            @if (!$updateMode)
                                <span class="asterisk">*</span>
                            @endif
                            <x-forms.input type="password" name="password" id="password" :value="old('password')" autofocus/>
                            @error('password')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                            @if ($updateMode)
                                <small class="form-text text-muted" id="passwordHelp">{{ __('messages.empty_password_not_change') }}</small>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <x-forms.label for="status" :value="__('lang.status')" /><span class="asterisk">*</span>
                            <select class="form-control" name="status" id="status" required>
                                <option selected>{{ __('messages.select_data', ['data' => __('lang.status'),]) }}</option>
                                <option value="Y" {{ 'Y' == $penggunaData->is_active ? 'selected' : '' }}>{{ __('lang.active')}}</option>
                                <option value="N" {{ 'N' == $penggunaData->is_active ? 'selected' : '' }}>{{ __('lang.inactive')}}</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="name" :value="__('lang.name')" /><span class="asterisk">*</span>
                            <input id="name" type="text" class="form-control" name="name" value="{{ $penggunaData->name }}" placeholder="@lang('lang.place_data', ['data' => __('lang.name')])" required/>
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="password_confirmation" :value="__('lang.confirm_password')" />
                            @if (!$updateMode)
                                <span class="asterisk">*</span>
                            @endif
                            <x-forms.input type="password" name="password_confirmation" id="password_confirmation" :value="old('password_confirmation')" autofocus />
                            @error('password_confirmation')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-forms.form>
    <x-slot name="footer">
        <button class="btn btn-primary btn-loading btn-save">{{ __('lang.save') }}</button>
    </x-slot>
</x-modal-layout>
