@php
    $btn_icon_class = 'btn-sm m-btn m-btn--icon m-btn--icon-only m-btn--pill m-btn--air';
    add_js_src('static/plugins/ckeditor5/build4/ckeditor.js?v=' . get_app_version());
    add_js_src('static/manager/js/ckeditor.js?v=' . get_app_version());
    add_css_link('/static/features/articles/reviews.min.css?v=0.9');
    add_js_src('/static/features/articles/reviews.js?v=1.0');
    add_js_data('CKEDITOR_DATA', [
        'urls' => [
            'upload' => route('app.files.media.ck-upload'),
        ],
    ]);

    $categoryOptions = get_scraper_article_category_options();

@endphp
@extends($_layout . 'main')

{{-- khai báo title --}}
@section('title', 'Review Sản phẩm')

{{-- tên modul xuất hiện trong sub header --}}
@section('module.name', 'Review Sản phẩm')


@section('content')


    @if (!isset($articles) || !is_countable($articles) || count($articles) == 0)
        <div class="alert alert-warning text-center">
            Không có sản phẩm cần duyệt
        </div>
    @else
        <div class="article-review-list">
            @foreach ($articles as $article)
                @php
                    $article->applyMeta();
                @endphp
                <form action="{{ route('app.articles.approve-sync') }}" method="POST" class="article-item-form">
                    @csrf
                    <input type="hidden" name="id" value="{{ $article->id }}">
                    <!--begin::Portlet-->
                    <div class="m-portlet article-item" id="article-item-{{ $article->id }}" data-id="{{ $article->id }}">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title live-edit text-editor">

                                    <h3 class="m-portlet__head-text output">
                                        {{ $article->title }}<a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                    </h3>
                                    <input type="text" name="title" class="form-control m-input" value="{{ $article->title }}">
                                </div>
                            </div>

                            <div class="m-portlet__head-tools">
                                <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="left" data-original-title="Lưu và đồng bộ" class="btn-save-and-sync text-success btn btn-outline-success {{ $btn_icon_class }} ml-3">
                                    <i class="fa fa-check"></i>
                                </a>
                                <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="left" data-original-title="Chỉ lưu" class="btn-only-save text-primary btn btn-outline-primary {{ $btn_icon_class }} ml-3">
                                    <i class="fa fa-save"></i>
                                </a>
                                <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="left" data-original-title="Bỏ qua" class="btn-ignore text-danger btn btn-outline-danger {{ $btn_icon_class }} ml-3">
                                    <i class="fa fa-ban"></i>
                                </a>
                            </div>
                        </div>
                        <div class="m-portlet__body">

                            <!--begin::Section-->
                            <div class="m-section">
                                <div class="m-section__content">

                                    <div class="">
                                        <div class="article-inner">

                                            <div class="article-body">
                                                <div class="row">
                                                    <div class="col-md-8 col-lg-7 col-xl-8">
                                                        <div class="article-short-description mb-3">
                                                            <label for="article-{{ $loop->index }}-description" class="form-label">Mô tả ngắn</label>
                                                            <div class="article-short-description live-edit textarea-editor">

                                                                <div class="output" style="min-height: 300px">
                                                                    <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                                                    {!! nl2br($article->description) !!}
                                                                </div>
                                                                <textarea name="description" id="article-{{ $loop->index }}-description" class="auto-height form-control m-input" placeholder="Nhập mô tả">{{ $article->description }}</textarea>
                                                            </div>
                                                        </div>


                                                        <div class="article-category-id mb-3">
                                                            <label for="article-{{ $loop->index }}-category-id" class="form-label">Danh mục</label>
                                                            <div class="article-category-id-wraper">
                                                                {!! html_input_template('app', [
                                                                    'type' => 'crazyselect',
                                                                    'template' => 'crazyselect',
                                                                    'name' => 'category_id',
                                                                    'id' => 'article-' . $loop->index . '-category-id',
                                                                    'data' => $categoryOptions,
                                                                    'value' => $article->category_id,
                                                                ]) !!}
                                                            </div>
                                                        </div>
                                                        <div class="article-content mb-3">
                                                            <label for="article-{{ $loop->index }}-content" class="form-label">Nội dung chi tiết</label>
                                                            <div class="article-content live-edit text-ck-editor">

                                                                <div class="output" style="min-height: 562px" data-height="562">
                                                                    <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                                                    {!! $article->content !!}
                                                                </div>
                                                                <textarea name="content" id="article-{{ $loop->index }}-content" class="auto-height form-control m-input" placeholder="Nhập Nội dung chi tiét"  style="height: 562px">{{ $article->content }}</textarea>
                                                            </div>
                                                        </div>


                                                    </div>
                                                    <div class=" col-md-4 col-lg-5 col-xl-4">

                                                        <div class="article-featured_image mb-3">
                                                            <label for="article-{{ $loop->index }}-featured_image" class="form-label">Ảnh sản phẩm</label>
                                                            <div class="article-featured_image-wraper">
                                                                {!! html_input_template('app', [
                                                                    'type' => 'file',
                                                                    'template' => 'cropit',
                                                                    'name' => 'featured_image',
                                                                    'id' => 'article-' . $loop->index . '-featured_image',
                                                                    'data-width' => 460,
                                                                    'data-height' => 460,
                                                                    'hide-controls' => true,
                                                                    'value' => $article->getFeaturedImage(true),
                                                                ]) !!}
                                                            </div>
                                                        </div>

                                                        <div class="article-image mb-3">
                                                            {{-- <label for="article-{{ $loop->index }}-image-alt" class="form-label">Alt ảnh sản phẩm</label> --}}
                                                            <div class="article-sku-wraper live-edit text-editor">

                                                                <div class="output">{{ $article->featured_image_alt ?? 'Alt ảnh sản phẩm' }} <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a></div>
                                                                <input type="text" name="featured_image_alt" id="article-{{ $loop->index }}-image-alt" class="form-control m-input" value="{{ $article->featured_image_alt }}" placeholder="Nhập Alt ảnh sản phẩm">
                                                            </div>
                                                        </div>

                                                        <div class="article-gallery_items ">
                                                            <label for="article-{{ $loop->index }}-featured_image" class="form-label">Ảnh dạng gallery</label>
                                                            <div class="article-gallery_items-wraper">
                                                                {!! html_input_template('app', [
                                                                    'type' => 'image-list',
                                                                    'template' => 'image-list',
                                                                    'name' => 'gallery_items',
                                                                    'id' => 'article-' . $loop->index . '-gallery_items',
                                                                    'value' => $article->gallery_items,
                                                                ]) !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="seo">
                                                <h4><a href="javascript:void(0)" class="btn-show-seo-info">Thông tin SEO <i class="fad fa-chevron-down"></i></a></h4>
                                                <div class="seo-info">
                                                    <div class="article-meta-title mb-3">
                                                        <label for="article-{{ $loop->index }}-meta-title" class="form-label">Tiêu đề SEO</label>
                                                        <div class="article-sku-wraper live-edit text-editor">
                                                            <div class="output">
                                                                {!! $article->meta_title !!}
                                                                <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                                            </div>
                                                            <input type="text" name="meta_title" id="article-{{ $loop->index }}-meta_title" class="form-control m-input" value="{{ $article->meta_title }}" placeholder="Nhập tiêu đề SEO">
                                                        </div>
                                                    </div>

                                                    <div class="article-short-description mb-3">
                                                        <label for="article-{{ $loop->index }}-meta-description" class="form-label">Mô tả SEO</label>
                                                        <div class="article-short-description live-edit textarea-editor">
                                                            <div class="output"><a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                                                {{ $article->meta_description }}
                                                            </div>
                                                            <textarea name="meta_description" id="article-{{ $loop->index }}-meta-description" class="auto-height form-control m-input" placeholder="Nhập mô tả SEO">{{ $article->meta_description }}</textarea>
                                                        </div>
                                                    </div>

                                                    <div class="article-keywords mb-3">
                                                        <label for="article-{{ $loop->index }}-keywords" class="form-label">Từ khoá SEO</label>
                                                        <div class="article-keywords-wraper live-edit text-editor">
                                                            <input type="text" name="keywords" id="article-{{ $loop->index }}-keywords" class="form-control m-input" value="{{ $article->keywords }}" placeholder="Nhập từ khoá">
                                                            <div class="output">{{ $article->keywords }}<a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a></div>
                                                        </div>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--end::Section-->


                        </div>
                        <div class="m-portlet__foot">
                            <div class="m-form__actions">
                                <div class="row">
                                    <div class="col-lg-12 text-center">

                                        <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="top" data-original-title="Lưu và đồng bộ" class="btn-save-and-sync btn btn-success btn-sm">
                                            <i class="fa fa-check"></i> Duyệt
                                        </a>
                                        <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="top" data-original-title="Chỉ lưu" class="btn-only-save btn btn-primary btn-sm">
                                            <i class="fa fa-save"></i> Chỉ lưu
                                        </a>
                                        <a href="javascript:void(0);" data-toggle="m-tooltip" data-placement="top" data-original-title="Bỏ qua" class="btn-ignore btn btn-danger btn-sm">
                                            <i class="fa fa-ban"></i> Bỏ qua
                                        </a>
                                    </div>


                                </div>
                            </div>
                        </div>

                        <!--end::Form-->
                    </div>

                    <!--end::Portlet-->
                </form>
            @endforeach
        </div>
        <div class="pagi">
            {{ $articles->links($_pagination . 'default') }}
        </div>
    @endif
@endsection
@section('js')
@endsection
@section('css')
<style>
    .cropit-editor .input-group{
        display: none;
    }
</style>
@endsection