@extends('partial.master')
@section('page_title','商品類別維護')

@section('scripts')
{{-- <script src="{{ asset('js/custom/apps/user-management/users/list/table.js') }}"></script> --}}
{{-- <script src="{{ asset('js/custom/apps/user-management/users/list/add.js') }}"></script> --}}
<script type='text/javascript'>

    form_obj.module     = 'Stock';
    form_obj.controller = 'StockCategoryController';
    form_obj.route_name = '{{ basename(url()->current()) }}';

    const c_dp = {
        'acceptedFiles': 'image/*',
        'type': 'insert',
        'upload_root_path': '{{ addslashes(storage_path('app/public/stock_category')) }}',
        'url_root_path': '{{ addslashes(url('storage/stock_category')) }}',
        'Width': null,
        'Height': null,
        'print_log': false,
    }

    // 驗證
    const validator = FormValidation.formValidation(
        document.getElementById('detail_fm'),
        {
            fields: {
                // 'name': {
                //     validators: {
                //         notEmpty: {
                //             message: "{{ __('basic.Name').__('basic.CanNotEmpty') }}"
                //         }
                //     }
                // },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap: new FormValidation.plugins.Bootstrap5({
                    rowSelector: '.fv-row',
                    eleInvalidClass: '',
                    eleValidClass: ''
                })
            }
        }
    );

    form_obj.detail.ajax.save = function() {
        // Validate form before submit
        if (validator) {
            validator.validate().then(function (status) {
                if (status == 'Valid') {

                    if(empty($('#parent').val()) && !empty($('#sku_code').val())) {
                        Swal.fire({
                            html: '商品類別為最上層時，不可填寫SKU CODE',
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        })

                        return;
                    }

                    if(empty($('#name_zh_TW').val())) {
                        Swal.fire({
                            html: '請輸入繁體中文名稱',
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        })

                        return;
                    }


                    page.loading.start('.modal-content');

                    // Show loading indication
                    $('.modal button[type=submit]').attr('data-kt-indicator', 'on');
                    // Disable button to avoid multiple click
                    $('.modal button[type=submit]').prop('disabled', true);

                    var formData = new FormData($('#detail_fm')[0]);
                        formData.append('module',form_obj.module);
                        formData.append('controller',form_obj.controller);
                        formData.append('type',formData.get(form_obj.detail.type_id));
                        formData.append('id',formData.get(form_obj.detail.master_id));
                        formData.append('print_log',false);

                    $.ajax({
                        data: formData,
                        datatype: 'json',
                        contentType: false,
                        processData: false,
                        success:function(data,textStatus,jqXHR) {
                            // console.log(data);
                            if(isJson(data)) {
                                // Remove loading indication
                                $('.modal button[type=submit]').removeAttr('data-kt-indicator');
                                // Enable button
                                $('.modal button[type=submit]').prop('disabled', false);

                                let json = JSON.parse(data);
                                if(json.status) {
                                    // Show popup confirmation
                                    Swal.fire({
                                        text: json.msg + "!",
                                        icon: "success",
                                        buttonsStyling: false,
                                        confirmButtonText: "{{ __('basic.OK') }}",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then((function(t) {
                                        location.reload()
                                    }));
                                } else {
                                    Swal.fire({
                                        html: json.msg.replaceAll("\r\n","<BR>"),
                                        icon: "error",
                                        buttonsStyling: !1,
                                        confirmButtonText: "{{ __('basic.OK') }}",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then(function(){
                                        page.loading.stop('.modal-content');
                                    });
                                }
                            }
                        },error: ajaxError
                    });
                }
            });
        }

    }

    form_obj.detail.ajax.get = function() {

        $.ajax({
            data: {
                module: form_obj.module,
                controller: form_obj.controller,
                type: 'read',
                where: {
                    id: $('#'+form_obj.detail.master_id).val(),
                },
                print_log: false,
            },
            success: function(data,textStatus,jqXHR) {
                // console.log(data);
                if(isJson(data)) {
                    var json = JSON.parse(data);

                    form_obj.detail.displayData(json['data']['list'][0]);
                    $("#detail_modal").modal('show');

                    var interval = setInterval(() => {
                        if($('.del_row_btn').length==1) {
                            clearInterval(interval);

                            form_obj.detail.displayData(json['data']['list'][0]);
                            $("#detail_modal").modal('show');
                        }
                    }, 100);
                }
            },
            error: ajaxError
        });

    }

    form_obj.detail.displayData = function(data) {
        // validator.resetForm(true);

        // init dropzone
        dropzone.destroy(); // destroy
        let p_dp = c_dp;
        p_dp.target = '#picture';
        p_dp.maxFiles = 1;
        p_dp.master_id = data['id'];
        dropzone.setParams(p_dp);
        dropzone.init();

        $('input,textarea,select').each(function() {
            if(this.id in data) {
                if(empty(data[this.id])) return;

                if(this.id=='valid') {
                    if(data[this.id]) $(this).prop('checked',true);
                } else {
                    this.value = data[this.id];
                }
                if(this.multiple) {
                    if(!empty(data[this.id]))
                    {
                        $(this).val(data[this.id].split(','));
                    }
                }
            }
        });

        for(var i in data['lang'])
        {
            var langRow = data['lang'][i];

            $('#name_'+langRow['lang_id']).val(langRow['name']);
        }
        if(empty($('#name_zh_TW').val())) {
            $('#name_zh_TW').val(data['name']);
        }

        /*
        for(var i in data['lang'])
        {
            var langRow = data['lang'][i];
            var row = $($('.detail_name')[i]).closest('.row');

            let rowClasses = ['lang_id'];
            row.find('[data-kt-repeater="select2"]').each(function(k,o) {
                o.value = langRow[rowClasses[k]];
            })

            $('.detail_name')[i].value = langRow['name'];
            $('.detail_description')[i].value = langRow['description'];

            if(i<data['lang'].length-1)$('.add_row_btn').click();
        }
        */

        // supplier
        for(var i in data['supplier'])
        {
            var supplierRow = data['supplier'][i];

            $('select[name="partner_detail['+i+'][partner_id]"]').val(supplierRow['partner_id']);
            $('input[name="partner_detail['+i+'][stock_category_code]"]').val(supplierRow['stock_category_code']);

            if(i<data['supplier'].length-1)$('.add_row_btn').click();
        }

        // media
        if(!empty(data['media']) && data['media'].length>0) {

            var files = [];
            for(var i=0; i<data['media'].length; i++) {
                var media = data['media'][i];

                files.push({
                    'name': media['org_name'],
                    'org_name': media['name'],
                    'media_type': media['media_type'],
                    'size': media['size'],
                })
            }
            dropzone.createFile(files);
        }

        $('select').trigger('change.select2');
    }

    form_obj.detail.ajax.delete = function(id) {
        page.loading.start();
        $.ajax({
            data: {
                module: form_obj.module,
                controller: form_obj.controller,
                type: 'delete',
                where: {
                    id: id,
                },
                print_log: false,
            },
            success: function(data,textStatus,jqXHR) {
                // console.log(data);
                if(isJson(data)) {
                    var json = JSON.parse(data);
                    if(json.status) {
                        Swal.fire({
                            text: json.msg + "!",
                            icon: "success",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary"
                            }
                        }).then((function() {
                            location.reload()
                        }))
                    } else {
                        page.loading.stop();
                        Swal.fire({
                            text: json.msg + "!",
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary"
                            }
                        })
                    }
                }
            },
            error:ajaxError
        });
    }

    $(function() {
        dataTable = new DataTableCls('#data_table');
        dataTable.defineGetData = ()=> {
            return {
                module:form_obj.module,
                controller:form_obj.controller,
                type:'read',
                print_log:false,
            };
        }
        dataTable.defineColumn = ()=>{
            return [
                { data: "sorting", className: 'text-center', orderable: false
                },
                { data: "valid", className: 'text-center',render: function(data, type, row) {
                        let checked = '';
                        if(data) {
                            checked = 'checked';
                        }
                        return `<!--begin::Switch-->
                        <label class="form-check form-switch form-check-custom form-check-solid ms-10">
                            <input class="form-check-input datatable_valid" type="checkbox" value="1" data-key="${row.id}" ${checked} />
                        </label>
                        <!--end::Switch-->`;
                    }
                },
                { data: "code", className: 'text-center' },
                { data: "parent", className: 'text-center' },
                { data: "tree_level", className: 'text-center' },
                { data: "name", className: 'text-center',render: function(data,type,row){
                        return `
                            <input type="hidden" class="data_id" value="${row.id}" />
                            <span class="">${data}</span>
                        `;
                    } 
                },
                { data: "sku_code", className: 'text-center' ,orderable: false },
                { data: "description", className: 'text-center' ,orderable: false },
                { data: null, className: 'text-center' ,orderable: false,render: function (data, type, row) {
                        return dataTable.getTableActionMenu('er',true);
                    }, },
            ];
        }
        
        dataTable.defineOrder = () => {
            return [[ 2, 'asc' ]];
        }

        dataTable.renderRow = (list)=>{
            if(list==undefined)return;
            var row = list.map ( function (value, index, array) {
                return {
                    "id": value.id,
                    "sorting": index+1,
                    "code": value.code,
                    "parent": !empty(value.parent_cate)?value.parent_cate.name:'--',
                    "tree_level": value.tree_level,
                    "name": value.name,
                    "sku_code": value.sku_code??'--',
                    "description": empty(value.description)?'--':value.description,
                    "valid": value.valid,
                }
            })
            return row;
        }

        // dataTable init
        KTUtil.onDOMContentLoaded(function () {
            dataTable.init();

            $('#data_table').on('draw.dt', function () {
                // 上下架按鈕
                $('.datatable_valid').click(function () {
                    let _this = this;
                    let checked = $(_this).prop("checked");
                    let id = $(_this).data("key");

                    let text = "確定要下架?";
                    let valid = 0;
                    if(checked) {
                        text = "確定要上架?";
                        valid = 1;
                    }

                    Swal.fire({
                        text: text,
                        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) {
                            $.ajax({
                                data: {
                                    module: form_obj.module,
                                    controller: form_obj.controller,
                                    type: 'valid',
                                    id: id,
                                    valid: valid,
                                    print_log: false,
                                },
                                success: function(data,textStatus,jqXHR) {
                                    // console.log(data);
                                    if(isJson(data)) {
                                        var json = JSON.parse(data);
                                        if(json.status) {
                                            Swal.fire({
                                                text: json.msg + "!",
                                                icon: "success",
                                                buttonsStyling: !1,
                                                confirmButtonText: "{{ __('basic.OK') }}",
                                                customClass: {
                                                    confirmButton: "btn fw-bold btn-primary"
                                                }
                                            }).then((function() {
                                                
                                            }))
                                        } else {
                                            page.loading.stop();
                                            Swal.fire({
                                                text: json.msg + "!",
                                                icon: "error",
                                                buttonsStyling: !1,
                                                confirmButtonText: "{{ __('basic.OK') }}",
                                                customClass: {
                                                    confirmButton: "btn fw-bold btn-primary"
                                                }
                                            }).then((function() {
                                                $(_this).prop("checked",!checked);
                                            }))
                                        }
                                    }
                                },
                                error:ajaxError
                            });
                        } else {
                            $(_this).prop("checked",!checked);
                        }
                    }))
                });
            })

            $('#import_btn').click(function() {
                $('#upload_file').trigger('click');
            })
            //上傳檔案(商品類別)
            $('#upload_file').change(function(e) {
                Swal.fire({
                    text: '確定要上傳嗎?',
                    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) {
                        var formData = new FormData();
                            formData.append('upload_file',e.target.files[0]);
                            formData.append('module',form_obj.module);
                            formData.append('controller',form_obj.controller);
                            formData.append('type','import');
                            formData.append('print_log',false);

                        var timeStart = Date.now();

                        $.ajax({
                            data:formData,
                            datatype: 'json',
                            contentType: false,
                            processData: false,
                            success:function(data,textStatus,jqXHR)
                            {
                                // console.log(data);
                                console.log("總共時間: ", Date.now()-timeStart);
                                if(isJson(data))
                                {
                                    var json = JSON.parse(data);
                                    if(json.status)
                                    {   
                                        // Show popup confirmation
                                        Swal.fire({
                                            text: json.msg + "!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then((function(t) {
                                            location.reload()
                                        }));
                                    }
                                    else
                                    {
                                        var error_msg = '';
                                        for(var i=0; i<json.data.error.length; i++) {
                                            var error_row = json.data.error[i];

                                            if(error_row[1]=="require") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 為必填.\r\n';
                                            }
                                            else if(error_row[1]=="unique")  
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 重複.\r\n';
                                            }
                                            else if(error_row[1]=="undefined") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，系統無此 '+error_row[2]+'.\r\n';
                                            }
                                            else if(error_row[1]=="format") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 必須為日期格式.\r\n';
                                            }
                                        }

                                        page.loading.stop();   
                                        Swal.fire({
                                            html: error_msg.replaceAll("\r\n","<BR>"),
                                            icon: "error",
                                            buttonsStyling: !1,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        })
                                    }
                                }
                            },
                            error:ajaxError,
                            beforeSend: function(){
                                $('.save_loading').show();
                            },
                            complete: function(){
                                $('.save_loading').hide();
                            }
                        });
                    }
                }))
            });

            $('#import_lang_btn').click(function() {
                $('#upload_lang_file').trigger('click');
            })
            //上傳檔案(商品類別)
            $('#upload_lang_file').change(function(e) {
                Swal.fire({
                    text: '確定要上傳嗎?',
                    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) {
                    page.loading.start();

                    if(result.value) {
                        var formData = new FormData();
                            formData.append('upload_file',e.target.files[0]);
                            formData.append('module',form_obj.module);
                            formData.append('controller',form_obj.controller);
                            formData.append('type','importLang');
                            formData.append('print_log',false);

                        var timeStart = Date.now();

                        $.ajax({
                            data:formData,
                            datatype: 'json',
                            contentType: false,
                            processData: false,
                            success:function(data,textStatus,jqXHR)
                            {
                                page.loading.stop();   
                                // console.log(data);
                                console.log("總共時間: ", Date.now()-timeStart);
                                if(isJson(data))
                                {
                                    var json = JSON.parse(data);
                                    if(json.status)
                                    {   
                                        // Show popup confirmation
                                        Swal.fire({
                                            text: json.msg + "!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then((function(t) {
                                            location.reload()
                                        }));
                                    }
                                    else
                                    {
                                        var error_msg = '';
                                        for(var i=0; i<json.data.error.length; i++) {
                                            var error_row = json.data.error[i];

                                            if(error_row[1]=="require") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 為必填.\r\n';
                                            }
                                            else if(error_row[1]=="unique")  
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 重複.\r\n';
                                            }
                                            else if(error_row[1]=="undefined") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，系統無此 '+error_row[2]+'.\r\n';
                                            }
                                            else if(error_row[1]=="format") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 必須為日期格式.\r\n';
                                            }
                                        }

                                        
                                        Swal.fire({
                                            html: error_msg.replaceAll("\r\n","<BR>"),
                                            icon: "error",
                                            buttonsStyling: !1,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        })
                                    }
                                }
                            },
                            error:ajaxError,
                            beforeSend: function(){
                                $('.save_loading').show();
                            },
                            complete: function(){
                                $('.save_loading').hide();
                            }
                        });
                    }
                }))
            });

            $('#import_supplier_btn').click(function() {
                $('#upload_supplier_file').trigger('click');
            })
            //上傳檔案(廠商對應代碼)
            $('#upload_supplier_file').change(function(e) {
                Swal.fire({
                    text: '確定要上傳嗎?',
                    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) {
                        var formData = new FormData();
                            formData.append('upload_file',e.target.files[0]);
                            formData.append('module',form_obj.module);
                            formData.append('controller',form_obj.controller);
                            formData.append('type','importSupplier');
                            formData.append('print_log',false);

                        var timeStart = Date.now();

                        $.ajax({
                            data:formData,
                            datatype: 'json',
                            contentType: false,
                            processData: false,
                            success:function(data,textStatus,jqXHR)
                            {
                                // console.log(data);
                                console.log("總共時間: ", Date.now()-timeStart);
                                if(isJson(data))
                                {
                                    var json = JSON.parse(data);
                                    if(json.status)
                                    {   
                                        // Show popup confirmation
                                        Swal.fire({
                                            text: json.msg + "!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then((function(t) {
                                            location.reload()
                                        }));
                                    }
                                    else
                                    {
                                        var error_msg = '';
                                        for(var i=0; i<json.data.error.length; i++) {
                                            var error_row = json.data.error[i];

                                            if(error_row[1]=="require") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 為必填.\r\n';
                                            }
                                            else if(error_row[1]=="unique")  
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 重複.\r\n';
                                            }
                                            else if(error_row[1]=="undefined") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，系統無此 '+error_row[2]+'.\r\n';
                                            }
                                            else if(error_row[1]=="format") 
                                            {
                                                error_msg += '第'+error_row[0]+'筆資料，'+error_row[2]+' 必須為日期格式.\r\n';
                                            }
                                        }

                                        page.loading.stop();   
                                        Swal.fire({
                                            html: error_msg.replaceAll("\r\n","<BR>"),
                                            icon: "error",
                                            buttonsStyling: !1,
                                            confirmButtonText: "{{ __('basic.OK') }}",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        })
                                    }
                                }
                            },
                            error:ajaxError,
                            beforeSend: function(){
                                $('.save_loading').show();
                            },
                            complete: function(){
                                $('.save_loading').hide();
                            }
                        });
                    }
                }))
            });

            // repeater init
            $('#partner_detail').repeater({
                initEmpty: false,

                defaultValues: {
                    'text-input': 'foo'
                },

                show: function () {
                    $(this).slideDown();

                    // Re-init select2
                    $(this).find('[data-kt-repeater="select2"]').select2();
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                },

                ready: function() {
                    // Init select2
                    $('[data-kt-repeater="select2"]').select2();
                }
            });

            $('body')
                .on('add_row_end',function (){
                    validator.resetForm(true);
                    $('select').trigger('change.select2');

                    // init dropzone
                    dropzone.destroy(); // destroy
                    let p_dp = c_dp;
                    p_dp.target = '#picture';
                    p_dp.maxFiles = 1;
                    p_dp.master_id = '';
                    dropzone.setParams(p_dp);
                    dropzone.init();

                    $('.del_row_btn').not(':eq(0)').trigger('click');
                })
                .on('edit_row_start',function (){
                    validator.resetForm(true);
                    $('select').trigger('change.select2');

                    $('.del_row_btn').not(':eq(0)').trigger('click');
                })
                .on('close_row_end',function(e){

                    if($('.dropzone').length>0) {
                        $('.dropzone').each(function(i,o) {
                            let file_id = [];
                            $(o).children('.dz-preview').each(function() {
                                var upload = $(this).attr('upload');
                                if(upload==0) {
                                    var md5 = $(this).attr('md5');
                                    if(!empty(md5)) file_id.push(md5);
                                }
                            })

                            $.ajax({
                                url: _dp.url,
                                data:{
                                    type: 'delete',
                                    file_id: file_id,
                                    master_id: '',
                                    upload_root_path: c_dp.upload_root_path,
                                    url_root_path: c_dp.url_root_path,
                                    print_log: false,
                                },
                                success:function( data, textStatus, jqXHR ) {
                                    // console.log(data);
                                },
                                error:ajaxError
                            });
                        })
                    }

                })
                .on('cancel_row_end',function(e){

                    if($('.dropzone').length>0) {
                        $('.dropzone').each(function(i,o) {
                            let file_id = [];
                            $(o).children('.dz-preview').each(function() {
                                var upload = $(this).attr('upload');
                                if(upload==0) {
                                    var md5 = $(this).attr('md5');
                                    if(!empty(md5)) file_id.push(md5);
                                }
                            })

                            $.ajax({
                                url: _dp.url,
                                data:{
                                    type: 'delete',
                                    file_id: file_id,
                                    master_id: '',
                                    upload_root_path: c_dp.upload_root_path,
                                    url_root_path: c_dp.url_root_path,
                                    print_log: false,
                                },
                                success:function( data, textStatus, jqXHR ) {
                                    // console.log(data);
                                },
                                error:ajaxError
                            });
                        })
                    }

                });
        });
    })
    
</script>
@endsection

@section('kt_content_container')
<!--begin::Card-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Card title-->
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                    </svg>
                </span>
                <!--end::Svg Icon-->
                <input type="text" data-kt-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="搜尋" />
            </div>
            <!--end::Search-->
        </div>
        <!--begin::Card title-->
        <!--begin::Card toolbar-->
        <div class="card-toolbar">
            <!--begin::Toolbar-->
            <div class="d-flex justify-content-end" data-kt-table-toolbar="base">
                <!--begin::Filter-->
                {{-- <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="black" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    篩選
                </button> --}}
                <!--begin::Menu 1-->
                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">
                    <!--begin::Header-->
                    <div class="px-7 py-5">
                        <div class="fs-5 text-dark fw-bolder">篩選條件</div>
                    </div>
                    <!--end::Header-->
                    <!--begin::Separator-->
                    <div class="separator border-gray-200"></div>
                    <!--end::Separator-->
                    <!--begin::Content-->
                    <div class="px-7 py-5" data-kt-table-filter="form">
                        <!--begin::Input group-->
                        <div class="mb-10">
                            <label class="form-label fs-6 fw-bold">{{ __('basic.Role') }}:</label>
                            <select class="form-select form-select-solid fw-bolder" data-kt-select2="true" data-placeholder="{{ __('basic.PleaseChoice') }}" data-allow-clear="true" data-kt-table-filter="role" data-hide-search="true">
                                <option></option>
                                {{-- {!! app('FrontendService')->getOption($select['role_id'],'name','name','','') !!} --}}
                            </select>
                        </div>
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary fw-bold px-6 me-2" data-kt-menu-dismiss="true" data-kt-table-filter="filter">送出</button>
                            <button type="reset" class="btn btn-light btn-active-light-primary fw-bold px-6" data-kt-menu-dismiss="true" data-kt-table-filter="reset">重設</button>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Menu 1-->
                <!--end::Filter-->
                <!--begin::Import user-->
                <button type="button" class="btn btn-primary me-3" id="import_btn" {{--data-bs-toggle="modal" data-bs-target="#detail_modal"--}}>
                    <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/metronic/releases/2022-07-14-092914/core/html/src/media/icons/duotune/communication/com008.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M4.425 20.525C2.525 18.625 2.525 15.525 4.425 13.525L14.825 3.125C16.325 1.625 18.825 1.625 20.425 3.125C20.825 3.525 20.825 4.12502 20.425 4.52502C20.025 4.92502 19.425 4.92502 19.025 4.52502C18.225 3.72502 17.025 3.72502 16.225 4.52502L5.82499 14.925C4.62499 16.125 4.62499 17.925 5.82499 19.125C7.02499 20.325 8.82501 20.325 10.025 19.125L18.425 10.725C18.825 10.325 19.425 10.325 19.825 10.725C20.225 11.125 20.225 11.725 19.825 12.125L11.425 20.525C9.525 22.425 6.425 22.425 4.425 20.525Z" fill="currentColor"/>
                            <path d="M9.32499 15.625C8.12499 14.425 8.12499 12.625 9.32499 11.425L14.225 6.52498C14.625 6.12498 15.225 6.12498 15.625 6.52498C16.025 6.92498 16.025 7.525 15.625 7.925L10.725 12.8249C10.325 13.2249 10.325 13.8249 10.725 14.2249C11.125 14.6249 11.725 14.6249 12.125 14.2249L19.125 7.22493C19.525 6.82493 19.725 6.425 19.725 5.925C19.725 5.325 19.525 4.825 19.125 4.425C18.725 4.025 18.725 3.42498 19.125 3.02498C19.525 2.62498 20.125 2.62498 20.525 3.02498C21.325 3.82498 21.725 4.825 21.725 5.925C21.725 6.925 21.325 7.82498 20.525 8.52498L13.525 15.525C12.325 16.725 10.525 16.725 9.32499 15.625Z" fill="currentColor"/>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    匯入
                </button>
                <input id="upload_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >

                <button type="button" class="btn btn-primary me-3" id="import_lang_btn" {{--data-bs-toggle="modal" data-bs-target="#detail_modal"--}}>
                    <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/metronic/releases/2022-07-14-092914/core/html/src/media/icons/duotune/communication/com008.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M4.425 20.525C2.525 18.625 2.525 15.525 4.425 13.525L14.825 3.125C16.325 1.625 18.825 1.625 20.425 3.125C20.825 3.525 20.825 4.12502 20.425 4.52502C20.025 4.92502 19.425 4.92502 19.025 4.52502C18.225 3.72502 17.025 3.72502 16.225 4.52502L5.82499 14.925C4.62499 16.125 4.62499 17.925 5.82499 19.125C7.02499 20.325 8.82501 20.325 10.025 19.125L18.425 10.725C18.825 10.325 19.425 10.325 19.825 10.725C20.225 11.125 20.225 11.725 19.825 12.125L11.425 20.525C9.525 22.425 6.425 22.425 4.425 20.525Z" fill="currentColor"/>
                            <path d="M9.32499 15.625C8.12499 14.425 8.12499 12.625 9.32499 11.425L14.225 6.52498C14.625 6.12498 15.225 6.12498 15.625 6.52498C16.025 6.92498 16.025 7.525 15.625 7.925L10.725 12.8249C10.325 13.2249 10.325 13.8249 10.725 14.2249C11.125 14.6249 11.725 14.6249 12.125 14.2249L19.125 7.22493C19.525 6.82493 19.725 6.425 19.725 5.925C19.725 5.325 19.525 4.825 19.125 4.425C18.725 4.025 18.725 3.42498 19.125 3.02498C19.525 2.62498 20.125 2.62498 20.525 3.02498C21.325 3.82498 21.725 4.825 21.725 5.925C21.725 6.925 21.325 7.82498 20.525 8.52498L13.525 15.525C12.325 16.725 10.525 16.725 9.32499 15.625Z" fill="currentColor"/>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    匯入類別多國語系
                </button>
                <input id="upload_lang_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >
                <!--end::Import user-->
                <!--begin::Import user-->
                <button type="button" class="btn btn-primary me-3" id="import_supplier_btn" {{--data-bs-toggle="modal" data-bs-target="#detail_modal"--}}>
                    <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/metronic/releases/2022-07-14-092914/core/html/src/media/icons/duotune/communication/com008.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M4.425 20.525C2.525 18.625 2.525 15.525 4.425 13.525L14.825 3.125C16.325 1.625 18.825 1.625 20.425 3.125C20.825 3.525 20.825 4.12502 20.425 4.52502C20.025 4.92502 19.425 4.92502 19.025 4.52502C18.225 3.72502 17.025 3.72502 16.225 4.52502L5.82499 14.925C4.62499 16.125 4.62499 17.925 5.82499 19.125C7.02499 20.325 8.82501 20.325 10.025 19.125L18.425 10.725C18.825 10.325 19.425 10.325 19.825 10.725C20.225 11.125 20.225 11.725 19.825 12.125L11.425 20.525C9.525 22.425 6.425 22.425 4.425 20.525Z" fill="currentColor"/>
                            <path d="M9.32499 15.625C8.12499 14.425 8.12499 12.625 9.32499 11.425L14.225 6.52498C14.625 6.12498 15.225 6.12498 15.625 6.52498C16.025 6.92498 16.025 7.525 15.625 7.925L10.725 12.8249C10.325 13.2249 10.325 13.8249 10.725 14.2249C11.125 14.6249 11.725 14.6249 12.125 14.2249L19.125 7.22493C19.525 6.82493 19.725 6.425 19.725 5.925C19.725 5.325 19.525 4.825 19.125 4.425C18.725 4.025 18.725 3.42498 19.125 3.02498C19.525 2.62498 20.125 2.62498 20.525 3.02498C21.325 3.82498 21.725 4.825 21.725 5.925C21.725 6.925 21.325 7.82498 20.525 8.52498L13.525 15.525C12.325 16.725 10.525 16.725 9.32499 15.625Z" fill="currentColor"/>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    匯入廠商對應代碼
                </button>
                <input id="upload_supplier_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >
                <!--end::Import user-->
                <!--begin::Add user-->
                <button type="button" class="btn btn-primary" id="add_btn" {{--data-bs-toggle="modal" data-bs-target="#detail_modal"--}}>
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="black" />
                            <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="black" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    新增
                </button>
                <!--end::Add user-->
            </div>
            <!--end::Toolbar-->
           
            <!--begin::Modal - Add task-->
            <div class="modal fade" id="detail_modal" tabindex="-1" aria-hidden="true" >
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-900px" >
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header" id="detail_modal_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bolder">類別明細-<span class='modal_type'></span></h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close" id="modal_close">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                <span class="svg-icon svg-icon-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                                        <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                            <!--begin::Form-->
                            <form id="detail_fm" class="form" method="post" enctype="multipart/form-data" >
                                <input type='hidden' id='detail_type' name='detail_type'/>
                                <input type='hidden' id='detail_master_id' name='detail_master_id'/>
                                <!--begin::Scroll-->
                                <div class="d-flex flex-column scroll-y me-n7 pe-7" id="detail_modal_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#detail_modal_header" data-kt-scroll-wrappers="#detail_modal_scroll" data-kt-scroll-offset="300px">
                                    <div class="fv-row mb-7 row">
                                        <div class='col-12'>
                                            {{-- 上傳照片 --}}
                                            <label class="fw-bold fs-6 mb-2">封面照</label>

                                            <!--begin::Dropzone-->
                                            <div class="dropzone" id="picture">
                                                <!--begin::Message-->
                                                <div class="dz-message needsclick">
                                                    <!--begin::Icon-->
                                                    {{-- <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i> --}}
                                                    <i class="la la-camera text-primary fs-3x"></i>
                                                    <!--end::Icon-->

                                                    <!--begin::Info-->
                                                    <div class="ms-4">
                                                        <h3 class="fs-5 fw-bolder text-gray-900 mb-1">上傳其他照片(拖曳或點選上傳).</h3>
                                                        <span class="fs-7 fw-bold text-gray-400">最多上傳1張</span>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                            </div>
                                            <!--end::Dropzone-->
                                        </div>
                                    </div>
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <!--begin::Wrapper-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Label-->
                                            <div class="me-5">
                                                <!--begin::Label-->
                                                <label class="fs-6 fw-bold">類別是否上架?</label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <div class="fs-7 fw-bold text-muted"></div>
                                                <!--end::Input-->
                                            </div>
                                            <!--end::Label-->
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <!--begin::Input-->
                                                <input class="form-check-input" id="valid" name="valid" type="checkbox" value="1" />
                                                <!--end::Input-->
                                            </label>
                                            <!--end::Switch-->
                                        </div>
                                        <!--begin::Wrapper-->
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row">
                                        <div class='col-6'>
                                            <label class="fw-bold fs-6 mb-2">{{ __('basic.Parent') }}</label>
                                            <!--begin::Input-->
                                            <select id="parent" name="parent" data-control="select2" data-placeholder="{{__('basic.PleaseChoice')}}" data-dropdown-parent="#detail_modal" data-allow-clear="true" class="form-select form-select-solid fw-bolder" >
                                                {{-- {!! app('FrontendService')->getOption($select['parent'],'id','name','',__('basic.PleaseChoice')) !!} --}}
                                                <option value="">{{__('basic.PleaseChoice')}}</option>
                                                @foreach($select['parent'] as $value)
                                                    <option value="{{$value['id']}}">{{ $value['code']."-".$value['name'] }}</option>
                                                @endforeach
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                         <div class='col-6'>
                                            <label class="fw-bold fs-6 mb-2">{{ __('stock.SKUCode') }}</label>
                                            <input type="text" id="sku_code" name="sku_code" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    @foreach($select['lang'] as $k => $v) 
                                        @if($k==0 || $k%2==0)
                                            <div class="fv-row mb-7 row">
                                        @endif
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ __('basic.Name')."(".$v['name'].")" }}</label>
                                                <input type="text" id="{{ 'name_'.$v['id'] }}" name="lang_name[{{ $v['id'] }}]" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                            </div>
                                        @if($k%2==1 || ($k+1)==count($select['lang']))
                                            </div>
                                        @endif
                                    @endforeach
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    {{-- <div class="fv-row mb-7 row">
                                        <div class='col-12'>
                                            <label class="required fw-bold fs-6 mb-2">{{ __('basic.Name') }}</label>
                                            <input type="text" id="name" name="name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" value="" />
                                        </div>
                                    </div> --}}
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    {{-- <div class="fv-row mb-7 row">
                                        <div class="col-12">
                                            <label class="fw-bold fs-6 mb-2">{{ __('basic.Description') }}</label>
                                            <textarea id="description" name="description" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="" rows=3 ></textarea>
                                        </div>
                                    </div> --}}
                                    <!--end::Input group-->
                                    {{-- <div class="mb-8 mt-5 text-center">
                                        <!--begin::Title-->
                                        <h1 class="mb-0">{{ __('basic.Lang') }}</h1>
                                        <!--end::Title-->
                                    </div> --}}
                                    <!--begin::Repeater-->
                                    {{-- <div id="repeater_detail">
                                        <!--begin::Form group-->
                                        <div class="form-group">
                                            <div data-repeater-list="repeater_detail">
                                                <div class="form-group row mb-5">
                                                    <div class="col-md-3 text-center">
                                                        <label class="form-label">{{ __('basic.Lang') }}</label>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <label class="form-label">{{ __('basic.Name') }}</label>
                                                    </div>
                                                    <div class="col-md-4 text-center">
                                                        <label class="form-label">{{ __('basic.Description') }}</label>
                                                    </div>
                                                    <div class="col-md-2 text-center"></div>
                                                </div>
                                                <div data-repeater-item>
                                                    <div class="form-group row mb-5">
                                                        <div class="col-md-3">
                                                            <select name="lang_id" data-kt-repeater="select2" data-placeholder="{{__('basic.PleaseChoice')}}" data-dropdown-parent="#detail_modal" class="form-select form-select-solid fw-bolder detail_lang_id">
                                                                {!! app('FrontendService')->getOption($select['lang'],'id','name','','') !!}
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <input type="text" name="name" class="form-control detail_name mb-2 mb-md-0" placeholder="" />
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="text" name="description" class="form-control detail_description mb-2 mb-md-0" placeholder="" />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mb-2 mb-md-0 del_row_btn">
                                                                <i class="la la-trash-o fs-3"></i>{{ __('basic.DeleteThisRow') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Form group-->

                                        <!--begin::Form group-->
                                        <div class="form-group mt-5">
                                            <a href="javascript:;" data-repeater-create class="btn btn-light-primary add_row_btn">
                                                <i class="la la-plus"></i>{{ __('basic.AddRow') }}
                                            </a>
                                        </div>
                                        <!--end::Form group-->
                                    </div> --}}
                                    <!--end::Repeater-->
                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7 row" >
                                        <div class="col-12">
                                            <h2 class="fw-bolder mb-2">供應商</h2>
                                            <!--begin::Repeater-->
                                            <div id="partner_detail">
                                                <!--begin::Form group-->
                                                <div class="form-group">
                                                    <div data-repeater-list="partner_detail">
                                                        <div data-repeater-item>
                                                            <div class="form-group row mb-5">
                                                                <div class="col-md-4">
                                                                    <select name="partner_id" data-kt-repeater="select2" data-placeholder="{{__('basic.PleaseChoice')}}" data-dropdown-parent="#detail_modal" class="form-select form-select-solid fw-bolder supplier_partner_id" data-allow-clear="true">
                                                                        {!! app('FrontendService')->getOption($select['supplier'],'id','name','',__('basic.PleaseChoice')) !!}
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <input type="text" name="stock_category_code" class="form-control form-control-solid mb-2 mb-md-0 supplier_stock_category_code" placeholder="廠商對應商品類別編號 " />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mb-2 mb-md-0 del_row_btn">
                                                                        <i class="la la-trash-o"></i>{{__('basic.Delete')}}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--end::Form group-->

                                                <!--begin::Form group-->
                                                <div class="form-group mt-5">
                                                    <a href="javascript:;" data-repeater-create class="btn btn-light-primary add_row_btn">
                                                        <i class="la la-plus"></i>新增供應商
                                                    </a>
                                                </div>
                                                <!--end::Form group-->
                                            </div>
                                            <!--end::Repeater-->
                                        </div>
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::Scroll-->
                                <!--begin::Actions-->
                                <div class="text-center pt-15">
                                    <button type="submit" class="btn btn-primary me-3" data-kt-users-modal-action="submit"  id="modal_submit">
                                        <span class="indicator-label">{{ __('basic.Save') }}</span>
                                        <span class="indicator-progress">{{ __('basic.PleaseWait') }}...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                    <button type="reset" class="btn btn-light " data-kt-users-modal-action="cancel" id="modal_cancel">{{ __('basic.Cancel') }}</button>
                                </div>
                                <!--end::Actions-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Modal body-->

                        <div class="overlay-layer bg-dark-o-10" style='display: none;' >
                            <div class="spinner spinner-primary"></div>
                        </div>

                    </div>
                    <!--end::Modal content-->
                </div>
                <!--end::Modal dialog-->
            </div>
            <!--end::Modal - Add task-->
        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="data_table">
            <!--begin::Table head-->
            <thead>
                <!--begin::Table row-->
                <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                    {{-- <th class="w-10px pe-2">
                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                            <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#data_table .form-check-input" value="1" />
                        </div>
                    </th> --}}
                    <th class=" min-w-100px">
                        {{ __('basic.ItemIndex') }}
                    </th>
                    <th class="text-center min-w-100px">{{ __('basic.Valid') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Code') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Parent') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Class') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Name') }}</th>
                    <th class="text-center min-w-125px">{{ __('stock.SKUCode') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Description') }}</th>
                    <th class="text-center min-w-100px">{{ __('basic.Actions') }}</th>
                </tr>
                <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="text-gray-600 fw-bold">
            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>
<!--end::Card-->
@endsection