@extends('layouts.md-admin')
@section('content')
    <div class="card">
        <div class="card-header">
            <h6> {{ trans('global.create') }} {{ trans('cruds.user.title_singular') }} </h6>
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('admin.users.store') }}" enctype="multipart/form-data"
                class="text-start artical">
                @csrf
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label required" for="name">{{ trans('cruds.user.fields.name') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text"
                                name="name" id="name" value="{{ old('name', '') }}" maxlength="100" required>
                        </div>
                        @if ($errors->has('name'))
                            <div class="invalid-feedback">
                                {{ $errors->first('name') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.name_helper') }}</span>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label required" for="email">{{ trans('cruds.user.fields.email') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" type="email"
                                name="email" id="email" value="{{ old('email') }}" maxlength="100" required>
                        </div>
                        @if ($errors->has('email'))
                            <div class="invalid-feedback">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.email_helper') }}</span>
                    </div>


                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label required" for="password">{{ trans('cruds.user.fields.password') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" type="password"
                                name="password" id="password" maxlength="30" required>
                        </div>
                        @if ($errors->has('password'))
                            <div class="invalid-feedback">
                                {{ $errors->first('password') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.password_helper') }}</span>
                    </div>


                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label" for="mobile">{{ trans('cruds.user.fields.mobile') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('mobile') ? 'is-invalid' : '' }}" type="text"
                                name="mobile" id="mobile" maxlength="25" value="{{ old('mobile', '') }}">
                        </div>
                        @if ($errors->has('mobile'))
                            <div class="invalid-feedback">
                                {{ $errors->first('mobile') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.mobile_helper') }}</span>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label" for="address">{{ trans('cruds.user.fields.address') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('address') ? 'is-invalid' : '' }}" type="text"
                                name="address" id="address" value="{{ old('address', '') }}" maxlength="255">
                        </div>
                        @if ($errors->has('address'))
                            <div class="invalid-feedback">
                                {{ $errors->first('address') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.address_helper') }}</span>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <label class="form-label" for="location">{{ trans('cruds.user.fields.location') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <input class="form-control {{ $errors->has('location') ? 'is-invalid' : '' }}" type="text"
                                name="location" id="location" value="{{ old('location', '') }}" maxlength="255">
                        </div>
                        @if ($errors->has('location'))
                            <div class="invalid-feedback">
                                {{ $errors->first('location') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.location_helper') }}</span>
                    </div>


                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        {{-- <div class="form-label form-check {{ $errors->has('approved') ? 'is-invalid' : '' }}"> --}}
                        {{-- <input type="hidden" name="approved" value="0">
                            <input class="form-check-input" type="checkbox" name="approved" id="approved" value="1"
                                {{ old('approved', 0) == 1 ? 'checked' : '' }}> --}}
                        <label class="form-check-label" for="approved">{{ trans('cruds.user.fields.approved') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <select class="form-control {{ $errors->has('approved') ? 'is-invalid' : '' }}" name="approved"
                                id="approved" required>
                                <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>
                                    {{ trans('global.pleaseSelect') }}</option>
                                @foreach (App\Models\User::APPROVE_SELECT as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('approved', 0) === $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @if ($errors->has('approved'))
                            <div class="invalid-feedback">
                                {{ $errors->first('approved') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.approved_helper') }}</span>

                    </div>
                    {{-- <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <label class="form-label required">{{ trans('cruds.user.fields.status') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status"
                                id="status" required>
                                <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>
                                    {{ trans('global.pleaseSelect') }}</option>
                                @foreach (App\Models\User::STATUS_SELECT as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('status', 'inactive') === (string) $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @if ($errors->has('status'))
                            <div class="invalid-feedback">
                                {{ $errors->first('status') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.status_helper') }}</span>
                    </div> --}}



                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <label class="form-label required" for="roles">{{ trans('cruds.user.fields.roles') }}</label>
                        <div class="input-group input-group-outline mb-3">
                            <select class="form-control select2 {{ $errors->has('roles') ? 'is-invalid' : '' }}"
                                name="roles[]" id="roles" required>
                                @foreach ($roles as $id => $role)
                                    <option value="{{ $id }}"
                                        {{ in_array($id, old('roles', [])) ? 'selected' : '' }}>
                                        {{ $role }}</option>
                                @endforeach
                            </select>
                        </div>
                        @if ($errors->has('roles'))
                            <div class="invalid-feedback">
                                {{ $errors->first('roles') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.roles_helper') }}</span>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <label class="form-label" for="bio_data">{{ trans('cruds.user.fields.bio_data') }}</label>
                        <div class="input-group-outline mb-3">
                            <textarea class="form-control ckeditor {{ $errors->has('bio_data') ? 'is-invalid' : '' }}" name="bio_data"
                                id="bio_data">{!! old('bio_data') !!}</textarea>
                        </div>
                        @if ($errors->has('bio_data'))
                            <div class="invalid-feedback">
                                {{ $errors->first('bio_data') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.user.fields.bio_data_helper') }}</span>
                    </div>

                </div>
                <div class="form-group">
                    <button class="btn btn-danger" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function SimpleUploadAdapter(editor) {
                editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {
                    return {
                        upload: function() {
                            return loader.file
                                .then(function(file) {
                                    return new Promise(function(resolve, reject) {
                                        // Init request
                                        var xhr = new XMLHttpRequest();
                                        xhr.open('POST',
                                            '{{ route('admin.users.storeCKEditorImages') }}',
                                            true);
                                        xhr.setRequestHeader('x-csrf-token', window._token);
                                        xhr.setRequestHeader('Accept', 'application/json');
                                        xhr.responseType = 'json';

                                        // Init listeners
                                        var genericErrorText =
                                            `Couldn't upload file: ${ file.name }.`;
                                        xhr.addEventListener('error', function() {
                                            reject(genericErrorText)
                                        });
                                        xhr.addEventListener('abort', function() {
                                            reject()
                                        });
                                        xhr.addEventListener('load', function() {
                                            var response = xhr.response;

                                            if (!response || xhr.status !== 201) {
                                                return reject(response && response
                                                    .message ?
                                                    `${genericErrorText}\n${xhr.status} ${response.message}` :
                                                    `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`
                                                );
                                            }

                                            $('form').append(
                                                '<input type="hidden" name="ck-media[]" value="' +
                                                response.id + '">');

                                            resolve({
                                                default: response.url
                                            });
                                        });

                                        if (xhr.upload) {
                                            xhr.upload.addEventListener('progress', function(
                                                e) {
                                                if (e.lengthComputable) {
                                                    loader.uploadTotal = e.total;
                                                    loader.uploaded = e.loaded;
                                                }
                                            });
                                        }

                                        // Send request
                                        var data = new FormData();
                                        data.append('upload', file);
                                        data.append('crud_id', '{{ $user->id ?? 0 }}');
                                        xhr.send(data);
                                    });
                                })
                        }
                    };
                }
            }

            var allEditors = document.querySelectorAll('.ckeditor');
            for (var i = 0; i < allEditors.length; ++i) {
                ClassicEditor.create(
                    allEditors[i], {
                        extraPlugins: [SimpleUploadAdapter]
                    }
                );
            }
        });
    </script>
@endsection