@extends('components.layouts.jquery-manager')
@section('title')
    اضافه کردن مقاله جدید
@endsection
@section('content')
    <form
        class="space-y-4"
        action="{{ route('manager.article-update' , $article->id )  }}" method="POST"
        enctype="multipart/form-data">
        @method('put')
        @csrf
        <div class="flex items-center gap-2">
            <x-manager.inputs.jquery-input
                name="name"
                lable="موضوع مقاله "
                value="{{$article->name}}"
                type="text"
                placeholder="موضوع مقاله "
            />
            <x-manager.inputs.jquery-input
                name="slug"
                lable="ادرس اینترنتی  "
                value="{{$article->slug}}"
                type="text"
                placeholder="ادرس اینترنتی  "
            />

            <div class="w-full">
                <div class=" flex flex-col space-y-2">
                    <label for="category">دسته بندی را انتخاب کنید</label>
                    <select
                        class="p-2 rounded-2xl"
                        name="category" id="category">
                        <option value="">انتخاب دسته بندی</option>
                        @foreach($categories as $category )
                            <option value="{{$category->id}}"
                            @foreach($article->categories as $cat)
                                @if($cat->id == $category->id) selected @endif
                                @endforeach >{{$category->name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('category'){{$message}}@enderror
            </div>
        </div>

        <div class="flex  gap-3 w-full">
            <x-manager.inputs.jquery-input
                name="meta_title"
                lable="تیتر متا "
                value="{{$article->meta_title}}"
                type="text"
                placeholder="تیتر متا "
            />
            <x-manager.inputs.jquery-input
                name="meta_key_word"
                lable="کلمه کلیدی"
                value="{{$article->meta_key_word}}"
                type="text"
                placeholder="کلمه کلیدی"
            />
            <x-manager.inputs.jquery-input-textarea
                name="meta_description"
                value="{{$article->meta_description}}" label="توضیحات متا"/>
        </div>
        <div class="space-y-4">
            <x-manager.inputs.jquery-input-textarea
                name="short_description"
                value="{{$article->short_description}}" label="توضیحات کوتاه"/>
            <textarea id="description" name="description">{{ $article->description  }}</textarea>
            @error('description') <span class="text-red-800">{{$message}}</span>@enderror
            <div class="flex gap-4">
                <div class="space-y-8">
                    <x-manager.inputs.jquery-input-file type="file" name="avatar"/>
                    <img
                        class="w-96"
                        src="{{$article->avatar}}" alt="">
                </div>
                <livewire:manager.add-video-to-article article="{{$article->id}}"/>
                <livewire:manager.add-podcast-to-article article="{{$article->id}}"/>
            </div>
        </div>
        <button type="submit" class="w-full bg-amber-300 p-3 rounded-2xl">ذخیره تغییرات</button>
    </form>

@endsection
@section('js')
    <script>
        const editor = CKEDITOR.replace('description', {
            filebrowserUploadUrl: `{{route('article.imageUploader' , ['_token' => csrf_token()])}}`,
            customConfig: 'editorConfig',
            requires: 'widget',
        });
        CKEDITOR.editorConfig = function (config) {
            config.language = 'fa';
            config.uiColor = '#AADC6E';
            config.allowedContent = true;
            config.extraPlugins = 'language';
            config.height = 500;
            config.extraPlugins = 'uploadimage';
            config.uploadUrl = `{{route('article.imageUploader' , ['_token' => csrf_token()])}}`;
            config.toolbarCanCollapse = true;
            config.extraPlugins = 'font';
            config.font_names =
                'yekan;' +
                'vazir;'
        };
    </script>

@endsection