@extends('partial.html')

@section('template_styles')
    @yield('styles')
@endsection

@section('kt_body')
    <!--begin::Main-->
    <!--begin::Root-->
    <div class="d-flex flex-column flex-root">
        <!--begin::Page-->
        <div class="page d-flex flex-row flex-column-fluid">
            @section('aside-menu')
                @include('partial.aside_menu')
            @show
            <!--begin::Wrapper-->
            <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
                @section('header')
                    @include('partial.header')
                @show
                <!--begin::Content-->
                <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                    @section('toolbar')
                        @include('partial.toolbar')
                    @show
                    
                    <!--begin::Post-->
                    <div class="post d-flex flex-column-fluid" id="kt_post">
                        <!--begin::Container-->
                        <div id="kt_content_container" class="container-xxl">
                            @yield('kt_content_container')

                        </div>
                    </div>
                    <!--end::Post-->

                    <div class="overlay-layer bg-dark-o-10" style='display: none;' >
                        <div class="spinner spinner-primary"></div>
                    </div>
                </div>
                <!--end::Content-->
                @section('footer')
                    @include('partial.footer')
                @show
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Page-->
    </div>
    <!--end::Root-->
    <!--begin::Scrolltop-->
    <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
        <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
        <span class="svg-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="black" />
                <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="black" />
            </svg>
        </span>
        <!--end::Svg Icon-->
    </div>
    <!--end::Scrolltop-->
    <!--end::Main-->

    @section('template_scripts')
        <script type='text/javascript'>
            

            let _dp = {
                'url': '{{ url('ajax/file_upload') }}',
                'headers': {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                'dictRemoveFile': '{{ __('basic.DeleteFile') }}',
                'dictMaxFilesExceeded': '{{ __('basic.MaxFilesExceeded') }}',
                'dictRemoveFileConfirmation': '{{ __('basic.SureToDelete') }}',
                'dictCancelUpload': '{{ __('basic.CancelUpload') }}',
                'dictRemoveFile': '{{ __('basic.DeleteFile') }}',
            }; 
            dropzone = new CustomDropzone(_dp);

            class DataTableCls {
                constructor(dom) {
                    this.dom = dom;
                    this.table = null;
                    this.dt = null;
                    this.param = null;
                    // this.param = this.combineParam();
                }
                defaultParam()
                {
                    var o = {
                        pageLength: 50,
                        scrollY: '55vh',
                        scrollX: '100%',
                        language: {
                            "processing": "處理中...",
                            "emptyTable": "目前沒有任何資料",
                            "loadingRecords": "載入中...",
                            "lengthMenu": "顯示 _MENU_ 項結果",
                            "zeroRecords": "沒有符合的結果",
                            "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                            "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                            "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                            "infoPostFix": "",
                            "search": "搜尋",
                            "paginate": {
                                "first": "第一頁",
                                "previous": "上一頁",
                                "next": "下一頁",
                                "last": "最後一頁"
                            },
                            "aria": {
                                "sortAscending": ": 升冪排列",
                                "sortDescending": ": 降冪排列"
                            },

                        },
                    }

                    return o;
                }
                combineParam()
                {
                    var overlord = this;
                    var ajaxO = {
                        serverSide: true,
                        processing: true,
                        serverMethod: 'post',
                        // stateSave: true,//保留條件
                        order: overlord.defineOrder(),
                        ajax:
                        {
                            url: '{{ url('ajax') }}',
                            headers:
                            {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            // data: overlord.defineGetData(),
                            data: function (d) {
                                d = Object.assign(d, overlord.defineGetData());
                                return d;
                            },
                            dataSrc: function ( json )
                            {
                                // console.log(json);
                                let info = json['data'];

                                const draw  = info['draw'];
                                const total = info['total'];
                                const filterTotal = info['filter_total'];
                                const list  = info['list'];

                                const row = overlord.renderRow(list);

                                json.draw = draw;
                                json.recordsTotal = total;
                                json.recordsFiltered = filterTotal;
                                json.data = row;

                                return json.data;
                            }
                        },

                        // 對應的欄位
                        columns: overlord.defineColumn(),
                        // columnDefs: overlord.defineColumnHtml(),
                        createdRow: function (row, data, dataIndex) {
                            overlord.defineCreatedRow(row, data, dataIndex);
                        }
                    };

                    var defaultO = this.defaultParam();

                    //合併
                    var o = { ...ajaxO,...defaultO };

                    return o;
                }

                defineGetData()
                {
                    // 自定義
                    return {};
                }

                defineColumn()
                {   
                    var col = [];

                    // 自定義

                    return col;
                }

                // defineColumnHtml()
                // {
                //     var col = [];

                //     // 自定義

                //     return col;
                // }

                defineOrder()
                {
                    // return [[ 3, 'desc' ]];
                    return [];
                }

                defineCreatedRow(row, data, dataIndex)
                {
                    // 自定義
                }

                renderRow(list)
                {
                    //自行定義Table的row怎塞資料

                    // Sample Code
                    // var row =  list.map ( function (value, index, array) {
                    //     return {
                    //         "id": value.id,
                    //         "member": (empty(value.member)) ? value.website_member_id : value.member.name,
                    //         "comment-rating": value.rating,
                    //         "description": value.description,
                    //         "comment-create_time": value.create_time,
                    //         "comment_source-name": value.source.name,
                    //     }
                    // })

                    var row =  list.map ( function (value, index, array) {
                        return {

                        }
                    });
                    return row;
                }

                getParam()
                {
                    return this.param;
                }

                setParam(param)
                {
                    this.param = param;
                }

                init()
                {
                    var o = this;
                    this.param = this.combineParam();
                    this.dt = $(this.dom).DataTable(this.param);
                    this.table = this.dt.$;

                    // Re-init functions on every table re-draw
                    this.dt.on('draw', function () {
                        // o.initToggleToolbar();
                        // o.toggleToolbars();
                        o.handleEditRows();
                        o.handleDeleteRows();
                        o.handleZoomButton();
                        KTMenu.createInstances();
                    });

                    this.handleSearchDatatable();
                    // this.initToggleToolbar();
                    this.handleFilterDatatable();
                    this.handleEditRows();
                    this.handleDeleteRows();
                    this.handleZoomButton();
                    this.handleResetForm();
                }


                // Search Datatable
                handleSearchDatatable() 
                {
                    var o = this;
                    const filterSearch = document.querySelector('[data-kt-table-filter="search"]');
                    var searchtimer;
                    filterSearch.addEventListener('input', function (e) {
                        // 延遲輸入
                        clearTimeout(searchtimer); 
                        searchtimer = setTimeout(() => {
                            o.dt.search(e.target.value).draw();
                            // console.log(e.target.value);
                        }, 300);
                    });
                }

                // Filter Datatable
                handleFilterDatatable() 
                {
                    var o = this;
                    // Select filter options
                    const filterForm   = document.querySelector('[data-kt-table-filter="form"]');
                    const filterButton = filterForm.querySelector('[data-kt-table-filter="filter"]');
                    const filter       = filterForm.querySelector('select');
                    
                    // Filter datatable on submit
                    filterButton.addEventListener('click', function () {
                        // Get filter values
                        // let filterValue = '';

                        // filter.forEach(r => {
                        //     if (r.value && "" !== r.value) {
                        //         filterValue += r.value;
                        //     }
                        // });
                        // filterValue = filter.value;

                        // Filter datatable
                        // o.dt.search(filterValue).draw();
                        o.dt.ajax.reload();
                    });
                }

                // Reset Filter
                handleResetForm()
                {
                    var o = this;
                    // Select reset button
                    const filterForm   = document.querySelector('[data-kt-table-filter="form"]');
                    const resetButton = document.querySelector('[data-kt-table-filter="reset"]');

                    // Reset datatable
                    resetButton.addEventListener('click', function () {

                        //Clear filter value
                        $(filterForm).find("select").each(function(i,obj) {
                            $(obj).val('').trigger('change');
                        })

                        //Reset radio button
                        $('#kt_rating_input_0').click();
                       
                        // Reset datatable
                        o.dt.search('').draw();
                    });
                }

                // Delete Data
                handleDeleteRows() 
                {
                    // Select all delete buttons
                    const deleteButtons = document.querySelectorAll('[data-kt-table-filter="delete_row"]');

                    deleteButtons.forEach(d => {
                        // Delete button on click
                        d.addEventListener('click', function (e) {
                            e.preventDefault();

                            // Select parent row
                            const parent = e.target.closest('tr');

                            // Get data info
                            // const dataName = parent.querySelectorAll('td')[1].querySelectorAll("span")[0].innerText;
                            const dataId   = parent.querySelector(".data_id").value;

                            Swal.fire({
                                text: "{{__('basic.AreYouSureYouWantToDelete')}}"+"?",
                                icon: "warning",
                                showCancelButton: !0,
                                buttonsStyling: !1,
                                confirmButtonText: "{{__('basic.Sure')}}",
                                cancelButtonText: "{{__('basic.Cancel')}}",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-danger",
                                    cancelButton: "btn fw-bold btn-active-light-primary"
                                }
                            }).then((function(result) {
                                if(result.value) form_obj.detail.ajax.delete(dataId);
                            }))
                        })
                    });
                }

                // Edit Data
                handleEditRows()
                {
                    // Select all delete buttons
                    const EditButtons = document.querySelectorAll('[data-kt-table-filter="edit_row"]');

                    EditButtons.forEach(d => {
                        // Edit button on click
                        d.addEventListener('click', function (e) {
                            e.preventDefault();

                            $('body').trigger('edit_row_start');

                            // Select parent row
                            const parent = e.target.closest('tr');

                            // Get data info
                            const dataId = parent.querySelector(".data_id").value;

                            $('#'+form_obj.detail.master_id).val(dataId);
                            $('#'+form_obj.detail.type_id).val('update');
                            $('.modal_type').text('{{ __('basic.Edit') }}');

                            form_obj.detail.ajax.get();

                            $('body').trigger('edit_row_end');
                        })
                    });
                }

                // Zoom
                handleZoomButton() 
                {
                    var o = this;

                    const buttons = document.querySelectorAll('[data-kt-docs-datatable-subtable="expand_row"]');
                    buttons.forEach((button, index) => {
                        button.addEventListener('click', e => {
                            e.stopImmediatePropagation();
                            e.preventDefault();

                            const row = button.closest('tr');
                            const rowClasses = ['isOpen', 'border-bottom-0'];

                            // Handle subtable expanded state
                            if (row.classList.contains('isOpen')) {
                                // o.dt.row(row).child.hide();
                                while (row.nextSibling && row.nextSibling.getAttribute('data-kt-docs-datatable-subtable') === 'subtable_template') {
                                    row.nextSibling.parentNode.removeChild(row.nextSibling);
                                }
                                row.classList.remove(...rowClasses);
                                button.classList.remove('active');
                            } else {
                                // o.dt.row(row).child(format({"name":"Newt","extn":22})).show();
                                populateTemplate(o.dt.row(row).data().detail, row)

                                row.classList.add(...rowClasses);
                                button.classList.add('active');
                            }
                        });
                    });
                }

                // Init toggle toolbar
                initToggleToolbar()
                {
                    var o = this;

                    // Toggle selected action toolbar
                    // Select all checkboxes
                    const container = document.querySelector('#data_table');
                    const checkboxes = container.querySelectorAll('[type="checkbox"]');

                    // Select elements
                    const deleteSelected = document.querySelector('[data-kt-table-select="delete_selected"]');

                    // Toggle delete selected toolbar
                    checkboxes.forEach(c => {
                        // Checkbox on click event
                        c.addEventListener('click', function () {
                            setTimeout(function () {
                                toggleToolbars();
                            }, 50);
                        });
                    });

                    // Deleted selected rows
                    deleteSelected.addEventListener('click', function () {
                        // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                        Swal.fire({
                            text: "Are you sure you want to delete selected data?",
                            icon: "warning",
                            showCancelButton: true,
                            buttonsStyling: false,
                            showLoaderOnConfirm: true,
                            confirmButtonText: "Yes, delete!",
                            cancelButtonText: "No, cancel",
                            customClass: {
                                confirmButton: "btn fw-bold btn-danger",
                                cancelButton: "btn fw-bold btn-active-light-primary"
                            },
                        }).then(function (result) {
                            if (result.value) {
                                // Simulate delete request -- for demo purpose only
                                Swal.fire({
                                    text: "Deleting selected data",
                                    icon: "info",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 2000
                                }).then(function () {
                                    Swal.fire({
                                        text: "You have deleted all selected data!.",
                                        icon: "success",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn fw-bold btn-primary",
                                        }
                                    }).then(function () {
                                        // delete row data from server and re-draw datatable
                                        o.dt.draw();
                                    });

                                    // Remove header checked box
                                    const headerCheckbox = container.querySelectorAll('[type="checkbox"]')[0];
                                    headerCheckbox.checked = false;
                                });
                            } else if (result.dismiss === 'cancel') {
                                Swal.fire({
                                    text: "Selected customers was not deleted.",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    }
                                });
                            }
                        });
                    });
                }

                // Toggle toolbars
                toggleToolbars() 
                {
                    // Define variables
                    const container = document.querySelector('#data_table');
                    const toolbarBase = document.querySelector('[data-kt-table-toolbar="base"]');
                    const toolbarSelected = document.querySelector('[data-kt-table-toolbar="selected"]');
                    const selectedCount = document.querySelector('[data-kt-table-select="selected_count"]');

                    // Select refreshed checkbox DOM elements
                    const allCheckboxes = container.querySelectorAll('tbody [type="checkbox"]');

                    // Detect checkboxes state & count
                    let checkedState = false;
                    let count = 0;

                    // Count checked boxes
                    allCheckboxes.forEach(c => {
                        if (c.checked) {
                            checkedState = true;
                            count++;
                        }
                    });

                    // Toggle toolbars
                    if (checkedState) {
                        selectedCount.innerHTML = count;
                        toolbarBase.classList.add('d-none');
                        toolbarSelected.classList.remove('d-none');
                    } else {
                        toolbarBase.classList.remove('d-none');
                        toolbarSelected.classList.add('d-none');
                    }
                }

                getDataTableObj()
                {
                    return this.dt;
                }
                
                getTableActionMenu(menuItem,shortCode)
                {
                    if(shortCode==null)shortCode=false;
                    if(shortCode)menuItem = this.getTableActionMenuItemShortCode(menuItem);

                    var menuHead = `
                    <a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end" style="white-space:nowrap;">`
                        +'<i class="la la-navicon fs-5 me-2"></i>{{ __('basic.Actions') }}'
                        +`<span class="svg-icon svg-icon-5 m-0">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
                                </g>
                            </svg>
                        </span>
                    </a>`;
                    var menuBodyHead = `
                        <!--begin::Menu-->
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
                        `;

                    var menuBodyFoot = `
                        </div>
                        <!--end::Menu-->
                        `;

                    var menuBody='';
                    for(var key in menuItem)
                    {
                        var row = menuItem[key];
                        menuBody += ''
                        // +'<!--begin::Menu item-->'
                        +'<div class="menu-item px-3">'
                            +'<a href="#" class="menu-link px-3 text-center '+row.className+'" data-kt-table-filter="'+row.method+'">'
                                +row.text
                            +'</a>'
                        +'</div>'
                        // +'<!--end::Menu item-->'
                    }

                    return menuHead+menuBodyHead+menuBody+menuBodyFoot;
                }

                getTableActionMenuItemShortCode(shortCode)
                {
                    var ret = [];
                    if(shortCode.indexOf('a')>=0)ret.push({text:'{{ __('basic.Add') }}',method:'add_row',className:'add_btn'});
                    if(shortCode.indexOf('d')>=0)ret.push({text:'<i class="la fab la-wpforms fs-5 me-2"></i>{{ __('basic.Detail') }}',method:'detail_row',className:'detail_btn'});
                    if(shortCode.indexOf('e')>=0)ret.push({text:'<i class="la la-edit fs-5 me-2"></i>{{ __('basic.Edit') }}',method:'edit_row',className:'edit_btn'});
                    if(shortCode.indexOf('r')>=0)ret.push({text:'<i class="la la-trash-o fs-5 me-2"></i>{{ __('basic.Delete') }}',method:'delete_row',className:'delete_btn'});
                    
                    return ret;
                }

            }

            

            $(function() {
                $('#add_btn').click(function() {
                    $('body').trigger('add_row_start');

                    validator.resetForm(true);
                    $("#detail_modal").modal('show');
                    $('#'+form_obj.detail.type_id).val('create');
                    $('#'+form_obj.detail.master_id).val('');
                    $('.modal_type').text('{{ __('basic.Add') }}');

                    $('body').trigger('add_row_end');
                });

                $('#detail_modal').modal({backdrop:'static', keyboard:false});

                $('#modal_submit').click(function(e) {
                    // Prevent default button action
                    e.preventDefault();
                    form_obj.detail.ajax.save();
                });

                $('#modal_cancel').click(function(t) {
                    // Prevent default button action
                    t.preventDefault();
                    Swal.fire({
                        text: "{{__('basic.AreYouSureYouWouldLikeToCancel')}}?",
                        icon: "warning",
                        showCancelButton: !0,
                        buttonsStyling: !1,
                        confirmButtonText: "{{__('basic.Yes')}}",
                        cancelButtonText: "{{__('basic.No')}}",
                        customClass: {
                            confirmButton: "btn btn-primary me-3",
                            cancelButton: "btn btn-active-light"
                        }
                    }).then((function(t) {
                        if(t.value) {
                            $('body').trigger('cancel_row_start');
                            
                            $('#detail_fm')[0].reset(); 
                            $("#detail_modal").modal('hide');

                            $('body').trigger('cancel_row_end');
                        }
                    }))
                });

                $('#modal_close').click(function(t) {
                     // Prevent default button action
                    t.preventDefault();
                    Swal.fire({
                        text: "{{__('basic.AreYouSureYouWouldLikeToColse')}}?",
                        icon: "warning",
                        showCancelButton: !0,
                        buttonsStyling: !1,
                        confirmButtonText: "{{__('basic.Yes')}}",
                        cancelButtonText: "{{__('basic.No')}}",
                        customClass: {
                            confirmButton: "btn btn-primary",
                            cancelButton: "btn btn-active-light"
                        }
                    }).then((function(t) {
                        if(t.value) {
                            $('body').trigger('close_row_start');

                            $('#detail_fm')[0].reset();
                            $("#detail_modal").modal('hide');

                            $('body').trigger('close_row_end');
                        }
                    }))
                });
            })
        </script>

        @yield('scripts')
    @endsection

    

@endsection