@extends('layouts.admin')
@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
        >Gérer le calendrier des compétitions</h2>
    </div>

    <div class="space-y-6">
        <x-admin.messages />
        <div
            class="rounded-2xl border border-gray-200 bg-white px-5 py-7 dark:border-gray-800 dark:bg-white/[0.03] xl:px-10 xl:py-12"
        >
            <form action="{{ route('admin.competitions.update_results') }}" method="post">
                @csrf
                <div class="w-full space-y-6">
                    <div class="mb-4">
                        <label
                            class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                        >
                            Contenu de la page
                        </label>
                        <textarea name="results" id="results" class="tinymce w-full border border-gray-300 rounded-lg">{{ $results }}</textarea>
                    </div>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
                    >
                        Mettre à jour
                    </button>
                    <script src="{{ asset('tinymce/tinymce.min.js') }}"></script>
                    <script>
                        tinymce.init({
                            selector: 'textarea#results',
                            height: 500,
                            menubar: false,
                            plugins: [
                                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                                'anchor', 'searchreplace', 'visualblocks', 'codesample', 'fullscreen',
                                'insertdatetime', 'media', 'table', 'help', 'wordcount',
                            ],
                            toolbar: 'undo redo | blocks | ' +
                                'bold italic underline | align | bullist numlist outdent indent | ' +
                                'image media | link | blockquote | help',
                            language: 'fr_FR',
                            license_key: 'gpl',
                            branding: false,
                            forced_root_block: false,
                            image_title: true,
                            automatic_uploads: true,
                            file_picker_types: 'image',
                            file_picker_callback: (cb, value, meta) => {
                                const input = document.createElement('input');
                                input.setAttribute('type', 'file');
                                input.setAttribute('accept', 'image/*');

                                input.addEventListener('change', (e) => {
                                    const file = e.target.files[0];

                                    const reader = new FileReader();
                                    reader.addEventListener('load', () => {
                                        const id = 'blobid' + (new Date()).getTime();
                                        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
                                        const base64 = reader.result.split(',')[1];
                                        const blobInfo = blobCache.create(id, file, base64);
                                        blobCache.add(blobInfo);

                                        /* call the callback and populate the Title field with the file name */
                                        cb(blobInfo.blobUri(), {
                                            title: file.name
                                        });
                                    });
                                    reader.readAsDataURL(file);
                                });

                                input.click();
                            },
                        });
                    </script>
                </div>
            </form>
        </div>
    </div>
@endsection