@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.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <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 <span
                                        class="text-danger">*</span></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="{{ asset('default-images/default_product_image.jpg') }}" 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="category_id">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) }}"
                                                @if(is_array(old('categories')) && in_array($category->id, old('categories'))) selected @endif>
                                            {{ $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') }}" 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) }}" 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-info">*</span></label>
                                    <input dir="{{ $localeCode == "ar" ? 'rtl' : 'ltr' }}"
                                           class="form-control @error("description_$localeCode") is-invalid @enderror"
                                           type="text" id="description_{{ $localeCode }}"
                                           name="description_{{ $localeCode }}"
                                           value="{{ old('description_' . $localeCode) }}" />
                                    @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-info">*</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 }}"
                                              >{{ old('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') }}" 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-info">*</span></label>
                                <input class="form-control @error("wholesale_price") is-invalid @enderror" type="text"
                                       id="wholesale_price" name="wholesale_price" value="{{ old('wholesale_price') }}"
                                       />
                                @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') }}"
                                       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 Awarded <span class="text-info">*</span></label>
                                <input class="form-control @error("points_awarded") is-invalid @enderror" type="text"
                                       id="points_awarded" name="points_awarded" value="{{ old('points_awarded') }}"
                                       />
                                @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-info">*</span></label>
                                <input class="form-control @error("package_size") is-invalid @enderror" type="text"
                                       id="package_size" name="package_size" value="{{ old('package_size') }}"
                                       />
                                @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-info">*</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') }}" />
                                @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-info">*</span></label>
                                <select class="form-control form-select @error("discount_type") is-invalid @enderror"
                                        id="discount_type" name="discount_type" >
                                    @foreach(\App\Enums\ProductDiscountType::getValues() as $key => $value)
                                        <option class="text-capitalize" value="{{ $value }}"
                                                @if(old('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-info">*</span></label>
                                <input class="form-control @error("discount") is-invalid @enderror" type="text"
                                       id="discount" name="discount" value="{{ old('discount') }}" />
                                <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-info">*</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 }}">{{ $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')===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')===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')===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 @selected(old('catalog_visibility') === \App\Models\Product::VISIBILITY_VISIBLE)) value="{{\App\Models\Product::VISIBILITY_VISIBLE}}">Visible</option>
                                    <option @selected(old('catalog_visibility') === \App\Models\Product::VISIBILITY_CATALOG_ONLY)) value="{{\App\Models\Product::VISIBILITY_CATALOG_ONLY}}">Catalog</option>
                                    <option @selected(old('catalog_visibility') === \App\Models\Product::VISIBILITY_SEARCH_ONLY)) 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>
        function previewImage(event) {
            const output = document.getElementById('product-img');
            output.src = URL.createObjectURL(event.target.files[0]);
        }

    </script>
@endsection