@extends('partial.master')
@section('page_title','序號管理')

@section('scripts')

<script type='text/javascript'>

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

    // 驗證
    const validator = FormValidation.formValidation(
        document.getElementById('detail_fm'),
        {
            fields: {
                'stock_id': {
                    validators: {
                        notEmpty: {
                            message: "{{ __('stock.Name').__('basic.CanNotEmpty') }}"
                        }
                    }
                },
                'serial_number': {
                    validators: {
                        notEmpty: {
                            message: "{{ __('point_card.SerialNumber').__('basic.CanNotEmpty') }}"
                        }
                    }
                },
                'password': {
                    validators: {
                        notEmpty: {
                            message: "{{ __('point_card.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);

                                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) {
        validator.resetForm(true);

        $('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){
            console.log(o);
            if(this.id in data && data[this.id]==this.value)
            {
                console.log(this);
                this.checked = true;
                // this.click();
                return;
            }
            
            if(this.name in data && data[this.name]==this.value)
            {
                this.checked = true;
                // this.click();
                return;
            }
        });
        
        // warehouse
        for(var i in data['warehouse'])
        {
            var warehouseRow = data['warehouse'][i];

            $('#warehouse_detail').find('[data-kt-repeater="select2"]')[i].value = warehouseRow['warehouse_id'];

            if(i<data['warehouse'].length-1)$('.add_warehouse_btn').click();
        }
        
        $('.member_name').text(data['member_full_name']);

        $('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.import = function(file) {
        page.loading.start();
        var formData = new FormData();
        formData.append('upload_file',file);
        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(data.status)
                {   
                    // Show popup confirmation
                    Swal.fire({
                        text: data.msg + "!",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "{{ __('basic.OK') }}",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    }).then((function(t) {
                        location.reload()
                    }));
                }
                else
                {
                    page.loading.stop();

                    var error_msg = '';
                    for(var i=0; i<data.data.length; i++) {
                        var error_row = data.data[i];
                        // console.log(error_row);
                        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';
                        }
                    }
                    // console.log('error_msg:'+error_msg);

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

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

    form_obj.detail.ajax.sendSerialNumberMsg = function(id){
        page.loading.start();
        $.ajax({
            data: {
                module: form_obj.module,
                controller: form_obj.controller,
                type: 'send',
                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' },
                { data: "stock_full_name", className: 'text-center',render: function (data, type, row) {
                        return `
                            <input type="hidden" class="data_id" value="${row.id}" />
                            <span class="">${data}</span>
                        `;
                    } 
                },
                { data: "serial_number", className: 'text-center' },
                { data: "password", className: 'text-center' },
                { data: "is_exchange_text", className: 'text-center' },
                { data: "member_full_name", className: 'text-center' },
                { data: "exchange_time", className: 'text-center' },
                { data: "description", className: 'text-center' ,orderable: false },
                { data: null, className: 'text-center' ,orderable: false,render: function (data, type, row) {
                        var tableActionMenu = [];
                        tableActionMenu = dataTable.getTableActionMenuItemShortCode('er');

                        if(row.is_exchange){
                            tableActionMenu.push({text:'<i class="la la-send fs-5 me-2"></i>{{ __('point_card.Send') }}',method:'',className:'send_btn'});
                        }

                        return dataTable.getTableActionMenu(tableActionMenu,false);

                        // return dataTable.getTableActionMenu('er',true);
                    }, 
                },
            ];
        }
        
        dataTable.defineOrder = () => {
            return [[ 4, 'asc' ],[2,'asc']];
        }

        dataTable.renderRow = (list)=>{
            if(list==undefined)return;
            var row = list.map ( function (value, index, array) {
                return {
                    "id": value.id,
                    "sorting": index+1,
                    "stock_code": value.stock_code,
                    "stock_name": value.stock_name,
                    "stock_full_name": value.stock_full_name,
                    "serial_number": value.serial_number,
                    "password": value.password,
                    "is_exchange": value.is_exchange,
                    "is_exchange_text": value.is_exchange_text ?? '--',
                    "member_full_name": value.member_full_name ?? '--',
                    "exchange_time": value.exchange_time ?? '--',
                    "description": (!empty(value.description))?value.description:"--",
                }
            })
            return row;
        }

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

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

                    $('.member_div').hide();

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

                })
                .on('edit_row_end',function(e){
					validator.resetForm(true);
                    $('select').trigger('change.select2');

                    $('.member_div').show();

                    $('#member_id').prop('disabled', true);
                    $('.member_name').show();
                    $('.reset_member_btn').show();
                    $('.cancel_member_btn').hide();

                    $('.member_div').siblings('.select2-container').hide();
                })
                .on('close_row_end',function(e){

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

                });
            

            dataTable.dt.on('draw', function () {

                $('.send_btn').click(function(e){
                    Swal.fire({
                        text: "{{__('point_card.AreYouSureSendToMember')}}?",
                        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) {
                            const parent = e.target.closest('tr');
                            const dataId = parent.querySelector(".data_id").value;

                            console.log('dataId', dataId);
                            form_obj.detail.ajax.sendSerialNumberMsg(dataId);
                        }
                    }))
                })

            });

            
            $('#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: 'Member',
                            controller: 'MemberController',
                            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_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) {
                        $('#member_id').prop('disabled', false);
                        $('.member_name').hide();
                        $('.reset_member_btn').hide();
                        $('.cancel_member_btn').show();
                        
                        $('.member_div').siblings('.select2-container').show();
                    }
                }))
            });

            $('.cancel_member_btn').click(function(){
                $('#member_id').prop('disabled', true);
                $('.member_name').show();
                $('.reset_member_btn').show();
                $('.cancel_member_btn').hide();
                
                $('.member_div').siblings('.select2-container').hide();
            });
            
            //匯出
            $('#export_btn').click(function(){
                form_obj.detail.ajax.export();
            });
        
            //匯入
            $('#import_btn').click(function(){
                $('#import_file').trigger('click');
            });

            //匯入序號
            $('#import_file').change(function(e) {
                var file = e.target.files[0];
                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) {
                    form_obj.detail.ajax.import(file);
                })
            });

        });
    })

</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::Add user-->
                <button type="button" class="btn btn-primary me-5" 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>

                <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>

                <button type="button" class="btn btn-success" id="import_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>
                <input id="import_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >
                <!--end::Add user-->
            </div>
            <!--end::Toolbar-->
           
        </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-125px">{{ __('stock.Name') }}</th>
                    <th class="text-center min-w-125px">{{ __('point_card.SerialNumber') }}</th>
                    <th class="text-center min-w-125px">{{ __('point_card.Password') }}</th>
                    <th class="text-center min-w-125px">{{ __('point_card.IsExchange') }}</th>
                    <th class="text-center min-w-125px">{{ __('point_card.ExchangeUser') }}</th>
                    <th class="text-center min-w-125px">{{ __('point_card.ExchangeTime') }}</th>
                    <th class="text-center min-w-125px">{{ __('basic.Description') }}</th>
                    <th class="text-center min-w-125px">{{ __('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-->


<!--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-800px" >
        <!--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">
                        <!--begin::Input group-->
                        <div class="fv-row mb-7 row">
                            <div class='col-md-12'>
                                <label class="required fw-bold fs-6 mb-2">{{ __('stock.Name') }}</label>
                                <select class="form-select form-select-solid fw-bolder"
                                    id="stock_id" name="stock_id" data-control="select2"
                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                    data-dropdown-parent="#detail_modal">
                                    {!! app('FrontendService')->getOption($select['stock'], 'id', 'full_name', '', '') !!}
                                </select>
                            </div>
                        </div>
                        <div class="fv-row mb-7 row">
                            <div class='col-md-6'>
                                <label class="required fw-bold fs-6 mb-2">{{ __('point_card.SerialNumber') }}</label>
                                <input class="form-control form-control-solid" type='text' placeholder="" id="serial_number" name="serial_number" />
                            </div>
                            <div class='col-md-6'>
                                <label class="required fw-bold fs-6 mb-2">{{ __('point_card.Password') }}</label>
                                <input class="form-control form-control-solid" type='text' placeholder="" id="password" name="password" />
                            </div>
                        </div>
                        <div class="fv-row mb-7 row">
                            <div class='col-md-6'>
                                <label class="required fw-bold fs-6 mb-2">{{ __('point_card.IsExchange') }}</label>
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" id="is_exchange" name="is_exchange"
                                        type="checkbox" value="1" />
                                </label>
                            </div>
                            <div class='col-md-6'>
                                <label class="fw-bold fs-6 mb-2">{{ __('point_card.ExchangeUser') }}</label>
                                <select class="form-select form-select-solid fw-bolder" id="member_id" name="member_id" data-placeholder="{{ __('basic.PleaseChoice') }}" data-allow-clear="true" >
                                    <option value=""></option>
                                </select>
                                <div class='member_div' style='display: flex; align-items: center;'>
                                    <span class="text-primary member_name h4 m-0"></span>
                                    <button type='button' class="btn btn-danger btn-sm ms-2 reset_member_btn">{{ __('basic.Reset') }}</button>
                                    <button type='button' class="btn btn-secondary btn-sm cancel_member_btn mt-3">{{ __('basic.CancelChange') }}</button>
                                </div>
                            </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>
                    <!--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-->

@endsection