@extends('backend.global.layout')

@section('content')
    @include('backend.global.notifications')
    <br>
    <div class="page-edit-model d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            @include('backend.global.header-card')
            @include('backend.global.validation')
            <div class="content-row">
                <div class="card">
                    {!! Form::open(['url' => route('manager.pages.store'), 'method' => 'POST', 'class' => 'form fv-plugins-bootstrap5 fv-plugins-framework', 'enctype' => 'multipart/form-data' ]) !!}
                    <div class="card-body border-top p-9">
                        <!--begin::Input group-->
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Nome</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="name" value="{{ old('name') }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <div class="input-group">
                                            <div
                                                class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="1" {{ old('visible') ? 'checked' : '' }}
                                                name="visible">
                                            </div>
                                        </div>
                                    </div>

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

                    @if(false)
                    <div class="card-body border-top p-9">
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Blocos da página</label>
                            @role('super')
                            <div class="col-lg-8">
                                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#kt_modal_offer_a_deal" id="add_section_btn_dummy" class="btn btn-success" style="float: right">Adicionar Bloco</a>
                            </div>
                            @endrole
                        </div>

                        @include('backend.pages.snippets.components.type_selector')

                        <input type="hidden" name="num_sections" id="num_sections" value="{{ old('num_sections') ?? 0 }}">

                        <div class="accordion" id="sections_accordion">

                            @if(old('section') != null)
                                @foreach(old('section') as $k=>$old_section)
{{--                                    {{ dd($k,$old_section) }}--}}
                                    <div class="accordion-item" id="page_section_{{ $k }}">
                                        <h2 class="accordion-header" id="sections_accordion_header{{ $k }}">
                                            <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#sections_accordion_body{{ $k }}" aria-expanded="false" aria-controls="sections_accordion_body{{ $k }}">
                                                {{ $old_section['name'] ?? 'Nova Secção #'.$k }}
                                            </button>
                                        </h2>
                                        <div id="sections_accordion_body{{ $k }}" class="accordion-collapse collapse " aria-labelledby="sections_accordion_header{{ $k }}" data-bs-parent="#sections_accordion">
                                            <div class="accordion-body">
                                                <div class="row mb-6">
                                                    <label
                                                        class="col-lg-4 col-form-label required fw-bold fs-6">Titulo da Secção</label>
                                                    <div class="col-lg-8">
                                                        <div class="row">
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <input type="text" required name="section[{{ $k }}][name]" value="{{ $old_section['name'] }}"
                                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mb-6">
                                                    <label
                                                        class="col-lg-4 col-form-label fw-bold fs-6">Descrição da Secção</label>
                                                    <div class="col-lg-8">
                                                        <div class="row">
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <input type="text" name="section[{{ $k }}][description]" value="{{ $old_section['description'] }}"
                                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <input type="hidden" name="section[{{ $k }}][type]" value="{{ $old_section['type'] }}">

                                                <div class="row mb-6">
                                                    <label
                                                        class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                                                    <div class="col-lg-8">
                                                        <div class="row">
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <div class="input-group">
                                                                    <div
                                                                        class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                                        <input class="form-check-input" type="checkbox" value="1" {{ isset($old_section['visible']) ? 'checked' : '' }}
                                                                        name="section[{{ $k }}][visible]">
                                                                    </div>
                                                                </div>
                                                            </div>

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

                                                <div id="section_form_area_{{ $k }}">
                                                    @if($old_section['type'] != null)
                                                        @switch($old_section['type'])
                                                            @case(\App\Models\Components\Components::TYPE_TEXT) @include('backend.pages.snippets.components.text_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_GALLERY) TODO @break
                                                            @case(\App\Models\Components\Components::TYPE_IMAGE) @include('backend.pages.snippets.components.image_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_BANNER) @include('backend.pages.snippets.components.banner_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_IMAGE_TABS) @include('backend.pages.snippets.components.image_tabs_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_THREE_IMAGES) @include('backend.pages.snippets.components.three_images_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_ADVANTAGES_ALTERNATED) @include('backend.pages.snippets.components.advantage_alternated_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_VIDEO) @include('backend.pages.snippets.components.video_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                            @case(\App\Models\Components\Components::TYPE_ADVANTAGES) @include('backend.pages.snippets.components.advantages_component' , ['k' => $k, 'component' => $old_section['component']]) @break
                                                        @endswitch
                                                    @endif
                                                </div>

                                                <div class="row mb-6">
                                                    <div class="col-lg-12">
                                                        <a href="javascript:void(0)" onclick="deleteSection({{ $k }})" class="btn btn-danger" style="float: right">Apagar Secção</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif

                        </div>



                    </div>

                    @include('backend.test_crops.upload_crop_modal')
                    @endif

                    <div class="card-body border-top p-9">

                        <div class="row mb-6">
                            <h4 class="col-lg-12 fw-bold fs-6 label-section">SEO</h4>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Titulo SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="seo_title" value="{{ old('seo_title') }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Descrição SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <textarea name="seo_description"
                                                  class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">{{old('seo_description')}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Palavras-Chave SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="seo_keywords" value="{{ old('seo_keywords') }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>



                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <a href="{{ route('manager.pages') }}" class="btn btn-light btn-active-light-primary me-2">Cancelar</a>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </div>
                    <!--end::Actions-->
                    <input type="hidden">
                    <div></div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts-backend')
    <script type="text/javascript">
        $("#type_select_modal_submit_btn").click(function() {
            addSectionNew()
        });

        function addSectionNew() {
            let num_sections = parseInt($('#num_sections').val()) + 1;
            let type = $('input[name="section_type_radio"]:checked').val(); // after changing tyoe selector to modal

            let code = `<div class="accordion-item" id="page_section_`+ num_sections +`">
                            <h2 class="accordion-header" id="sections_accordion_header`+ num_sections +`">
                                <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#sections_accordion_body`+ num_sections +`" aria-expanded="false" aria-controls="sections_accordion_body`+ num_sections +`">
                                    Nova Secção #`+num_sections+`
                                </button>
                            </h2>
                            <div id="sections_accordion_body`+ num_sections +`" class="accordion-collapse collapse " aria-labelledby="sections_accordion_header`+ num_sections +`" data-bs-parent="#sections_accordion">
                                <div class="accordion-body">
                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label required fw-bold fs-6">Titulo da Secção</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <input type="text" required name="section[`+ num_sections +`][name]" value=""
                                                           class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label fw-bold fs-6">Descrição da Secção</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <input type="text" name="section[`+ num_sections +`][description]" value=""
                                                           class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" name="section[`+ num_sections +`][type]" value="`+ type + `">

                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <div class="input-group">
                                                        <div
                                                            class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                            <input class="form-check-input" type="checkbox" value="1"
                                                                name="section[`+ num_sections +`][visible]">
                                                        </div>
                                                    </div>
                                                </div>

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

                                    <div id="section_form_area_`+ num_sections +`"></div>

                                    <div class="row mb-6">
                                        <div class="col-lg-12">
                                            <a href="javascript:void(0)" onclick="deleteSection(`+ num_sections +`)" class="btn btn-danger" style="float: right">Apagar Secção</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;

            $('#sections_accordion').append(code);

            $('#num_sections').val(num_sections);

            renderSectionInputs(num_sections);
        }

        let section_options = '';

        @foreach(\App\Models\Components\Components::TYPE_ARRAY as $key => $type)
            section_options += '<option value="{{ $key }}">{{ $type }}</option>'
        @endforeach

        $("#add_section_btn").click(function() {

            let num_sections = parseInt($('#num_sections').val()) + 1;

            let code = `<div class="accordion-item" id="page_section_`+ num_sections +`">
                            <h2 class="accordion-header" id="sections_accordion_header`+ num_sections +`">
                                <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#sections_accordion_body`+ num_sections +`" aria-expanded="false" aria-controls="sections_accordion_body`+ num_sections +`">
                                    Nova Secção #`+num_sections+`
                                </button>
                            </h2>
                            <div id="sections_accordion_body`+ num_sections +`" class="accordion-collapse collapse " aria-labelledby="sections_accordion_header`+ num_sections +`" data-bs-parent="#sections_accordion">
                                <div class="accordion-body">
                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label required fw-bold fs-6">Titulo da Secção</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <input type="text" required name="section[`+ num_sections +`][name]" value=""
                                                           class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label required fw-bold fs-6">Tipo da Secção</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <select name="section[`+ num_sections +`][type]" onchange="renderSectionInputs(`+num_sections+`)" id="select_component_type_`+num_sections+`"
                                                            class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                        <option value="">Escolha o tipo</option>
                                                        `+section_options+`
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <div class="input-group">
                                                        <div
                                                            class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                            <input class="form-check-input" type="checkbox" value="1"
                                                                name="section[`+ num_sections +`][visible]">
                                                        </div>
                                                    </div>
                                                </div>

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

                                    <div id="section_form_area_`+ num_sections +`"></div>

                                    <div class="row mb-6">
                                        <div class="col-lg-12">
                                            <a href="javascript:void(0)" onclick="deleteSection(`+ num_sections +`)" class="btn btn-danger" style="float: right">Apagar Secção</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;

            $('#sections_accordion').append(code);

            $('#num_sections').val(num_sections);
        });

        function deleteSection(val) {
            $('#page_section_'+val).remove();
        }

        function renderSectionInputs(val) {

            let code = 'error';

            // let type = $('#select_component_type_'+val).val();
            let type = $('input[name="section_type_radio"]:checked').val(); // after changing type selector to modal

            if(type != '') {
                type = parseInt(type);
            }

            let init_summernote = false;

            switch (type) {
                case {{ \App\Models\Components\Components::TYPE_TEXT }}: code = getTypeTextInput(val); init_summernote = true; break;
                case {{ \App\Models\Components\Components::TYPE_GALLERY }}: code = getTypeGalleryInput(val); break;
                case {{ \App\Models\Components\Components::TYPE_IMAGE }}: code = getTypeImageInput(val); break; // done
                case {{ \App\Models\Components\Components::TYPE_BANNER }}: code = getTypeBannerInput(val); break; // done
                case {{ \App\Models\Components\Components::TYPE_IMAGE_TABS }}: code = getTypeImageTabsInput(val); break; // done
                case {{ \App\Models\Components\Components::TYPE_THREE_IMAGES }}: code = getThreeImagesInput(val); break; // done
                case {{ \App\Models\Components\Components::TYPE_ADVANTAGES_ALTERNATED }}: code = getAdvantagesAlternatedInput(val); break; // done
                case {{ \App\Models\Components\Components::TYPE_VIDEO }}: code = getTypeVideoInput(val); break;
                case {{ \App\Models\Components\Components::TYPE_ADVANTAGES }}: code = getTypeAdvantagesInput(val); break;
                case '': code = ''; break;
            }

            $('#section_form_area_'+val).empty();
            $('#section_form_area_'+val).append(code);

            if(init_summernote) {
                $('#summernote_component_'+val).summernote({
                    toolbar: [
                        // ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        // ['fontname', ['fontname']],
                        // ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        // ['insert', ['link']],
                    ],
                    fontNames: ['Arial'],
                    height: 200
                });
            }

        }

        function getTypeTextInput(val) {
            let code = `<div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Titulo</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][title]" required
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Texto</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <textarea name="section[`+ val +`][component][text]" id="summernote_component_`+ val +`" required
                                              class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>`;

            return code;
        }

        function getTypeGalleryInput(val) {
            let code = `TODO`;
            return code;
        }

        function getTypeImageInput(val) {
            let code = `<div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="file" name="section[`+ val +`][component][file]" required id="file_upload_`+ val +`_image_base" data-id="`+ val +`" data-input="image_base"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Texto</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][text]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>`;

            @foreach($crop_sizes as $k=>$crop_size)
                code = code + `<input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][height]">`
            @endforeach

            return code;
        }

        function getTypeImageTabsInput(val) {
            let code = `<div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Título</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][title]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Descrição</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][description]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>`;

            for(let i = 1; i <= 3; i++) {
                let image_label = 'image_'+i;
                let image_uid_label = 'image_'+i+'_uid';
                let icon_label = 'icon_'+i;
                let icon_uid_label = 'icon_'+i+'_uid';
                let title_label = 'title_'+i;
                let description_label = 'description_'+i;
                let btn_text_label = 'btn_'+i+'_text';
                let btn_url_label = 'btn_'+i+'_url';

                let code_aux = `<hr>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="file" name="section[`+ val +`][component][`+image_label+`]" required id="file_upload_`+ val +`_image_base_`+ i +`" data-id="`+ val +`" data-input="image_base_`+ i +`"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label required fw-bold fs-6">Icone</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="file" name="section[`+ val +`][component][`+icon_label+`]" required
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Titulo da Imagem</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" required name="section[`+ val +`][component][`+title_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Titulo do Botão</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+btn_text_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Descrição do Botão</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+description_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Link do Botão</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+btn_url_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>`;

                @foreach($crop_sizes as $k=>$crop_size)
                    code_aux = code_aux + `<input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][height]">`
                @endforeach

                code += code_aux;
            }

            return code;
        }

        function getThreeImagesInput(val) {
            let code = ``;

            for(let i = 1; i <= 3; i++) {
                let image_label = 'image_'+i;
                let image_uid_label = 'image_'+i+'_uid';
                let title_label = 'title_'+i;
                let description_label = 'description_'+i;

                let code_aux = `<hr>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="file" name="section[`+ val +`][component][`+image_label+`]" required id="file_upload_`+ val +`_image_base_`+ i +`" data-id="`+ val +`" data-input="image_base_`+ i +`"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Titulo</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" required name="section[`+ val +`][component][`+title_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Descrição</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+description_label+`]"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>`;

                @foreach($crop_sizes as $k=>$crop_size)
                    code_aux = code_aux + `<input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][height]">`
                @endforeach

                code += code_aux;
            }

            return code;
        }

        function getAdvantagesAlternatedInput(val) {
            let code = ``;

            for(let i = 1; i <= 2; i++) {
                let image_label = 'image_'+i;
                let image_uid_label = 'image_'+i+'_uid';
                let title_label = 'title_'+i;
                let description_label = 'description_'+i;
                let btn_text_label = 'btn_text_'+i;
                let btn_url_label = 'btn_url_'+i;

                let code_aux = `<hr>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="file" name="section[`+ val +`][component][`+image_label+`]" required id="file_upload_`+ val +`_image_base_`+ i +`" data-id="`+ val +`" data-input="image_base_`+ i +`"
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Titulo</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" required name="section[`+ val +`][component][`+title_label+`]" required
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Descrição</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+description_label+`]" required
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Titulo do Botão</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+btn_text_label+`]" required
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-6">
                                    <label
                                        class="col-lg-4 col-form-label fw-bold fs-6">Link do Botão</label>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="section[`+ val +`][component][`+btn_url_label+`]" required
                                                       class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>`;

                @foreach($crop_sizes as $k=>$crop_size)
                    code_aux = code_aux + `<input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][image_base_`+ i +`][{{$crop_size->id}}][image_data][height]">`
                @endforeach

                code += code_aux;
            }

            return code;
        }

        function getTypeBannerInput(val) {
            let code = `<div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="file" name="section[`+ val +`][component][image]" required id="file_upload_`+ val +`_image_base" data-id="`+ val +`" data-input="image_base"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Titulo</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][title]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Subtitulo</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][subtitle]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Texto do Botão</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][btn_text]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Url do Botão</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][btn_url]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>`;

            @foreach($crop_sizes as $k=>$crop_size)
                code = code + `<input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][image_base][{{$crop_size->id}}][image_data][height]">`
            @endforeach

            return code;
        }

        function getTypeVideoInput(val) {
            let code = `<div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Id do Video</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][video_id]" required
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Descrição</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][description]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Texto do Botão</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][btn_label]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Url do Botão</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="section[`+ val +`][component][btn_url]"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>`;
            return code;
        }

        function getTypeAdvantagesInput(val) {
            let code = `<div id="component_`+ val +`_repeater">
                        <input type="hidden" id="num_vantages_`+ val +`" value="0">

                        </div>
                        <div class="form-group mt-5">
                            <a href="javascript:void(0);" onclick="addAdvantage(`+ val +`)" class="btn btn-light-primary">
                                <i class="fas fa-plus-circle"></i> &nbsp
                                Adicionar Vantagem
                            </a>
                        </div>
                        <br>`;

            return code;
        }

        function addAdvantage(val) {

            let vantage_num = parseInt($('#num_vantages_'+val).val());

            let code = `<div id="repeater_`+ val +`_vantage_`+ vantage_num +`">
                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Titulo</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="text" name="section[`+ val +`][component][`+ vantage_num +`][title]" value="" required
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Texto 1</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="text" name="section[`+ val +`][component][`+ vantage_num +`][text_1]" value="" required
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Texto 2</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="text" name="section[`+ val +`][component][`+ vantage_num +`][text_2]" value="" required
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Imagem</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="file" name="section[`+ val +`][component][`+ vantage_num +`][file]" required data-id="`+ val +`" data-input="image_base" data-advantage="`+ vantage_num +`"
                                                   id="file_upload_`+ val +`_`+vantage_num+`_image_base"
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 file_upload">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Icon</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="file" name="section[`+ val +`][component][`+ vantage_num +`][icon]" required
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Icon Ativo</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="file" name="section[`+ val +`][component][`+ vantage_num +`][icon_active]" required
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-5">
                                <a href="javascript:void(0);" onclick="deleteAdvantage(`+ val +`,`+ vantage_num +`)" class="btn btn-light-danger">
                                    <i class="fas fa-trash-alt"></i> &nbsp Remover
                                </a>
                            </div>
                        </div>`;

            @foreach($crop_sizes as $k=>$crop_size)
                code = code + `<input type="hidden" name="section[`+ val +`][component][`+ vantage_num +`][image_base][{{$crop_size->id}}][image]">
                <input type="hidden" name="section[`+ val +`][component][`+ vantage_num +`][image_base][{{$crop_size->id}}][image_data][x]">
                <input type="hidden" name="section[`+ val +`][component][`+ vantage_num +`][image_base][{{$crop_size->id}}][image_data][y]">
                <input type="hidden" name="section[`+ val +`][component][`+ vantage_num +`][image_base][{{$crop_size->id}}][image_data][width]">
                <input type="hidden" name="section[`+ val +`][component][`+ vantage_num +`][image_base][{{$crop_size->id}}][image_data][height]">`
            @endforeach

            $('#component_'+ val +'_repeater').append(code);

            $('#num_vantages_'+val).val(vantage_num + 1);
        }

        function deleteAdvantage(section_id, advantage_id) {
            $('#repeater_'+ section_id +'_vantage_'+ advantage_id).remove();
        }

    </script>

    <script type="text/javascript">
        let active_component = null;
        let active_input = null;
        let active_advantage = null;

        var $modal = $('#upload_crop_modal');

        @foreach($crop_sizes as $k=>$crop_size)
        var image_{{$crop_size->width}}x{{$crop_size->height}} = document.getElementById('image_{{$crop_size->width}}x{{$crop_size->height}}');

        var cropper_{{$k}};
        @endforeach

        let cropped_image = false;

        /*------------------------------------------
        --------------------------------------------
        Image Change Event
        --------------------------------------------
        --------------------------------------------*/
        $("body").on("change", ".file_upload", function(e){
            var files = e.target.files;

            active_component = $(this).data('id');
            active_input = $(this).data('input');
            active_advantage = $(this).data('advantage');

            var done = function (url) {
                @foreach($crop_sizes as $k=>$crop_size)
                    image_{{$crop_size->width}}x{{$crop_size->height}}.src = url;
                @endforeach
                $modal.modal('show');
            };

            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        /*------------------------------------------
        --------------------------------------------
        Show Model Event
        --------------------------------------------
        --------------------------------------------*/
        $modal.on('shown.bs.modal', function () {
            @foreach($crop_sizes as $k=>$crop_size)
                cropper_{{$k}} = new Cropper(image_{{$crop_size->width}}x{{$crop_size->height}}, {
                    aspectRatio: {{$crop_size->width}}/{{$crop_size->height}},
                    viewMode: 3,
                    // preview: '.preview',
                    ready() {
                        let container_data = this.cropper.getContainerData();
                        if (container_data.width != 200 || container_data.height != 100) {
                            reinitializeCroppersWithSize(container_data);
                        }
                    },
                });
            @endforeach
        }).on('hidden.bs.modal', function () {
            if (!cropped_image) {
                if (active_advantage == null) {
                    $("#file_upload_" + active_component + "_" + active_input).val(null);
                }
                else {
                    $("#file_upload_" + active_component + "_" + active_advantage + "_" + active_input).val(null);
                }
            }
            cropped_image = false;

            @foreach($crop_sizes as $k=>$crop_size)
            cropper_{{$k}}.destroy();
            cropper_{{$k}} = null;
            @endforeach
        });

        function reinitializeCroppersWithSize(container_data) {
            // delete all the croppers and reinitialize them with the propper size
            @foreach($crop_sizes as $k=>$crop_size)
                cropper_{{$k}}.destroy();
                cropper_{{$k}} = null;

                cropper_{{$k}} = new Cropper(image_{{$crop_size->width}}x{{$crop_size->height}}, {
                    aspectRatio: {{$crop_size->width}}/{{$crop_size->height}},
                    viewMode: 3,
                    // preview: '.preview',
                    minContainerWidth : container_data.width,
                    minContainerHeight : container_data.height,
                });
            @endforeach
        }
        /*------------------------------------------
        --------------------------------------------
        Crop Button Click Event
        --------------------------------------------
        --------------------------------------------*/
        $("#crop").click(function(){
            cropped_image = true;
            let cropper_data;
            @foreach($crop_sizes as $k=>$crop_size)
                canvas_{{$k}} = cropper_{{$k}}.getCroppedCanvas({
                // width: 160,
                // height: 160,
            });

            cropper_data = cropper_{{$k}}.getData();

            // console.log("section["+ active_component +"][component]["+ active_input +"][image_data][x]");

            if (active_advantage == null) {
                $("input[name='section["+ active_component +"][component]["+ active_input +"][{{$crop_size->id}}][image_data][x]']").val(cropper_data.x);
                $("input[name='section["+ active_component +"][component]["+ active_input +"][{{$crop_size->id}}][image_data][y]']").val(cropper_data.y);
                $("input[name='section["+ active_component +"][component]["+ active_input +"][{{$crop_size->id}}][image_data][width]']").val(cropper_data.width);
                $("input[name='section["+ active_component +"][component]["+ active_input +"][{{$crop_size->id}}][image_data][height]']").val(cropper_data.height);
            }
            else {
                $("input[name='section["+ active_component +"][component]["+ active_advantage +"]["+ active_input +"][{{$crop_size->id}}][image_data][x]']").val(cropper_data.x);
                $("input[name='section["+ active_component +"][component]["+ active_advantage +"]["+ active_input +"][{{$crop_size->id}}][image_data][y]']").val(cropper_data.y);
                $("input[name='section["+ active_component +"][component]["+ active_advantage +"]["+ active_input +"][{{$crop_size->id}}][image_data][width]']").val(cropper_data.width);
                $("input[name='section["+ active_component +"][component]["+ active_advantage +"]["+ active_input +"][{{$crop_size->id}}][image_data][height]']").val(cropper_data.height);
            }


            canvas_{{$k}}.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    if (active_advantage == null) {
                        $("input[name='section["+ active_component +"][component]["+ active_input +"][{{$crop_size->id}}][image]']").val(base64data);
                    }
                    else {
                        $("input[name='section["+ active_component +"][component]["+ active_advantage +"]["+ active_input +"][{{$crop_size->id}}][image]']").val(base64data);
                    }
                    $("#upload_crop_modal").modal('hide');
                }
            });
            @endforeach
        });

    </script>

@endsection