@extends('components.layouts.jquery-manager')
@section('title')
    اضافه کردن مقاله جدید
@endsection
@section('content')
    <form
        class="space-y-4"
        action="{{ route('manager.article-store')  }}" method="POST"
          enctype="multipart/form-data">
        @csrf
        <div class="flex items-center gap-2">
            <x-manager.inputs.jquery-input
                name="name"
                lable="موضوع مقاله "
                value="{{ old('name')  }}"
                type="text"
                placeholder="موضوع مقاله "
            />
            <x-manager.inputs.jquery-input
                name="slug"
                lable="ادرس اینترنتی  "
                value="{{ old('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}}" @selected(old('category') == $category->id)>{{$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="{{ old('meta_title')  }}"
                type="text"
                placeholder="تیتر متا "
            />
            <x-manager.inputs.jquery-input
                name="meta_key_word"
                lable="کلمه کلیدی"
                value="{{ old('meta_key_word')  }}"
                type="text"
                placeholder="کلمه کلیدی"
            />
            <x-manager.inputs.jquery-input-textarea
                name="meta_description"
                value="{{old('meta_description')}}" label="توضیحات متا"/>
        </div>
        <div class="space-y-4">
            <x-manager.inputs.jquery-input-textarea
                name="short_description"
                value="{{old('short_description')}}" label="توضیحات کوتاه"/>


            <textarea id="description" name="description">{{ old('description')  }}</textarea>
            @error('description') <span class="text-red-800">{{$message}}</span>@enderror
            <x-manager.inputs.jquery-input-file type="file" name="avatar"/>
        </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