@extends('console_layouts.master')
@section('title')
    更新內容-作品展示
@endsection
@section('css')
    <link href="{{ URL::asset('assets/libs/@ckeditor/ckeditor5.css') }}" rel="stylesheet">
    <style>
        .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;
            height: 150px;
            position: relative;
            display: inline-block;
            border-radius: 20%;
            margin: 10px;
            cursor: move;
        }

        .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>
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
        @endslot
        @slot('title')
            更新內容-作品展示
        @endslot
    @endcomponent
    <div>
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label"  for="title-input">標題</label>
                        <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
                        <input type="text" class="form-control d-none" id="id-input" value="{{$product->id}}">
                        <input type="text" class="form-control" id="title_input" value="{{$product->title}}" placeholder="請輸入標題" maxlength="50">
                        <div class="invalid-feedback">請輸入項目名稱/標題</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label ">內容</label>
                        <div id="content_input" class="d-none editor">{{$product->content}}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">分類</label>
                        <select class=" mb-3" id="layer1-input" name="layer1" data-choices data-choices-search-false data-choices-sorting-false>
                            <option value="" >未分類</option>
                            @foreach ($layer as $layer1)
                                <option value="{{$layer1->id}}" @selected($product->layer1==$layer1->id)>{{$layer1->name}}</option>
                            @endforeach
                        </select>                        
                    </div>
                    @if (auth()->user()->hasRole('superuser'))
                    <div class="mb-3">
                        <label class="form-label" for="product-title-input">關鍵字</label>
                        <textarea class="form-control" id="keyword_input">{{$product->keyword}}</textarea>
                    </div>
                    @endif
                </div>
            </div>
            <!-- end card -->
            <div class="card image_edit_wrapper" data-max="1">
                <div class="card-header">
                    <h5 class="card-title mb-0">圖片</h5>
                <div class="card-body">
                    <div>
                        <h5 class="fs-14 mb-1"></h5>

                        <div class="p-2 row">
                            <div class="col-2 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" me="images[]" id="image-input" class="image-input" accept="image/*" onchange="image_upload_change_single(this)" >
                                </div>
                            </div>
                            <div class="preview col-10">
                                @if (isset($product->image))
                                @foreach ($product->image as $image)
                                <div class="image_preview" draggable="">
                                    <img src='{{asset("/storage/images/$image")}}' alt="" data-id="{{$image}}">
                                    <button class="del_btn ri-close-fill " onclick="delete_image(this, event)"></button>
                                </div>
                                @endforeach
                                @endif
                               
                            </div>
                            
                        </div>
                        <!-- end dropzon-preview -->
                    </div>
                </div>
            </div>
            <div class="text-end mb-3">
                <a href="{{locale_asset('console/product_list')}}">
                    <button type="button" id="cancel-button" class="btn btn-light w-sm">返回</button>
                </a>
                <button type="submit" id="save-button" class="btn btn-primary w-sm">儲存</button>
            </div>
            <!-- end card -->
        </div>
        <!-- end row -->
    </div>
@endsection
@section('script')
    <script type="module" src="{{ URL::asset('assets/libs/@ckeditor/creative8_ckeditor5.js') }}"></script>
    <script src="{{ URL::asset('assets/libs/dropzone/dropzone.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        const id = document.querySelector('#id-input');
        const save_button = document.querySelector('#save-button');
        const preview = document.querySelector('.preview');

        update_data = {};

        window.onload = function() {

        
        
            if(save_button){
                save_button.addEventListener('click',function(event){
                    event.preventDefault();
                    save();
                })
            }

            ClassicEditor.create(document.querySelector('#content_input'), editorConfig)
            .then(function (editor) {

                var content = document.querySelector('#content_input').innerText;
                editor.setData(content);
                editor.ui.view.editable.element.style.height = '200px';
                window.contentEditor = editor;
            })["catch"](function (error) {
                console.error(error);
            });

            document.querySelectorAll('.product_info_item .ckeditor_input').forEach((ckeditor_input)=>{
                ClassicEditor.create(ckeditor_input, editorConfig)
                    .then(function (editor) {
                            var content = ckeditor_input.innerText;
                            
                            editor.setData(content);
                            editor.ui.view.editable.element.style.height = '200px';

                            info_editorInstances[info_editor_index] = editor;
                            ckeditor_input.setAttribute('data-editor_id', info_editor_index);
                            info_editor_index++;

                        })["catch"](function (error) {
                            console.error(error);
                    });
            });

        }

        function add_product_info(){
            var product_info_item = document.createElement('div');
            product_info_item.className = 'product_info_item mb-3';

            product_info_item.innerHTML = `
            <div class="row ps-3">
                    <div class=" col-md-11 card p-4 bg-body">
                        <div class="row">
                            <div class="mb-3">
                                <label class="form-label">名稱</label>
                                <input type="text" class="form-control tag-name-input" value="">
                            </div>
                            <div class="mb-3">
                                <div>
                                    <label class="form-label">內容</label>
                                    <div class="content-input ckeditor_input"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 d-flex justify-content-center align-items-center">
                        <div class="product_info_item_delete_btn btn btn-light" role="button" onclick="delete_product_info(this)">刪除</div>
                    </div>
                </div>
            `;
            product_info_wrapper.appendChild(product_info_item);

            ClassicEditor.create(product_info_item.querySelector('.ckeditor_input'), editorConfig)
                .then(function (editor) {
                    editor.setData('');
                    editor.ui.view.editable.element.style.height = '200px';

                    info_editorInstances[info_editor_index] = editor;
                    product_info_item.querySelector('.ckeditor_input').setAttribute('data-editor_id', info_editor_index);
                    info_editor_index++;

                })["catch"](function (error) {
                    console.error(error);
                });

        }
        
        function delete_product_info(dom){
            dom.closest('.product_info_item').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 (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() {
                    var response = JSON.parse(this.responseText);
                    if (this.status === 200 && this.responseText) { // 確認狀態碼是 200
                        if (response.success) {             
                            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);
                            image_upload.value = '';            
                        }else{
                            errorSwal(response.message);        
                        }        
                    }else{
                        errorSwal(response.message);        
                    };
                }
                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 preview = document.querySelector('.preview');
            var image_dom = document.createElement('div');
            image_dom.className = "image_preview";
            image_dom.draggable = "true";
            image_dom.style.cursor = "move";
            image_dom.innerHTML = `
            <img 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 title = document.querySelector('#title_input').value;
            var content = window.contentEditor.getData();   
            var images = get_images();
            var layer1 = document.querySelector('#layer1-input').value;

            update_data.title = title;
            update_data.content = content;  
            update_data.images = images;
            update_data.product_info = get_product_info();
            update_data.layer1 = layer1;
            @if (auth()->user()->hasRole('superuser'))
            var keyword = document.querySelector('#keyword_input').value;
            update_data.keyword = keyword;
            @endif

            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(){
                            location.reload();
                    });                        
                    }else{
                        errorSwal(response.message);        
                    }
                }else{
                    errorSwal(response.message);        
                    location.reload();
                }
            }
            xhttp.open("POST", '{{locale_api("product_update/$product->id")}}', 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(){
            var image_previews = document.querySelectorAll('.image_preview');
            var images = [];
            
            image_previews.forEach((preview, index)=>{

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

            return images;
        }

        function get_product_info(){
            var product_info_items = document.querySelectorAll('.product_info_item');
            var product_info = [];
            
            product_info_items.forEach((product_info_item)=>{
                var info = {};
                var editor_id = product_info_item.querySelector('.ckeditor_input').getAttribute('data-editor_id');
                info.name = product_info_item.querySelector('.tag-name-input').value;
                info.content = info_editorInstances[editor_id].getData();
                product_info.push(info);
            });

            return product_info;
        }



    </script>
@endsection