<div>
    <div style="display: flex; justify-content: end; align-items: center; gap: 10px; margin-bottom: 10px;">
        Düzenlenen diller:
        @foreach ($languages as $language)
            <a href="#" wire:click.prevent="changeLanguage('{{ $language->short }}')"
                wire:key="lang-{{ $language->id }}"
                class="btn btn-sm {{ $selectedLanguage == $language->short ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ strtoupper($language->short) }}
            </a>
        @endforeach
    </div>

    <form>
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="title">Başlık</label>
            <div class="col-sm-10">
                <input class="form-control" id="title" type="text" wire:model.live="title" autocomplete="off">
                <div>
                    @error('title')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="content">İçerik</label>
            <div class="col-sm-10">
                <div wire:ignore>
                    <textarea wire:model="description" class="form-control" id="content"></textarea>
                </div>
                <div>
                    @error('description')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="popup_link">Link Yönlendirmesi</label>
            <div class="col-sm-10">
                <input class="form-control" id="popup_link" type="text" wire:model.live="popup_link" autocomplete="off">
                <div>
                    @error('popup_link')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label">Sayfa Yönlendirmesi</label>
            <div class="col-sm-10">
                <select class="form-select" wire:model.live="page_id">
                    <option value="">Seçiniz</option>
                    @foreach($this->pages as $page)
                        <option value="{{ $page->id }}">{{ $page->title }}</option>
                        @if($page->children->count() > 0)
                            @include('partials.sub-pages', ['children' => $page->children, 'prefix' => '--'])
                        @endif
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="display_type">Görüntülenme Tipi</label>
            <div class="col-sm-10">

                <select class="form-select" wire:model.live="display_type">
                    <option value="1">Resim olarak görüntülensin</option>
                    <option value="2">Başlık - Yazı olarak görüntülensin</option>
                </select>

                <div>
                    @error('display_type')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="popup_display_scope">Görüntüleneceği sayfalar</label>
            <div class="col-sm-10">

                <select class="form-select" wire:model.live="popup_display_scope">
                    <option value="1">Tüm sayfalarda görüntülensin</option>
                    <option value="2">Sadece anasayfada görüntülensin</option>
                </select>

                <div>
                    @error('popup_display_scope')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="popup_display_freq">Görüntülenme sıklığı</label>
            <div class="col-sm-10">

                <select class="form-select" wire:model.live="popup_display_freq">
                    <option value="1">Sadece bir kere</option>
                    <option value="2">Günde bir kere</option>
                    <option value="3">Her zaman</option>
                </select>

                <div>
                    @error('popup_display_freq')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="tab-content rounded-bottom">
            <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1000">
                <div class="mb-3">
                    <x-file-manager id="fm1" name="image" title="Görsel" :path="$image_path" />
                </div>
                <div class="mb-3">
                    <x-file-manager id="fm2" name="image_mobile" title="Görsel (mobil)" :path="$image_mobile_path" />
                </div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" wire:click.prevent="saveAndRedirect" wire:loading.attr="disabled" wire:target="save, saveAndRedirect">Kaydet</button>
        <button class="btn btn-primary" type="submit" wire:click.prevent="save" wire:loading.attr="disabled" wire:target="save, saveAndRedirect">Kaydet ve Eklemeye Devam Et</button>

    </form>

</div>

@push('js')
    <script>
        class MyUploadAdapter {
            constructor(loader) {
                this.loader = loader;
            }

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

            abort() {
                if (this.xhr) {
                    this.xhr.abort();
                }
            }

            _initRequest() {
                const xhr = this.xhr = new XMLHttpRequest();
                xhr.open('POST', '{{ route('admin.pages.ckeditor-upload') }}', true);
                xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
                xhr.responseType = 'json';
            }

            _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;

                    if (!response || response.error) {
                        return reject(response && response.error ? response.error.message : genericErrorText);
                    }

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

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

            _sendRequest(file) {
                const data = new FormData();
                data.append('upload', file);
                this.xhr.send(data);
            }
        }

        function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                return new MyUploadAdapter(loader);
            };
        }
    </script>

    <script>
        function initCKEditor() {
            ClassicEditor
                .create(document.querySelector('#content'), {
                    removePlugins: ['Title'],
                    extraPlugins: [MyCustomUploadAdapterPlugin],
                    height: 400,
                })
                .then(editor => {
                    editor.editing.view.change(writer => {
                        writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
                    });

                    editor.model.document.on('change:data', () => {
                        @this.set('description', editor.getData());
                    });

                    Livewire.on('languageChanged', function(event) {
                        editor.setData(event.content);
                    });
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>

@endpush