@extends('layouts.admin', ['title' => 'Кейсы'])

@section('content')
    <div class="content__wrapper content__wrapper--editor">
        <div class="block">
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form
                action="{{ $article->exists ? route('admin.articles.update', $article->id) : route('admin.articles.store') }}"
                method="POST" enctype="multipart/form-data">
                @csrf
                @if($article->exists)
                    @method('PUT')
                @endif
                <div class="block__wrapper catalog">
                    <a href="{{route('admin.articles.index')}}"
                       class="content__back text text--small text--medium text--grey--lighter">
                        назад
                    </a>
                    <div class="block__item">
                        <p class="editor__status text text--base text--grey">{{__('statuses_article.' . $article->status)}}</p>
                    </div>
                    <div class="block__item">
                        <div class="card">
                            <div class="card__wrapper card__wrapper--radius--small card__wrapper--big">
                                <input type="text" class="input input--big" name="header_article"
                                       placeholder="Заголовок"
                                       value="{{ old('header_article') ?? $article->header_article}}">
                            </div>
                        </div>
                        @error('header_article')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="block__item">
                        <div class="card">
                            <tinymce-editor style="width: 100%;" id="text_article"
                                            name="text_article">{!! old('text_article') ?? $article->text_article  !!}</tinymce-editor>
                        </div>
                        @error('text_article')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    @include('layouts.partials.tags', ['model' => $article])
                    <div class="block__item block js-editor editor">
                        <div class="card">
                            <div class="card__wrapper card__wrapper--radius--small card__wrapper--big block__wrapper">
                                <div class="block__header block__header--gap--big js-editor-link editor-block__link">
                                    <p class="text text--base text--grey">Обложка статьи</p>
                                </div>
                                @include('layouts.partials.media_form', ['model' => $article, 'name' => \App\Models\Article::MEDIA_TYPE_COVER])
                            </div>
                        </div>
                    </div>
                    <div class="block__item block js-editor editor">
                        <div class="card">
                            <div class="card__wrapper card__wrapper--radius--small card__wrapper--big block__wrapper">
                                <div class="block__header block__header--gap--big js-editor-link editor-block__link">
                                    <p class="text text--base text--grey">Превью</p>
                                </div>
                                <div class="block__content js-editor-block editor-block__content">
                                    <div class="editor-block__grid editor-block__grid--equal">
                                        <div class="editor-block__item card">
                                            <div class="card__block blog blog--editor">
                                                <div class="blog__wrapper blog__wrapper--bordered">
                                                    <div class="blog__img">
                                                        <img id="preview_image"
                                                             src="{{$article[\App\Models\Article::MEDIA_TYPE_PICTURE_MAIN]}}"
                                                             alt="">
                                                    </div>
                                                    <div class="blog__content">
                                                        <p class="text text--base text--black text--bold blog__title"
                                                           id="preview_article_header">
                                                            Как появились сервисы для проверки отношений
                                                        </p>
                                                        <p class="text text--small text--grey--light"
                                                           id="preview_article_text">
                                                            И на чем была построена рекламная кампания сервисов “для
                                                            ревнивых”
                                                        </p>
                                                    </div>
                                                    <div class="blog__footer">
                                                        <div class="blog__tags">
                                                            <span class="tag">Бизнес</span>
                                                            <span class="tag">Социальные сети</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="editor-block__control">
                                            <div class="block__wrapper">
                                                <input type="text" name="header_preview"
                                                       value="{{ old('header_preview') ?? $article->header_preview}}"
                                                       id="preview_article_header_value" class="input">
                                                <textarea class="input input--textarea" name="text_preview"
                                                          id="preview_article_text_value">{{ old('text_preview') ?? $article->text_preview}}</textarea>
                                            </div>
                                            <div class="block__wrapper block__wrapper--end">
                                                <label class="file-input button button--editor button--editor--blue">
                                                    <input type="hidden" name="{{\App\Models\Article::MEDIA_TYPE_PICTURE_MAIN}}" value="{{old(\App\Models\Article::MEDIA_TYPE_PICTURE_MAIN) ?? $article[\App\Models\Article::MEDIA_TYPE_PICTURE_MAIN]}}"/>
                                                    <input type="file" id="" class="file-input__item" data-preview="preview_image" data-set-value="{{\App\Models\Article::MEDIA_TYPE_PICTURE_MAIN}}">
                                                    <span>Загрузить</span>
                                                </label>
                                                <a href="#"
                                                   class="button button--editor button--editor--red">Удалить</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block__item">
                        <div class="card">
                            <div
                                class="card__wrapper card__wrapper--link card__wrapper--radius--small card__wrapper--big">
                                <input type="text" name="link" value="{{ old('link') ?? $article->link}}"
                                       class="input input--big" placeholder="link">
                            </div>
                        </div>
                    </div>
                    <div class="block__item">
                        <div class="editor__row">
                            <div class="editor__item">
                                <div class="card">
                                    <div
                                        class="card__wrapper card__wrapper--center card__wrapper--big card__wrapper--radius--small">
                                        <p class="editor__status text text--base text--grey">{{__('statuses_article.' . $article->status)}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="editor__item">
                                <div class="card">
                                    <a href="#"
                                       id="preview_article_button"
                                       class="card__wrapper card__wrapper--center card__wrapper--big card__wrapper--radius--small">
                                        <p class="editor__view text text--base text--grey">Предпросмотр</p>
                                    </a>
                                </div>
                            </div>
                            <div class="select custom-select">
                                <select class="select__tag" name="action" id="">
                                    <option value="{{\App\Models\Article::STATUS_ACTIVE}}">Опубликовать</option>
                                    <option value="{{\App\Models\Article::STATUS_DRAFT}}">Сохранить черновик</option>
                                </select>
                            </div>
                            <input type="submit" class="button button--editor button--editor--green"
                                   value="Выполнить действие">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    @vite('resources/js/partials/preview_article.js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelector('#preview_article_button').addEventListener('click', function () {
                const form = document.querySelector('form');
                const defaultAction = form.getAttribute('action');
                const methodElement = form.querySelector('[name="_method"]')
                let oldMethod = null;
                if (methodElement) {
                    oldMethod = methodElement.value;
                    methodElement.value = '';
                }

                form.setAttribute('action', '{{route('admin.articles.preview-save')}}');
                form.setAttribute('target', '_blank');

                form.submit()

                form.setAttribute('action', defaultAction);
                form.removeAttribute('target');
                if (methodElement) {
                    methodElement.value = oldMethod;
                }
            })
        })
    </script>
@endsection