@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb listRoute="{{ route('admin.blogs.index') }}" model="Our Blogs" item="Create"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="product-detail-tab" data-bs-toggle="tab"
                            data-bs-target="#createTabContent" type="button" role="tab" aria-controls="product-detail"
                            aria-selected="true">Our Blogs</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a data-bs-toggle="tab" data-bs-target="#product-variation" type="button" role="tab"
                            aria-controls="product-variation" aria-selected="true" class="nav-link disabled"
                            id="product-seo-tab">SEO</a>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                    <a data-bs-toggle="tab" data-bs-target="#product-galleries" type="button" role="tab"
                        aria-controls="product-galleries" aria-selected="true" class="nav-link disabled"
                        id="product-galleries-tab">Galleries</a>
                </li> --}}
                </ul>
                <x-form.wrapper action="{{ route('admin.blogs.store') }}" method="POST" enctype="multipart/form-data">
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                            name="title" value="{{ old('title') }}" />
                        <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('slug') }}" />
                    </x-form.row>
                    <x-form.row>
                        {{--
                    <x-form.input type="text" col="4" label="Author" :req="true" id="author" name="author"
                        value="{{ old('author') }}" /> --}}
                        <x-form.input type="date" col="6" label="Publish Date" :req="true" id="publish_date"
                            name="publish_date" value="{{ old('publish_date') }}" />
                        <x-form.input type="number" col="6" label="Order No." id="order" name="order" />
                        {{-- <div class="col-lg-4 my-auto">

                    </div> --}}
                    </x-form.row>

                    <x-form.row>
                        <div class="col-lg-4">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*" onchange="previewThumb(this,'featured-thumb')" />
                            <x-form.preview id="featured-thumb" />
                        </div>
                        <div class="col-lg-4">
                            <x-form.input type="file" label="Cover" :req="true" id="cover" name="cover"
                                accept="image/*" onchange="previewThumb(this,'cover-thumb')" />
                            <x-form.preview id="cover-thumb" />
                        </div>
                        <div class="col-lg-4">
                            <x-form.select type="number" label="Blog Category" :options="\App\Models\Blog::getCategories()" id="blog_category"
                                name="category_id" />

                        </div>
                    </x-form.row>
                    <br />
                    <x-form.textarea label="Description" isEditor="true" :req="true" id="description"
                        name="description" value="{!! old('description') !!}" rows="5" cols="5" />

                    <x-form.row>
                        <div class="col-lg-6">

                            <x-form.select label="Author" :req="true" :options="\App\Models\Team::getMembers()" name="author" id="author"
                                value="{{ old('author') }}" />

                            {{-- <x-form.select type="text" label="Author Post" :req="true" :options="[]"
                                id="author_post" name="author_post" value="{{ old('author_post', $blog->author_post) }}" />


                            <x-form.input type="file" label="Author Image" id="meta" name="meta"
                                accept="image/*,video/*" onchange="previewThumb(this,'meta-thumb')" />
                            <x-form.preview id="meta-thumb" url="{{ $blog->meta_image->getPath() }}" /> --}}
                        </div>
                    </x-form.row>

                    <br />

                    <div class="row mb-3">
                        <div class="col-md-2">
                            <x-form.checkbox label="Status" id="status" name="status" value="1"
                                class="form-check-input" />

                        </div>
                        <div class="col-md-2">
                            <x-form.checkbox label="Is Featured" id="is_featured" name="is_featured" value="1"
                                class="form-check-input" isEditMode="yes" />

                        </div>

                    </div>
                    <x-form.button class="btn btn-sm btn-dark" type="submit"><i class='bx bx-save bx-xs'></i> Save
                    </x-form.button>
                </x-form.wrapper>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    @include('_helpers.slugify', ['title' => 'title'])
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.ck_editor')
    @include('_helpers.ajax_form')
@endpush