@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 = 'Member';
        form_obj.controller = 'MemberController';
        form_obj.route_name = '{{ basename(url()->current()) }}';

        dropzone2 = new CustomDropzone(_dp); // headshot dropzone
        const c_dp = {
            'acceptedFiles': 'image/jpeg',
            'type': 'insert',
            'upload_root_path': '{{ addslashes(storage_path('app/public/member')) }}',
            'url_root_path': '{{ addslashes(url('storage/member')) }}',
            'maxWidth': null,
            'maxHeight': null,
            'print_log': false,
        }

        // 驗證
        const validator = FormValidation.formValidation(
            document.getElementById('detail_fm'), {
                fields: {
                    'name': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Name') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'account': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Account') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'mobile': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Mobile') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'password': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Password') . __('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') {
                        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);

                                    if ($('.dropzone').length > 0) {
                                        $('.dropzone').each(function(i, o) {
                                            $(o).children('.dz-preview').each(function() {
                                                $(this).attr('upload', 1);
                                            })
                                        })
                                    }

                                    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');
                    }
                },
                error: ajaxError
            });

        }

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

            if (!empty(data['org_uniform_number'])) {
                $('#account_type_0').click();
            } else {
                $('#account_type_1').click();
            }

            $('input,textarea,select').each(function() {
                if (this.type == 'checkbox' || this.type == 'radio') return;
                if (this.id in data) {
                    if (empty(data[this.id])) return;
                    // console.log(this.type,this.id)
                    this.value = data[this.id];

                    if (this.multiple) {
                        if (!empty(data[this.id])) {
                            $(this).val(data[this.id].split(','));
                        }
                    }
                    if (this.type == 'select' || this.type == 'select-one' || this.type == 'select-multiple') $(
                        this).trigger('change');
                }
            });


            $('input[type="checkbox"],input[type="radio"]').each(function(i, o) {
                if (this.id in data && data[this.id] == this.value) {
                    this.checked = true;
                    this.click();
                    return;
                }

                if (this.name in data && data[this.name] == this.value) {
                    this.checked = true;
                    this.click();
                    return;
                }
            });

            if (data['user']['is_enable']) $('#is_enable').prop('checked', true);
            if (data['user']['account']) $('#account').val(data['user']['account']);

            //選單
            if (data.dropdown_menu != null) {
                for (var i in data.dropdown_menu) {
                    var dropdownId = data.dropdown_menu[i]['dropdown_menu_id'];
                    var dropdownDetailId = data.dropdown_menu[i]['dropdown_menu_detail_id'].split(',');
                    $('#' + dropdownId).val(dropdownDetailId);

                }
            }

            // 標籤
            if (data.tag != null) {
                var ids = [];
                for (var i in data.tag) {
                    ids.push(data.tag[i].tag_id);
                }
                $('#member_tag_id').val(ids);
            }

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

            // 大頭貼
            dropzone2.destroy(); // destroy
            let h_dp = c_dp;
            h_dp.target = '#head_shot';
            h_dp.maxFiles = 1;
            h_dp.master_id = data['id'];
            dropzone2.setParams(h_dp);
            dropzone2.init();

            // console.log(data['media']);
            // 檔案
            if (!empty(data['media']) && data['media'][0] != null) {

                var media = data['media'][0];
                var headshot = [{
                    'name': media['org_name'],
                    'org_name': media['name'],
                    'media_type': media['media_type'],
                    'size': media['size'],
                }]
                dropzone2.createFile(headshot);

                // var files = [];
                // for(var i=1; 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);
            }

            $('.recommend_member_name').text(data['recommend_member_name_text']);

            $('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
            });
        }

        form_obj.detail.ajax.clone = function(id) {
            page.loading.start();
            $.ajax({
                data: {
                    module: form_obj.module,
                    controller: form_obj.controller,
                    type: 'clone',
                    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
            });
        }

        form_obj.detail.ajax.export = function() {
            page.loading.start();
            $.ajax({
                data: {
                    module: form_obj.module,
                    controller: form_obj.controller,
                    type: 'export',
                    print_log: false,
                },
                dataType:'json',
                success: function(data,textStatus,jqXHR) {
                    // console.log(data);
                    console.log(data);
                    page.loading.stop();

                    if(data.status)
                    {
                        window.location.href = data.data.url;
                    }
                },
                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: null,
                        className: 'text-center',
                        orderable: false,
                        render: function(data, type, row) {
                            var tableActionMenu = [];
                            tableActionMenu = dataTable.getTableActionMenuItemShortCode('er');
                            tableActionMenu.push({
                                text: '<i class="la la-code-branch fs-5 me-2"></i>{{ __('member.CreateTwoStar') }}',
                                method: '',
                                className: 'clone_btn'
                            });

                            return dataTable.getTableActionMenu(tableActionMenu, false);
                            // return dataTable.getTableActionMenu('er',true);
                        },
                    },
                    {
                        data: "sorting",
                        className: 'text-center'
                    },
                    {
                        data: "code",
                        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: "recommend_member_name_text",
                        className: 'text-center'
                    },
                    {
                        data: "org_recommend_member_name_text",
                        className: 'text-center'
                    },
                    {
                        data: "promo_code",
                        className: 'text-center'
                    },
                    {
                        data: "account",
                        className: 'text-center'
                    },
                    {
                        data: "uniform_number_combine",
                        className: 'text-center uniform_number_combine'
                    },
                    {
                        data: "mobile",
                        className: 'text-center'
                    },
                    {
                        data: "email",
                        className: 'text-center'
                    },
                    {
                        data: "member_level_name",
                        className: 'text-center'
                    },
                    {
                        data: "country_name",
                        className: 'text-center'
                    },
                    {
                        data: "join_sale_point_name",
                        className: 'text-center'
                    },
                    {
                        data: "member_tag_name",
                        className: 'text-center'
                    },
                    // { data: "is_enable", className: 'text-center' },
                    // { data: "is_verify", className: 'text-center' },
                    {
                        data: "description",
                        className: 'text-center'
                    },
                ];
            }

            dataTable.defineOrder = () => {
                return [
                    [2, 'desc']
                ];
            }

            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,
                        "name": value.name,
                        "recommend_member_name": value.recommend_member_name,
                        "recommend_member_name_text": value.recommend_member_name_text,
                        "org_recommend_member_name": value.org_recommend_member_name,
                        "org_recommend_member_name_text": value.org_recommend_member_name_text,
                        "promo_code": value.promo_code,
                        "account": value.user.account,
                        "mobile": value.mobile,
                        "email": value.email,
                        "uniform_number_combine": value.uniform_number_combine,
                        "member_level_name": value.member_level_name_html,
                        "country_name": value.country_name,
                        "join_sale_point_name": value.join_sale_point_name,
                        "member_tag_name": value.member_tag_name,
                        // "is_enable": value.is_enable_text,
                        // "is_verify": value.is_verify_text,
                        // "email": empty(value.email)?'--':value.email,
                        "description": empty(value.description) ? '--' : value.description,
                    }
                })
                return row;
            }

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

                dataTable.dt.on('draw', function() {
                    $('.clone_btn').click(function(e) {
                        Swal.fire({
                            text: "{{ __('member.AreYouSureYouWouldLikeToCreateTwoStar') }}?",
                            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) {
                                page.loading.start();

                                const parent = e.target.closest('tr');
                                // Get data info
                                const dataId = parent.querySelector(".data_id")
                                    .value;

                                const checkUN = parent.querySelector(
                                    '.uniform_number_combine').innerHTML;

                                if (checkUN == '') {
                                    Swal.fire({
                                        text: "{{ __('basic.UniformNumber2') . __('basic.CanNotEmpty') }}!",
                                        icon: "error",
                                        buttonsStyling: !1,
                                        confirmButtonText: "{{ __('basic.OK') }}",
                                        customClass: {
                                            confirmButton: "btn btn-primary",
                                        }
                                    }).then((function(t) {
                                        page.loading.stop();
                                    }));

                                    return;
                                }

                                form_obj.detail.ajax.clone(dataId);
                            }
                        }))
                    })

                });

                $('#birthdate_y,#birthdate_m').on('change', function() {
                    // console.log('in2');
                    var dt = new Date();
                    var year = $('#birthdate_y').val();
                    if (year == '') year = dt.getFullYear();

                    var month = $('#birthdate_m').val();
                    if (month == '') return;

                    var days = new Date(year, month, 0).getDate();
                    var obj = $('#birthdate_d');
                    obj.html('<option value=""></option>');
                    for (var i = 1; i <= days; i++) {
                        obj.append('<option value="' + i + '">' + i + '</option>');
                    }
                });

                $('#recommend_member_id').select2({
                    dropdownParent: $('#detail_modal'),
                    ajax: {
                        delay: 250,
                        url: '{{ url('ajax') }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: 'json',
                        data: function(params) {
                            var query = {
                                module: form_obj.module,
                                controller: form_obj.controller,
                                type: 'read',
                                where: {
                                    search: params.term,
                                },
                                length: 20, //只抓20個
                            }

                            if ($('#' + form_obj.detail.master_id).val() != '') {
                                query.where.raw = ['member.id != "' + $('#' + form_obj.detail
                                    .master_id).val() + '"'];
                            }
                            // Query parameters will be ?search=[term]&type=public
                            return query;
                        },
                        processResults: function(data) {
                            if (!data.status) return;

                            var dataList = data.data.list;
                            var items = [];
                            for (var i in dataList) {
                                var row = dataList[i];
                                items.push({
                                    id: row.id,
                                    text: row.name_text
                                });
                            }

                            return {
                                results: items,
                            }
                        }

                    }
                })

                $('.reset_recommend_member_btn').click(function() {
                    Swal.fire({
                        text: "{{ __('basic.AreYouSureYouWouldLikeToReset') }}?",
                        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) {
                            $('#recommend_member_id').prop('disabled', false);
                            $('.recommend_member_name').hide();
                            $('.reset_recommend_member_btn').hide();
                            $('.cancel_recommend_member_btn').show();

                            $('.recommend_member_div').siblings('.select2-container')
                                .show();
                        }
                    }))
                });

                $('.cancel_recommend_member_btn').click(function() {
                    $('#recommend_member_id').prop('disabled', true);
                    $('.recommend_member_name').show();
                    $('.reset_recommend_member_btn').show();
                    $('.cancel_recommend_member_btn').hide();

                    $('.recommend_member_div').siblings('.select2-container').hide();
                });

                $('.account_type').click(function() {
                    $('#uniform_number').show();
                    $('#org_uniform_number').hide();
                    $('#org_uniform_number').val('');
                    if (this.value == '0') {
                        $('#uniform_number').hide();
                        $('#uniform_number').val('');
                        $('#org_uniform_number').show();
                    }
                    $('#account').val('');
                });
                $('.uniform_number').on('input', function() {
                    $('#account').val(this.value);
                })

                //匯出
                $('#export_btn').click(function(){
                    form_obj.detail.ajax.export();
                });

                $('body')
                    .on('add_row_end', function() {
                        $('#account').prop('disabled', false);

                        //改必填
                        $('#password').prev().addClass('required');
                        $('#password').prop('placeholder', '');
                        validator.enableValidator('password');

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

                        // 大頭貼
                        dropzone2.destroy(); // destroy
                        let h_dp = c_dp;
                        h_dp.target = '#head_shot';
                        h_dp.maxFiles = 1;
                        h_dp.master_id = '';
                        dropzone2.setParams(h_dp);
                        dropzone2.init();

                        //推薦人顯示區塊先隱藏
                        $('.recommend_member_div').hide();

                        $('#recommend_member_id').prop('disabled', false);
                        $('.recommend_member_div').siblings('.select2-container').show();

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

                        //改非必填
                        $('#password').prev().removeClass('required');
                        $('#password').prop('placeholder', '(無修改請留空)');
                        validator.disableValidator('password');

                        //推薦人選單先隱藏起來
                        $('.recommend_member_div').show();

                        $('#recommend_member_id').prop('disabled', true);
                        $('.recommend_member_name').show();
                        $('.reset_recommend_member_btn').show();
                        $('.cancel_recommend_member_btn').hide();

                        $('.recommend_member_div').siblings('.select2-container').hide();

                    })
                    .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
                                });
                            })
                        }

                    });

                //select2的事件上面才新增 所以再呼叫一次
                // KTApp.initSelect2();
            });
        })
    </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-->

                    <button type="button" class="btn btn-info me-5" id="export_btn">
                        <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>
                        匯出
                    </button>

                    <!--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 modal-xl">
                        <!--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' />
                                    <input type='hidden' id='user_id' name='user_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">
                                            {{-- 啟用狀態 --}}
                                            <input type='hidden' id="is_enable" name="is_enable" value="1" />
                                            {{-- <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                            <label class="fw-bold fs-6 mb-2">{{ __('member.MemberActivation') }}</label>
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <!--begin::Input-->
                                                <input class="form-check-input" id="is_enable" name="is_enable" type="checkbox" value="1" />
                                                <!--end::Input-->
                                            </label>
                                            <!--end::Switch-->
                                        </div> --}}

                                            {{-- 認證狀態 --}}
                                            {{-- <div class='col-12 col-lg-6'>
                                            <label class="fw-bold fs-6 mb-2">{{ __('basic.VerifyStatus') }}</label>
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <!--begin::Input-->
                                                <input class="form-check-input" id="is_verify" name="is_verify" type="checkbox" value="1" />
                                                <!--end::Input-->
                                            </label>
                                            <!--end::Switch-->
                                        </div>  --}}

                                            {{-- 大頭照 --}}
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>

                                                <label class="fw-bold fs-6 mb-2">{{ __('member.HeadShot') }}</label>

                                                <!--begin::Dropzone-->
                                                <div class="dropzone " id="head_shot">
                                                    <!--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 class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                            <label class=" fw-bold fs-6 mb-2">
                                                <span class='required'>{{ __('member.Level') }}</span>
                                            </label>
                                            <select class="form-select form-select-solid fw-bolder" id='member_level_id' name="member_level_id" data-kt-select2="true" data-placeholder="{{ __('member.Level') }}" data-allow-clear="false" data-hide-search="true" >
                                                {!! app('FrontendService')->getOption($select['member_level'],'id','name','','') !!}
                                            </select>
                                        </div> --}}
                                        </div>

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 帳號 (身份證) --}}
                                                <label class=" fw-bold fs-6 mb-2">
                                                    <span class='required'>{{ __('basic.LoginAccount') }}</span>
                                                    <div class='form-check form-check-inline ms-2'>
                                                        <input type='radio' class='form-check-input account_type'
                                                            id='account_type_1' name='account_type' value='1'
                                                            checked />
                                                        <label for='account_type_1'
                                                            class='form-check-label'>{{ __('basic.UniformNumberOrARCNumber') }}</label>
                                                    </div>

                                                    <div class='form-check form-check-inline'>
                                                        <input type='radio' class='form-check-input account_type'
                                                            id='account_type_0' name='account_type' value='0' />
                                                        <label for='account_type_0'
                                                            class='form-check-label'>{{ __('basic.IndonesiaUniformNumber') }}</label>
                                                    </div>
                                                </label>
                                                <input type="hidden" class="form-control form-control-solid"
                                                    id='account' name='account' value='' />
                                                <input type="text"
                                                    class="form-control form-control-solid uniform_number"
                                                    id="uniform_number" name='uniform_number'
                                                    placeholder="{{ __('basic.UniformNumberOrARCNumber') }}">
                                                <input type="text"
                                                    class="form-control form-control-solid uniform_number"
                                                    id="org_uniform_number" name='org_uniform_number'
                                                    placeholder="{{ __('basic.IndonesiaUniformNumber') }}"
                                                    style="display:none;" />
                                            </div>

                                            <div class='col-12 col-lg-6'>
                                                {{-- 密碼 --}}
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('basic.LoginPassword') }}</label>
                                                <div class="input-group ">
                                                    <input type='password' id="password" name="password"
                                                        class="form-control form-control-solid" placeholder=""
                                                        value="" />
                                                    {{-- <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                                    <i class="bi bi-eye-slash fs-2"></i>
                                                    <i class="bi bi-eye fs-2 d-none"></i>
                                                </span> --}}
                                                    {{-- <button type='button' class="btn btn-danger" >
                                                    {{ __('basic.Reset') }}
                                                </button> --}}
                                                </div>
                                            </div>

                                        </div>


                                        {{-- <div class="fv-row mb-7 row"> --}}
                                        {{-- <div class='col-12'> --}}
                                        {{-- 上傳照片 --}}
                                        {{-- <label class="fw-bold fs-6 mb-2">{{ __('member.AnotherPicture') }}</label>

                                            <!--begin::Dropzone-->
                                            <div class="dropzone" id="picture">
                                                <!--begin::Message-->
                                                <div class="dz-message needsclick">
                                                    <!--begin::Icon-->
                                                    <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">最多上傳10張</span>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                            </div>
                                            <!--end::Dropzone-->
                                        </div>
                                    </div> --}}

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 姓名 --}}
                                                <label class="required fw-bold fs-6 mb-2">{{ __('basic.Name2') }}</label>
                                                <input type="text" id="name" name="name"
                                                    class="form-control form-control-solid" placeholder=""
                                                    value="" />
                                                <input type="hidden" id="tree_level" name="tree_level"
                                                    class="form-control form-control-solid" placeholder=""
                                                    value="" />
                                                <input type="hidden" id="org_tree_level" name="org_tree_level"
                                                    class="form-control form-control-solid" placeholder=""
                                                    value="" />
                                            </div>

                                            {{-- <div class='col-12 col-lg-6'> --}}
                                            {{-- 暱稱 --}}
                                            {{-- <label class="fw-bold fs-6 mb-2">{{ __('basic.Nickname') }}</label>
                                            <input type="text" id="name2" name="name2" class="form-control form-control-solid" placeholder="" value="" />
                                        </div> --}}
                                            <div class='col-12 col-lg-6'>
                                                {{-- 推薦人 --}}
                                                <label
                                                    class="fw-bold fs-6 mb-2">{{ __('member.RecommendMember') }}</label>
                                                <select class="form-select form-select-solid fw-bolder"
                                                    id="recommend_member_id" name="recommend_member_id"
                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                    data-allow-clear="true">
                                                    <option value=""></option>
                                                </select>
                                                <div class='recommend_member_div'
                                                    style='display: flex; align-items: center;'>
                                                    <span class="text-primary recommend_member_name h4 m-0"></span>
                                                    <button type='button'
                                                        class="btn btn-danger btn-sm ms-2 reset_recommend_member_btn">{{ __('basic.Reset') }}</button>
                                                    <button type='button'
                                                        class="btn btn-secondary btn-sm cancel_recommend_member_btn mt-3">{{ __('basic.CancelChange') }}</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 手機 --}}
                                                <label class="required fw-bold fs-6 mb-2">{{ __('basic.Mobile') }}</label>
                                                <input type="text" class="form-control form-control-solid"
                                                    id='mobile' name='mobile' value='' />
                                            </div>
                                            <div class='col-12 col-lg-6'>
                                                {{-- Email --}}
                                                <label class=" fw-bold fs-6 mb-2">{{ __('basic.Email') }}</label>
                                                <input type="mail" class="form-control form-control-solid"
                                                    id='email' name='email' value='' />
                                            </div>

                                        </div>
                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 手機 --}}
                                                <label class=" fw-bold fs-6 mb-2">{{ __('basic.Mobile') }}2</label>
                                                <input type="text" class="form-control form-control-solid"
                                                    id='mobile2' name='mobile2' value='' />
                                            </div>
                                            <div class='col-12 col-lg-6'>
                                                {{-- Email --}}
                                                <label class=" fw-bold fs-6 mb-2">{{ __('basic.Mobile') }}3</label>
                                                <input type="text" class="form-control form-control-solid"
                                                    id='mobile3' name='mobile3' value='' />

                                            </div>

                                        </div>

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 生日 --}}
                                                <label class="fw-bold fs-6 mb-2">{{ __('basic.Birthdate') }}</label>
                                                {{-- <input type="date" class="form-control form-control-solid" id='birthdate' name='birthdate' value='' /> 
                                            --}}

                                                <div class="d-flex align-items-center">
                                                    {{-- <input type="number" class="form-control form-control-solid text-end" id="birthdate_y" name="birthdate_y" placeholder="" value="" />  --}}
                                                    <select class="form-select form-select-solid fw-bolder"
                                                        id='birthdate_y' name="birthdate_y" data-kt-select2="true"
                                                        data-placeholder="{{ __('basic.Year') }}" data-allow-clear="true"
                                                        data-hide-search="true">
                                                        <option value=""></option>
                                                        @for ($i = date('Y') - 18; $i > 1911; $i--)
                                                            <option value="{{ $i }}">{!! $i !!}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                    <label for='birthdate_y' class='me-2'></label>

                                                    {{-- <input type="number" class="form-control form-control-solid text-end" id="birthdate_m" name="birthdate_m" placeholder="" value="" /> --}}
                                                    <select class="form-select form-select-solid fw-bolder"
                                                        id='birthdate_m' name="birthdate_m" data-kt-select2="true"
                                                        data-placeholder="{{ __('basic.Month') }}"
                                                        data-allow-clear="true" data-hide-search="true">
                                                        <option value=""></option>
                                                        @for ($i = 1; $i < 13; $i++)
                                                            <option value="{{ $i }}">{!! $i !!}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                    <label for='birthdate_m' class='me-2'></label>

                                                    <select class="form-select form-select-solid fw-bolder"
                                                        id='birthdate_d' name="birthdate_d" data-kt-select2="true"
                                                        data-placeholder="{{ __('basic.Date') }}" data-allow-clear="true"
                                                        data-hide-search="true">
                                                        <option value=""></option>
                                                        {{-- @for ($i = 1; $i < 32; $i++)
                                                        <option value="{{ $i }}">{!! $i !!}</option>
                                                    @endfor --}}
                                                    </select>
                                                    {{-- <label for='birthdate_d' class='ms-1 me-2' >日</label> --}}
                                                </div>
                                            </div>

                                            <div class='col-12 col-lg-6'>
                                                {{-- 性別 --}}
                                                <label class="required fw-bold fs-6 mb-2">{{ __('basic.Sex') }}</label>

                                                <div class="btn-group w-100" data-kt-buttons="true"
                                                    data-kt-buttons-target="[data-kt-button]">
                                                    <label
                                                        class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success active"
                                                        data-kt-button="true">
                                                        <input type='radio' class='btn-check' id='sex_0'
                                                            name='sex_id' value='0' checked />
                                                        {{ __('basic.Female') }}
                                                    </label>

                                                    <label
                                                        class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success "
                                                        data-kt-button="true">
                                                        <input type='radio' class='btn-check' id='sex_1'
                                                            name='sex_id' value='1' />
                                                        {{ __('basic.Male') }}
                                                    </label>

                                                    <label
                                                        class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success "
                                                        data-kt-button="true">
                                                        <input type='radio' class='btn-check' id='sex_2'
                                                            name='sex_id' value='2' />
                                                        {{ __('basic.CrossGender') }}
                                                    </label>

                                                    <label
                                                        class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success"
                                                        data-kt-button="true">
                                                        <input type='radio' class='btn-check' id='sex_99'
                                                            name='sex_id' value='99' />
                                                        {{ __('basic.Unknown') }}
                                                    </label>
                                                </div>
                                            </div>

                                            {{-- <div class='col-12 col-lg-6'> --}}
                                            {{-- 罩杯 --}}
                                            {{-- <label class="fw-bold fs-6 mb-2">{{ __('basic.Cup') }}</label>

                                            <input type="text" class="form-control form-control-solid" id="cup" name="cup" min=0 placeholder="" value="" />
                                        </div> --}}
                                        </div>

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 國家 --}}
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('basic.Country') }}</label>
                                                <select class="form-select form-select-solid fw-bolder" id='country_id'
                                                    name="country_id" data-kt-select2="true"
                                                    data-placeholder="{{ __('basic.Country') }}" data-allow-clear="false"
                                                    data-hide-search="true">
                                                    {!! app('FrontendService')->getOption($select['country'], 'id', 'name', '', '') !!}
                                                </select>
                                            </div>
                                            <div class='col-12 col-lg-6'>
                                                {{-- 加入管道 --}}
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('member.JoinSalePointName') }}</label>
                                                <select class="form-select form-select-solid fw-bolder"
                                                    id='join_sale_point_id' name="join_sale_point_id"
                                                    data-kt-select2="true"
                                                    data-placeholder="{{ __('member.JoinSalePointName') }}"
                                                    data-allow-clear="false" data-hide-search="true">
                                                    <option value="website">官網</option>
                                                    <option value="line_tw">Line-台灣</option>
                                                    <option value="line_id">Line-印尼</option>
                                                    <option value="line_vn">Line-越南</option>
                                                    {{-- <option value="line_en">Line-菲律賓</option> --}}
                                                    <option value="line_ph">Line-菲律賓</option>
                                                    <option value="other">其他</option>
                                                </select>
                                            </div>

                                        </div>

                                        <div class="fv-row mb-7 row">
                                            <div class='col-12 col-lg-6 mb-7 mb-lg-0'>
                                                {{-- 標籤 --}}
                                                <label
                                                    class="fw-bold fs-6 mb-2">{{ __('basic.Member') . __('basic.Tag') }}</label>
                                                <select class="form-select form-select-solid fw-bolder" id='member_tag_id'
                                                    name="member_tag_id[]" data-kt-select2="true"
                                                    data-placeholder="{{ __('basic.Tag') }}" data-allow-clear="false"
                                                    data-hide-search="true" multiple>
                                                    {!! app('FrontendService')->getOption($select['tag'], 'id', 'name', '', '') !!}
                                                </select>
                                                <input type='hidden' name='process_member_tag' value='1' />
                                            </div>
                                        </div>


                                        {{-- <div class="fv-row mb-7 row"> --}}
                                        {{-- <div class='col-12 col-lg-6 mb-7 mb-lg-0'> --}}
                                        {{-- 身高 --}}
                                        {{-- <label class="fw-bold fs-6 mb-2">{{ __('basic.HumanHeight') }}</label>
                                            <input type="number" class="form-control form-control-solid text-end" id="height" name="height" min=0 placeholder="" value="160" />
                                        </div> --}}

                                        {{-- <div class='col-12 col-lg-6'> --}}
                                        {{-- 體重 --}}
                                        {{-- <label class="fw-bold fs-6 mb-2">{{ __('basic.HumanWeight') }}</label>
                                            <input type="number" class="form-control form-control-solid text-end" id="weight" name="weight" min=0 placeholder="" value="50" />
                                        </div>
                                    </div> --}}

                                        @foreach ($select['dropdown_menu'] as $idx => $dropdownMenu)
                                            @if ($idx % 2 == 0)
                                                @if ($idx != 0)
                                    </div>
                                    @endif
                                    <div class="fv-row mb-7 row">
                                        @endif

                                        <div class='col-12 col-lg-6 {!! $idx % 2 == 0 ? 'mb-7 mb-lg-0' : '' !!}'>
                                            <label class="fw-bold fs-6 mb-2">{{ $dropdownMenu['name'] }}
                                                {!! $dropdownMenu['is_multiple'] ? '(' . __('basic.Multiple') . ')' : '' !!} </label>
                                            <select class="form-select form-select-solid fw-bolder"
                                                id='{{ $dropdownMenu['id'] }}'
                                                name="member_dropdown[{!! $dropdownMenu['id'] !!}][]" data-kt-select2="true"
                                                data-placeholder="{{ __('basic.PleaseChoice') }}" data-allow-clear="true"
                                                data-hide-search="true" {!! $dropdownMenu['is_multiple'] ? 'multiple' : '' !!}>
                                                <option value=""></option>

                                                @foreach ($dropdownMenu['detail'] as $detailIdx => $detailRow)
                                                    <option value="{{ $detailRow['id'] }}">
                                                        {{ $detailRow['value'][0]['description'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @endforeach
                                        @if (count($select['dropdown_menu']) > 0)
                                    </div>
                                    @endif

                                    <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=""
                                                data-kt-autosize="true"></textarea>
                                        </div>
                                    </div>

                            </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 table-hover" 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="text-center min-w-100px">{{ __('basic.Actions') }}</th>
                    <th class=" min-w-100px">
                        {{ __('basic.ItemIndex') }}
                    </th>
                    <th class="text-center min-w-125px">{{ __('member.Code') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Name') }}</th>
                    <th class="text-center min-w-125px">{{ __('member.RecommendMember') }}</th>
                    <th class="text-center min-w-125px">{{ '原始推薦人' }}</th>
                    <th class="text-center min-w-125px">{{ '推薦碼' }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Account') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.UniformNumber2') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Mobile') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Email') }}</th>
                    <th class="text-center min-w-125px">{{ __('member.Level') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Country') }}</th>
                    <th class="text-center min-w-125px">{{ __('member.JoinSalePointName') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Tag') }}</th>
                    {{-- <th class="text-center min-w-125px">{{ __('member.Level') }}</th> --}}
                    {{-- <th class="text-center min-w-100px">{{ __('member.AcitvationStatus') }}</th> --}}
                    {{-- <th class="text-center min-w-100px">{{ __('member.VerifyStatus') }}</th> --}}
                    <th class="text-center min-w-125px">{{ __('basic.Description') }}</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