@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-1 grid-cols-1">
    <!-- Client -->
    <div class="w-full">
        <x-jet-label for="client" value="{{ __('* Cliente') }}" />
        <x-jet-input type="text" id="client" name="client" :value="old('client', $project->client)" autocomplete="client" required />
        <x-jet-input-error for="client" class="mt-2" />
    </div>

    <!-- Title -->
    <div class="w-full">
        <x-jet-label for="title" value="{{ __('* Titulo') }}" />
        <x-jet-input type="text" id="title" name="title" :value="old('title', $project->title)" autocomplete="title" required />
        <x-jet-input-error for="title" class="mt-2" />
    </div>

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

    <!-- Url -->
    <div class="w-full">
        <x-jet-label for="url_youtube" value="{{ __('Url de YouTube') }}" />
		<div class="flex rounded-md shadow-sm">
			<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-200 text-gray-500 text-sm">
			  https://
			</span>
			<input type="url" id="url_youtube" name="url_youtube" value="{{ old('url_youtube', $project->url_youtube) }}" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.youtube.com" />
		</div>
        <x-jet-input-error for="url_youtube" 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($project->urlImage) }}" alt="{{ $project->title }}" title="{{ $project->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> {{ $project->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>
		(function() {
            'use strict';

			ClassicEditor.create(document.querySelector('#description'), {
					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);
				});

			let image = document.getElementById('image');
			let preview = document.getElementById('preview');
			let url = document.getElementById('url_youtube');

            function formatUrl(e) {
                if ((this.value.substring(0, 7) != 'http://') && (this.value.substring(0, 8) != 'https://')) {
                    this.value = 'https://' + this.value;   
                }
            }

            url.addEventListener('change', formatUrl);

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

			function readURLImg(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]);
				}
			}
        })();
    </script>
@endpush