@foreach ($section['module'] as $module)
<div class="article" {{ $section['module'][0]['type'] == "article"  ? '' : 'hidden'}}>
    <input type="hidden" name="module_id" value="{{ $section['module'][0]['module_id'] ?? null }}">
    <div class="row mb-6">
        <label class="col-lg-4 col-form-label text-dark fs-6 required title">{{ __('Article Detail') }}</label>
        <div class="col-lg-8">
            <select name="content_article" data-control="select2" id=""
            class="form-select form-select-solid form-select-lg" required>
            <option value="">Choose One</option>
            @foreach ($list_article as $keys => $value)
                <option value="{{ $value['id'] }}" {{ ( isset($section['module'][0]['content'][0]['content_article_id']) == $value['id']) ? 'selected' : '' }}>{{ $value['title'] }}</option>
            @endforeach
            </select>
        </div>
    </div>
    <div class="row mb-6">
        <label class="col-lg-4 col-form-label text-dark fs-6 required title">{{ __('Layout Type') }}</label>
        <div class="col-lg-8">
            <select name="layout_content_type" id="" class="form-select form-select-solid form-select-lg select-type-layout" required>
                <option value="" selected disabled>Choose One</option>
                <option value="with-sidebar" @if ((isset($section['module'][0]['content_type']) ? $section['module'][0]['content_type'] : '') == 'with-sidebar') selected @endif>With Sidebar</option>
                <option value="no-sidebar" @if ((isset($section['module'][0]['content_type']) ? $section['module'][0]['content_type'] : '') == 'no-sidebar' ) selected  @endif>No Sidebar</option>
            </select>
        </div>
    </div>
    <div class="row mb-6 sidebar_content" {{isset($section['module'][0]['content_type']) && ($section['module'][0]['content_type'] == 'with-sidebar') ? '' : 'style=display:none;' }}>
        @php
            if(isset($section['module'][0]['content'][0]['sidebar_content']) != null) {
                $sidebar_content = $section['module'][0]['content'][0]['sidebar_content'];
            } else {
                $sidebar_content = '[]';
            }
        @endphp
        <label class="col-lg-4 col-form-label text-dark fs-6 title">{{ __('Custom Sidebar Default') }}</label>
        <div class="col-lg-8">
            <input class="form-control tagify" name="sidebar_content" placeholder="Pilih Salah Satu" value="{{$sidebar_content}}" data-kt-repeater="tagify"/>
        </div>
    </div>
    <div class="row mb-6 sidebar_content_image" {{isset($section['module'][0]['content_type']) && ($section['module'][0]['content_type'] == 'with-sidebar') ? '' : 'style=display:none;' }}>
        @php
            if(isset($section['module'][0]['content'][0]['sidebar_content_image']) != null) {
                $sidebar_content_image = $section['module'][0]['content'][0]['sidebar_content_image'];
            } else {
                $sidebar_content_image = '[]';
            }
        @endphp
        <label class="col-lg-4 col-form-label text-dark fs-6 title">{{ __('Custom Sidebar with Image') }}</label>
        <div class="col-lg-8">
            <input class="form-control tagify" name="sidebar_content_image" placeholder="Pilih Salah Satu" value="{{$sidebar_content_image}}" data-kt-repeater="tagify"/>
        </div>
    </div>
    <div class="row mb-6">
        <label class="col-lg-4 col-form-label text-dark fs-6 title">
            {{ __('Grid Type') }}
            <span class="required"></span>
            <a href="javascript:void;" id="popover_article_layout_grid" data-bs-toggle="popover" title="Grid Type Info" data-bs-dismiss="true" data-bs-html="true" data-bs-content="@include('pages.section.edit.comp.popover-content-article')">
                <i class="fas fa-info-circle"></i>
            </a>
        </label>
        <div class="col-lg-8">
            @php
                $layoutSelected = isset($section['module'][0]['content'][0]['layout']) ? $section['module'][0]['content'][0]['layout'] : '';
                $layouts = [
                    'Grid 1',
                    'Grid 2',
                    'Grid 3',
                    'Grid 4',
                    'Grid 5',
                ];
            @endphp
            <select class="form-control form-select form-select-solid form-select-lg" name="layout">
                <option value="">Select Grid Type</option>
                @foreach ($layouts as $key => $value)
                <option value="{{Str::slug($value)}}" @if ($layoutSelected == Str::slug($value)) selected @endif>{{$value}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row mb-6">
        @php
            if(isset($section['module'][0]['content'][0]['multiple_content']) != null) {
                $json = $section['module'][0]['content'][0]['multiple_content'];
            } else {
                $json = '[]';
            }
        @endphp
        <label class="col-lg-4 col-form-label text-dark fs-6 required title">{{ __('Multiple Grid') }}</label>
        <div class="col-lg-8">
            <input class="form-control tagify" name="multiple_content" placeholder="Pilih Salah Satu" value="{{$json}}" data-kt-repeater="tagify"/>
        </div>
    </div>
</div>
@endforeach

@push('styles')
    <style>
        .popover {
            max-width: 800px;
        }
        .preview-image-article-grid {
            display: none;
        }

    </style>
@endpush

@push('scripts')
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            let typeLayoutElement = document.querySelectorAll('.select-type-layout');
            typeLayoutElement.forEach(typeLayout => {
                typeLayout.addEventListener('change', function(e) {
                    if (e.target.value != 'with-sidebar') {
                        e.target.closest('.article').querySelector('.sidebar_content').style.display = 'none';
                        e.target.closest('.article').querySelector('.sidebar_content_image').style.display = 'none';
                    } else {
                        e.target.closest('.article').querySelector('.sidebar_content').style.display = 'flex';
                        e.target.closest('.article').querySelector('.sidebar_content_image').style.display = 'flex';
                    }
                });
            });
            var popupOverLayoutInfo = document.querySelector('#popover_article_layout_grid')
            popupOverLayoutInfo.addEventListener('shown.bs.popover', function () {
                let layoutInfo = document.querySelectorAll('.layout-info');
                let layoutInfoPreview = document.querySelectorAll('.preview-image-article-grid');
                for (let index = 0; index < layoutInfo.length; index++) {
                    const popoverItem = layoutInfo[index];
                    popoverItem.addEventListener('mouseover', function(e) {
                        for (let ii = 0; ii < layoutInfoPreview.length; ii++) {
                            if (layoutInfoPreview[ii].classList.contains('d-block')) {
                                layoutInfoPreview[ii].classList.remove('d-block')
                                layoutInfoPreview[ii].classList.add('d-none')
                            }
                        }
                        if (layoutInfoPreview[index].classList.contains('d-none')) {
                            layoutInfoPreview[index].classList.remove('d-none')
                            layoutInfoPreview[index].classList.add('d-block')
                        }
                    });
                }
            })
        });
    </script>
@endpush