@extends('backend.layouts.app')
@section('title', $title)
@section('content')

    <x-back-button :route="route('admin.products.index')">Back to products</x-back-button>


    <form action="{{ route('admin.products.update', $product) }}" method="post" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            {{ $title }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col-6">
                                <label for="picture" class="form-label">Product Main Picture</label>
                                <input type="file" name="image" id="image"
                                    class="form-control @error('image') is-invalid @enderror"
                                    onchange="previewImage(event)">
                                @error('image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-1">
                                <img src="{{ $product->getFirstMediaUrl(Helper::PRODUCT_MAIN_IMAGE_COLLECTION) }}"
                                    id="product-img" width="100%" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="categories">Categories</label>
                                <select name="categories[]" id="categories" data-toggle="select2"
                                    class="form-control form-select select2" multiple>
                                    <option value="">Select Categories</option>
                                    @foreach (App\Models\Category::get() as $category)
                                        <option value="{{ $category->id }}"
                                            data-image="{{ $category->getFirstMediaUrl(Helper::CATEGORY_COLLECTION) }}"
                                            @selected($product->categories()->pluck('categories.id')->contains($category->id))>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col-12 mb-3">
                                <label class="form-label" for="sku">SKU <span class="text-danger">*</span></label>
                                <input class="form-control @error('sku') is-invalid @enderror" type="text" id="sku"
                                    name="sku" value="{{ old('sku', $product->sku) }}" required />
                                @error('sku')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <div class="col">
                                    <label class="form-label" for="name_{{ $localeCode }}">Name <span
                                            class="text-capitalize">{{ $properties['native'] }}</span> <span
                                            class="text-danger">*</span></label>
                                    <input dir="{{ $localeCode == 'ar' ? 'rtl' : 'ltr' }}"
                                        class="form-control @error("name_$localeCode") is-invalid @enderror" type="text"
                                        id="name_{{ $localeCode }}" name="name_{{ $localeCode }}"
                                        value="{{ old('name_' . $localeCode, $product->getTranslation('name', $localeCode)) }}"
                                        required />
                                    @error("name_$localeCode")
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>
                        <div class="form-group row mb-3">
                            @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <div class="col">
                                    <label class="form-label" for="description_{{ $localeCode }}">Description <span
                                            class="text-capitalize">{{ $properties['native'] }}</span> <span
                                            class="text-danger">*</span></label>
                                    <textarea dir="{{ $localeCode == 'ar' ? 'rtl' : 'ltr' }}"
                                        class="form-control @error("description_$localeCode") is-invalid @enderror" id="description_{{ $localeCode }}"
                                        name="description_{{ $localeCode }}" required>{{ old('description_' . $localeCode, $product->getTranslation('description', $localeCode)) }}</textarea>
                                    @error("description_$localeCode")
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>
                        <div class="form-group row mb-3">
                            @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <div class="col">
                                    <label class="form-label" for="product_details_{{ $localeCode }}">
                                        Product details <span class="text-capitalize">{{ $properties['native'] }}</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <textarea dir="{{ $localeCode == 'ar' ? 'rtl' : 'ltr' }}"
                                        class="form-control @error('product_details_{{ $localeCode }}') is-invalid @enderror"
                                        id="product_details_{{ $localeCode }}" name="product_details_{{ $localeCode }}" required>{{ old('product_details_' . $localeCode, $product->getTranslation('product_details', $localeCode)) }}</textarea>
                                    @error("product_details_{{ $localeCode }}")
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="sale_price">Current price <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('sale_price') is-invalid @enderror" type="text"
                                    id="sale_price" name="sale_price"
                                    value="{{ old('sale_price', $product->sale_price) }}" required />
                                @error('sale_price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="wholesale_price">Wholesale price <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('wholesale_price') is-invalid @enderror" type="text"
                                    id="wholesale_price" name="wholesale_price"
                                    value="{{ old('wholesale_price', $product->wholesale_price) }}" required />
                                @error('wholesale_price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="regular_price">Regulare price <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('regular_price') is-invalid @enderror" type="text"
                                    id="regular_price" name="regular_price"
                                    value="{{ old('regular_price', $product->regular_price) }}" required />
                                @error('regular_price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="points_awarded">Points Awarder <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('points_awarded') is-invalid @enderror" type="text"
                                    id="points_awarded" name="points_awarded"
                                    value="{{ old('points_awarded', $product->points_awarded) }}" required />
                                @error('points_awarded')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="package_size">Package Size <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('package_size') is-invalid @enderror" type="text"
                                    id="package_size" name="package_size"
                                    value="{{ old('package_size', $product->package_size) }}" required />
                                @error('package_size')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="minimum_wholesale_quantity">Minimum wholesale quantity
                                    <span class="text-danger">*</span></label>
                                <input class="form-control @error('minimum_wholesale_quantity') is-invalid @enderror"
                                    type="text" id="minimum_wholesale_quantity" name="minimum_wholesale_quantity"
                                    value="{{ old('minimum_wholesale_quantity', $product->minimum_wholesale_quantity) }}"
                                    required />
                                @error('minimum_wholesale_quantity')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="wholesale_price">Discount type <span
                                        class="text-danger">*</span></label>
                                <select class="form-control form-select @error('discount_type') is-invalid @enderror"
                                    id="discount_type" name="discount_type" required>
                                    @foreach (\App\Enums\ProductDiscountType::getValues() as $key => $value)
                                        <option class="text-capitalize" value="{{ $value }}"
                                            @if (old('discount_type', $product->discount_type) == $value) selected @endif>{{ $value }}</option>
                                    @endforeach
                                </select>
                                @error('discount_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="discount">Discount <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('discount') is-invalid @enderror" type="text"
                                    id="discount" name="discount" value="{{ old('discount', $product->discount) }}"
                                    required />
                                <span class="text-info">If you set the discount on None, put 0 here</span>
                                @error('discount')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label">Tags <span class="text-danger">*</span></label>
                                <select name="tags[]" id="tags"
                                    class="select2 form-control @error('tags') is-invalid @enderror select2-multiple"
                                    data-toggle="select2" multiple="multiple" data-placeholder="Choose tags...">
                                    @foreach ($tags as $key => $tag)
                                        <option value="{{ $tag->id }}" @selected(in_array($tag->id, old('tags', $product->tags->pluck('id')->toArray())))>
                                            {{ $tag->name }}</option>
                                    @endforeach
                                </select>
                                @error('tags')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="featured">Featured</label>
                                <div class='form-check form-switch'>
                                    <input class='form-check-input @error('featured') is-invalid @enderror'
                                        type='checkbox' id='featured' name="featured"
                                        style="width: 50px; height: 30px;" @checked((bool) old('featured', $product->featured) === true) />
                                </div>
                                @error('featured')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="published">Published</label>
                                <div class='form-check form-switch'>
                                    <input class='form-check-input @error('published') is-invalid @enderror'
                                        type='checkbox' id='published' name="published"
                                        style="width: 50px; height: 30px;" @checked((bool) old('published', $product->published) === true) />
                                </div>
                                @error('published')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="is_wholesale">is wholesale</label>
                                <div class='form-check form-switch'>
                                    <input class='form-check-input @error('is_wholesale') is-invalid @enderror'
                                        type='checkbox' id='is_wholesale' name="is_wholesale"
                                        style="width: 50px; height: 30px;" @checked((bool) old('is_wholesale', $product->is_wholesale) === true) />
                                </div>
                                @error('is_wholesale')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label">Catalog Visibility <span class="text-danger">*</span></label>
                                <select name="catalog_visibility" id="catalog_visibility"
                                    class="select2 form-control @error('catalog_visibility') is-invalid @enderror select2-multiple"
                                    data-toggle="select2" data-placeholder="Choose catalog visibility..">
                                    <option @if ((int) $product->catalog_visibility === (int) \App\Models\Product::VISIBILITY_VISIBLE) selected @endif
                                        value="{{ \App\Models\Product::VISIBILITY_VISIBLE }}">Visible
                                    </option>
                                    <option @if ((int) $product->catalog_visibility === (int) \App\Models\Product::VISIBILITY_CATALOG_ONLY) selected @endif
                                        value="{{ \App\Models\Product::VISIBILITY_CATALOG_ONLY }}">Catalog
                                    </option>
                                    <option @if ((int) $product->catalog_visibility === (int) \App\Models\Product::VISIBILITY_SEARCH_ONLY) selected @endif
                                        value="{{ \App\Models\Product::VISIBILITY_SEARCH_ONLY }}">Search
                                    </option>
                                </select>
                                @error('catalog_visibility')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group row mb-3">
                    <div class="col">
                        <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                    </div>
                </div>
            </div>
        </div>

    </form>
@endsection

@section('script')
<script src="{{asset('frontend/plugins/tinymce/tinymce.min.js')}}"></script>
<script>

    var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

    tinymce.init({
        selector: '#description_en, #description_ar, #product_details_en, #product_details_ar',
        plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker imagetools textpattern noneditable help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export',
        mobile: {
            plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker textpattern noneditable help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable'
        },
        menu: {
            tc: {
                title: 'Comments',
                items: 'addcomment showcomments deleteallconversations'
            }
        },
        menubar: 'file edit view insert format tools table tc help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
        autosave_ask_before_unload: true,
        autosave_interval: '30s',
        autosave_restore_when_empty: false,
        autosave_retention: '2m',
        image_advtab: true,
        importcss_append: true,
        templates: [
            {
                title: 'New Table',
                description: 'creates a new table',
                content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
            },
            {title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...'},
            {
                title: 'New list with dates',
                description: 'New List with dates',
                content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
            }
        ],
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        height: 600,
        image_caption: true,
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
        noneditable_noneditable_class: 'mceNonEditable',
        toolbar_mode: 'sliding',
        spellchecker_ignore_list: ['Ephox', 'Moxiecode'],
        tinycomments_mode: 'embedded',
        content_style: '.mymention{ color: gray; }',
        contextmenu: 'link image imagetools table configurepermanentpen',
        a11y_advanced_options: true,
        skin: useDarkMode ? 'oxide-dark' : 'oxide',
        content_css: useDarkMode ? 'dark' : 'default',

        mentions_selector: '.mymention',
        mentions_item_type: 'profile'
    });


</script>





    <script>



        function previewImage(event) {
            const output = document.getElementById('product-img');
            output.src = URL.createObjectURL(event.target.files[0]);
        }
    </script>
@endsection