@push('styles')
    <style type="text/css" media="screen">
        .ck-editor__editable {
            min-height: 380px;
        }
        .ck.ck-content ul,
            .ck.ck-content ul li{
                list-style-type: inherit;
            }

        .ck.ck-content ul {
            /* Default user agent stylesheet, you can change it to your needs. */
            padding-left: 40px;
        }
        .ck.ck-content ol {
            list-style: none;
            counter-reset: my-awesome-counter;
            padding-left: 30px;
        }
        .ck.ck-content ol li {
            counter-increment: my-awesome-counter;
        }
        .ck.ck-content ol li::before {
            content: counter(my-awesome-counter) ". ";
            color: black;
            font-weight: bold;
        }
        .ck.ck-content h2 {
            font-size: 1.5em;
            font-weight: bolder;
        }
        .ck.ck-content h3 {
            font-size: 1.17em;
            font-weight: bolder;
        }
        .ck.ck-content h4 {
            font-size: 1em;
            font-weight: bolder;
        }
    </style>
@endpush

<div class="px-4 py-5 grid gap-2 grid-cols-1 md:grid-cols-2">
    <!-- Title -->
    <div class="w-full col-span-1 md:col-span-2">
        <x-jet-label for="title" value="{{ __('* Titulo') }}" />
        <x-jet-input type="text" id="title" name="title" :value="old('title', $course->title)" autocomplete="title" required />
        <x-jet-input-error for="title" class="mt-2" />
    </div>

    <!-- Duration -->
    <div class="w-full col-span-1">
        <x-jet-label for="duration" value="{{ __('* Duración') }}" />
        <x-jet-input type="text" id="duration" name="duration" placeholder="07:00 A.M hasta 12:00 P.M" :value="old('duration', $course->duration)" required />
        <x-jet-input-error for="duration" class="mt-2" />
    </div>

    <!-- Price -->
    <div class="w-full col-span-1">
        <x-jet-label for="price" value="{{ __('* Precio') }}" />
        <x-jet-input type="number" id="price" name="price" :value="old('price', $course->price)" min="0" step="0.01" required />
        <x-jet-input-error for="price" class="mt-2" />
    </div>

    <!-- Place -->
    <div class="w-full col-span-1 md:col-span-2">
        <x-jet-label for="place" value="{{ __('* Lugar') }}" />
        <x-jet-input type="text" id="place" name="place" :value="old('place', $course->place)" required />
        <x-jet-input-error for="place" class="mt-2" />
    </div>

    <!-- Content -->
    <div class="w-full col-span-1 md:col-span-2">
        <x-jet-label for="content" value="{{ __('* Contenido') }}" />
		<textarea name="content" id="content" rows="5" cols="5" required>
			{{ $course->content }}
		</textarea>
        <x-jet-input-error for="content" class="mt-2" />
    </div>

    <!-- Description -->
    <div class="w-full col-span-1 md:col-span-2">
        <x-jet-label for="description" value="{{ __('* Descripción') }}" />
        <textarea name="description" id="description" rows="5" cols="5">
			{{ $course->description }}
		</textarea>
        <x-jet-input-error for="description" class="mt-2" />
    </div>

    <!-- Image -->
	<label for="image" class="block py-5 grid gap-3 grid-cols-1 md:grid-cols-2 cursor-pointer bg-white border-2 border-gray-300 border-dashed rounded-md p-4">
		<div class="flex justify-center items-center">
			<img id="preview" src="{{ asset($course->urlImage) }}" alt="{{ $course->title }}" title="{{ $course->title }}" class="h-32 rounded-md" />
		</div>
		<div class="flex justify-center items-center">
			<div class="text-center">
				<p>{{ __('Cargar Imagen') }}</p>
				<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
				<input id="image" type="file" name="image" class="sr-only" />
			</div>
		</div>
	</label>
	<x-jet-input-error for="image" class="mt-2" />
</div>

<div class="flex items-center justify-end px-4 py-3 bg-gray-200 text-right sm:px-6">
    <x-jet-button class="text-sm">
        <i class="fas fa-fw fa-save"></i> {{ $course->title ? __('Actualizar') : __('Agregar') }}
    </x-jet-button>
</div>

@push('scripts')
    <script type="text/javascript">
        class MyUploadAdapter {
            // ...
            constructor(loader) {
                // The file loader instance to use during the upload.
                this.loader = loader;
            }

            // Starts the upload process.
            upload() {
                return this.loader.file
                    .then(file => new Promise((resolve, reject) => {
                        this._initRequest();
                        this._initListeners(resolve, reject, file);
                        this._sendRequest(file);
                    }));
            }

            // Aborts the upload process.
            abort() {
                if (this.xhr) {
                    this.xhr.abort();
                }
            }

            // Initializes the XMLHttpRequest object using the URL passed to the constructor.
            _initRequest() {
                const xhr = this.xhr = new XMLHttpRequest();

                // Note that your request may look different. It is up to you and your editor
                // integration to choose the right communication channel. This example uses
                // a POST request with JSON as a data structure but your configuration
                // could be different.
                xhr.open('POST', '{{ route('admin.image.store') }}', true);
                xhr.setRequestHeader('x-csrf-token', "{{ csrf_token() }}");
                xhr.responseType = 'json';
            }

            // Initializes XMLHttpRequest listeners.
            _initListeners(resolve, reject, file) {
                const xhr = this.xhr;
                const loader = this.loader;
                const genericErrorText = `Couldn't upload file: ${ file.name }.`;

                xhr.addEventListener('error', () => reject(genericErrorText));
                xhr.addEventListener('abort', () => reject());
                xhr.addEventListener('load', () => {
                    const response = xhr.response;

                    // This example assumes the XHR server's "response" object will come with
                    // an "error" which has its own "message" that can be passed to reject()
                    // in the upload promise.
                    //
                    // Your integration may handle upload errors in a different way so make sure
                    // it is done properly. The reject() function must be called when the upload fails.
                    if (!response || response.error) {
                        return reject(response && response.error ? response.error.message : genericErrorText);
                    }

                    // If the upload is successful, resolve the upload promise with an object containing
                    // at least the "default" URL, pointing to the image on the server.
                    // This URL will be used to display the image in the content. Learn more in the
                    // UploadAdapter#upload documentation.
                    resolve({
                        default: response.url
                    });
                });

                // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
                // properties which are used e.g. to display the upload progress bar in the editor
                // user interface.
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', evt => {
                        if (evt.lengthComputable) {
                            loader.uploadTotal = evt.total;
                            loader.uploaded = evt.loaded;
                        }
                    });
                }
            }

            // Prepares the data and sends the request.
            _sendRequest(file) {
                // Prepare the form data.
                const data = new FormData();

                data.append('upload', file);

                // Important note: This is the right place to implement security mechanisms
                // like authentication and CSRF protection. For instance, you can use
                // XMLHttpRequest.setRequestHeader() to set the request headers containing
                // the CSRF token generated earlier by your application.

                // Send the request.
                this.xhr.send(data);
            }
        }

        function SimpleUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                // Configure the URL to the upload script in your back-end here!
                return new MyUploadAdapter(loader);
            };
        }
    </script>
    <script>
        let image = document.getElementById('image');
        let preview = document.getElementById('preview');

        image.addEventListener('change', function() {
            readURL(this);
        }, false);

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        ClassicEditor
            .create(document.querySelector('#content'), {
                extraPlugins: [SimpleUploadAdapterPlugin],

                toolbar: { 
                    items: [
                        'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'uploadImage', 'blockQuote',  'insertTable', 'mediaEmbed','|', 'undo', 'redo', 
                    ],
                    shouldNotGroupWhenFull: true
                }
                // ...
            })
            .catch(error => {
                console.error(error);
            })
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
		
        ClassicEditor
            .create(document.querySelector('#description'), {
                extraPlugins: [SimpleUploadAdapterPlugin],

                // ...
            })
            .catch(error => {
                console.error(error);
            })
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
@endpush