@extends('console_layouts.master')
@section('title')
    首頁設定
@endsection
@section('css')
    <link href="{{ asset('assets/libs/@ckeditor/ckeditor5.css') }}" rel="stylesheet">

    <style>
        .item-index>h5 {
            text-align: center;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            background-color: rgb(123, 112, 161);
            color: rgb(215, 218, 250);
            padding-block: 15%;
        }

        .image-input {
            display: none;
        }

        .image-upload-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            cursor: pointer;
            border-radius: 50%;

        }

        .image-upload-button .icon {
            font-size: 25px;
        }

        .image_preview {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            display: inline-block;
            border-radius: 20%;
            margin: 10px;
        }

        .image_preview img {
            display: block;
            max-height: 200px;
            /* Adjust width as necessary */
            border-radius: 1em;
        }

        .del_btn {
            position: absolute;
            top: 1%;
            right: 1%;
            color: white;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        .del_btn:hover {
            transform: scale(1.1);
            /* Increase size slightly */
            transition: transform .1s ease;
        }

        .brand-block .image_preview {
            max-width: 200px;
        }

        .review .image_preview {
            height: 100px;
            width: 100px;
        }

        .review .image_preview img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .step-block .preview {
            min-height: 300px;
            border: 1px solid rgba(128, 128, 128, 0.27);
        }
    </style>
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('title')
            首頁
        @endslot
    @endcomponent
    <div class="row">
        <div class="card banner-block">
            <div class="card-header d-flex justify-content-between" data-bs-toggle="collapse" href="#banner-content">
                <div class="card-title mb-0">
                    輪播圖（限5筆，可拖曳調整順序）</div>
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="card-body collapse" id="banner-content">
                <div class="d-flex justify-content-end mb-3">
                    <div class="btn btn-success banner-add-btn " role="button">
                        <i class="ri-add-fill"></i>新增輪播圖
                    </div>
                </div>
                <div class="banners-wrapper ">
                    @foreach ($blocks['banner'] as $banner)
                        <div class="banner mb-3">
                            <div class="row ps-3">
                                <div class=" col-md-11 card p-4 bg-body">
                                    <div class="row">
                                        <div class=" col-md-8">
                                            <div class="mb-3">
                                                <label class="form-label">標題</label>
                                                <input type="text" class="form-control title-input"
                                                    value="{{ $banner->title }}" maxlength="100">
                                            </div>
                                        </div>
                                        <div class=" col-md-4">
                                            <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                            <div class="">
                                                <div class="image_edit_wrapper">
                                                    <div class="preview">
                                                        @if(isset($banner->image[0]))
                                                        <div class="image_preview">
                                                            <img src="{{ locale_storage('images/' . $banner->image[0]) }}"
                                                                class="img-fluid" alt=""
                                                                data-id="{{ $banner->image[0] }}">
                                                            <button class="del_btn ri-close-fill "
                                                                onclick="delete_image(this, event)"></button>
                                                        </div>
                                                        @endif
                                                    </div>
                                                    <div class="p-2">
                                                        <div class="image-upload-button btn btn-outline-primary w-100 h-auto"
                                                            onclick="image_upload_click(this)">
                                                            上傳圖片
                                                            <input type="file" name="images[]" id="image-input"
                                                                class="image-input" accept="image/*"
                                                                onchange="image_upload_change_single(this)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1 d-flex justify-content-center align-items-center">
                                    <i class="ri-sortable text-primary"></i>
                                    <div class="btn btn-light banner-delete-btn" role="button"
                                        onclick="delete_banner(this)">刪除</div>
                                </div>

                            </div>
                        </div>
                    @endforeach

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

        <div class="card about-block">
            <div class="card-header d-flex justify-content-between" data-bs-toggle="collapse" href="#about-content">
                <div class="card-title mb-0">
                    關於我們</div>
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="card-body about-block collapse" id="about-content">
                <div class="mb-3">
                    <label class="form-label">標題</label>
                    <input type="text" class="form-control title-input" value="{{ $blocks['about']->title }}"
                        maxlength="100">
                </div>
                <div class="mb-3">
                    <div>
                        <label class="form-label">內容</label>
                        <textarea class="form-control content-input">{{ $blocks['about']->content }}</textarea>
                    </div>
                </div>
                <div class="row mb-4 ps-3">圖片（圖片大小限制1MB以內，最多10張）</div>
                <div class="row  mb-3">
                    <div class="image_edit_wrapper" data-max="10">
                        <div class="ps-5 row">
                            <div class="col-md-1 d-flex align-items-center p-1">
                                <div class="image-upload-button bg-success text-white" onclick="image_upload_click(this)">
                                    <div class="icon ri-upload-2-fill"></div>
                                    <input type="file" name="images[]" class="image-input" accept="image/*"
                                        onchange="image_upload_change(this)" multiple>
                                </div>
                            </div>
                            <div class="preview col-md-11">
                                @foreach ($blocks['about']['image'] as $image)
                                    <div class="image_preview">
                                        <img class='w-100' src='{{ locale_storage("images/$image") }}' alt=""
                                            data-id="{{ $image }}">
                                        <button class="del_btn ri-close-fill "
                                            onclick="delete_image(this, event)"></button>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card cottontype-block">
            <div class="card-header d-flex justify-content-between" data-bs-toggle="collapse" href="#cottontype-content">
                <div class="card-title mb-0">
                    棉類介紹</div>
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="card-body collapse" id="cottontype-content">
                <div>
                    <div class="cottontype-edit-wrapper mb-3">
                        <label class=" d-flex justify-content-between align-items-center">棉類
                            <div class=" btn btn-success cottontype-add-btn" role="button">
                                <i class="ri-add-fill"></i> 新增
                            </div>
                        </label>
                        <div class="cottontype-wrapper">
                            @foreach ($blocks['cottontype']['cottontypes'] as $cottontype)
                                <div class="cottontype mb-3">
                                    <div class="row ps-3">
                                        <div class=" col-md-11 card p-4 bg-body">
                                            <div class="row">
                                                <div class=" col-md-8">
                                                    <div class="mb-3">
                                                        <label class="form-label">名稱</label>
                                                        <input type="text" class="form-control name-input"
                                                            value="{{ $cottontype->name }}" maxlength="100">
                                                    </div>
                                                    <div class="mb-3">
                                                        <div>
                                                            <label class="form-label">說明</label>
                                                            <textarea class="form-control description-input"  rows="5">{{ $cottontype->description }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class=" col-md-4">
                                                    <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                                    <div class="">
                                                        <div class="image_edit_wrapper">
                                                            <div class="preview">
                                                                @if(isset($cottontype->image[0]))
                                                                <div class="image_preview">
                                                                    <img src="{{ locale_storage('images/' . $cottontype->image[0]) }}"
                                                                        class="img-fluid" alt=""
                                                                        data-id="{{ $cottontype->image[0] }}">
                                                                    <button class="del_btn ri-close-fill "
                                                                        onclick="delete_image(this, event)"></button>
                                                                </div>
                                                                @endif
                                                            </div>
                                                            <div class="p-2">
                                                                <div class="image-upload-button btn btn-outline-primary w-100 h-auto"
                                                                    onclick="image_upload_click(this)">
                                                                    上傳圖片
                                                                    <input type="file" name="images[]"
                                                                        id="image-input" class="image-input"
                                                                        accept="image/*"
                                                                        onchange="image_upload_change_single(this)">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                                            <div class="cottontype-delete-btn btn btn-light" role="button"
                                                onclick="delete_cottontype(this)">刪除</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card feature-block">
            <div class="card-header d-flex justify-content-between" data-bs-toggle="collapse" href="#feature-content">
                <div class="card-title mb-0">
                    特色介紹</div>
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="card-body collapse" id="feature-content">
                <div>
                    <div class="mb-3">
                        <label class="form-label">標題</label>
                        <input type="text" class="form-control title-input" value="{{ $blocks['feature']->title }}"
                            maxlength="100">
                    </div>
                    <div class="feature-edit-wrapper mb-3">
                        <label class=" d-flex justify-content-between align-items-center">特色
                            <div class=" btn btn-success feature-add-btn" role="button">
                                <i class="ri-add-fill"></i> 新增
                            </div>
                        </label>
                        <div class="feature-wrapper">
                            @foreach ($blocks['feature']['features'] as $feature)
                                <div class="feature mb-3">
                                    <div class="row ps-3">
                                        <div class=" col-md-11 card p-4 bg-body">
                                            <div class="row">
                                                <div class=" col-md-8">
                                                    <div class="mb-3">
                                                        <label class="form-label">名稱</label>
                                                        <input type="text" class="form-control name-input"
                                                            value="{{ $feature->name }}" maxlength="100">
                                                    </div>
                                                    <div class="mb-3">
                                                        <div>
                                                            <label class="form-label">說明</label>
                                                            <textarea class="form-control description-input"  rows="5">{{ $feature->description }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class=" col-md-4">
                                                    <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                                    <div class="">
                                                        <div class="image_edit_wrapper">
                                                            <div class="preview">
                                                                @if(isset($feature->image[0]))
                                                                <div class="image_preview">
                                                                    <img src="{{ locale_storage('images/' . $feature->image[0]) }}"
                                                                        class="img-fluid" alt=""
                                                                        data-id="{{ $feature->image[0] }}">
                                                                    <button class="del_btn ri-close-fill "
                                                                        onclick="delete_image(this, event)"></button>
                                                                </div>
                                                                @endif
                                                            </div>
                                                            <div class="p-2">
                                                                <div class="image-upload-button btn btn-outline-primary w-100 h-auto"
                                                                    onclick="image_upload_click(this)">
                                                                    上傳圖片
                                                                    <input type="file" name="images[]"
                                                                        id="image-input" class="image-input"
                                                                        accept="image/*"
                                                                        onchange="image_upload_change_single(this)">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                                            <div class="feature-delete-btn btn btn-light" role="button"
                                                onclick="delete_feature(this)">刪除</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card footer-block">
            <div class="card-header d-flex justify-content-between" data-bs-toggle="collapse" href="#footer-content">
                <div class="card-title mb-0">
                    頁尾圖片</div>
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="card-body footer-block collapse" id="footer-content">
                <div class="card-header">
                    <h5 class="card-title mb-0">圖片大小限制1MB以內</h5>
                </div>
                <div class="card-body">
                    <div>
                        <h5 class="fs-14 mb-1"></h5>

                        <div class="image_edit_wrapper ps-5 row">
                            <div class="col-1 d-flex align-items-center p-1">
                                <div class="image-upload-button bg-success text-light" onclick="image_upload_click(this)">
                                    <div class="icon ri-upload-2-fill"></div>
                                    <input type="file" name="images[]" id="image-input" class="image-input" accept="image/*" onchange="image_upload_change_single(this)">
                                </div>
                            </div>
                            <div class="preview col-11">
                                @if(isset($blocks['footer']['image'][0]))
                                <div class="image_preview" style="cursor: move;">
                                    <img class="w-100" src="{{locale_storage('images/'.$blocks['footer']['image'][0])}}" data-id="{{$blocks['footer']['image'][0]}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endif
                            </div>
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="text-end mb-3">
        <button type="submit" id="save-button" class="btn btn-primary w-sm" onclick="save()">儲存</button>
    </div>
@endsection
@section('script')
    <script type="module" src="{{ asset('assets/libs/@ckeditor/creative8_ckeditor5.js') }}"></script>
    <script src="{{ asset('assets/libs/sortablejs/sortablejs.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <script>
        const banner_add_btn = document.querySelector('.banner-add-btn');
        const add_image_button = document.querySelector('.image-upload-button');
        const cottontype_add_button = document.querySelector('.cottontype-add-btn');
        const feature_add_button = document.querySelector('.feature-add-btn');

        const banner_block = document.querySelector('.banner-block');
        const banners_wrapper = document.querySelector('.banners-wrapper');
        const about_block = document.querySelector('.about-block');
        const cottontype_block = document.querySelector('.cottontype-block');
        const feature_block = document.querySelector('.feature-block');
        const footer_block = document.querySelector('.footer-block');

        window.onload = function() {

            Sortable.create(document.querySelector('.banner-block .banners-wrapper'), {
                animation: 150
            });

            Sortable.create(document.querySelector('.about-block .preview'), {
                animation: 150
            });

            Sortable.create(document.querySelector('.cottontype-block .cottontype-wrapper'), {
                animation: 150
            });

            Sortable.create(document.querySelector('.feature-block .feature-wrapper'), {
                animation: 150
            });

            cottontype_add_button.addEventListener('click', function() {
                var cottontype_wrapper = this.closest('.cottontype-edit-wrapper').querySelector('.cottontype-wrapper');
                var new_cottontype = `
               <div class="cottontype mb-3">
                    <div class="row ps-3">
                        <div class=" col-md-11 card p-4 bg-body">
                            <div class="row">
                                <div class=" col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label">名稱</label>
                                        <input type="text" class="form-control name-input" value="" maxlength="100">    
                                    </div>
                                    <div class="mb-3">
                                        <div>
                                            <label class="form-label">說明</label>
                                            <textarea class="form-control description-input" rows="5"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-md-4">
                                    <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                    <div class="">
                                        <div class="image_edit_wrapper">
                                            <div class="preview">
                                            </div>
                                            <div class="p-2">
                                                    <div class="image-upload-button btn btn-outline-primary w-100 h-auto" onclick="image_upload_click(this)">
                                                        上傳圖片
                                                        <input type="file" name="images[]" id="image-input" class="image-input" accept="image/*" onchange="image_upload_change_single(this)">
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                            <div class="cottontype-delete-btn btn btn-light" role="button" onclick="delete_cottontype(this)">刪除</div>
                        </div>
                    </div>
                </div>
            `;

                cottontype_wrapper.insertAdjacentHTML("beforeend", new_cottontype);
            })

            feature_add_button.addEventListener('click', function() {
                var feature_wrapper = this.closest('.feature-edit-wrapper').querySelector('.feature-wrapper');
                var new_feature = `
               <div class="feature mb-3">
                    <div class="row ps-3">
                        <div class=" col-md-11 card p-4 bg-body">
                            <div class="row">
                                <div class=" col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label">標題</label>
                                        <input type="text" class="form-control name-input" value="">    
                                    </div>
                                    <div class="mb-3">
                                        <div>
                                            <label class="form-label">說明</label>
                                            <textarea class="form-control description-input" maxlength="100" rows="5"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-md-4">
                                    <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                    <div class="">
                                        <div class="image_edit_wrapper">
                                            <div class="preview">
                                            </div>
                                            <div class="p-2">
                                                    <div class="image-upload-button btn btn-outline-primary w-100 h-auto" onclick="image_upload_click(this)">
                                                        上傳圖片
                                                        <input type="file" name="images[]" id="image-input" class="image-input" accept="image/*" onchange="image_upload_change_single(this)">
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                            <div class="feature-delete-btn btn btn-light" role="button" onclick="delete_feature(this)">刪除</div>
                        </div>
                    </div>
                </div>
            `;

                feature_wrapper.insertAdjacentHTML("beforeend", new_feature);
            })

            banner_add_btn.addEventListener('click', function() {
                var existing_banner_count = document.querySelectorAll('.banner').length;
                if (existing_banner_count > 4) {
                    infoSwal('輪播圖數量已達上限');
                    return;
                }

                var new_banner = `
                <div class="banner mb-3">
                    <div class="row ps-3">
                        <div class=" col-md-11 card p-4 bg-body">
                            <div class="row">
                                <div class=" col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label">標題</label>
                                        <input type="text" class="form-control title-input" value="" maxlength="100">    
                                    </div>
                                </div>
                                <div class=" col-md-4">
                                    <div class="text-sm mb-3">圖片（圖片大小限制1MB以內）</div>
                                    <div class="">
                                        <div class="image_edit_wrapper">
                                            <div class="preview">
                                            </div>
                                            <div class="p-2">
                                                    <div class="image-upload-button btn btn-outline-primary w-100 h-auto" onclick="image_upload_click(this)">
                                                        上傳圖片
                                                        <input type="file" name="images[]" id="image-input" class="image-input" accept="image/*" onchange="image_upload_change_single(this)">
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                            <div class="banner-delete-btn btn btn-light" role="button" onclick="delete_banner(this)">刪除</div>
                        </div>
                    </div>
                </div>
            `;
                banners_wrapper.insertAdjacentHTML("beforeend", new_banner);

            });

        }

        function delete_banner(btn) {
            var banner = btn.closest('.banner');
            banner.remove();
        }


        function delete_cottontype(btn) {
            var cottontype = btn.closest('.cottontype');
            cottontype.remove();
        }

        function delete_feature(btn) {
            var feature = btn.closest('.feature');
            feature.remove();
        }

        function image_upload_click(dom) {
            dom.querySelector('.image-input').click();
        }

        function image_upload_change(image_upload) {

            var preview = image_upload.closest('.image_edit_wrapper').querySelector('.preview');
            var image_max_count = image_upload.closest('.image_edit_wrapper').dataset.max;
            var existing_image_count = preview.querySelectorAll('.image_preview').length;

            if (image_max_count && existing_image_count + image_upload.files.length > image_max_count) {
                Swal.fire({
                    title: "選取圖片超過數量",
                    icon: "error",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                })

                image_upload.value = '';
                return;
            }


            for (var i = 0; i < image_upload.files.length; i++) {

                var formData = new FormData();
                formData.append('image', image_upload.files[i]);

                var xhttp = new XMLHttpRequest();
                xhttp.onload = function() {
                    if (this.status === 200 && this.responseText) { // 確認狀態碼是 200
                        var response = JSON.parse(this.responseText);
                        var preview_area = image_upload.closest('.image_edit_wrapper').querySelector('.preview');
                        var preview_image = make_preview_image(response.file_path, response.file_name + response
                            .extension);
                        preview_area.appendChild(preview_image);

                    }else
                    {
                        var response = JSON.parse(this.responseText);
                        errorSwal(response.message);

                    }

                    image_upload.value = '';

                }
                xhttp.open("POST", "{{ locale_api('upload_image') }}", true);
                xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
                xhttp.send(formData);
            }

        }

        function image_upload_change_single(image_upload) {
            var preview = image_upload.closest('.image_edit_wrapper').querySelector('.preview');

            var formData = new FormData();
            formData.append('image', image_upload.files[0]);

            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.status === 200 && this.responseText) { // 確認狀態碼是 200
                    var response = JSON.parse(this.responseText);
                    var preview_area = image_upload.closest('.image_edit_wrapper').querySelector('.preview');
                    var preview_image = make_preview_image(response.file_path, response.file_name + response
                        .extension);
                    preview_area.innerHTML = "";
                    preview_area.appendChild(preview_image);
                }else
                {
                    var response = JSON.parse(this.responseText);
                    errorSwal(response.message);
                }

                image_upload.value = '';

            }
            xhttp.open("POST", "{{ locale_api('upload_image') }}", true);
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(formData);
        }

        function make_preview_image(file_path, file_name) {

            var image_dom = document.createElement('div');
            image_dom.className = "image_preview";
            image_dom.draggable = "true";
            image_dom.style.cursor = "move";
            image_dom.innerHTML = `
        <img class="img-fluid" src="${file_path}" data-id="${file_name}" alt="圖片">
        <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
        `;

            return image_dom;
        }

        function delete_image(del_btn, e) {
            e.preventDefault();
            var image_preview = del_btn.closest('.image_preview');
            image_preview.remove();
        }

        function save() {

            var update_data = {};

            update_data.banner_block = get_banner();
            update_data.about_block = get_about();
            update_data.cottontype_block = get_cottontype();
            update_data.feature_block = get_feature();
            update_data.footer_block = get_footer();
            
            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                var response = JSON.parse(this.responseText);
                if (this.readyState == 4 && this.status == 200) {
                    if (response.success) {
                        successSwal(response.message, function() {});
                    } else {
                        errorSwal(response.message);
                    }
                } else {
                    errorSwal(response.message);
                    location.reload();
                }
            }
            xhttp.open("POST", '{{ locale_api("home") }}', true);
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhttp.send(JSON.stringify(update_data));
        }

        function get_banner() {

            var banner_data = {};
            var banners = banner_block.querySelectorAll('.banner');
            banners = Array.from(banners).map((banner) => {
                var data = {};
                data.title = banner.querySelector('.title-input').value;
                data.image = [];
                var previews = banner.querySelectorAll('.image_preview');
                if (previews) {
                    data.image = get_images(banner);
                }

                return data;
            });

            banner_data.banners = banners;
            return banner_data;
        }

        function get_about() {

            var about_data = {};
            about_data.title = about_block.querySelector('.title-input').value;
            about_data.content = about_block.querySelector('.content-input').value;
            about_data.image = [];
            var previews = about_block.querySelectorAll('.image_preview');
            if (previews) {
                about_data.image = get_images(about_block);
            }

            return about_data;
        }

        function get_cottontype() {

            var cottontype_data = {};
            cottontype_data.cottontypes = [];

            var cottontypes = cottontype_block.querySelectorAll('.cottontype');

            if (cottontypes) {
                cottontype_data.cottontypes = Array.from(cottontypes).map((cottontype) => {
                    var data = {};
                    data.name = cottontype.querySelector('.name-input').value;
                    data.description = cottontype.querySelector('.description-input').value;
                    data.image = [];
                    var previews = cottontype.querySelectorAll('.image_preview');
                    if (previews) {
                        data.image = get_images(cottontype);
                    }

                    return data;
                });
            }

            return cottontype_data;
        }

        function get_feature() {

            var feature_data = {};
            feature_data.title = feature_block.querySelector('.title-input').value;
            feature_data.features = [];

            var features = feature_block.querySelectorAll('.feature');

            if (features) {
                feature_data.features = Array.from(features).map((feature) => {
                    var data = {};
                    data.name = feature.querySelector('.name-input').value;
                    data.description = feature.querySelector('.description-input').value;
                    data.image = [];
                    var previews = feature.querySelectorAll('.image_preview');
                    if (previews) {
                        data.image = get_images(feature);
                    }

                    return data;
                });
            }

            return feature_data;
        }

        function get_footer() {
            var footer_data = {};
            footer_data.image = [];
            var previews = footer_block.querySelectorAll('.image_preview');
            if (previews) {
                footer_data.image = get_images(footer_block);
            }
            return footer_data;
        }

        function get_images(dom) {

            var images = [];
            var image_previews = dom.querySelectorAll('.image_preview');

            if (image_previews) {
                images = Array.from(image_previews).map((preview) => {
                    var img_dom = preview.querySelector('img');
                    return img_dom.dataset.id;
                });
            }

            return images;
        }
    </script>
@endsection