@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;
            height: 100%;
            /* 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;
        }
    </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 block_1">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title mb-0">
                        區塊一</div>
                </div>
                <div class="card-body " id="block_1-content">
                    <div>   
                        <div class="block_1-edit-wrapper mb-3">
                            <label class=" d-flex justify-content-between align-items-center">文章區塊
                                <div class=" btn btn-success block_1-add-btn" role="button">
                                    <i class="ri-add-fill"></i> 新增
                                </div>
                            </label>
                            <div class="block_1-wrapper">
                                @foreach ($blocks['block_1']['features'] as $feature)
                                    <div class="block 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="{{ $feature->title }}" 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_block_1_feature(this)">刪除</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card block_2">
                <div class="card-header d-flex justify-content-between" >
                    <div class="card-title mb-0">
                        區塊二</div>
                </div>
                <div class="card-body about-block " id="about-content">
                    <div class="mb-3">
                        <label class="form-label">標題</label>
                        <input type="text" class="form-control title-input" value="{{ $blocks['block_2']->title }}"
                            maxlength="100">
                    </div>
                    <div class="mb-3">
                        <div>
                            <label class="form-label">副標題</label>
                            <input type="text" class="form-control subtitle-input" value="{{ $blocks['block_2']->subtitle }}"
                                maxlength="100">
                        </div>
                    </div>
                    <div class="row mb-3 block_2-feature-edit-wrapper">
                        <label class=" d-flex  align-items-center">特色（可拖曳移動順序）
                            <div class=" btn btn-success block_2-feature-add-btn" role="button">
                                <i class="ri-add-fill"></i> 新增
                            </div>
                        </label>
                        <div class="block_2-feature-wrapper ">
                            @foreach ($blocks['block_2']['features'] as $feature)
                                <div class="block_2-feature row mb-3">
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control block_2-feature-input" value="{{ $feature }}"
                                            maxlength="200">
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="btn btn-light" role="button" onclick="delete_block_2_feature(this)">刪除</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-5">
                        <div>
                            <label class="form-label">內容</label>
                            <textarea class="form-control description-input">{{ $blocks['block_2']['description'] }}</textarea>
                        </div>
                    </div>

                    <div class="mb-3 block2-bg-block">
                        <label class="card-title mb-0">
                            背景圖片(圖片大小限制1MB以內)</label>
                        <div class="card-body">
                            <div>
                                <h5 class="fs-14 mb-1"></h5>
                                <div class="image_edit_wrapper 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['block_2']['image'][0]))
                                        <div class="image_preview" style="cursor: move;">
                                            <img class="w-100" src="{{locale_storage('images/'.$blocks['block_2']['image'][0])}}" data-id="{{$blocks['block_2']['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>
        <div class="text-end mb-3">
            <button type="submit" id="save-button" class="btn btn-primary w-sm" onclick="save()">儲存</button>
        </div>
        <!-- end row -->

@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 add_image_button = document.querySelector('.image-upload-button');
    const preview = document.querySelector('.preview');
    const previews = document.querySelectorAll('.preview');

    const block_1 = document.querySelector('.block_1');
    const block_1_add_button = document.querySelector('.block_1-add-btn');
    const block_2_feature_add_button = document.querySelector('.block_2-feature-add-btn');
    const block_2 = document.querySelector('.block_2');



    window.onload = function() {

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

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

        block_1_add_button.addEventListener('click', function() {
                var block_1_wrapper = this.closest('.block_1-edit-wrapper').querySelector('.block_1-wrapper');
                var new_block_1 = `
               <div class="block 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 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="block_1-delete-btn btn btn-light" role="button" onclick="delete_block_1(this)">刪除</div>
                        </div>
                    </div>
                </div>
            `;

                block_1_wrapper.insertAdjacentHTML("beforeend", new_block_1);
            })

           
    
            block_2_feature_add_button.addEventListener('click', function() {
                var block_2_feature_wrapper = this.closest('.block_2-feature-edit-wrapper').querySelector('.block_2-feature-wrapper');
                var new_block_2_feature = `<div class="block_2-feature row mb-3">
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control block_2-feature-input" value="" maxlength="200">
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="btn btn-light" role="button" onclick="delete_block_2_feature(this)">刪除</div>
                                    </div>                                    
                                </div>`;
                block_2_feature_wrapper.insertAdjacentHTML("beforeend", new_block_2_feature);
            });
        }

   
        function delete_block_1(btn) {
        var block = btn.closest('.block');
        block_1.remove();
    }

    function delete_block_1_feature(btn) {
        var block_1_feature = btn.closest('.block');
        block_1_feature.remove();
    }

    function delete_block_2_feature(btn) {
        var block_2_feature = btn.closest('.block_2-feature');
        block_2_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');
      
        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.innerHTML = "";
                    preview_area.appendChild(preview_image);

                    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 preview = document.querySelector('.preview');
        var image_dom = document.createElement('div');
        image_dom.className = "image_preview w-100";
        image_dom.draggable = "true";
        image_dom.style.cursor = "move";
        image_dom.innerHTML = `
        <img class="w-100" 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.block_1 = get_block_1();
        update_data.block_2 = get_block_2();

        
        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(){
                    window.location = '{{locale_asset("console/about")}}'
                });                        
                }else{
                    errorSwal(response.message);        
                }
            }else{
                errorSwal(response.message);        
                location.reload();
            }
        }
        xhttp.open("POST", '{{locale_api("about")}}', 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_block_1() {

        var block_1_data = {};
        block_1_data.features = [];

        var block_1s = block_1.querySelectorAll('.block');

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

                return data;
            });
        }

        return block_1_data;
    }

    function get_block_2() {
        var block_2_data = {};
        
        block_2_data.title = block_2.querySelector('.title-input').value;
        block_2_data.subtitle = block_2.querySelector('.subtitle-input').value;
        block_2_data.description = block_2.querySelector('.description-input').value;
        block_2_data.features = [];
        block_2_data.image = [];

        var block_2s = block_2.querySelectorAll('.block_2-feature');
        if (block_2s) {
            block_2_data.features = Array.from(block_2s).map((block) => {
                return block.querySelector('.block_2-feature-input').value;
            });
        }

        var previews = block_2.querySelectorAll('.image_preview');
        if (previews) {
            block_2_data.image = get_images(block_2);
        }

        return block_2_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;
    }

    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);
        }
    </script>
@endsection