@extends('console_layouts.master')
@section('title')
    常見問題
@endsection
@section('css')
    <link href="{{ URL::asset('assets/libs/nouislider/nouislider.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ URL::asset('assets/libs/gridjs/gridjs.min.css') }}">
@endsection
@section('content')
    @component('components.breadcrumb')
    @slot('title')
    常見問題
    @endslot
    @endcomponent
    <div class="row">
        <div class="col-xl-3 col-lg-4">
            <div class="card">
                <div class="accordion accordion-flush filter-accordion">
                    <div class="card-body">
                        <div class="border-bottom">
                            <div id="collection-layer"></div>
                            <div class="">
                                <p class="text-muted text-uppercase fs-14 fw-medium">分類</p>
                                <div class="formCost gap-2 align-items-center">
                                    <select class=" mb-3" id="layer1-input" name="layer1" data-choices data-choices-search-false data-choices-sorting-false>
                                        <option value="" @selected(request()->get('layer1') == '')>未分類</option>
                                        @foreach ($layer as $layer1)
                                            <option value="{{$layer1->id}}" @selected(request()->get('layer1') == $layer1->id)>{{$layer1->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-xl-9 col-lg-8">
            <div>
                <div class="card">
                    <div class="card-header border-0">
                        <div class="row g-4 d-flex">
                                <div class="col d-flex gap-2">
                                    <div>
                                        <a href="{{ locale_asset("console/faq_layer") }}" class="btn btn-light"
                                            id="layermanage-btn"><i class="ri-function-line align-bottom me-1"></i> 分類管理</a>

                                    </div>
                                    <div>
                                        <button class="btn btn-outline-danger" id="deleteSelected-btn"><i
                                                class="ri-delete-bin-line align-bottom me-1"></i> 批次刪除</button>
                                    </div>
                                </div>
                                
                                <div class="d-flex col text-end gap-2 justify-content-end">
                                    <div>
                                        <a href="{{ locale_asset('/console/faq_create') }}"
                                            class="btn btn-success" id="addproduct-btn"><i
                                                class="ri-add-line align-bottom me-1"></i> 新增</a>
                                    </div>
                                    
                                </div>
                                
                            </div>
                    </div>
                    <!-- end card header -->
                    <div class="row card-body">
                        <div class="tab-content text-muted">
                            <div class="tab-pane active" id="productnav-published" role="tabpanel">
                                <div id="table-collection-list" class="table-card gridjs-border-none">
                                    <div role="complementary" class="gridjs gridjs-container" style="width: 100%;">
                                        <div class="gridjs-wrapper" style="height: auto;">
                                            <table role="grid" class="gridjs-table" style="height: auto;">
                                                <thead class="gridjs-thead">
                                                    <tr class="gridjs-tr">
                                                        <th data-column-id="#" class="gridjs-th text-muted"
                                                            style="width: 40px;">
                                                            <span class="text-center">
                                                                <div class="checkbox-product-list"> <input
                                                                        class="form-check-input" type="checkbox"
                                                                        value="1" id="checkbox-header"> <label
                                                                        class="form-check-label"
                                                                        for="checkbox-header"></label>
                                                                </div>
                                                            </span>
                                                        </th>
                                                        <th data-column-id="product"
                                                            class="gridjs-th gridjs-th-sort text-muted" tabindex="0"
                                                            style="width: 360px;">
                                                            <div class="gridjs-th-content text-center">名稱</div></button>
                                                        </th>
    
                                                        <th data-column-id="action" class="gridjs-th text-muted"
                                                            style="width: 80px;">
                                                            <div class="gridjs-th-content text-center">動作</div>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody class="faq-list gridjs-tbody">
                                                    @foreach ($faq_list as $faq)
                                                        <tr class="gridjs-tr" data-id="{{$faq->id}}">
                                                            <td class="d-none">
                                                                <input type="text" name="id" value="{{$faq->id}}">
                                                            </td>
                                                            <td data-column-id="#" class="gridjs-td">
                                                                <span class="text-center">
                                                                    <div class="checkbox-product-list"> <input
                                                                            class="form-check-input" type="checkbox"
                                                                            value="{{$faq->id}}"> <label
                                                                            class="form-check-label"></label>
                                                                    </div>
                                                                </span></td>
                                                            <td data-column-id="product" class="gridjs-td"><span>
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-grow-1">
                                                                            <h5 class="fs-14 mb-1"><a
                                                                                    href='{{ locale_asset("console/faq_update/$faq->id") }}'
                                                                                    class="text-dark">{{ $faq->title }}</a>
                                                                            </h5>
                                                                        </div>
                                                                    </div>
                                                                </span></td>
                                                            
                                                            <td data-column-id="action" class="gridjs-td">
                                                                <div class="d-flex align-items-center">
                                                                    <a class="dropdown-item edit-list text-center" data-edit-id="1"
                                                                        href='{{ locale_asset("console/faq_update/$faq->id") }}'><i
                                                                            class="ri-pencil-fill align-bottom text-muted"></i></a>
                                                                    <div class="dropdown-item remove-list text-center" role="button"><i
                                                                            class="ri-delete-bin-fill align-bottom text-muted"></i>
                                                                    </div>
                                                                    @if(!empty(request()->get('layer1')  ))
                                                                    <div class="dropdown-item drag-list text-center" role="button">
                                                                        <i class="ri-drag-move-2-fill align-bottom text-muted"></i>
                                                                    </div>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                      
                                        <div id="gridjs-temp" class="gridjs-temp"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end tab pane -->
    
                            <!-- end tab pane -->
                        </div>
    
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </div>
        </div>
        <!-- end col -->
    </div>

    <!-- end row -->

@endsection
@section('script')
    <script src="{{ URL::asset('assets/libs/nouislider/nouislider.min.js') }}"></script>
    <script src="{{ URL::asset('assets/libs/wnumb/wnumb.min.js') }}"></script>
    <script src="{{ URL::asset('assets/libs/gridjs/gridjs.min.js') }}"></script>
    {{-- <script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script> --}}
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    {{-- <script src="{{ URL::asset('/assets/js/pages/admin/collection-list.init.js') }}"></script> --}}
    <script src="{{ URL::asset('assets/libs/sortablejs/sortablejs.min.js') }}"></script>
    <script>

        
        const layer1_input = document.querySelector('select[name="layer1"]');
        const select_all_checkbox = document.querySelector('#checkbox-header');
        const delete_btn = document.querySelectorAll('.remove-list');
        const delete_selected_btn = document.querySelector('#deleteSelected-btn');  
        const faq_list =  document.querySelector('.faq-list');  
        
        
        Sortable.create(faq_list, {
            handle: '.drag-list',
            animation: 150,
            onEnd: function (event) {
                var data = {};
                data.items = [...event.to.children];
                data.order = data.items.map((item, index) => {
                    return { id: item.dataset.id, order: index + 1 };
                });

                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);                        
                        }else{
                            errorSwal(response.message);        
                        }
                    }else{
                        errorSwal(response.message);        
                        location.reload();
                    }
                }
                xhttp.open("POST", '{{locale_api("faq_reorder")}}', true);
                xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
                xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhttp.send(JSON.stringify(data)); 
            }
        });

        delete_btn.forEach(function(btn){

            btn.addEventListener('click', function(){
                confirmDeleteSwal('', function(){
                    var item_id = btn.closest('tr').querySelector('input[name="id"]').value;

                    const xhr = new XMLHttpRequest();
                    xhr.onload = function(){
                        var response = JSON.parse(this.responseText);
                        if (this.readyState == 4 && this.status == 200) {
                        
                            if (response.success) {             
                                successSwal(response.message, function(){                    
                                window.location.reload();
                            });                        
                            }else{
                                errorSwal(response.message);        
                            }
                        }
                        
                    }
                    xhr.open('DELETE', "{{locale_api('faq')}}/"+item_id, true);            
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrf_token);
                    xhr.send();
                });
            });

        });

        layer1_input.addEventListener('change', function(){
            window.location = "{{locale_asset("console/faq_list?layer1=")}}" + layer1_input.value;
        })

        //select all checkbox
        select_all_checkbox.addEventListener('change', function(){
            document.querySelectorAll('.gridjs-tbody .checkbox-product-list input').forEach(element => {
                element.checked = select_all_checkbox.checked; 
            });
        });

        //delete selected
        delete_selected_btn.addEventListener('click', function(){
            var selected_items = [];
            document.querySelectorAll('.gridjs-tbody .checkbox-product-list input').forEach(element => {
                if(element.checked){
                    selected_items.push(element.value);
                }
            });

            if(selected_items.length > 0){
                var data = {
                    faq_list: selected_items
                };

                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/faq_list")}}'
                        });                        
                        }else{
                            errorSwal(response.message);        
                        }
                    }else{
                        errorSwal(response.message);        
                        location.reload();
                    }
                }
                xhttp.open("DELETE", '{{locale_api("faq")}}', true);
                xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
                xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhttp.send(JSON.stringify(data)); 
            }else{
                errorSwal('請選擇項目');
            }
        });

    </script>
@endsection