@component('panel.layouts.component', ['title' => 'ثبت محصول جدید'])

    @slot('style')

    @endslot
    @slot('subject')
        <h1><i class="fa fa-users"></i> ثبت محصول جدید </h1>
        <p>ثبت محصول جدید در فروشگاه.</p>
    @endslot
    @slot('breadcrumb')
        <li class="breadcrumb-item">محصولات</li>
    @endslot

    @slot('content')
        <div class="auth-background h-auto py-5">
            <div class="container py-5">
                <div class="row align-items-center ">
                    <div class="col-lg-12 col-md-12 mx-auto">
                        <div class="card">
                            <div class="card-header"><strong>{{ __('ثبت محصول جدید') }}</strong></div>
                            @component('product::components.message')
                            @endcomponent
                            <div class="card-body mx-lg-5 px-lg-3">
                                <form method="POST" action="{{ route('products.store') }}"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="form-group">
                                        <label for="title">{{ __('product.title') }}</label><i class="required">&nbsp;
                                            *</i>
                                        <input id="title" type="text"
                                               class="form-control @error('title') is-invalid @enderror" name="title"
                                               value="{{ old('title') }}" autocomplete="title" autofocus>

                                        @error('title')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-lg-4">
                                            <label for="slug">{{ __('product.slug') }}</label>
                                            <input type="text" name="slug"
                                                   class="form-control @error('slug') is-invalid  @enderror"
                                                   value="{{old('slug')}}" autocomplete="slug" autofocus>
                                            @error('slug')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="sku">{{ __('product.sku') }}</label>
                                            <input id="sku" type="text"
                                                   class="form-control @error('sku') is-invalid @enderror" name="sku"
                                                   autocomplete="sku" value="{{ old('sku') }}" autofocus>

                                            @error('sku')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="type">{{ __('product.type') }}</label></label><i
                                                class="required">&nbsp;
                                                *</i>
                                            <select id="type" type="text"
                                                    class="form-control @error('type') is-invalid @enderror" name="type"
                                                    value="{{ old('type') }}" autocomplete="type">
                                                <option value="">انتخاب کنید</option>
                                                <option value="0" {{ (old('type') == '0') ? 'selected' : '' }}>ساده
                                                </option>
                                                <option value="1" {{ (old('type') == '1') ? 'selected' : '' }}>متغیر
                                                </option>
                                                <option value="2" {{ (old('type') == '2') ? 'selected' : '' }}>باندل
                                                </option>

                                            </select>

                                            @error('type')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-row ">
                                        <div class="form-group col-lg-4">
                                            <label for="title">{{ __('product.price') }}</label><i class="required">&nbsp;
                                                *</i>
                                            <input id="input.price" type="text"
                                                   class="form-control price @error('price') is-invalid @enderror"
                                                   name="price"
                                                   value="{{ old('price') }}" autocomplete="price" autofocus>

                                            @error('price')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="sale_price">@lang('product.sale_price')</label>
                                            <input id="sale_price" type="text"
                                                   class="form-control price @error('sale_price') is-invalid @enderror"
                                                   name="sale_price"
                                                   value="{{ old('sale_price') }}" autocomplete="sale_price" autofocus>

                                            @error('sale_price')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="status">{{ __('product.status') }}</label><i class="required">&nbsp;
                                                *</i>
                                            <select id="status" type="text"
                                                    class="form-control  @error('status') is-invalid @enderror"
                                                    name="status"
                                                    autocomplete="status">
                                                <option value="">انتخاب کنید</option>
                                                <option value="1" {{ (old('status') == '1') ? 'selected' : '' }}>موجود
                                                </option>
                                                <option value="0" {{ (old('status') == '0') ? 'selected' : '' }}>
                                                    ناموجود
                                                </option>
                                            </select>
                                            @error('status')
                                            <span class="invalid-feedback" role="alert">
                                               <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="status">{{ __('product.ReleaseStatus') }}</label><i class="required">&nbsp;
                                                *</i>
                                            <select id="ReleaseStatus" type="text"
                                                    class="form-control @error('ReleaseStatus') is-invalid @enderror" name="ReleaseStatus"
                                                    value="{{ old('ReleaseStatus') }}" autocomplete="ReleaseStatus">
                                                <option value="">انتخاب کنید</option>
                                                <option value="draft" {{ (old('ReleaseStatus') == 'draft') ? 'selected' : '' }}>پیشنویس
                                                </option>
                                                <option value="pending" {{ (old('ReleaseStatus') == 'pending') ? 'selected' : '' }}>در حال انتظار
                                                </option>
                                                <option value="published" {{ (old('ReleaseStatus') == 'published') ? 'selected' : '' }}>منتشر شده
                                                </option>

                                            </select>
                                            @error('ReleaseStatus')
                                            <span class="invalid-feedback" role="alert">
                                               <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="discription">{{ __('product.discription') }}</label></label><i
                                            class="required">&nbsp; *</i>
                                        <textarea id="editor" type="text"
                                                  class="form-control ClassicEditor  @error('discription') is-invalid @enderror"
                                                  name="discription"

                                                  autocomplete="discription"
                                                  autofocus>{{ old('discription') }}</textarea>

                                        @error('discription')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="categories">{{ __('product.categories') }}</label><i
                                            class="required">&nbsp; *</i>
                                        <select name="categories[]"
                                                class="form-control select2 @error('categories[]') is-invalid @enderror" multiple>
                                            <option value="0">--</option>

                                            {!! category_select_options( $categories, old( 'categories[]' ) ) !!}
                                        </select>
                                        @error('categories')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-8">
                                        <label for="title">
                                            {{ __('product.featured_image') }}
                                        </label> <i class="required">&nbsp; *</i>

                                        <span class="btn btn-primary btn-file">
                                            <input type="file" id="uploadImages" name="featured_image" accept="image/*"
                                                class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
                                                 value="{{old('featured_image')}}" autocomplete="featured_image" autofocus>تصویر شاخص
                                        </span>
                                        <div class="hide-element" id="previewImages">
                                            <div class="media">
                                                <div class="media-left ">
                                                    <a href="" role="button" class="btn btn-danger pull-right" id="delete">
                                                        <i class="icon fa fa-close"></i>
                                                    </a>
                                                    <img class="media-object img-thumbnail" src=""
                                                         alt="" id="0" title="" data-toggle="modal"
                                                         data-target="#individualImagePreview"
                                                    style="width: 250px; height: 150px;" >
                                                </div>

                                                <div class="media-body">
                                                    <p>
                                                        <label for="featureDescription">توضیحات: </label>
                                                        <input type="text" class="form-control"  value="" name="featureDescription">
                                                    </p>
                                                    <p>
                                                        <label for="featureCaption">عنوان: </label>
                                                        <input type="text" class="form-control" value="" name="featureCaption">
                                                    </p>

                                                </div>
                                            </div>
                                        </div>
                                        @error('featured_image')
                                        <span class="invalid-feedback" role="alert">
                                                 <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-row ">
                                        <div class="upload-widget test ">

                                            <div class="select">
                                                <label for="title">
                                                    {{ __('product.gallery_image') }}
                                                </label>
                                                <span class="btn btn-primary btn-file">
                                                <input class="files" type="file" name="gallery_image[]" value="{{old('gallery_image[]')}}" multiple>
                                                    {{ __('product.gallery_images') }}
                                                </span>
                                                <output class="list row " >
                                                </output>
                                            </div>
                                            <div class="dropZone col-3">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <div class="">
                                            <button type="submit" class="btn btn-primary">
                                                {{ __('ثبت محصول') }}
                                            </button>

                                            <a href={{ route('products.index') }} type="button" class="btn btn-warning">
                                                انصراف</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endslot

    @slot('script')

    @endslot

@endcomponent

