@extends('layout.store_layout.master')
@section('custom_css')
    <!--begin::Vendor Stylesheets(used for this page only)-->

    <link href="{{asset('assets/plugins/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css"/>
    <!--end::Vendor Stylesheets-->
@endsection
@section('content')
    <!--begin::Form-->
    <form id="kt_ecommerce_add_product_form" class="form d-flex flex-column flex-lg-row"
          data-kt-redirect="{{route('admin.products.index')}}">
        @csrf
        <!--begin::Aside column-->
        <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
            <!--begin::Thumbnail settings-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <h2>الصورة الرئيسية</h2>
                    </div>
                    <!--end::Card title-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body text-center pt-0">
                    <!--begin::Image input-->
                    <!--begin::Image input placeholder-->
                    <style>.image-input-placeholder {
                            background-image: url({{ $product->main_image ?$product->main_image->image_url : asset('assets/media/svg/files/blank-image.svg') }});
                        }

                        [data-theme="dark"] .image-input-placeholder {
                            background-image: url({{ $product->main_image ?$product->main_image->image_url : asset('assets/media/svg/files/blank-image-dark.svg') }});
                        }</style>
                    <!--end::Image input placeholder-->
                    <!--begin::Image input-->
                    <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                         data-kt-image-input="true">
                        <!--begin::Preview existing avatar-->
                        <div class="image-input-wrapper w-150px h-150px"></div>
                        <!--end::Preview existing avatar-->
                        <!--begin::Label-->
                        <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                               data-kt-image-input-action="change" data-bs-toggle="tooltip" title="رفع صورة جديدة">
                            <!--begin::Icon-->
                            <i class="bi bi-pencil-fill fs-7"></i>
                            <!--end::Icon-->
                            <!--begin::Inputs-->
                            <input type="file" name="avatar" accept=".png, .jpg, .jpeg"/>
                            <input type="hidden" name="avatar_remove"/>
                            <!--end::Inputs-->
                        </label>
                        <!--end::Label-->
                        <!--begin::Cancel-->
                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                              data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="الغاء رفع الصورة">
                            <i class="bi bi-x fs-2"></i>
                        </span>
                        <!--end::Cancel-->
                        <!--begin::Remove-->
                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                              data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="حذف الصورة">
															<i class="bi bi-x fs-2"></i>
														</span>
                        <!--end::Remove-->
                    </div>
                    <!--end::Image input-->
                    <!--begin::Description-->
                    {{--                    <div class="text-muted fs-7">Set the category thumbnail image. Only *.png, *.jpg and *.jpeg image files are accepted</div>--}}
                    <div class="text-muted fs-7">تعيين الصورة الرئيسية للمنتج. تقبل فقط ملفات الصور * .png و * .jpg و *
                        .jpeg
                    </div>
                    <span id="avatar_error" class="invalid-feedback custom-error"></span>
                    <!--end::Description-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Thumbnail settings-->
            <!--begin::Status-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <h2>الحالة</h2>
                    </div>
                    <!--end::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <div class="rounded-circle bg-success w-15px h-15px" id="kt_ecommerce_add_product_status"></div>
                    </div>
                    <!--begin::Card toolbar-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Select2-->
                    <select name="status" class="form-select mb-2" data-control="select2" data-hide-search="true"
                            data-placeholder="اختر الحالة" id="kt_ecommerce_add_product_status_select">
                        <option value="1" {{ $product->status?'selected':'' }}>مفعل</option>
                        <option value="0" {{ !$product->status?'selected':'' }}>معطل</option>
                    </select>
                    <!--end::Select2-->
                    <!--begin::Description-->
                    <div class="text-muted fs-7">اختر حالة النشر للمنتج</div>
                    <!--end::Description-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Status-->

        </div>
        <!--end::Aside column-->
        <!--begin::Main column-->
        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
            <!--begin:::Tabs-->
            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-n2">
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab"
                       href="#kt_ecommerce_add_product_general">عام</a>
                </li>
                <!--end:::Tab item-->
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab"
                       href="#kt_ecommerce_add_product_advanced">مخصص</a>
                </li>
                <!--end:::Tab item-->
            </ul>
            <!--end:::Tabs-->
            <!--begin::Tab content-->
            <div class="tab-content">
                <!--begin::Tab pane-->
                <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
                    <div class="d-flex flex-column gap-7 gap-lg-10">
                        <!--begin::General options-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>بيانات عامة</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--langs-->
                                <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                                    @foreach(getStoreLanguages() as $language)
                                        <li class="nav-item">
                                            <a class="nav-link {{$language->code == 'ar'?'active':''}}"
                                               data-bs-toggle="tab"
                                               href="#g_lang_{{$language->code}}">{{$language->name_ar}}</a>
                                        </li>
                                    @endforeach
                                </ul>

                                <div class="tab-content mb-10" id="myTabContent">
                                    @foreach(getStoreLanguages() as $language)
                                        <div class="tab-pane fade{{$language->code == 'ar'?'show active':''}} "
                                             id="g_lang_{{$language->code}}" role="tabpanel">
                                            <!--begin::Input group-->
                                            <div class="mb-10 fv-row">
                                                <!--begin::Label-->
                                                <label class="required form-label">الاسم ب{{$language->name_ar}}</label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <input dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" type="text"
                                                       name="name[{{ $language->code }}]"
                                                       id="name_{{ $language->code }}"
                                                       placeholder="الاسم ب{{$language->name_ar}}"
                                                       value="{{ old("name.$language->code",($product->translate($language->code)?$product->translate($language->code)->name:'')) }}"
                                                       class="form-control mb-2{{ $errors->has("name.$language->code") ? ' is-invalid' : '' }}">
                                                @if ($errors->has("name.$language->code"))
                                                    <span
                                                        class="invalid-feedback">{{ $errors->first("name.$language->code") }}</span>
                                                @endif

                                                <!--end::Input-->
                                                <!--begin::Description-->
                                                <div class="text-muted fs-7">اسم المطلوب ويوصى بأن يكون مميز.</div>
                                                <!--end::Description-->
                                                <span id="name_{{ $language->code }}_error"
                                                      class="invalid-feedback custom-error"></span>
                                            </div>
                                            <!--end::Input group-->
                                            <!--begin::Input group-->
                                            <div>
                                                <!--begin::Label-->
                                                <label class="required form-label"
                                                       for="description_{{ $language->code }}">الوصف
                                                    ب{{$language->name_ar}}</label>
                                                <!--end::Label-->
                                                <!--begin::Editor-->
                                                <textarea style="display: none" name="description[{{ $language->code }}]"
                                                          id="description_{{ $language->code }}">{{ old("description.$language->code",($product->translate($language->code)?$product->translate($language->code)->description:'')) }}</textarea>
                                                <div data-con="description_{{ $language->code }}" class="editor-1 min-h-200px mb-2{{ $errors->has("description.$language->code") ? ' is-invalid' : '' }}">{!!  old("description.$language->code",($product->translate($language->code)?$product->translate($language->code)->description:'')) !!}</div>
                                                <!--end::Editor-->
                                                @if ($errors->has("description.$language->code"))
                                                    <span
                                                        class="invalid-feedback">{{ $errors->first("description.$language->code") }}</span>
                                                @endif
                                                <!--begin::Description-->
                                                <div class="text-muted fs-7">قم بتعيين وصف للمنتج للحصول على رؤية
                                                    أفضل.
                                                </div>
                                                <!--end::Description-->
                                                <span id="description_{{ $language->code }}_error"
                                                      class="invalid-feedback custom-error"></span>
                                            </div>
                                            <!--end::Input group-->
                                        </div>
                                    @endforeach
                                </div>
                                <!--langs-->
                                <div class="row">
                                    <div class="col-lg-4">
                                        <!--begin::Input group-->
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label" for="sku_number">معرف المنتج<i
                                                    class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                                    title="رقم SKU  خاص بالمنتج"></i></label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" name="sku_number" id="sku_number"
                                                   class="form-control mb-2" placeholder="SKU Number"
                                                   value="{{old('sku_number',$product->sku_number)}}"
                                            />
                                            <!--end::Input-->
                                            <span id="sku_number_error" class="invalid-feedback custom-error"></span>
                                            <!--begin::Description-->
                                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-label">الماركة </label>
                                            <select class="form-select" id="store_brand_id" name="store_brand_id"
                                                    data-control="select2" data-hide-search="true"
                                                    data-placeholder="الماركة">
                                                <option></option>
                                                @foreach($brands as $brand)
                                                    <option value="{{$brand->id}}" {{$brand->id == $product->store_brand_id ?'selected':''}}>{{$brand->name}}</option>
                                                @endforeach

                                            </select>
                                            <span id="store_brand_id_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="required form-label">الجنس </label>
                                            <select class="form-select" id="gender" name="gender" data-control="select2"
                                                    data-hide-search="true" data-placeholder="الجنس">
                                                <option value="both"  {{"both" == $product->gender ?'selected':''}}>غير محدد</option>
                                                <option value="male"  {{"male" == $product->gender ?'selected':''}}>رجال</option>
                                                <option value="female"  {{"female" == $product->gender ?'selected':''}}>نساء</option>
                                            </select>
                                            <span id="gender_error" class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="required form-label">التصنيف الرئيسي </label>
                                            <select class="form-select" id="main_category_id" name="main_category_id"
                                                    data-control="select2"
                                                    data-placeholder="التصنيف الرئيسي">
                                                <option></option>
                                                @foreach($main_categories as $main_category)
                                                    <option
                                                        value="{{$main_category->id}}" {{$main_category->id == $product->main_category_id ?'selected':''}}>{{$main_category->name}}</option>
                                                @endforeach

                                            </select>
                                            <span id="main_category_id_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="required form-label">التصنيف الفرعي </label>
                                            <select class="form-select" id="sub_category_id" name="sub_category_id"
                                                    data-control="select2"
                                                    data-placeholder="التصنيف الفرعي">
                                                <option></option>
                                                @foreach($sub_categories as $sub_category)
                                                    <option
                                                        value="{{$sub_category->id}}" {{$sub_category->id == $product->sub_category_id ?'selected':''}}>{{$sub_category->name}}</option>
                                                @endforeach
                                            </select>
                                            <span id="sub_category_id_error"
                                                  class="invalid-feedback custom-error"></span>

                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class=" form-label">التصنيف الفرعي 2 </label>
                                            <select class="form-select" id="sub_sub_category_id"
                                                    name="sub_sub_category_id" data-control="select2"
                                                    data-placeholder="التصنيف الفرعي 2">
                                                <option></option>
                                                @foreach($sub_sub_categories as $sub_sub_category)
                                                    <option
                                                        value="{{$sub_sub_category->id}}" {{$sub_sub_category->id == $product->sub_sub_category_id ?'selected':''}}>{{$sub_sub_category->name}}</option>
                                                @endforeach
                                            </select>
                                            <span id="sub_sub_category_id_error"
                                                  class="invalid-feedback custom-error"></span>

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


                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::General options-->

                        <!--begin::Pricing-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>السعر</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Input group-->
                                <div class="mb-10 fv-row">
                                    <!--begin::Label-->
                                    <label class="required form-label">السعر الأساسي</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="number" name="price" id="price" class="form-control mb-2"
                                           placeholder="سعر المنتج" value="{{$product->price}}"/>
                                    <!--end::Input-->
                                    <span id="price_error" class="invalid-feedback custom-error"></span>

                                    <!--begin::Description-->
                                    {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">نوع الخصم
                                        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                           title="اختر نوع الخصم الذي سوف يطبق على هذا المنتج"></i></label>
                                    <!--End::Label-->
                                    <!--begin::Row-->
                                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 row-cols-xl-2 g-9"
                                         data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                        <!--begin::Col-->
                                        <div class="col">
                                            <!--begin::Option-->
                                            <label
                                                class="btn btn-outline btn-outline-dashed btn-active-light-primary  {{$product->has_discount != 1 ?'active':''}}  d-flex text-start p-6"
                                                data-kt-button="true">
                                                <!--begin::Radio-->
                                                <span
                                                    class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="has_discount"
                                                           value="0"  @if($product->has_discount != 1) checked="checked" @else @endif/>
                                                </span>
                                                <!--end::Radio-->
                                                <!--begin::Info-->
                                                <span class="ms-5">
                                                    <span class="fs-4 fw-bold text-gray-800 d-block">بدون خصم</span>
                                                </span>
                                                <!--end::Info-->
                                            </label>
                                            <!--end::Option-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col">
                                            <!--begin::Option-->
                                            <label
                                                class="btn btn-outline btn-outline-dashed btn-active-light-primary  {{$product->has_discount == 1 ?'active':''}}  d-flex text-start p-6"
                                                data-kt-button="true">
                                                <!--begin::Radio-->
                                                <span
                                                    class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="has_discount"
                                                           value="1" @if($product->has_discount == 1) checked="checked" @else @endif/>
                                                </span>
                                                <!--end::Radio-->
                                                <!--begin::Info-->
                                                <span class="ms-5">
                                                    <span class="fs-4 fw-bold text-gray-800 d-block">مع خصم</span>
                                                </span>
                                                <!--end::Info-->
                                            </label>
                                            <!--end::Option-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="@if($product->has_discount == 1)  @else d-none @endif  mb-10 fv-row" id="kt_ecommerce_add_product_discount_fixed">
                                    <!--begin::Label-->
                                    <label class="form-label">سعر المنتج بعد الخصم</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="number" name="discount_price" id="discount_price" value="{{$product->discount_price}}"
                                           class="form-control mb-2" placeholder="سعر المنتج بعد الخصم"/>
                                    <!--end::Input-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">حدد سعر المنتج بعد الخصم.</div>
                                    <!--end::Description-->
                                    <span id="discount_price_error" class="invalid-feedback custom-error"></span>

                                </div>
                                <!--end::Input group-->

                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Pricing-->
                        <!--begin::Media-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>صور المنتج</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Input group-->
                                <div class="fv-row mb-2">
                                    <!--begin::Dropzone-->
                                    <div class="dropzone" id="kt_ecommerce_add_product_media"
                                         data-url="{{route('uploadFilesNew',['id'=>$product->id])}}"
                                         data-url-delete="{{route('deleteImages')}}" data-csrf="{{csrf_token()}}">
                                        <!--begin::Message-->
                                        <div class="dz-message needsclick">
                                            <!--begin::Icon-->
                                            <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
                                            <!--end::Icon-->
                                            <!--begin::Info-->
                                            <div class="ms-4">
                                                <h3 class="fs-5 fw-bold text-gray-900 mb-1">ارفق صور المنتج</h3>
                                                {{--<span class="fs-7 fw-semibold text-gray-400">Upload up to 10 files</span>--}}
                                            </div>
                                            <!--end::Info-->
                                        </div>
                                    </div>
                                    <!--end::Dropzone-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Description-->
                                <div class="text-muted fs-7">قم بتعيين معرض صور المنتج.</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Media-->
                    </div>
                </div>
                <!--end::Tab pane-->
                <!--begin::Tab pane-->
                <div class="tab-pane fade" id="kt_ecommerce_add_product_advanced" role="tab-panel">
                    <div class="d-flex flex-column gap-7 gap-lg-10">
                        <!--begin::Inventory-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>المخزون</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">

                                <!--begin::Input group-->
                                <div class="mb-10 fv-row">
                                    <!--begin::Label-->
                                    <label class="required form-label">الكمية</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="d-flex gap-3">

                                        <input type="number" name="qty" id="qty" class="form-control mb-2" @if($product->is_limited == 0) disabled="disabled" @endif
                                               placeholder="الكمية" value="{{$product->qty}}"/>

                                        <div class="form-check form-check-custom form-check-solid mb-2">
                                            <input class="form-check-input" name="is_unlimited" id="is_unlimited"
                                                   type="checkbox" value="1" {{$product->is_limited == 0?'checked':''}}/>
                                            <label class="form-check-label text-nowrap">الكمية غير محددة</label>
                                        </div>
                                    </div>
                                    <span id="qty_error" class="invalid-feedback custom-error"></span>


                                    <!--end::Input-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">أدخل كمية المنتج.</div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                                <div class="row">
                                    <div class="col-lg-6">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-3">
                                            <!--begin::Label-->
                                            <label class="form-label"> حجز المنتج</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                <input class="form-check-input" name="can_reserve" id="can_reserve"
                                                       type="checkbox" value="1" {{$product->can_reserve == 1?'checked':''}}/>
                                                <label class="form-check-label">نعم</label>
                                            </div>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">السماح للزبائن بحجز المنتج في حاله نفاذة من
                                                المخزن.
                                            </div>
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <div class="col-lg-6">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-3">
                                            <!--begin::Label-->
                                            <label class="form-label"> اخفاء المنتج</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                <input class="form-check-input" name="hide_on_empty" id="hide_on_empty"
                                                       type="checkbox" value="1"  {{$product->hide_on_empty == 1?'checked':''}}/>
                                                <label class="form-check-label">نعم</label>
                                            </div>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">تفعيل - تعطيل خاصية اخفاء المنتج عند نفاذ
                                                الكمية
                                            </div>
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                </div>


                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Inventory-->
                        <!--begin::Variations-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>خصائص المنتج</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Input group-->
                                <div class="" data-kt-ecommerce-catalog-add-product="auto-options">
                                    <!--begin::Label-->
                                    <label class="form-label">اضف خصائص المنتج</label>
                                    <!--end::Label-->
                                    @php
                                        $pp = 0;
                                    @endphp
                                    <!--begin::Repeater-->
                                    <div id="kt_ecommerce_add_product_options">
                                        <!--begin::Form group-->
                                        <div class="form-group">
                                            <div data-repeater-list="product_properties" class="d-flex flex-column gap-3">

                                                @foreach($product->features as $pFeature)
                                                <div data-repeater-item="" class="form-group d-flex flex-wrap gap-5">
                                                    <input type="hidden" name="product_properties[{{$pp}}][product_feature_id]" value="{{$pFeature->id}}">

                                                    <!--begin::Select2-->
                                                    <div class="col-2">
                                                        <select class="form-select" name="product_option"
                                                                data-placeholder="الرجاء الاختيار"
                                                                data-kt-ecommerce-catalog-add-product="product_option">
                                                            @foreach($product_properties as $product_property)
                                                                <option
                                                                    value="{{$product_property->id}}"  {{ $pFeature->product_property_id == $product_property->id ?'selected':'' }}>{{$product_property->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <!--end::Select2-->
                                                    <div class="col property_langs">
                                                        <div data-repeater-list="property_langs" class="mb-5">

                                                            @php
                                                                $pl = 0;
                                                            @endphp
                                                            @foreach(getStoreLanguages() as $language)
                                                            <div data-repeater-item="" class="d-flex flex-wrap align-items-center gap-5 mb-3">

                                                                <select class="form-select w-100 w-md-100px" name="product_properties[{{$pp}}][property_langs][{{$pl}}][locale]"
                                                                        placeholder = "الرجاء الاختيار">
                                                                    @foreach(getStoreLanguages() as $language1)
                                                                        <option
                                                                            value="{{$language->code}}" {{$language1->id == $language->id?'selected':''}}>{{strtoupper($language->code)}}</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="input-group" style="width: 83%!important;">
                                                                    <input type="text" class="form-control" name="product_properties[{{$pp}}][property_langs][{{$pl}}][product_option_value]" placeholder="الوصف"
                                                                           value="{{$pFeature->translate($language->code)?$pFeature->translate($language->code)->property_value:''}}"
                                                                    >
                                                                    <button class="border border-secondary btn btn-icon btn-flex btn-light-danger" data-repeater-delete="" type="button">
                                                                        <i class="fas fa-trash fs-5"></i>
                                                                    </button>
                                                                </div>
                                                                @php
                                                                    $pl++;
                                                                @endphp
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                        <button class="btn btn-sm btn-flex btn-light-primary" data-repeater-create="" type="button">
                                                            <i class="ki-duotone ki-plus fs-5"></i>
                                                            اضف لغه
                                                        </button>

                                                    </div>

                                                    <!--end::Input-->
                                                    <div class="col-2">
                                                        <button type="button" data-repeater-delete="" class="btn btn-xs btn-icon btn-light-danger">
                                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.svg-->
                                                            <span class="svg-icon svg-icon-1">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect opacity="0.5" x="7.05025" y="15.5356" width="12" height="2" rx="1" transform="rotate(-45 7.05025 15.5356)" fill="currentColor"></rect>
                                                                <rect x="8.46447" y="7.05029" width="12" height="2" rx="1" transform="rotate(45 8.46447 7.05029)" fill="currentColor"></rect>
                                                            </svg>
                                                        </span>
                                                            <!--end::Svg Icon-->
                                                        </button>
                                                    </div>


                                                </div>
                                                    @php
                                                        $pp++;
                                                    @endphp
                                                @endforeach
                                                    <div data-repeater-item="" class="form-group d-flex flex-wrap gap-5">
                                                        <input type="hidden" name="product_feature_id" value="0">
                                                        <!--begin::Select2-->
                                                        <div class="col-2">
                                                            <select class="form-select" name="product_option"
                                                                    data-placeholder="الرجاء الاختيار"
                                                                    data-kt-ecommerce-catalog-add-product="product_option">
                                                                @foreach($product_properties as $product_property)
                                                                    <option
                                                                        value="{{$product_property->id}}">{{$product_property->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <!--end::Select2-->
                                                        <div class="col property_langs">
                                                            <div data-repeater-list="property_langs" class="mb-5">
                                                                <div data-repeater-item="" class="d-flex flex-wrap align-items-center gap-5 mb-3">

                                                                    <select class="form-select w-100 w-md-100px" name="locale"
                                                                            placeholder = "الرجاء الاختيار">
                                                                        @foreach(getStoreLanguages() as $language)
                                                                            <option
                                                                                value="{{$language->code}}">{{strtoupper($language->code)}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    <div class="input-group" style="width: 83%!important;">
                                                                        <input type="text" class="form-control" name="product_properties[0][property_langs][0][product_option_value]" placeholder="الوصف">
                                                                        <button class="border border-secondary btn btn-icon btn-flex btn-light-danger" data-repeater-delete="" type="button">
                                                                            <i class="fas fa-trash fs-5"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-sm btn-flex btn-light-primary" data-repeater-create="" type="button">
                                                                <i class="ki-duotone ki-plus fs-5"></i>
                                                                اضف لغه
                                                            </button>

                                                        </div>

                                                        <!--end::Input-->
                                                        <div class="col-2">
                                                            <button type="button" data-repeater-delete="" class="btn btn-xs btn-icon btn-light-danger">
                                                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.svg-->
                                                                <span class="svg-icon svg-icon-1">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect opacity="0.5" x="7.05025" y="15.5356" width="12" height="2" rx="1" transform="rotate(-45 7.05025 15.5356)" fill="currentColor"></rect>
                                                                <rect x="8.46447" y="7.05029" width="12" height="2" rx="1" transform="rotate(45 8.46447 7.05029)" fill="currentColor"></rect>
                                                            </svg>
                                                        </span>
                                                                <!--end::Svg Icon-->
                                                            </button>
                                                        </div>


                                                    </div>
                                            </div>

                                        </div>
                                        <!--end::Form group-->
                                        <!--begin::Form group-->
                                        <div class="form-group mt-5">
                                            <button type="button" data-repeater-create=""
                                                    class="btn btn-sm btn-light-primary">
                                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr087.svg-->
                                                <span class="svg-icon svg-icon-2">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <rect opacity="0.5" x="11" y="18" width="12" height="2" rx="1"
                                                              transform="rotate(-90 11 18)" fill="currentColor"/>
                                                        <rect x="6" y="11" width="12" height="2" rx="1"
                                                              fill="currentColor"/>
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->
                                                اضف خاصية أخرى
                                            </button>
                                        </div>
                                        <!--end::Form group-->
                                    </div>
                                    <!--end::Repeater-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Variations-->
                        <!--begin::options-->
                        <div class="card card-flush py-4">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>الخيارات الاضافية للمنتج</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Input group-->
                                <div class="">
                                    <!--begin::Repeater-->
                                    <div id="add_product_additional_options">
                                        <div class="row text-center">
                                            <div class="col-md-3" style="margin:0px auto">
                                                <div class="card card-dashed">
                                                    <div class="card-header">
                                                        <div class="card-title">
                                                            اختر الألوان المتاحة
                                                        </div>
                                                    </div>
                                                    <div class="card-body" style="padding: 2rem 1rem!important;">
                                                        <!--begin::Form group-->
                                                        <div class="form-group"
                                                             style="max-height: 250px;overflow-x: auto;padding: 10px;">
                                                            <div
                                                                class="fv-row fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                                                @foreach($colors as $color)
                                                                    <!--begin:Option-->
                                                                    <label
                                                                        class="d-flex flex-stack mb-5 cursor-pointer">
                                                                        <!--begin:Label-->
                                                                        <span class="d-flex align-items-center me-2">
															<!--begin:Icon-->
															<span class="symbol symbol-20px  me-6">
																<span class="symbol-label"
                                                                      style="background-color: {{$color->color->color_hash}}">
																	<!--begin::Svg Icon | path: icons/duotune/maps/map004.svg-->
																	<span class="svg-icon svg-icon-1 svg-icon-primary">

																	</span>
                                                                    <!--end::Svg Icon-->
																</span>
															</span>
                                                                            <!--end:Icon-->
                                                                            <!--begin:Info-->
															<span class="d-flex flex-column">
																<span class="fw-bold fs-6">{{$color->name}}</span>
															</span>
                                                                            <!--end:Info-->
														</span>
                                                                        <!--end:Label-->
                                                                        <!--begin:Input-->
                                                                        <span
                                                                            class="form-check form-check-custom form-check-solid">
															<input class="form-check-input" type="checkbox"
                                                                   name="colors[]" value="{{$color->id}}" {{in_array($color->id,$variant_colors)?"checked":''}}>
														</span>
                                                                        <!--end:Input-->
                                                                    </label>
                                                                    <!--end::Option-->
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <!--end::Form group-->
                                                    </div>
                                                    <div></div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin:0px auto">
                                                <div class="card card-dashed">
                                                    <div class="card-header">
                                                        <div class="card-title">
                                                            اختر المقاسات المتاحة
                                                        </div>
                                                    </div>
                                                    <div class="card-body" style="padding: 2rem 1rem!important;">
                                                        <!--begin::Form group-->
                                                        <div class="form-group"
                                                             style="max-height: 250px;overflow-x: auto;padding: 10px;">
                                                            <div
                                                                class="fv-row fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                                                @foreach($sizes as $size)
                                                                    <!--begin:Option-->
                                                                    <label
                                                                        class="d-flex flex-stack mb-5 cursor-pointer">
                                                                        <!--begin:Label-->
                                                                        <span class="d-flex align-items-center me-2">
                                                                            <!--begin:Info-->
															<span class="d-flex flex-column">
																<span class="fw-bold fs-6">{{$size->name}}</span>
															</span>
                                                                            <!--end:Info-->
														</span>
                                                                        <!--end:Label-->
                                                                        <!--begin:Input-->
                                                                        <span
                                                                            class="form-check form-check-custom form-check-solid">
															<input class="form-check-input" type="checkbox"
                                                                   name="sizes[]" value="{{$size->id}}"  {{in_array($size->id,$variant_sizes)?"checked":''}}>
														</span>
                                                                        <!--end:Input-->
                                                                    </label>
                                                                    <!--end::Option-->
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <!--end::Form group-->
                                                    </div>
                                                    <div></div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin:0px auto">
                                                <div class="card card-dashed">
                                                    <div class="card-header">
                                                        <div class="card-title">
                                                            اختر الأطوال المتاحة
                                                        </div>
                                                    </div>
                                                    <div class="card-body" style="padding: 2rem 1rem!important;">
                                                        <!--begin::Form group-->
                                                        <div class="form-group"
                                                             style="max-height: 250px;overflow-x: auto;padding: 10px;">
                                                            <div
                                                                class="fv-row fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                                                @foreach($lengths as $length)
                                                                    <!--begin:Option-->
                                                                    <label
                                                                        class="d-flex flex-stack mb-5 cursor-pointer">
                                                                        <!--begin:Label-->
                                                                        <span class="d-flex align-items-center me-2">
                                                                            <!--begin:Info-->
															<span class="d-flex flex-column">
																<span class="fw-bold fs-6">{{$length->name}}</span>
															</span>
                                                                            <!--end:Info-->
														</span>
                                                                        <!--end:Label-->
                                                                        <!--begin:Input-->
                                                                        <span
                                                                            class="form-check form-check-custom form-check-solid">
															<input class="form-check-input" type="checkbox"
                                                                   name="lengths[]" value="{{$length->id}}"  {{in_array($length->id,$variant_lengths)?"checked":''}}>
														</span>
                                                                        <!--end:Input-->
                                                                    </label>
                                                                    <!--end::Option-->
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <!--end::Form group-->
                                                    </div>
                                                    <div></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <!--end::Repeater-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::options-->

                    </div>
                </div>
                <!--end::Tab pane-->
            </div>
            <!--end::Tab content-->
            <div class="d-flex justify-content-end">
                <!--begin::Button-->
                <a href="{{route('admin.products.index')}}" id="kt_ecommerce_add_product_cancel"
                   class="btn btn-light me-5">الغاء</a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
                    <span class="indicator-label">حفظ</span>
                    <span class="indicator-progress">الرجاء الانتظار ...
													<span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
                <!--end::Button-->
            </div>
        </div>
        <!--end::Main column-->
    </form>
    <!--end::Form-->
@endsection
@section('custom_js')
    <!--begin::Vendors Javascript(used for this page only)-->
    <script src="{{asset('assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
    <script src="{{asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js')}}"></script>
    <!--end::Vendors Javascript-->
    <!--begin::Custom Javascript(used for this page only)-->
    <script src="{{asset('store_admin/scripts/products/edit-product.js')}}"></script>
    <script>
        $(function () {
            const elements = [
                '#kt_ecommerce_add_product_description',
                '#kt_ecommerce_add_product_meta_description'
            ];

            // Loop all elements
            $('.editor-1').each(function (index, element) {
                // element == this
                // Get quill element
                // let quill = $(this);
                var cont = $(this).attr('data-con');
                let quill = $(element);

                // Break if element not found
                if (!quill) {
                    return;
                }

                // Init quill --- more info: https://quilljs.com/docs/quickstart/
                quill = new Quill(element, {
                    modules: {
                        toolbar: [
                            [{
                                header: [1, 2, false]
                            }],
                            ['bold', 'italic', 'underline'],
                            ['image', 'code-block']
                        ]
                    },
                    placeholder: 'اكتب النص هنا...',
                    theme: 'snow' // or 'bubble'
                });
                quill.format('align', 'right');
                quill.format('direction', 'rtl');
                quill.on('text-change', function(delta, source) {
                    var justHtml = quill.root.innerHTML;
                    $('#'+cont).html(justHtml);
                });

            });


            $("#main_category_id").on('change', function () {
                var id = $(this).val();

                getSubCategories(id);
            });
            $("#sub_category_id").on('change', function () {
                var id = $(this).val();

                getSubSubCategories(id);
            });

            function getSubCategories(id) {
                $('#sub_category_id').empty();
                $('#sub_sub_category_id').empty();
                $.ajax({
                    type: "GET",
                    url: "{{route('admin.categories.getSubCategories')}}",
                    data: {id: id},
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function (data) {

                        if (data.done === 1) {
                            $('#sub_category_id').empty().html(data.html).trigger('select2.change');

                        }
                    },
                    error: function (data) {
                        // Enable submit button after loading
                        Swal.fire({
                            icon: "error",
                            title: 'حدثت خلل أثناء العملية',
                            timer: 4000
                        });
                    }
                });
            }

            function getSubSubCategories(id) {
                $('#sub_sub_category_id').empty();
                $.ajax({
                    type: "GET",
                    url: "{{route('admin.categories.getSubSubCategories')}}",
                    data: {id: id},
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function (data) {

                        if (data.done === 1) {
                            $('#sub_sub_category_id').empty().html(data.html).trigger('select2.change');

                        }
                    },
                    error: function (data) {
                        // Enable submit button after loading
                        Swal.fire({
                            icon: "error",
                            title: 'حدثت خلل أثناء العملية',
                            timer: 4000
                        });
                    }
                });
            }


        });
    </script>
    <script>

        var rules = {
            @foreach(getStoreLanguages() as $language)
            'name[{{$language->code}}]': {
                validators: {
                    notEmpty: {
                        message: 'الاسم ب{{$language->name_ar}} مطلوب'
                    },
                    stringLength: {
                        min: 3,
                        message: 'الاسم ب{{$language->name_ar}} يجب أن يكون أكثر من 3 أحرف',
                    }
                }
            },
            @endforeach
            'sku_number': {
                validators: {
                    notEmpty: {
                        message: 'معرف المنتج حقل مطلوب'
                    }
                    ,
                    stringLength: {
                        min: 3,
                        message: 'معرف المنتج  يجب أن يكون أكثر من 3 أحرف',
                    }
                },
            },
            'price': {
                validators: {
                    notEmpty: {
                        message: 'السعر حقل مطلوب'
                    },
                }
            }
        };
        // Define variables
        let validator;

        // Get elements
        const form = document.getElementById('kt_ecommerce_add_product_form');
        const submitButton = document.getElementById('kt_ecommerce_add_product_submit');

        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        validator = FormValidation.formValidation(
            form,
            {
                locale: 'ar_MA',
                localization: FormValidation.locales.en_US,
                fields: rules,
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        // Handle submit button
        submitButton.addEventListener('click', e => {
            e.preventDefault();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {
                    console.log('validated!');

                    if (status == 'Valid') {
                        var form_data = new FormData($('#kt_ecommerce_add_product_form')[0]);

                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        submitButton.disabled = true;
                        $.ajax({
                            type: "POST",
                            url: "{{route('admin.products.update',['id'=>$product->id])}}",
                            data: form_data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            success: function (data) {

                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    submitButton.setAttribute('data-kt-indicator', 'off');
                                    submitButton.disabled = false;
                                    if (data.errors && data.errors.length > 0) {
                                        var errors = data.errors;
                                        for (var error = 0; error < errors.length; error++) {
                                            var input_name = errors[error].input_name;
                                            var input_error = errors[error].errors;
                                            console.log(input_name, input_error);
                                            $('#' + input_name + '_error').html(input_error).show();

                                        }
                                    }
                                    // Swal.fire({
                                    //     text: "عذرا! يجب معالجة بعض الأخطاء",
                                    //     icon: "error",
                                    //     buttonsStyling: false,
                                    //     confirmButtonText: "تم!",
                                    //     customClass: {
                                    //         confirmButton: "btn btn-primary"
                                    //     }
                                    // });
                                } else {
                                    setTimeout(function () {
                                        submitButton.removeAttribute('data-kt-indicator');

                                        Swal.fire({
                                            text: "تمت عملية التعديل بنجاح!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "تم!",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        });
                                        // Enable submit button after loading
                                        submitButton.setAttribute('data-kt-indicator', 'off');
                                        submitButton.disabled = false;

                                        // Redirect to customers list page
                                        window.location = data.route ? data.route : form.getAttribute("data-kt-redirect");
                                    }, 2000);
                                }
                            },
                            error: function (data) {
                                // Enable submit button after loading
                                submitButton.setAttribute('data-kt-indicator', 'off');
                                submitButton.disabled = false;
                                Swal.fire({
                                    icon: "error",
                                    title: 'حدثت خلل أثناء العملية',
                                    timer: 4000
                                });
                            }
                        });


                    } else {
                        // Enable submit button after loading
                        submitButton.setAttribute('data-kt-indicator', 'off');
                        submitButton.disabled = false;
                        // Swal.fire({
                        //     text: "عذرا! يجب ملئ الحقول الفارغة",
                        //     icon: "error",
                        //     buttonsStyling: false,
                        //     confirmButtonText: "تم!",
                        //     customClass: {
                        //         confirmButton: "btn btn-primary"
                        //     }
                        // });
                    }
                });
            }
        })
    </script>

    <script>

        var cmimages = @json($images);
        function addExistingImages(images) {
            if (!window.myDropzone) {
                console.error("Dropzone not initialized yet!");
                return;
            }

            images.forEach(file => {
                const mockFile = { name: file.name, size: file.size };

                window.myDropzone.emit("addedfile", mockFile);
                window.myDropzone.emit("thumbnail", mockFile, file.url);
                window.myDropzone.emit("complete", mockFile);

                window.myDropzone.files.push(mockFile);
            });

        }

        // Example call — could be after an AJAX response

if(cmimages.length){
    document.addEventListener("DOMContentLoaded", function () {
        const waitForDropzone = setInterval(() => {
            if (window.myDropzone) {
                clearInterval(waitForDropzone);
                addExistingImages(cmimages);
            }
        }, 100);
        window.myDropzone.on("thumbnail", function(file) {
            setTimeout(() => {
                if (file.previewElement) {
                    const img = file.previewElement.querySelector("img[data-dz-thumbnail]");
                    if (img) {
                        img.setAttribute("file_name", file.name || "no-id");
                    } else {
                    }
                } else {
                }
            }, 10); // Give DOM a moment to render
        });
    });
}


    </script>

@endsection