@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/products/reviews.min.css?v=0.9');
    add_js_src('/static/features/products/reviews.js?v=1.0');
    add_js_data('CKEDITOR_DATA', [
        'urls' => [
            'upload' => route('merchant.files.media.ck-upload'),
        ],
    ]);

    $categoryOptions = get_scraper_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($products) || !is_countable($products) || count($products) == 0)
        <div class="alert alert-warning text-center">
            Không có sản phẩm cần duyệt
        </div>
    @else
        <div class="product-review-list">
            @foreach ($products as $product)
                @php
                    $product->applyMeta();
                @endphp
                <form action="{{ route('merchant.products.approve-sync') }}" method="POST" class="product-item-form">
                    @csrf
                    <input type="hidden" name="id" value="{{ $product->id }}">
                    <!--begin::Portlet-->
                    <div class="m-portlet product-item" id="product-item-{{ $product->id }}" data-id="{{ $product->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">
                                        {{ $product->name }}<a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                    </h3>
                                    <input type="text" name="name" class="form-control m-input" value="{{ $product->name }}">
                                </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="product-inner">

                                            <div class="product-body">
                                                <div class="row">
                                                    <div class="col-md-8 col-lg-7 col-xl-8">
                                                        <div class="product-short-description mb-3">
                                                            <label for="product-{{ $loop->index }}-description" class="form-label">Mô tả ngắn</label>
                                                            <div class="product-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($product->description) !!}
                                                                </div>
                                                                <textarea name="description" id="product-{{ $loop->index }}-description" class="auto-height form-control m-input" placeholder="Nhập mô tả">{{ $product->description }}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="product-sku mb-3">
                                                            <label for="product-{{ $loop->index }}-sku" class="form-label">SKU</label>
                                                            <div class="product-sku-wraper live-edit text-editor">

                                                                <div class="output">{{ $product->sku }} <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a></div>
                                                                <input type="text" name="sku" id="product-{{ $loop->index }}-sku" class="form-control m-input" value="{{ $product->sku }}" placeholder="Nhập SKU">
                                                            </div>
                                                        </div>

                                                        <div class="product-category-id mb-3">
                                                            <label for="product-{{ $loop->index }}-category-id" class="form-label">Danh mục</label>
                                                            <div class="product-category-id-wraper">
                                                                {!! html_input_template('merchant', [
                                                                    'type' => 'crazyselect',
                                                                    'template' => 'crazyselect',
                                                                    'name' => 'category_id',
                                                                    'id' => 'product-' . $loop->index . '-category-id',
                                                                    'data' => $categoryOptions,
                                                                    'value' => $product->category_id,
                                                                ]) !!}
                                                            </div>
                                                        </div>

                                                        <div class="product-price-wraper mb-3">
                                                            <label for="product-{{ $loop->index }}-price" class="form-label">Giá</label>
                                                            <div class="product-price live-edit number-editor">

                                                                <div class="output">{{ get_price_format($product->price, 'VND') }} <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a></div>
                                                                <input type="number" name="price" id="product-{{ $loop->index }}-price" class="form-control m-input" value="{{ $product->price }}">
                                                            </div>
                                                        </div>
                                                        <div class="product-price-old-wraper mb-3">
                                                            <label for="product-{{ $loop->index }}-old-price" class="form-label">Giá cũ</label>
                                                            <div class="product-old-price-output live-edit number-editor">

                                                                <div class="output">{{ $product->old_price ? get_price_format($product->old_price, 'VND') : null }}<a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a></div>
                                                                <input type="number" name="old_price" id="product-{{ $loop->index }}-old-price" class="form-control m-input" value="{{ $product->old_price }}" placeholder="Nhập giá cũ">
                                                            </div>
                                                        </div>

                                                        <div class="product-detailed-content mb-3">
                                                            <label for="product-{{ $loop->index }}-detailed-content" class="form-label">Nội dung chi tiết</label>
                                                            <div class="product-detailed-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>
                                                                    {!! $product->detailed_content !!}
                                                                </div>
                                                                <textarea name="detailed_content" id="product-{{ $loop->index }}-detailed-content" class="auto-height form-control m-input" placeholder="Nhập Nội dung chi tiét"  style="height: 562px">{{ $product->detailed_content }}</textarea>
                                                            </div>
                                                        </div>


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

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

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

                                                                <div class="output">{{ $product->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="product-{{ $loop->index }}-image-alt" class="form-control m-input" value="{{ $product->featured_image_alt }}" placeholder="Nhập Alt ảnh sản phẩm">
                                                            </div>
                                                        </div>

                                                        <div class="product-gallery_items ">
                                                            <label for="product-{{ $loop->index }}-featured_image" class="form-label">Ảnh dạng gallery</label>
                                                            <div class="product-gallery_items-wraper">
                                                                {!! html_input_template('merchant', [
                                                                    'type' => 'image-list',
                                                                    'template' => 'image-list',
                                                                    'name' => 'gallery_items',
                                                                    'id' => 'product-' . $loop->index . '-gallery_items',
                                                                    'value' => $product->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="product-article-title mb-3">
                                                        <label for="product-{{ $loop->index }}-article-title" class="form-label">Tiêu đề SEO</label>
                                                        <div class="product-sku-wraper live-edit text-editor">

                                                            <div class="output">
                                                                {!! $product->article_title !!}
                                                                <a href="javascript:void(0)" class="btn-edit"><i class="fad fa-pencil-alt"></i></a>
                                                            </div>
                                                            <input type="text" name="article_title" id="product-{{ $loop->index }}-article-title" class="form-control m-input" value="{{ $product->article_title }}" placeholder="Nhập tiêu đề SEO">
                                                        </div>
                                                    </div>

                                                    <div class="product-short-description mb-3">
                                                        <label for="product-{{ $loop->index }}-meta-description" class="form-label">Mô tả SEO</label>
                                                        <div class="product-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>
                                                                {{ $product->meta_description }}
                                                            </div>
                                                            <textarea name="meta_description" id="product-{{ $loop->index }}-meta-description" class="auto-height form-control m-input" placeholder="Nhập mô tả SEO">{{ $product->meta_description }}</textarea>
                                                        </div>
                                                    </div>

                                                    <div class="product-article-content mb-3">
                                                        <label for="product-{{ $loop->index }}-article-content" class="form-label">Nội dung Bài viết</label>
                                                        <div class="product-article-content live-edit text-ck-editor">

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

                                                    <div class="product-keywords mb-3">
                                                        <label for="product-{{ $loop->index }}-keywords" class="form-label">Từ khoá SEO</label>
                                                        <div class="product-keywords-wraper live-edit text-editor">
                                                            <input type="text" name="keywords" id="product-{{ $loop->index }}-keywords" class="form-control m-input" value="{{ $product->keywords }}" placeholder="Nhập từ khoá">
                                                            <div class="output">{{ $product->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">
            {{ $products->links($_pagination . 'default') }}
        </div>
    @endif
@endsection
@section('js')
@endsection
@section('css')
<style>
    .cropit-editor .input-group{
        display: none;
    }
</style>
@endsection