@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.clothing_models.index')}}">
        @csrf
        <input type="hidden" name="selected_fibers" id="selected_fibers" value="">
        <!--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({{ asset('assets/media/svg/files/blank-image.svg') }});
                        }

                        [data-theme="dark"] .image-input-placeholder {
                            background-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" selected="selected">مفعل</option>
                        <option value="0">معطل</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") }}"
                                                       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-->
                                        </div>
                                    @endforeach
                                </div>
                                <!--langs-->
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <label class="required form-label">قسم التفصيل </label>
                                            <select class="form-select" id="tailor_category_id"
                                                    name="tailor_category_id"
                                                    data-control="select2"
                                                    data-placeholder="قسم التفصيل">
                                                <option></option>
                                                @foreach($tailor_categories as $tailor_category)
                                                    <option
                                                        value="{{$tailor_category->id}}">{{$tailor_category->name}}</option>
                                                @endforeach

                                            </select>
                                            <span id="tailor_category_id_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                    <div class="col fabric_type_cont">
                                        <!--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=""/>
                                            <!--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 fabric_type_cont">
                                        <div class="form-group">
                                            <label class="required form-label">نوع القماش(الأساسي)</label>
                                            <select class="form-select" id="fabric_type_id" name="fabric_type_id"
                                                    data-control="select2"
                                                    data-placeholder="نوع القماش">
                                                <option></option>
                                                @foreach($fabric_types as $fabric_type)
                                                    <option
                                                        value="{{$fabric_type->id}}"
                                                        data-fabrc-price="{{ number_format($fabric_type->discount_price,config('app.store')->country->decimal_points)}}">{{$fabric_type->name}}</option>
                                                @endforeach

                                            </select>
                                            <span id="fabric_type_id_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                </div>


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

                        <!--begin::General options-->
                        <div id="description_cont" 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="#d_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="d_lang_{{$language->code}}" role="tabpanel">
                                            <!--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") }}</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") }}</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>

                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::General options-->
                        <!--begin::Pricing-->
                        <div id="price_cont" 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-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 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="is_unified_price"
                                                           value="1" checked="checked"/>
                                                </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 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="is_unified_price"
                                                           value="0"/>
                                                </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-->
                                <div class="mb-10 fv-row">
                                    <!--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 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" checked="checked"/>
                                                </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 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"/>
                                                </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-->
                                </div>
                                <div id="one_price_cont" class="mb-10 fv-row">

                                    <!--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="clothing_model_fabric_length" id="clothing_model_fabric_length" class="form-control mb-2 unified-change"
                                               placeholder="عدد أمتار القماش" value=""/>
                                        <!--end::Input-->
                                        <span id="clothing_model_fabric_length_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="mb-10 fv-row">
                                        <!--begin::Label-->
                                        <label class="required form-label">تكلفة التفصيل</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="number" name="clothing_model_tailor_cost" id="clothing_model_tailor_cost" class="form-control mb-2 unified-change"
                                               placeholder="تكلفة التفصيل" value=""/>
                                        <!--end::Input-->
                                        <span id="clothing_model_tailor_cost_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="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_percentage">
                                        <!--begin::Label-->
                                        <label class="required form-label">نسبة الخصم(%)</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="number" name="unified_discount_percentage" id="unified_discount_percentage" class="form-control mb-2 unified-change"
                                               placeholder="نسبة الخصم(%)" value="0"/>
                                        <!--end::Input-->
                                        <span id="unified_discount_percentage_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="mb-10 fv-row">
                                        <!--begin::Label-->
                                        <label class="required form-label">سعر متر القماش الحالي</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="number" name="unified_fabric_price" id="unified_fabric_price" class="form-control mb-2 current-fabric-price" readonly
                                               placeholder="سعر متر القماش الحالي" value=""/>
                                        <!--end::Input-->
                                        <!--begin::Description-->
                                        {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--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="clothing_model_price" id="clothing_model_price" class="form-control mb-2" readonly
                                               placeholder="سعر موديل التفصيل" value=""/>
                                        <!--end::Input-->
                                        <!--begin::Description-->
                                        <div class="text-muted fs-7">يتم احتساب سعر موديل التفصيل بناء على المعادلة (سعر
                                            القماش للمتر* عدد أمتار القماش للموديل )+ تكلفة التفصيل للموديل.
                                        </div>
                                        <!--end::Description-->
                                        <span id="clothing_model_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="d-none 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="unified_discount_price" id="unified_discount_price" readonly
                                               class="form-control mb-2" placeholder="سعر موديل التفصيل بعد الخصم"/>
                                        <!--end::Input-->
                                        <!--begin::Description-->
                                        <div class="text-muted fs-7">يتم تطبيق نسبة الخصم على سعر موديل التفصيل.</div>
                                        <!--end::Description-->
                                        <span id="unified_discount_price_error" class="invalid-feedback custom-error"></span>

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

                                <div id="two_price_cont"
                                     class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 g-9 d-none">
                                    <div class="col border-left-dashed">
                                        <div class="fv-row mb-10 size-title">
                                            <h3>
                                                @lang('general.small')
                                            </h3>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.fabric_length')</label>
                                            <input type="number" id="small_fabric_length" name="small_fabric_length" required
                                                   class="form-control mb-2 small-change"
                                                   placeholder="@lang('general.fabric_length')"
                                                   value=""/>
                                            <span id="small_fabric_length_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.tailor_cost')</label>
                                            <input type="number" name="small_tailor_cost" id="small_tailor_cost" required
                                                   class="form-control mb-2 small-change" placeholder="@lang('general.tailor_cost')"
                                                   value=""/>
                                            <span id="small_tailor_cost_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.length_to')</label>
                                            <input type="number" name="small_length_to" id="small_length_to" required
                                                   class="form-control mb-2" placeholder="@lang('general.length_to')"
                                                   value=""/>
                                            <span id="small_length_to_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <!--begin::Input group-->
                                        <div class="d-none mb-10 fv-row" id="normal_discount_percentage_cont">
                                            <!--begin::Label-->
                                            <label class="required form-label">نسبة الخصم(%)</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="normal_discount_percentage" id="normal_discount_percentage" class="form-control mb-2 small-change"
                                                   placeholder="نسبة الخصم(%)" value="0"/>
                                            <!--end::Input-->
                                            <span id="normal_discount_percentage_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="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">سعر متر القماش الحالي</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="small_fabric_price" id="small_fabric_price" class="form-control mb-2 current-fabric-price" readonly
                                                   placeholder="سعر متر القماش الحالي" value=""/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--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="normal_price" id="normal_price" readonly
                                                   class="form-control mb-2"
                                                   placeholder="سعر الموديل الصغير" value=""/>
                                            <!--end::Input-->
                                            <span id="normal_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="mb-10 fv-row" id="normal_discount_fixed">
                                            <!--begin::Label-->
                                            <label class="form-label">سعر موديل التفصيل بعد الخصم</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="normal_discount_price" id="normal_discount_price" readonly
                                                   class="form-control mb-2" placeholder="سعر الموديل بعد الخصم"/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">حدد سعر موديل التفصيل بعد الخصم.</div>
                                            <!--end::Description-->
                                            <span id="normal_discount_price_error"
                                                  class="invalid-feedback custom-error"></span>

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

                                    </div>
                                    <div class="col border-left-dashed">
                                        <div class="fv-row mb-10 size-title">
                                            <h3>
                                                @lang('general.large')
                                            </h3>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.fabric_length')</label>
                                            <input type="number" name="large_fabric_length"  id="large_fabric_length" required
                                                   class="form-control mb-2 large-change"
                                                   placeholder="@lang('general.fabric_length')"
                                                   value=""/>
                                            <span id="small_fabric_length_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.tailor_cost')</label>
                                            <input type="number" name="large_tailor_cost" id="large_tailor_cost" required
                                                   class="form-control mb-2 large-change" placeholder="@lang('general.tailor_cost')"
                                                   value=""/>
                                            <span id="small_tailor_cost_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.length_to')</label>
                                            <input type="number" name="large_length_to" id="large_length_to" required
                                                   class="form-control mb-2" placeholder="@lang('general.length_to')"
                                                   value=""/>
                                            <span id="small_length_to_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <!--begin::Input group-->
                                        <div class="d-none mb-10 fv-row" id="large_discount_percentage_cont">
                                            <!--begin::Label-->
                                            <label class="required form-label">نسبة الخصم(%)</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="large_discount_percentage" id="large_discount_percentage" class="form-control mb-2 large-change"
                                                   placeholder="نسبة الخصم(%)" value="0"/>
                                            <!--end::Input-->
                                            <span id="large_discount_percentage_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="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">سعر متر القماش الحالي</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="large_fabric_price" id="large_fabric_price" class="form-control mb-2 current-fabric-price" readonly
                                                   placeholder="سعر متر القماش الحالي" value=""/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--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="large_price" id="large_price" readonly
                                                   class="form-control mb-2"
                                                   placeholder="سعر الموديل  الكبير" value=""/>
                                            <!--end::Input-->
                                            <span id="large_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="mb-10 fv-row" id="large_discount_fixed">
                                            <!--begin::Label-->
                                            <label class="form-label">سعر موديل التفصيل بعد الخصم</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="large_discount_price" id="large_discount_price" readonly
                                                   class="form-control mb-2" placeholder="سعر الموديل بعد الخصم"/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">حدد سعر موديل التفصيل بعد الخصم.</div>
                                            <!--end::Description-->
                                            <span id="large_discount_price_error"
                                                  class="invalid-feedback custom-error"></span>

                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-10 size-title">
                                            <h3>
                                                @lang('general.xlarge')
                                            </h3>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.fabric_length')</label>
                                            <input type="number" name="xlarge_fabric_length" id="xlarge_fabric_length" required
                                                   class="form-control mb-2 xlarge-change"
                                                   placeholder="@lang('general.fabric_length')"
                                                   value=""/>
                                            <span id="small_fabric_length_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.tailor_cost')</label>
                                            <input type="number" name="xlarge_tailor_cost" id="xlarge_tailor_cost" required
                                                   class="form-control mb-2 xlarge-change" placeholder="@lang('general.tailor_cost')"
                                                   value=""/>
                                            <span id="small_tailor_cost_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <div class="fv-row mb-10">
                                            <label class="form-label">@lang('general.length_gt')</label>
                                            <input type="number" name="xlarge_length_to" id="xlarge_length_to" readonly
                                                   class="form-control mb-2" placeholder="@lang('general.length_gt')"
                                                   value=""/>
                                            <span id="small_length_to_error"
                                                  class="invalid-feedback custom-error"></span>
                                        </div>
                                        <!--begin::Input group-->
                                        <div class="d-none mb-10 fv-row" id="xlarge_discount_percentage_cont">
                                            <!--begin::Label-->
                                            <label class="required form-label">نسبة الخصم(%)</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="xlarge_discount_percentage" id="xlarge_discount_percentage" class="form-control mb-2 xlarge-change"
                                                   placeholder="نسبة الخصم(%)" value="0"/>
                                            <!--end::Input-->
                                            <span id="xlarge_discount_percentage_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="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">سعر متر القماش الحالي</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="xlarge_fabric_price" id="xlarge_fabric_price" class="form-control mb-2 current-fabric-price" readonly
                                                   placeholder="سعر متر القماش الحالي" value=""/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            {{--<div class="text-muted fs-7">Set the product price.</div>--}}
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--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="xlarge_price" id="xlarge_price" readonly
                                                   class="form-control mb-2"
                                                   placeholder="سعر الموديل الكبير جدا" value=""/>
                                            <!--end::Input-->
                                            <span id="xlarge_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="mb-10 fv-row" id="xlarge_discount_fixed">
                                            <!--begin::Label-->
                                            <label class="form-label">سعر موديل التفصيل بعد الخصم</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" name="xlarge_discount_price" id="xlarge_discount_price" readonly
                                                   class="form-control mb-2" placeholder="سعر الموديل بعد الخصم"/>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">حدد سعر موديل التفصيل بعد الخصم.</div>
                                            <!--end::Description-->
                                            <span id="xlarge_discount_price_error"
                                                  class="invalid-feedback custom-error"></span>

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

                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Pricing-->
                        <!--begin::Media-->
                        <div id="images_cont" 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')}}"
                                         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-->
                        <!--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">
                                <div class="row">
                                    <div class="col-lg-6" id="use_custom_fabrics_cont">
                                        <!--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="use_custom_fabrics"
                                                       id="use_custom_fabrics"
                                                       type="checkbox" value="1"/>
                                                <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="use_store_fabrics"
                                                       id="use_store_fabrics"
                                                       type="checkbox" value="1"/>
                                                <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 class="col-lg-12">
                                    <span id="fabric_type_selection_id_error"
                                          class="invalid-feedback custom-error"></span>
                                    <span id="selected_fibers_error"
                                          class="invalid-feedback custom-error"></span>
                                </div>
                                <div class="col-lg-12" id="selected_fabrics_container"
                                     style="border-top: dashed #bbb 1px; padding-top: 15px;margin-top:15px;">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h2 style="width: 50%!important;display: inline-block;">
                                                أنواع القماش عند الطلب
                                                <div class="text-muted fs-7 pt-1">تمكين الزبائن من اختيار قماش آخر متوفر
                                                    في المتجر لموديل التفصيل
                                                </div>
                                            </h2>
                                            <button style="float: left" type="button" id="choose_new_fabrics"
                                                    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>
                                        <div class="col-lg-12" id="selected_fibers_cont">


                                        </div>

                                    </div>
                                </div>


                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::Inventory-->
                        <!--begin::has buttons-->
                        <div class="d-none card card-flush py-4" id="buttons_cost_parent_cont">
                            <!--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">
                                <div class="row">
                                    <div class="col-lg-6" id="has_buttons_cont">
                                        <!--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="has_buttons"
                                                       id="has_buttons"
                                                       type="checkbox" value="1"/>
                                                <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"  id="buttons_cost_cont">

                                            <!--begin::Input group-->
                                            <div class="fv-row mb-3">
                                                <!--begin::Label-->
                                                <label class="form-label" id="has_buttons_label" for="buttons_cost">تكلفة الأزرار<i
                                                        class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                                        title="تكلفة الأزرار"></i></label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <input type="text" name="buttons_cost" id="buttons_cost"
                                                       class="form-control mb-2" placeholder="تكلفة الأزرار" value=""/>
                                                <!--end::Input-->
                                                <span id="buttons_cost_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>

                            </div>
                            <!--end::Card header-->
                        </div>
                        <!--end::has buttons-->

                        <!--begin::Variations-->
                        <div id="properties_cont" 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-->
                                    <!--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">
                                                <div data-repeater-item="" class="form-group d-flex flex-wrap gap-5">

                                                    <!--begin::Select2-->
                                                    <div class="col-2">
                                                        <select class="form-select" name="product_option"
                                                                data-placeholder="الرجاء الاختيار"
                                                                data-kt-ecommerce-catalog-add-product="product_option">
                                                            @foreach($tailor_models_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-->
                    </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">--}}

                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <!--end::Tab pane-->--}}
            </div>
            <!--end::Tab content-->
            <div class="d-flex justify-content-end">
                <!--begin::Button-->
                <a href="{{route('admin.clothing_models.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-->
    <!--begin::Modal - Users Search-->
    <div class="modal fade" id="fabric_types_modal" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.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="6" y="17.3137" width="16" height="2" rx="1"
                                          transform="rotate(-45 6 17.3137)" fill="currentColor"/>
									<rect x="7.41422" y="6" width="16" height="2" rx="1"
                                          transform="rotate(45 7.41422 6)" fill="currentColor"/>
								</svg>
							</span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--begin::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body mx-5 mx-xl-18 pt-0 pb-15">
                    <div id="fabric_types_api_cont"></div>
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Users Search-->
@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/clothing_models/save-product.js')}}"></script>
    <script src="{{asset('store_admin/scripts/fibers/fibers.js')}}"></script>
    <script>
        $(function () {
            handleDiscount();
            handleUnifiedPrice();
            checkFabricTypes($("#use_store_fabrics"));
            $("#tailor_category_id").on('change', function () {
                var id = $(this).val();
                if (id == 2) {
                    controlFields('hide');
                } else {
                    controlFields('show');
                }
                checkFabricTypes($("#use_store_fabrics"));
            });
            $("#use_store_fabrics").on('change', function () {
                checkFabricTypes($(this));
            });
            $("#fabric_type_id").on('change', function () {
                // Get the selected option using jQuery
                var selectedOption = $(this).find('option:selected');

                // Get the 'data-info' attribute
                var price = selectedOption.attr('data-fabrc-price');
               $('.current-fabric-price').val(price);
               $('.unified-change').trigger('change');
            });
            $("#choose_new_fabrics").on('click', function () {
                $.ajax({
                    type: "GET",
                    url: "{{route('admin.getFabricTypesApi')}}",
                    data: [],
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function (data) {
                        $('#fabric_types_api_cont').empty().html(data.html);
                        $('.filter-select2').select2({
                            minimumResultsForSearch: Infinity // This disables the filter/search box
                        });
                        $('#fabric_types_modal').modal('show');
                    },
                    error: function (data) {

                    }
                });

            });

            $(document).on('change', 'input[name="has_discount"]', function () {
                handleDiscount()
            });
            $(document).on('change', 'input[name="has_buttons"]', function () {
                handleButtons()
            });
            $(document).on('change', 'input[name="is_unified_price"]', function () {
                handleUnifiedPrice()
            });

            function controlFields(status) {
                if (status == 'hide') {
                    $('#use_custom_fabrics_cont').fadeIn();
                    $('#buttons_cost_parent_cont').removeClass('d-none').fadeIn();
                    $('.fabric_type_cont').fadeOut();
                    $('#description_cont').fadeOut();
                    $('#price_cont').fadeOut();
                    $('#images_cont').fadeOut();
                    $('#properties_cont').fadeOut();
                } else {
                    $('#has_buttons').prop('checked', false);
                    $('#buttons_cost_parent_cont').addClass('d-none').fadeOut();
                    $('#use_custom_fabrics_cont').fadeOut();
                    $('.fabric_type_cont').fadeIn();
                    $('#description_cont').fadeIn();
                    $('#price_cont').fadeIn();
                    $('#images_cont').fadeIn();
                    $('#properties_cont').fadeIn();
                }

            }

            function checkFabricTypes(input) {
                var is_checked = input.is(':checked');
                var tailor_category_id = $('#tailor_category_id').val();
                if (is_checked && tailor_category_id != 2) {
                    $('#selected_fabrics_container').fadeIn();
                } else {
                    $('#selected_fabrics_container').fadeOut();

                }
            }


            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);
                });

            });

            function handleButtons() {
                var has_buttons = $('input[name="has_buttons"]:checked').val();
                if (has_buttons == '1') {
                    $('#buttons_cost').prop('required','required');
                    $('#has_buttons_label').addClass('required');
                } else {
                    $('#buttons_cost').removeAttr('required');
                    $('#has_buttons_label').removeClass('required');
                }
            }

            function handleDiscount() {
                var is_unified_price = $('input[name="is_unified_price"]:checked').val();
                var discountOptions = $('input[name="has_discount"]:checked').val();


                if (discountOptions == '1') {
                    if (is_unified_price == '1') {
                        $('#kt_ecommerce_add_product_discount_fixed').removeClass('d-none');
                        $('#kt_ecommerce_add_product_discount_percentage').removeClass('d-none');
                        $('#normal_discount_fixed').addClass('d-none');
                        $('#normal_discount_percentage_cont').addClass('d-none');
                        $('#large_discount_fixed').addClass('d-none');
                        $('#large_discount_percentage_cont').addClass('d-none');
                        $('#xlarge_discount_fixed').addClass('d-none');
                        $('#xlarge_discount_percentage_cont').addClass('d-none');

                    } else {
                        $('#kt_ecommerce_add_product_discount_fixed').addClass('d-none');
                        $('#kt_ecommerce_add_product_discount_percentage').addClass('d-none');
                        $('#normal_discount_fixed').removeClass('d-none');
                        $('#normal_discount_percentage_cont').removeClass('d-none');
                        $('#large_discount_fixed').removeClass('d-none');
                        $('#large_discount_percentage_cont').removeClass('d-none');
                        $('#xlarge_discount_fixed').removeClass('d-none');
                        $('#xlarge_discount_percentage_cont').removeClass('d-none');
                    }
                } else {
                    $('#kt_ecommerce_add_product_discount_fixed').addClass('d-none');
                    $('#kt_ecommerce_add_product_discount_percentage').addClass('d-none');
                    $('#normal_discount_fixed').addClass('d-none');
                    $('#normal_discount_percentage_cont').addClass('d-none');
                    $('#large_discount_fixed').addClass('d-none');
                    $('#large_discount_percentage_cont').addClass('d-none');
                    $('#xlarge_discount_fixed').addClass('d-none');
                    $('#xlarge_discount_percentage_cont').addClass('d-none');
                }
            }

            function handleUnifiedPrice() {
                var discountOptions = $('input[name="is_unified_price"]:checked').val();
                var one_price = $('#one_price_cont');
                var two_price = $('#two_price_cont');
                var has_discount = $('input[name="has_discount"]:checked').val();
                var fixedEl = $('#kt_ecommerce_add_product_discount_fixed');
                var fixedElpercentage = $('#kt_ecommerce_add_product_discount_percentage');
                var normal_discount_fixed = $('#normal_discount_fixed');
                var normal_discount_percentage = $('#normal_discount_percentage_cont');
                var large_discount_fixed = $('#large_discount_fixed');
                var large_discount_percentage = $('#large_discount_percentage_cont');
                var xlarge_discount_fixed = $('#xlarge_discount_fixed');
                var xlarge_discount_percentage = $('#xlarge_discount_percentage_cont');
                console.log(discountOptions);
                if (discountOptions == '1') {
                    one_price.removeClass('d-none');
                    two_price.addClass('d-none');
                    if (has_discount == '1') {
                        fixedEl.removeClass('d-none');
                        normal_discount_fixed.addClass('d-none');
                        normal_discount_percentage.addClass('d-none');
                        large_discount_fixed.addClass('d-none');
                        large_discount_percentage.addClass('d-none');
                        xlarge_discount_fixed.addClass('d-none');
                        xlarge_discount_percentage.addClass('d-none');
                    } else {
                        fixedEl.addClass('d-none');
                        normal_discount_fixed.addClass('d-none');
                        normal_discount_percentage.addClass('d-none');
                        large_discount_fixed.addClass('d-none');
                        large_discount_percentage.addClass('d-none');
                        xlarge_discount_fixed.addClass('d-none');
                        xlarge_discount_percentage.addClass('d-none');
                    }
                } else {
                    two_price.removeClass('d-none');
                    one_price.addClass('d-none');
                    if (has_discount == '1') {
                        fixedEl.addClass('d-none');
                        normal_discount_fixed.removeClass('d-none');
                        normal_discount_percentage.removeClass('d-none');
                        large_discount_fixed.removeClass('d-none');
                        large_discount_percentage.removeClass('d-none');
                        xlarge_discount_fixed.removeClass('d-none');
                        xlarge_discount_percentage.removeClass('d-none');
                    } else {
                        fixedEl.addClass('d-none');
                        normal_discount_fixed.removeClass('d-none');
                        normal_discount_percentage.removeClass('d-none');
                        large_discount_fixed.removeClass('d-none');
                        large_discount_percentage.removeClass('d-none');
                        xlarge_discount_fixed.removeClass('d-none');
                        xlarge_discount_percentage.removeClass('d-none');
                    }
                }
            }
            $('#large_length_to').on('change input keyup',function(){
                $('#xlarge_length_to').val($('#large_length_to').val());
            });
            $(document).on('change input keyup','.unified-change',function(){
                var discountOptions = $('input[name="is_unified_price"]:checked').val();
                var has_discount = $('input[name="has_discount"]:checked').val();

                var clothing_model_fabric_length = $('#clothing_model_fabric_length').val();
                var clothing_model_tailor_cost = $('#clothing_model_tailor_cost').val();
                var unified_discount_percentage = $('#unified_discount_percentage').val();
                var current_fabric_price =  $('.current-fabric-price').val();
                var total_price = (clothing_model_fabric_length * current_fabric_price)+parseFloat(clothing_model_tailor_cost);
                var discount_price = 0;
                if(has_discount){
                    discount_price = total_price *(1-(unified_discount_percentage/100));
                }
                $('#clothing_model_price').val(total_price);
                $('#unified_discount_price').val(Math.ceil(discount_price));



            });
            $(document).on('change input keyup','.small-change',function(){
                var discountOptions = $('input[name="is_unified_price"]:checked').val();
                var has_discount = $('input[name="has_discount"]:checked').val();

                var small_fabric_length = $('#small_fabric_length').val();
                var small_tailor_cost = $('#small_tailor_cost').val();
                var normal_discount_percentage = $('#normal_discount_percentage').val();
                var current_fabric_price =  $('.current-fabric-price').val();
                var total_price = (small_fabric_length * current_fabric_price)+parseFloat(small_tailor_cost);
                var discount_price = 0;
                if(has_discount){
                    discount_price = total_price *(1-(normal_discount_percentage/100));
                }
                $('#normal_price').val(total_price);
                $('#normal_discount_price').val(Math.ceil(discount_price));



            });
            $(document).on('change input keyup','.large-change',function(){
                var discountOptions = $('input[name="is_unified_price"]:checked').val();
                var has_discount = $('input[name="has_discount"]:checked').val();

                var large_fabric_length = $('#large_fabric_length').val();
                var large_tailor_cost = $('#large_tailor_cost').val();
                var normal_discount_percentage = $('#large_discount_percentage').val();
                var current_fabric_price =  $('.current-fabric-price').val();
                var total_price = (large_fabric_length * current_fabric_price)+parseFloat(large_tailor_cost);
                var discount_price = 0;
                if(has_discount){
                    discount_price = total_price *(1-(normal_discount_percentage/100));
                }
                $('#large_price').val(total_price);
                $('#large_discount_price').val(Math.ceil(discount_price));



            });
            $(document).on('change input keyup','.xlarge-change',function(){
                var discountOptions = $('input[name="is_unified_price"]:checked').val();
                var has_discount = $('input[name="has_discount"]:checked').val();

                var xlarge_fabric_length = $('#xlarge_fabric_length').val();
                var xlarge_tailor_cost = $('#xlarge_tailor_cost').val();
                var normal_discount_percentage = $('#xlarge_discount_percentage').val();
                var current_fabric_price =  $('.current-fabric-price').val();
                var total_price = (xlarge_fabric_length * current_fabric_price)+parseFloat(xlarge_tailor_cost);
                var discount_price = 0;
                if(has_discount){
                    discount_price = total_price *(1-(normal_discount_percentage/100));
                }
                $('#xlarge_price').val(total_price);
                $('#xlarge_discount_price').val(Math.ceil(discount_price));



            });
        });
    </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
        };

        // 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) {
                    var choose_fabric_selection = true;
                    if ($('#tailor_category_id').val() == 2) {
                        var use_custom_fabrics = $('#use_custom_fabrics').is(':checked');
                        var use_store_fabrics = $('#use_store_fabrics').is(':checked');
                        if (!use_custom_fabrics && !use_store_fabrics) {
                            choose_fabric_selection = false;
                        } else {
                            $('#fabric_type_selection_id_error').html('').fadeOut();
                        }
                    } else {
                        $('#fabric_type_selection_id_error').html('').fadeOut();
                    }

                    if (choose_fabric_selection && 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.clothing_models.store')}}",
                            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"
                                            }
                                        }).then(function (result) {
                                            if (result.isConfirmed) {
                                                // 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;
                        if (!choose_fabric_selection) {
                            $('#fabric_type_selection_id_error').html('يجب اختيار احدى الطريقيتين لاختيار القماش').fadeIn();
                        }
                        // Swal.fire({
                        //     text: "عذرا! يجب ملئ الحقول الفارغة",
                        //     icon: "error",
                        //     buttonsStyling: false,
                        //     confirmButtonText: "تم!",
                        //     customClass: {
                        //         confirmButton: "btn btn-primary"
                        //     }
                        // });
                    }
                });
            }
        })
    </script>

@endsection