@extends('console_layouts.master')
@section('title')
Banner設定
@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')
        Banner設定
        @endslot
        @endcomponent
        <div class="row">
            <div class="card image_edit_wrapper about-banner" data-max="1">
                <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="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(this)">
                                </div>
                            </div>
                            <div class="preview col-11">
                                @if(isset($banner['about']->image )&& $banner['about']->image!="")
                                <div class="image_preview w-100" style="cursor: move;">
                                    <img class="w-100" src="{{locale_storage('images/'.$banner['about']->image)}}" data-id="{{$banner['about']->image}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endif
                            </div>
                            
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
            <!-- end card -->

            
            <div class="card image_edit_wrapper product-banner" data-max="1">
                <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="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(this)">
                                </div>
                            </div>
                            <div class="preview col-11">
                                @if(isset($banner['product']->image))
                                <div class="image_preview w-100" style="cursor: move;">
                                    <img class="w-100" src="{{locale_storage('images/'.$banner['product']->image)}}" data-id="{{$banner['product']->image}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endif
                            </div>
                            
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
            <!-- end card -->
            <div class="card image_edit_wrapper faq-banner" data-max="1">
                <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="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(this)">
                                </div>
                            </div>
                            <div class="preview col-11">
                                @if(isset($banner['faq']->image))
                                <div class="image_preview w-100" style="cursor: move;">
                                    <img class="w-100" src="{{locale_storage('images/'.$banner['faq']->image)}}" data-id="{{$banner['faq']->image}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endif
                            </div>
                            
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
            <!-- end card -->
            <div class="card image_edit_wrapper contact-banner" data-max="1">
                <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="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(this)">
                                </div>
                            </div>
                            <div class="preview col-11">
                                @if(isset($banner['contact']->image))
                                <div class="image_preview w-100" style="cursor: move;">
                                    <img class="w-100" src="{{locale_storage('images/'.$banner['contact']->image)}}" data-id="{{$banner['contact']->image}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endif
                            </div>
                            
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
            <!-- end card -->
        </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 about_banner = document.querySelector('.about-banner');
    const product_banner = document.querySelector('.product-banner');
    const faq_banner = document.querySelector('.faq-banner');
    const contact_banner = document.querySelector('.contact-banner');


    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.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.about = get_images(about_banner);
        update_data.faq = get_images(faq_banner);
        update_data.product = get_images(product_banner);
        update_data.contact = get_images(contact_banner);
        
        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/banner")}}'
                });                        
                }else{
                    errorSwal(response.message);        
                }
            }else{
                errorSwal(response.message);        
                location.reload();
            }
        }
        xhttp.open("POST", '{{locale_api("banner")}}', 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_images(dom){
        var image_previews = dom.querySelectorAll('.image_preview');
        var images = [];

        image_previews.forEach((preview, index)=>{

            var img_dom = preview.querySelector('img');
            images.push(img_dom.dataset.id);
        });

        return images;
    }

    </script>
@endsection