@extends('console_layouts.master')
@section('title')
    作品展示-分類管理
@endsection
@section('css')
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            列表管理
        @endslot
        @slot('title')
            作品展示-分類管理
        @endslot
    @endcomponent
    <div class="row justify-content-center mb-5">
        <div class="col-lg-7">
                <div class="layer1-wrapper">
                    @foreach ($layer as $layer1)
                    <div class="layer1 card mb-4 px-3" role="button">
                        <div class="card-body col-12">        
                            <div class="col-12">
                                <div class="input-group mb-3">
                                    <span class="input-group-text">分類名稱</span>
                                    <input type="text" class="form-control layer1-name" placeholder="輸入分類名稱" value="{{$layer1->name}}" data-layer1_id="{{$layer1->id}}">
                                    <button class="btn btn-danger" onclick="delete_layer1(this)">刪除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    <!-- end card -->
                </div>
                <div class="row">
                    <div class="input-group mb-3 p-3">
                        <input id="new_layer1_input" class="form-control col-8" type="text" placeholder="請輸入新增的分類名">
                        <button class="btn btn-success" onclick="create_layer1()">新增</button>
                    </div>
                </div>
                <!-- 儲存按鈕 -->
                <div class="text-end mt-5">
                    <a href="{{locale_asset('console/product_list')}}" class="btn btn-light w-sm">返回</a>
                    <button type="submit" class="btn btn-primary w-sm" onclick="save()">儲存</button>
                </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="{{ URL::asset('assets/libs/sortablejs/sortablejs.min.js') }}"></script>

    <script>
        const layer1_wrapper = document.querySelector('.layer1-wrapper');

        Sortable.create(layer1_wrapper, {
            animation: 150
        });


        function create_layer1(){
            var new_layer1_name = document.querySelector('#new_layer1_input').value;
            if(!new_layer1_name)
            {
                infoSwal('請輸入要新增的分類名稱');
                return;
            }
            
            var layer1_list = document.querySelectorAll('.layer1-name');
            for(var i=0; i<layer1_list.length; i++)
            {
                if(layer1_list[i].value == new_layer1_name){

                    infoSwal(`主分類 [${new_layer1_name}] 已存在`);
                    return;
                }
            }

            layer1_wrapper.innerHTML += `
                <div class="layer1 card mb-4 px-3">
                    <div class="card-body col-12">        
                        <div class="col-12">
                            <div class="input-group mb-3">
                                <span class="input-group-text">分類名稱</span>
                                <input type="text" class="form-control layer1-name" placeholder="輸入分類名稱" value="${new_layer1_name}">
                                <button class="btn btn-danger" onclick="delete_layer1(this)">刪除</button>
                            </div>
                        </div>  
                    </div>
                </div>
            `;
                
            document.querySelector('#new_layer1_input').value = "";

        }

        function delete_layer1(btn){

            var layer_name = btn.closest('.layer1').querySelector('.layer1-name').value;
            confirmDeleteSwal(`主分類 [${layer_name}]`,  function(){
                btn.closest('.layer1').remove();
            });
        }

        function save(collection_id){
            var layer1_dom_list = document.querySelectorAll('.layer1');
            var layer = [];

            for (let element of layer1_dom_list){
                var layer1 = {};
                layer1.name = element.querySelector(".layer1-name").value;
                layer1.id = element.querySelector(".layer1-name").dataset.layer1_id;
                
                if(!layer1.name)
                {
                    alert("請填入分類名稱！");
                    element.focus();
                    return;
                }

                layer.push(layer1);
            };

            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                
                    if (response.success) {             
                        successSwal(response.message, function(){
                            location.reload();
                        });                        
                    }else{
                        errorSwal(response.message);        
                    }
                }
            }
            xhttp.open("POST", `{{locale_api("product/update_layer")}}`, true);
            xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
            xhttp.setRequestHeader("X-CSRF-TOKEN", csrf_token);
            xhttp.send(JSON.stringify({layer:layer}));
        }
    </script>
@endsection