@if($section)
    <form method="post" action="{{ route('admin.app_settings.section_update',[$section]) }}" id="new_section" enctype="multipart/form-data">
@else
    <form method="post" action="{{ route('admin.app_settings.section_store') }}" id="new_section" enctype="multipart/form-data">
@endif

    @csrf
    <input type="hidden" name="section_type" value="{{ $sectionType }}">

    {{--banners--}}

    <style>
        .option_item{
            display: none;
        }
    </style>
    <style>
        .image-input-placeholder {background-position: center; 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>
    <div class="banners_wrapper">
        @for($i = 0; $i < $bannersCount ; $i++)
        <div class="banner_item p-3 border rounded mb-7 shadow-xs" id="banner_item_{{$i}}">
            <div class="row">
                <div class="col-lg-4">
                    <div class="fv-row mb-6 form-group">
                        <label class="d-block fw-semibold fs-6 mb-5 required">@lang('general.image')</label>

                        <div class="image-input image-input-outline image-input-placeholder image-input-empty @if(!empty($section->elements[$i]) && $section->elements[$i]->image_url) image-input-changed @endif" data-kt-image-input="true">
                            <div class="image-input-wrapper w-150px h-125px" @if(!empty($section->elements[$i]) && $section->elements[$i]->image_url) style="background-image:url({{$section->elements[$i]->image_url}}) " @endif></div>

                            <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="@lang('general.change_image')">
                                <i class="bi bi-pencil-fill fs-7"></i>
                                <!--begin::Inputs-->
                                <input type="file" {{ empty($section) ? 'required' : '' }} name="banners[{{$i}}][avatar]" accept=".png, .jpg, .jpeg" />
                                <input type="hidden" name="avatar_remove" />
                                <!--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" title="@lang('general.cancel_image')">
                                <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="@lang('general.remove_image')">
                                <i class="bi bi-x fs-2"></i>
                            </span>
                            <!--end::Remove-->
                        </div>
                        <!--end::Image input-->
                        <!--begin::Hint-->
                        <div class="form-text">@lang('general.allowed_files_types',['types'=>'png, jpg, jpeg'])</div>
                        <!--end::Hint-->
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="mb-6 fv-row form-group">
                        <label class="required form-label">@lang('general.content_type')</label>
                        <select class="form-select content_type mb-2" data-dropdown-parent="#banner_item_{{$i}}" required name="banners[{{$i}}][item_type]"  data-control="select2" data-hide-search="true" data-placeholder="اختر">
                            <option></option>
                            @foreach($itemTypes as $type)
                                <option value="{{ $type }}" {{ (!empty($section->elements[$i]) && $type == $section->elements[$i]->item_type)?'selected' : '' }}>{{ trans('general.type_'.$type) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="options">
                        <div class="fv-row mb-6 option_item external_link form-group" style="{{ (!empty($section->elements[$i]) && \App\Constants\StoreSectionElementContentTypes::EXTERNAL_URL == $section->elements[$i]->item_type)?'display:block;' : '' }}">
                            <label class="required form-label">@lang('general.type_external_url'):</label>
                            <input type="url" required name="banners[{{$i}}][external_url]" value="{{ (!empty($section->elements[$i]))?$section->elements[$i]->extra_data : '' }}" class="form-control">
                        </div>

                        <div class="fv-row mb-6 option_item internal_text form-group" style="{{ (!empty($section->elements[$i]) && \App\Constants\StoreSectionElementContentTypes::INTERNAL_TEXT == $section->elements[$i]->item_type)?'display:block;' : '' }}">
                            <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_{{$i}}_{{$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_{{$i}}_{{$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 required dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" type="text" name="banners[{{$i}}][title][{{ $language->code }}]" id="title__{{$i}}_{{ $language->code }}"
                                                   placeholder="الاسم ب{{$language->name_ar}}"
                                                   value="{{ old("banners.".$i.".title.$language->code",(!empty($section->elements[$i]) && $section->elements[$i]->translate($language->code)?$section->elements[$i]->translate($language->code)->title:'')) }}"

                                                   class="form-control mb-2{{ $errors->has("title.$language->code") ? ' is-invalid' : '' }}">


                                            <span id="banners_{{$i}}_title_{{ $language->code }}_error" class="invalid-feedback custom-error"></span>
                                        </div>
                                        <!--end::Input group-->
                                        <div class="mb-10 fv-row">
                                            <label class="required form-label">التفاصيل ب{{$language->name_ar}}</label>

                                            <textarea required dir="{{ $language->code == 'ar'?'rtl':'ltr' }}" name="banners[{{$i}}][details][{{ $language->code }}]"
                                                      id="details_{{$i}}_{{ $language->code }}" rows="4"
                                                      class="form-control mb-2{{ $errors->has("banners.".$i.".details.$language->code") ? ' is-invalid' : '' }}">{{ old("banners.".$i.".details.$language->code",(!empty($section->elements[$i]) && $section->elements[$i]->translate($language->code)?$section->elements[$i]->translate($language->code)->details:'')) }}</textarea>

                                            <span id="banners_{{$i}}_details_{{ $language->code }}_error" class="invalid-feedback custom-error"></span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>

                        <div class="fv-row mb-6 option_item category form-group" style="{{ (!empty($section->elements[$i]) && in_array($section->elements[$i]->item_type,[
                            \App\Constants\StoreSectionElementContentTypes::MAIN_CATEGORY,
                            \App\Constants\StoreSectionElementContentTypes::SUB_CATEGORY,
                        ]))?'display:block;' : '' }}">
                            <label class="required form-label">@lang('general.type_main_category'):</label>
                            @php
                                $catId = null;
                                if(!empty($section->elements[$i])){
                                    $catId = $section->elements[$i]->getMainCategoryId();
                                }
                            @endphp
                            <select class="form-select" data-dropdown-parent="#banner_item_{{$i}}" name="banners[{{$i}}][category]" required data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                @foreach($categories as $cat)
                                    <option value="{{$cat->getKey() }}" {{ (!empty($catId) && $catId == $cat->getKey() ) ? 'selected': ''  }}>{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fv-row mb-6 option_item sub_category form-group" style="{{ (!empty($section->elements[$i]) && \App\Constants\StoreSectionElementContentTypes::SUB_CATEGORY == $section->elements[$i]->item_type)?'display:block;' : '' }}">
                            <label class="required form-label">@lang('general.type_sub_category'):</label>
                            <select class="form-select" data-dropdown-parent="#banner_item_{{$i}}"  name="banners[{{$i}}][subcategory]" required data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                @if(!empty($section->elements[$i]))
                                    @foreach($section->elements[$i]->getMainCategorySubCategoriesArr() as $id => $val)
                                        <option value="{{$id }}" {{ (  $section->elements[$i]->item_id == $id) ? 'selected' : '' }}>{{ $val }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="fv-row mb-6 option_item tailor_category form-group" style="{{ (!empty($section->elements[$i]) && \App\Constants\StoreSectionElementContentTypes::TAILOR_CATEGORY == $section->elements[$i]->item_type)?'display:block;' : '' }}">
                            <label class="required form-label">@lang('general.type_tailor_category'):</label>
                            <select class="form-select" data-dropdown-parent="#banner_item_{{$i}}" name="banners[{{$i}}][tailor_category]" required data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                @foreach($tailorCategories as $key => $cat)
                                    <option value="{{$key }}" {{ (!empty($section->elements[$i]) && $section->elements[$i]->item_id == $key) ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fv-row mb-6 option_item product form-group" style="{{ (!empty($section->elements[$i]) && \App\Constants\StoreSectionElementContentTypes::PRODUCT == $section->elements[$i]->item_type)?'display:block;' : '' }}">
                            <label class="required form-label">@lang('general.type_product'):</label>
                            <select name="banners[{{$i}}][product]" data-dropdown-parent="#banner_item_{{$i}}" class="form-select" required data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                @foreach($products as $id => $val)
                                    <option value="{{ $id }}" {{ (!empty($section->elements[$i]) && $section->elements[$i]->item_id == $id) ? 'selected' : '' }}>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endfor
    </div>






    <div class="justify-content-end d-flex align-items-center">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
        <button type="submit" class="btn btn-primary ms-2 submit_btn">
            <span class="indicator-label">@lang('general.save')</span>
            <span class="indicator-progress">@lang('general.please_wait')
                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
            </span>
        </button>
    </div>
</form>