@php
    use Illuminate\Support\Facades\Route;
    $currentRoute = Route::current()->uri();
@endphp
@isset($product)
    @if(str_contains($currentRoute, 'duplicate'))
    @else
    @method('PUT')
    <input type="hidden" value="{{ $product->id }}" name="id">
    @endif
   
@endisset
@csrf
<div class="card-body border-top p-9">
    <ul class="nav nav-light-success nav-pills" id="myTab" role="tablist">

        @foreach (LaravelLocalization::getSupportedLocales() as $name => $value)
            <li class="nav-item" data-bs-toggle="tab">
                <a class="nav-link {{ LaravelLocalization::getCurrentLocale() == $name ? 'active' : '' }}"
                    id="{{ $name }}-tab" data-bs-toggle="tab" href="#{{ $name }}" role="tab"
                    aria-controls="{{ $name }}"
                    aria-selected="{{ LaravelLocalization::getCurrentLocale() == $name ? 'true' : 'false' }}">{{ $value['native'] }}</a>
            </li>
        @endforeach
    </ul>
    <div class="tab-content mt-5" id="myTabContent">
        @foreach (LaravelLocalization::getSupportedLocales() as $name => $value)
            <div class="tab-pane fade {{ LaravelLocalization::getCurrentLocale() == $name ? 'show active' : '' }}"
                id="{{ $name }}" role="tabpanel" aria-labelledby="{{ $name }}-tab">
                <!--begin::Input group-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('lang.name') }}</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!--begin::Row-->
                        <div class="row">
                            <!--begin::Col-->
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type='text' name="{{ $name }}[name]"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 "
                                    placeholder="{{ __('lang.name') }}"
                                    value="{{ old($name . '.name', isset($product) ? $product->getTranslation($name)->name : '') }}">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Row-->
                    </div>
                    <!--end::Col-->
                </div>
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('lang.small_description') }}</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!--begin::Row-->
                        <div class="row">
                            <!--begin::Col-->
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type='text' name="{{ $name }}[small_description]"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 "
                                    placeholder="{{ __('lang.small_description') }}"
                                    value="{{ old($name . '.small_description', isset($product) ? $product->getTranslation($name)->small_description : '') }}">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Row-->
                    </div>
                    <!--end::Col-->
                </div>
                
                <!--end::Input group-->
                <!--begin::Input group-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('lang.description') }}</label>
                    <!--end::Label-->

                    <!--begin::Col-->
                
                    <div class="col-lg-8">
                        <!--begin::Row-->
                    
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <textarea name="{{ $name }}[description]"
                                class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 summernote">{{ old($name . '.description', isset($product) ? $product->getTranslation($name)->description : '') }}
                            </textarea>
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                        <!--end::Row-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->


            </div>
        @endforeach
    </div>
    <!--begin::Input group-->
    
    @include('AdminPanel.products.category')
    <div class="row mb-6">
        <label class="col-lg-4 col-form-label  fw-semibold fs-6">{{ __('lang.lightEffects') }}</label>
        <div class="col-lg-8 fv-row fv-plugins-icon-container">
            <select id="js-example-basic"  name="effect_ids[]"   class=" form-control select2 h-50px" multiple>
                <option value="">{{__('lang.select')}}</option>
                @foreach ($effects as $effect)
                 
                    <option value="{{ $effect->id }}"
                      
                        {{ isset($product) && $product->effects && in_array($effect->id, $product->effects->pluck('id')->toArray()) ? 'selected' : '' }}
                        >
                        {{ $effect->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="row mb-6">
        <label class="col-lg-4 col-form-label  fw-semibold fs-6">{{ __('lang.markets') }}</label>
        <div class="col-lg-8 fv-row fv-plugins-icon-container">
            <select id="js-example-basic1"  name="market_ids[]"   class=" form-control select2 h-50px" multiple>
                <option value="">{{__('lang.select')}}</option>
                @foreach ($markets as $market)
                    <option value="{{ $market->id }}"
                        {{ isset($product) && $product->markets && in_array($market->id, $product->markets->pluck('id')->toArray()) ? 'selected' : '' }}
                        >
                        {{ $market->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>

     {{-- main image product --}}

    <div class="fv-row mb-10 fv-plugins-icon-container">
        <!--begin::Label-->
        <label class="d-block fw-semibold fs-6 mb-5">
            <span class="required">{{ __('lang.mainImage') }}</span>
        </label>
        <!--end::Label-->
        <!--begin::Image input placeholder-->
        <style>
            .image-input-placeholder {
                background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }})
            }

            [data-bs-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"
            data-kt-image-input="true">
            <!--begin::Preview existing avatar-->
            <div class="image-input-wrapper w-125px h-125px"
                @isset($product->image)
                    style='background-image:url({{ $product->image }})'@endisset>
            </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" aria-label="Change avatar"
                data-bs-original-title="Change avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-pencil fs-7">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
                <!--begin::Inputs-->
                <input type="file" name="image" 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" aria-label="Cancel avatar"
                data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </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" aria-label="Remove avatar"
                data-bs-original-title="Remove avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </span>
            <!--end::Remove-->
        </div>
        <!--end::Image input-->
        <!--begin::Hint-->
        <div class="form-text">{{ __('lang.allowedsettingtypes') }}</div>
        <!--end::Hint-->
        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
    </div>



    {{--  product images   --}}
    <div class="fv-row mb-10 fv-plugins-icon-container">
        <!--begin::Label-->
        <label class="d-block fw-semibold fs-6 mb-5">
            <span class="required">{{ __('lang.images') }}</span>
        </label>
        <!--end::Label-->
        <!--begin::Image input placeholder-->
        <style>
            .image-input-placeholder {
                background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }})
            }

            [data-bs-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"
            data-kt-image-input="true">
            <!--begin::Preview existing avatar-->
            <div class="image-input-wrapper w-125px h-125px"
                @isset($product->productImages[0])
                    style='background-image:url({{$product->productImages[0]->image }})'@endisset>
            </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" aria-label="Change avatar"
                data-bs-original-title="Change avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-pencil fs-7">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
                <!--begin::Inputs-->
                <input type="file" name="images[]" multiple 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" aria-label="Cancel avatar"
                data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </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" aria-label="Remove avatar"
                data-bs-original-title="Remove avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </span>
            <!--end::Remove-->
        </div>
        <!--end::Image input-->
        <!--begin::Hint-->
        <div class="form-text">{{ __('lang.allowedsettingtypes') }}</div>
        <!--end::Hint-->
        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
    </div>


     {{--  product application images   --}}
    <div class="fv-row mb-10 fv-plugins-icon-container">
        <!--begin::Label-->
        <label class="d-block fw-semibold fs-6 mb-5">
            <span class="">{{ __('lang.applicationImages') }}</span>
        </label>
        <!--end::Label-->
        <!--begin::Image input placeholder-->
        <style>
            .image-input-placeholder {
                background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }})
            }

            [data-bs-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"
            data-kt-image-input="true">
            <!--begin::Preview existing avatar-->
            <div class="image-input-wrapper w-125px h-125px"
                @isset($product->productApplicationImages[0])
                    style='background-image:url({{ $product->productApplicationImages[0]->image }})'@endisset>
           
                </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" aria-label="Change avatar"
                data-bs-original-title="Change avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-pencil fs-7">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
                <!--begin::Inputs-->
                <input type="file" name="application_images[]" multiple accept=".png, .jpg, .jpeg">
                <input type="hidden" >
                <!--end::Inputs-->
            </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" aria-label="Cancel avatar"
                data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </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" aria-label="Remove avatar"
                data-bs-original-title="Remove avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </span>
            <!--end::Remove-->
        </div>
        <!--end::Image input-->
        <!--begin::Hint-->
        <div class="form-text">{{ __('lang.allowedsettingtypes') }}</div>
        <!--end::Hint-->
        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
    </div>


    <div class="fv-row mb-10 fv-plugins-icon-container">
        <!--begin::Label-->
        <label class="d-block fw-semibold fs-6 mb-5">
            <span class="">{{ __('lang.file') }}</span>
        </label>
        <!--end::Label-->
        <!--begin::Image input placeholder-->
        <style>
    .image-input-placeholder {
        background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }})
    }

            [data-bs-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"
            data-kt-image-input="true">
            <!--begin::Preview existing avatar-->
           <div class="image-input-wrapper w-125px h-125px"
                @isset($product->productFiles[0])
                    style='background-image:url({{ $product->productFiles[0]->file }})'@endisset>

                </div> -
            <!--end::Preview existing avatar-->
            <!--begin::Label-->
            <label class="btn btn-icon btn-circle btn-active-color-primary w-70px h-45px bg-body shadow"
                data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change avatar"
                data-bs-original-title="Change avatar" data-kt-initialized="1">
                Uploud File
                <i class="ki-duotone ki-pencil fs-7">
                    
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
                <!--begin::Inputs-->
                <input type="file" name="files[]" multiple accept=".png, .jpg, .jpeg, .pdf, .txt">
                <input type="hidden" >
                <!--end::Inputs-->
            </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" aria-label="Cancel avatar"
                data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </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" aria-label="Remove avatar"
                data-bs-original-title="Remove avatar" data-kt-initialized="1">
                <i class="ki-duotone ki-cross fs-2">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </span>
            <!--end::Remove-->
        </div>
        <!--end::Image input-->
        <!--begin::Hint-->
        <!--end::Hint-->
        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
    </div>


    <div class="row mb-6">
        <!--begin::Label-->
        <!--begin::Col-->
        <label for="show_title">{{ __('lang.isHome') }}</label>
        <input type="hidden" name="isHome" value="0">
        <input type="checkbox" name="isHome" id="isHome"
               @isset($product)
                   @if($product->isHome === 1)
                    checked
                   @endif
               @endisset
               value="1"
                >
        <!--end::Label-->
    </div>
    <!--end::Input group-->
    <div class="row mb-6">
        <!--begin::Label-->
        <label for="show_projects">{{ __('lang.isFooter') }}</label>
        <input type="hidden" name="isFooter" value="0">
        <input type="checkbox" name="isFooter" id="isFooter"
               @isset($product)
                   @if($product->isFooter === 1)
                    checked
                   @endif
               @endisset
               value="1"
        >
        <!--end::Col-->
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#js-example-basic').select2({
            placeholder: "{{ __('select') }}",
            allowClear: true
        }); 
        $('#js-example-basic1').select2({
            placeholder: "{{ __('select') }}",
            allowClear: true
        });       
    });
   
</script>