@push('styles')
    <style type="text/css" media="screen">
        .ck-editor__editable {
            min-height: 380px;
        }
        .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-3 grid-cols-1">
    <!-- Title -->
    <div class="relative w-full mb-3">
        <x-jet-label for="title" value="{{ __('* Título') }}" />
        <textarea name="title" id="title" rows="5" cols="5" required>
			{{ $banner->title }}
		</textarea>
        <x-jet-input-error for="title" class="mt-2" />
    </div>

    <!-- Url -->
    <div class="w-full mb-3">
        <x-jet-label for="url" value="{{ __('* Url') }}" />
		<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" name="url" value="{{ old('url', $banner->url) }}" 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.example.com" />
		</div>
        <x-jet-input-error for="url" 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($banner->urlImage) }}" alt="{{ $banner->title }}" title="{{ $banner->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-100 text-right sm:px-6">
    <x-jet-button>{{ $banner->title ? __('Actualizar') : __('Agregar') }}</x-jet-button>
</div>

@push('scripts')
    <script>
		(function() {
            'use strict';

            let url = document.getElementById('url');

            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);
			
	        ClassicEditor
	            .create(document.querySelector('#title'), {
	            	toolbar: { 
	            		items: [
							'heading', '|',
							'fontfamily', 'fontsize', '|',
							'alignment', '|',
							'fontColor', 'fontBackgroundColor', '|',
							'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
							'outdent', 'indent', '|',
							'bulletedList', 'numberedList', 'todoList', '|',
							'blockQuote', '|',
							'undo', 'redo'
						],
						shouldNotGroupWhenFull: true
	            	}
	                // ...
	            })
	            .catch(error => {
	                console.error(error);
	            })
	            .then(editor => {
	                console.log( Array.from( editor.ui.componentFactory.names() ) );
	            });

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

			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