@php
    $hasBanner = isset($data['header_logo_url']) && $data['header_logo_url'];
    $getBanner = $hasBanner ? $data['header_logo_url'] : '';
    $hasMobileBanner = isset($data['header_logo_url']) && $data['header_logo_url'];
    $getMobileBanner = $hasMobileBanner ? $data['header_logo_url'] : '';
@endphp


<div class="statistic">

    <!--begin::row toggle display -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 required d-inline-flex align-items-center"> @lang('theme_flextock::view.display') </label>
        <div class="col-md-8">
            <div class="custom-control custom-switch form-check form-switch">
                <input
                    class="custom-control-input form-check-input"
                    name="display"
                    type="checkbox"
                    value="1"
                    id="display_hero_{{isset($id) ? $id : 'id'}}"
                    {{ isset($id) ? (isset($data['display']) && $data['display'] == 1 ? 'checked="checked"' : '') : 'checked="checked"' }}
                >
                <label class="custom-control-label form-check-label fw-bold fs-6" for="display_hero_{{isset($id) ? $id : 'id'}}"></label>
            </div>
        </div>
    </div>
    <!--end::row toggle display -->

    <!--begin::row header_bg -->
    <div class="row mb-6 header_bg">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.section_bg') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} header_bg_input"
                    name="header_bg"
                    value="{{ isset($data['header_bg']) ? $data['header_bg'] :  ''  }}"
                >
            </div>
        </div>
    </div>
    <!--end::row header_bg -->

    <!--begin::row typer_color -->
    <div class="row mb-6 typer_color">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.section_typer_color') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} typer_color_input"
                    name="typer_color"
                    value="{{ isset($data['typer_color']) ? $data['typer_color'] :   ''   }}"
                >
            </div>
        </div>
    </div>
    <!--end::row typer_color -->

    <!--begin::row text_color -->
    <div class="row mb-6 text_color">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.section_description_color') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} text_color_input"
                    name="text_color"
                    value="{{ isset($data['text_color']) ? $data['text_color'] :   ''   }}"
                >
            </div>
        </div>
    </div>
    <!--end::row text_color -->

    <!--begin::row title_color -->
    <div class="row mb-6 text_color">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.title_color') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} text_color_input"
                    name="title_color"
                    value="{{ isset($data['title_color']) ? $data['title_color'] :   ''   }}"
                >
            </div>
        </div>
    </div>
    <!--end::row title_color -->

    <!--begin::row button_text_color -->
    <div class="row mb-6 button_text_color">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.section_button_text_color') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} button_text_color_input"
                    name="button_text_color"
                    value="{{ isset($data['button_text_color']) ? $data['button_text_color'] :   ''   }}"
                >
            </div>
        </div>
    </div>
    <!--end::row button_text_color -->


    <!--begin::row button_bg_color -->
    <div class="row mb-6 button_bg_color">
        <label class="col-md-4 fw-bold fs-6"> @lang('theme_flextock::view.button_bg_color') </label>
        <div class="col-md-8">
            <div class="input-group">
                <input
                    class="form-control form-control-color w-100 color_picker_input_{{isset($id) ? $id : 'id'}} button_bg_color_input"
                    name="button_bg_color"
                    value="{{ isset($data['button_bg_color']) ? $data['button_bg_color'] :   ''   }}"
                >
            </div>
        </div>
    </div>
    <!--end::row button_bg_color -->



    {{-- section 1 --}}
    <!--begin::Input image_1 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 required d-inline-flex align-items-center"> @lang('theme_flextock::view.image') </label>
        <div class="col-md-8">
            @if(isset($model))
                <x-media-library-collection data-title="statistic_1_image" data-type="image" max-items="1" name="statistic_1_image" :model="$model" collection="statistic_1_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @else
                <x-media-library-attachment data-title="statistic_1_image" data-type="image" name="statistic_1_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @endif
        </div>
    </div>
    <!--end::Input image_1 -->

    <!--begin::row counter_1 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.counter') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_button">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_1_counter[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_1_counter']) && isset($data['statistic_1_counter'][app()->getLocale()]) ? $data['statistic_1_counter'][app()->getLocale()] : '15+' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_1_counter[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_1_counter']) && isset($data['statistic_1_counter'][$locale['code']]) ? $data['statistic_1_counter'][$locale['code']] : '15+' }}"
                        >
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row counter_1  -->

    <!--begin::row section title_1 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.title') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_title_left">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_1_title[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_1_title']) && isset($data['statistic_1_title'][app()->getLocale()]) ? $data['statistic_1_title'][app()->getLocale()] : 'Heading' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_1_title[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_1_title']) && isset($data['statistic_1_title'][$locale['code']]) ? $data['statistic_1_title'][$locale['code']] : 'Heading' }}"
                        >
                    @endforeach
                </div>


        </div>
    </div>

    <!--end::row section title_1 -->

    <!--begin::row description_1 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.section_description') </label>
        <div class="col-md-8">

            <div class="input-group lang_container text" id="lang_container_section_description">
                <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 ">
                    <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                        {{ get_current_lang()['name'] }}
                    </option>
                    @foreach(get_langauges_except_current() as $locale)
                        <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                            {{ $locale['name'] }}
                        </option>
                    @endforeach
                </select> 

                    <textarea name="sstatistic_1_description[{{app()->getLocale()}}]" title="{{app()->getLocale()}}" class="form-control form-control-lg form-control-multilingual form-control-{{app()->getLocale()}}">{{ isset($data['sstatistic_1_description']) && isset($data['sstatistic_1_description'][app()->getLocale()]) ? $data['sstatistic_1_description'][app()->getLocale()] : 'Sub Heading' }}</textarea>
                    @foreach(get_langauges_except_current() as $locale)
                        <textarea name="sstatistic_1_description[{{ $locale['code'] }}]" title="{{ $locale['code'] }}" class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none">{{ isset($data['sstatistic_1_description']) && isset($data['sstatistic_1_description'][$locale['code']]) ? $data['sstatistic_1_description'][$locale['code']] : 'Sub Heading' }}</textarea>
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row description_1 -->

    {{-- section 2 --}}
    <!--begin::Input image_2 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 required d-inline-flex align-items-center"> @lang('theme_flextock::view.image') </label>
        <div class="col-md-8">
            @if(isset($model))
                <x-media-library-collection data-title="statistic_2_image" data-type="image" max-items="1" name="statistic_2_image" :model="$model" collection="statistic_2_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @else
                <x-media-library-attachment data-title="statistic_2_image" data-type="image" name="statistic_2_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @endif
        </div>
    </div>
    <!--end::Input image_2 -->

    <!--begin::row section counter_2 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.counter') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_button">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_2_counter[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_2_counter']) && isset($data['statistic_2_counter'][app()->getLocale()]) ? $data['statistic_2_counter'][app()->getLocale()] : '300k+' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_2_counter[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_2_counter']) && isset($data['statistic_2_counter'][$locale['code']]) ? $data['statistic_2_counter'][$locale['code']] : '300k+' }}"
                        >
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row section counter_2 -->

    <!--begin::row title_2 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.title') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_title_left">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_2_title[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_2_title']) && isset($data['statistic_2_title'][app()->getLocale()]) ? $data['statistic_2_title'][app()->getLocale()] : 'Heading' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_2_title[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_2_title']) && isset($data['statistic_2_title'][$locale['code']]) ? $data['statistic_2_title'][$locale['code']] : 'Heading' }}"
                        >
                    @endforeach
                </div>


        </div>
    </div>
    <!--end::row title_2  -->

    <!--begin::row description_2 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.section_description') </label>
        <div class="col-md-8">

            <div class="input-group lang_container text" id="lang_container_section_description">
                <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 ">
                    <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                        {{ get_current_lang()['name'] }}
                    </option>
                    @foreach(get_langauges_except_current() as $locale)
                        <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                            {{ $locale['name'] }}
                        </option>
                    @endforeach
                </select>

                    <textarea name="sstatistic_2_description[{{app()->getLocale()}}]" title="{{app()->getLocale()}}" class="form-control form-control-lg form-control-multilingual form-control-{{app()->getLocale()}}">{{ isset($data['sstatistic_2_description']) && isset($data['sstatistic_2_description'][app()->getLocale()]) ? $data['sstatistic_2_description'][app()->getLocale()] : 'Sub Heading' }}</textarea>
                    @foreach(get_langauges_except_current() as $locale)
                        <textarea name="sstatistic_2_description[{{ $locale['code'] }}]" title="{{ $locale['code'] }}" class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none">{{ isset($data['sstatistic_2_description']) && isset($data['sstatistic_2_description'][$locale['code']]) ? $data['sstatistic_2_description'][$locale['code']] : 'Sub Heading' }}</textarea>
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row description_2 -->


    {{-- section 3 --}}
    <!--begin::Input image_3 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 required d-inline-flex align-items-center"> @lang('theme_flextock::view.image') </label>
        <div class="col-md-8">
            @if(isset($model))
                <x-media-library-collection data-title="statistic_3_image" data-type="image" max-items="1" name="statistic_3_image" :model="$model" collection="statistic_3_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @else
                <x-media-library-attachment data-title="statistic_3_image" data-type="image" name="statistic_3_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @endif
        </div>
    </div>
    <!--end::Input image_3 -->

    <!--begin::row section counter_3 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.counter') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_button">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_3_counter[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_3_counter']) && isset($data['statistic_3_counter'][app()->getLocale()]) ? $data['statistic_3_counter'][app()->getLocale()] : '28+' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_3_counter[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_3_counter']) && isset($data['statistic_3_counter'][$locale['code']]) ? $data['statistic_3_counter'][$locale['code']] : '28+' }}"
                        >
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row section counter_3 -->

    <!--begin::row title_3 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.title') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_title_left">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_3_title[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_3_title']) && isset($data['statistic_3_title'][app()->getLocale()]) ? $data['statistic_3_title'][app()->getLocale()] : 'Heading' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_3_title[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_3_title']) && isset($data['statistic_3_title'][$locale['code']]) ? $data['statistic_3_title'][$locale['code']] : 'Heading' }}"
                        >
                    @endforeach
                </div>


        </div>
    </div>
    <!--end::row title_3  -->

    <!--begin::row description_3 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.section_description') </label>
        <div class="col-md-8">

            <div class="input-group lang_container text" id="lang_container_section_description">
                <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 ">
                    <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                        {{ get_current_lang()['name'] }}
                    </option>
                    @foreach(get_langauges_except_current() as $locale)
                        <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                            {{ $locale['name'] }}
                        </option>
                    @endforeach
                </select>

                    <textarea name="sstatistic_3_description[{{app()->getLocale()}}]" title="{{app()->getLocale()}}" class="form-control form-control-lg form-control-multilingual form-control-{{app()->getLocale()}}">{{ isset($data['sstatistic_3_description']) && isset($data['sstatistic_3_description'][app()->getLocale()]) ? $data['sstatistic_3_description'][app()->getLocale()] : 'Sub Heading' }}</textarea>
                    @foreach(get_langauges_except_current() as $locale)
                        <textarea name="sstatistic_3_description[{{ $locale['code'] }}]" title="{{ $locale['code'] }}" class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none">{{ isset($data['sstatistic_3_description']) && isset($data['sstatistic_3_description'][$locale['code']]) ? $data['sstatistic_3_description'][$locale['code']] : 'Sub Heading' }}</textarea>
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row description_3 -->



    {{-- section 4 --}}
    <!--begin::Input image_4 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 required d-inline-flex align-items-center"> @lang('theme_flextock::view.image') </label>
        <div class="col-md-8">
            @if(isset($model))
                <x-media-library-collection data-title="statistic_4_image" data-type="image" max-items="1" name="statistic_4_image" :model="$model" collection="statistic_4_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @else
                <x-media-library-attachment data-title="statistic_4_image" data-type="image" name="statistic_4_image" rules="mimes:jpg,jpeg,png,gif,bmp,svg,webp"/>
            @endif
        </div>
    </div>
    <!--end::Input image_4 -->

    <!--begin::row section counter_4 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.counter') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_button">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_4_counter[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_4_counter']) && isset($data['statistic_4_counter'][app()->getLocale()]) ? $data['statistic_4_counter'][app()->getLocale()] : '99%' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_4_counter[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_4_counter']) && isset($data['statistic_4_counter'][$locale['code']]) ? $data['statistic_4_counter'][$locale['code']] : '99%' }}"
                        >
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row section counter_4 -->

    <!--begin::row title_4 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.title') </label>
        <div class="col-md-8">

                <div class="input-group lang_container" id="lang_container_section_title_left">
                    <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 mw-100px">
                        <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                            {{ get_current_lang()['name'] }}
                        </option>
                        @foreach(get_langauges_except_current() as $locale)
                            <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                                {{ $locale['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <input
                        type="text"
                        name="statistic_4_title[{{app()->getLocale()}}]"
                        title="{{app()->getLocale()}}"
                        class="form-control section-title form-control-multilingual form-control-{{app()->getLocale()}}"
                        value="{{ isset($data['statistic_4_title']) && isset($data['statistic_4_title'][app()->getLocale()]) ? $data['statistic_4_title'][app()->getLocale()] : 'Heading' }}"
                    >
                    @foreach(get_langauges_except_current() as $locale)
                        <input
                            type="text"
                            name="statistic_4_title[{{ $locale['code'] }}]"
                            title="{{ $locale['code'] }}"
                            class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none"
                            value="{{ isset($data['statistic_4_title']) && isset($data['statistic_4_title'][$locale['code']]) ? $data['statistic_4_title'][$locale['code']] : 'Heading' }}"
                        >
                    @endforeach
                </div>


        </div>
    </div>
    <!--end::row title_4  -->

    <!--begin::row description_4 -->
    <div class="row mb-6">
        <label class="col-md-4 fw-bold fs-6 d-inline-flex align-items-center"> @lang('theme_flextock::view.section_description') </label>
        <div class="col-md-8">

            <div class="input-group lang_container text" id="lang_container_section_description">
                <select class="change_language form-control form-control-sm badge badge-light fw-bold py-4 px-3 ">
                    <option value="{{ app()->getLocale() }}" data-flag="{{Config::get('current_lang_image')}}" selected>
                        {{ get_current_lang()['name'] }}
                    </option>
                    @foreach(get_langauges_except_current() as $locale)
                        <option value="{{ $locale['code'] }}" data-flag="{{$locale['icon']}}">
                            {{ $locale['name'] }}
                        </option>
                    @endforeach
                </select>

                    <textarea name="sstatistic_4_description[{{app()->getLocale()}}]" title="{{app()->getLocale()}}" class="form-control form-control-lg form-control-multilingual form-control-{{app()->getLocale()}}">{{ isset($data['sstatistic_4_description']) && isset($data['sstatistic_4_description'][app()->getLocale()]) ? $data['sstatistic_4_description'][app()->getLocale()] : 'Sub Heading' }}</textarea>
                    @foreach(get_langauges_except_current() as $locale)
                        <textarea name="sstatistic_4_description[{{ $locale['code'] }}]" title="{{ $locale['code'] }}" class="form-control section-title form-control-multilingual form-control-{{$locale['code']}}  d-none">{{ isset($data['sstatistic_4_description']) && isset($data['sstatistic_4_description'][$locale['code']]) ? $data['sstatistic_4_description'][$locale['code']] : 'Sub Heading' }}</textarea>
                    @endforeach
                </div>
        </div>
    </div>
    <!--end::row description_4 -->



</div>

<link rel="stylesheet" href="{{ asset('assets/plugins/spectrum/spectrum.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/modules/css/setting.css') }}">
<script src="{{ asset('assets/plugins/spectrum/spectrum.min.js') }}"></script>
<script>

    /*!*******************************************************!*\
      !*** Select fields ***!
      \*******************************************************/
      $("select.form-select").select2();
    $(".change_language").select2({
        templateResult: formatFlag,
        templateSelection: formatState,
        minimumResultsForSearch: -1,
        width: '100%'
    });
    /*!*******************************************************!*\
      !*** Color picker fields ***!
      \*******************************************************/
      $(".color_picker_input_{{isset($id) ? $id : 'id'}}").spectrum({
      type: "component",
      showInput: true,
       showInitial: true,
      clickoutFiresChange: true,
      allowEmpty: true,
      maxSelectionSize: 8,
    });

    function formatFlag (lang) {
        if (!lang.id) { return lang.text; }
        var $img    = $(lang.element).attr("data-flag");
        if($img) {
            var $lang = $(
                '<span ><img sytle="display: inline-block;" src=" '+ $(lang.element).attr("data-flag") +' " />&emsp;' + lang.text + '</span>'
            );
        }else{
            var $lang = $(
                '<span >' + lang.text + '</span>'
            );
        }
        return $lang;
    }
    function formatState (lang) {
        if (!lang.id) {
        return lang.text;
        }
        var $img    = $(lang.element).attr("data-flag");
        if($img) {
            var $lang = $(
                '<span ><img sytle="display: inline-block;" src=" '+ $(lang.element).attr("data-flag") +' " />&emsp;' + lang.text + '</span>'
            );
        }else{
            var $lang = $(
                '<span >' + lang.text + '</span>'
            );
        }
        return $lang;
    };
    // select category_select
    var selectCategories = $('.select_categories');
    selectCategories.select2({
        closeOnSelect: false,
        ajax: {
            url: "{{ fr_route('categories.search') }}",
            dataType: 'json',
            delay: 500,
            data: function (params) {
                return { search: params.term };
            },
            processResults: function (data) {
                if (data && data.categories) {
                    return {
                        results: data.categories.map(function(category) {
                            return {id: category.id, text: category.name}
                        })
                    };
                }
            },
            cache: true,
        },
    });

    @if (isset($id) && isset($data['categories']) && is_array($data['categories']))
        $('.select_categories_{{$id}}').val([{{ implode(", ", $data['categories']) }}]).trigger('change');
    @endif
    // end select category_select
    /*******************************************************************************************/

    // select tags
    var selectTags = $('.select_tags');
    selectTags.select2({
        closeOnSelect: false,
        ajax: {
            url: "{{ fr_route('tags.search') }}",
            dataType: 'json',
            delay: 500,
            data: function (params) {
                return { search: params.term };
            },
            processResults: function (data) {
                if (data && data.tags) {
                    return {
                        results: data.tags.map(function(tag) {
                            return {id: tag.id, text: tag.name}
                        })
                    };
                }
            },
            cache: true,
        },
    });

    @if (isset($id) && isset($data['tags']) && is_array($data['tags']))
        $('.select_tags_{{$id}}').val([{{ implode(", ", $data['tags']) }}]).trigger('change');
    @endif
    // end select tags
    /*******************************************************************************************/

</script>
