@extends('partial.master')
@section('page_title', '訂單管理')

@section('scripts')

    <script type='text/javascript'>
        form_obj.module = 'Sale';
        form_obj.controller = 'SaleController';
        form_obj.route_name = '{{ basename(url()->current()) }}';

        // 驗證
        const validator = FormValidation.formValidation(
            document.getElementById('detail_fm'), {
                fields: {
                    'sale_date': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.Date') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    /*
                    'sale_point_id': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.SalePoint') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    */
                    /*
                    'payment_id': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.Payment') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'payment_time': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.PaymentTime') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    */
                    'member_id': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.Member') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'receiver_name': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.ReceiverName') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'receiver_phone': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.ReceiverPhone') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'receiver_zip': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.ReceiverZip') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'receiver_address': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.ReceiverAdress') . __('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'store_name': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('sale.StoreName') . __('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');

                                            if (formData.get(form_obj.detail.type_id) ==
                                                'update') {
                                                form_obj.detail.ajax.get();
                                            }
                                        });
                                    }
                                }
                            },
                            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);

            var detailData = data['detail'];

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

                    if (this.id == 'is_payment' || this.id == 'is_pick') {
                        if (data[this.id]) $(this).prop('checked', true);
                    } else {
                        this.value = data[this.id];
                    }
                    if (this.multiple) {
                        if (!empty(data[this.id])) {
                            $(this).val(data[this.id].split(','));
                        }
                    }
                }
            });
            $('#payment_id').val(data['payment']['payment_id']);
            $('#invoice_id').val(data['payment']['invoice_id']);
            /*
            if (data['is_payment'] == 1) {
                $('#payment_time').prev().addClass('required');
                validator.enableValidator('payment_time');
            }
            */
            let delivery = data['detail_delivery'];
            $('#delivery_id').val(delivery['delivery_id']);
            $('#receiver_name').val(delivery['receiver_name']);
            $('#receiver_phone').val(delivery['receiver_phone']);
            // $('#receiver_email').val(delivery['receiver_email']);
            $('#receiver_zip').val(delivery['receiver_zip']);
            $('#receiver_address').val(delivery['receiver_address']);
            $('#store_name').val(delivery['store_name']);

            if (delivery['delivery_id'] == 'virtual') {

                $('#store_name').prev().removeClass('required');
                validator.disableValidator('store_name');

                $('#receiver_zip').prev().removeClass('required');
                validator.disableValidator('receiver_zip');

                $('#receiver_address').prev().removeClass('required');
                validator.disableValidator('receiver_address');
            } else if (delivery['delivery_id'] != 'delivery') {
                $('#receiver_zip').prev().removeClass('required');
                validator.disableValidator('receiver_zip');

                $('#receiver_address').prev().removeClass('required');
                validator.disableValidator('receiver_address');

                $('#store_name').prev().addClass('required');
                validator.enableValidator('store_name');
            } else {
                $('#store_name').prev().removeClass('required');
                validator.disableValidator('store_name')
            }


            console.log(data['member_id']);
            console.log(delivery);

            if (delivery['delivery_address_img'] != null) {
                console.log('not null');
                let url = '{{ addslashes(url('storage/member')) }}';
                url += '/' + data['member_id'] + '/address/' + delivery['delivery_address_img']['meta_value'];
                console.log(url);

                $('#delivery_meta_img').attr('src', url);
                $('#address_img_name').val(delivery['delivery_address_img']['meta_value']);

            }

            for (var i in detailData) {
                var detailRow = detailData[i];
                var row = $($('.detail_price')[i]).closest('.row');

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

                    if (k == 1) {
                        let option = "";
                        if (!empty(detailRow['stock']['spec_combination'])) {
                            let combination = JSON.parse(detailRow['stock']['spec_combination']['meta_value']);

                            combination.forEach(function(item) {
                                let name = "";
                                let com = "";
                                item.forEach(function(value) {
                                    name += com + value['name'];
                                    com = "_";
                                })

                                option += `<option value="${name}">${name}</option>`;
                            })
                        }

                        $(o).append(option).trigger('change.select2');
                    }

                    o.value = detailRow[rowClasses[k]];
                })

                $('.detail_price')[i].value = detailRow['price'];
                $('.detail_qty')[i].value = detailRow['qty'];
                $('.detail_tax_amount')[i].value = detailRow['tax_amount'];

                if (i < detailData.length - 1) $('.add_row_btn').click();
            }

            $('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.export = function() {
            page.loading.start();
            $.ajax({
                data: {
                    module: form_obj.module,
                    controller: form_obj.controller,
                    type: 'export',
                    print_log: false,
                    where:{
                        from_date: $('#filter_sale_date_from').val() || null,
                        to_date: $('#filter_sale_date_to').val() || null,
                        is_payment: $('#filter_is_payment').val() || null,
                        many_sale_status_id: ($('#filter_sale_status_id').val().length==0)?null:$('#filter_sale_status_id').val(),
                    },
                },
                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',
                    where: {
                        from_date: $('#filter_sale_date_from').val() || null,
                        to_date: $('#filter_sale_date_to').val() || null,
                        is_payment: $('#filter_is_payment').val() || null,
                        many_sale_status_id: ($('#filter_sale_status_id').val().length==0)?null:$('#filter_sale_status_id').val(),
                    },
                    print_log: false,
                };
            }
            dataTable.defineColumn = () => {
                return [{
                        data: null,
                        className: 'text-center',
                        orderable: false,
                        render: function(data, type, row) {
                            return `<button type="button" class="btn btn-sm btn-icon btn-light btn-active-light-primary toggle h-25px w-25px" data-kt-docs-datatable-subtable="expand_row">
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr087.svg-->
                                    <span class="svg-icon svg-icon-3 m-0 toggle-off">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="11" y="18" width="12" height="2" rx="1" transform="rotate(-90 11 18)" fill="currentColor"></rect>
                                            <rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr089.svg-->
                                    <span class="svg-icon svg-icon-3 m-0 toggle-on">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect x="6" y="11" width="12" height="2" rx="1" fill="currentColor"></rect>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </button>`;
                        },
                    },
                    {
                        data: null,
                        className: 'text-center',
                        orderable: false,
                        render: function(data, type, row) {
                            return dataTable.getTableActionMenu('er', true);
                        },
                    },
                    // {
                    //     data: "is_shipping",
                    //     className: 'd-flex align-items-center justify-content-center',
                    //     render: function(data, type, row) {
                    //         let checked = '';
                    //         if (data) {
                    //             checked = 'checked';
                    //         }
                    //         return `<!--begin::Switch-->
                //     <label class="form-check form-switch form-check-custom form-check-solid">
                //         <input class="form-check-input datatable_shipping" type="checkbox" value="1" data-key="${row.id}" ${checked} />
                //     </label>
                //     <!--end::Switch-->`;
                    //     }
                    // },
                    // { data: "sorting", className: 'text-center' },
                    {
                        data: "code",
                        className: 'text-center',
                        render: function(data, type, row) {
                            return `
                            <input type="hidden" class="data_id" value="${row.id}" />
                            <span class="">${data}</span>
                        `;
                        }
                    },
                    {
                        data: "sale_date",
                        className: 'text-center'
                    },
                    {
                        data: "member",
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: "payment",
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: "total_tax_amount",
                        className: 'text-center',
                        render: function(data, type, row) {
                            return `$${appendFormat(data,',')}`;
                        }
                    },
                    {
                        data: "sale_status_id",
                        className: 'text-center',
                        orderable: true
                    },
                    // {
                    //     data: "is_payment",
                    //     className: 'text-center',
                    //     render: function(data, type, row) {
                    //         let str = '{{ __('sale.Unpaid') }}';
                    //         if (data == '1') {
                    //             str = '{{ __('sale.PaymentSuccess') }}';
                    //         } else if (data == '99') {
                    //             str = '{{ __('sale.PaymentFail') }}';
                    //         }

                    //         return str;
                    //     }
                    // },
                    // {
                    //     data: "payment_time",
                    //     className: 'text-center'
                    // },

                    {
                        data: "payment_status",
                        className: 'text-center'
                    },
                    {
                        data: "invoice_id",
                        className: 'text-center'
                    },
                ];
            }

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

            dataTable.renderRow = (list) => {
                if (list == undefined) return;
                var row = list.map(function(value, index, array) {
                    return {
                        "id": value.id,
                        "sorting": index + 1,
                        "is_payment": value.is_payment,
                        "code": value.code,
                        "sale_date": value.sale_date,
                        "member": value.member.name,
                        "payment": (!empty(value.payment)) ? value.payment.info.name : "--",
                        "total_tax_amount": appendFormat(value.total_tax_amount, ','),
                        "payment_status": value.is_payment_html,
                        "payment_time": (!empty(value.payment_time)) ? value.payment_time : "--",
                        "invoice_id": (!empty(value.payment) && !empty(value.payment.invoice_id)) ?
                            value.payment.invoice_id : "--",
                        "is_shipping": value.is_shipping,
                        "sale_status_id": value.status.name,
                        "detail": value.detail,
                    }
                })
                return row;
            }

            // dataTable init
            KTUtil.onDOMContentLoaded(function() {
                dataTable.init();
                // validator.disableValidator('payment_time');

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

                        let text = "確定要取消出貨?";
                        let valid = 0;
                        if (checked) {
                            text = "確定要出貨?";
                            valid = 1;
                        }

                        Swal.fire({
                            text: text,
                            icon: "warning",
                            showCancelButton: !0,
                            buttonsStyling: !1,
                            confirmButtonText: "{{ __('basic.Sure') }}",
                            cancelButtonText: "{{ __('basic.Cancel') }}",
                            customClass: {
                                confirmButton: "btn fw-bold btn-danger",
                                cancelButton: "btn fw-bold btn-active-light-primary"
                            }
                        }).then((function(result) {
                            if (result.value) {
                                $.ajax({
                                    data: {
                                        module: form_obj.module,
                                        controller: form_obj.controller,
                                        type: 'shipping',
                                        id: id,
                                        valid: valid,
                                        print_log: false,
                                    },
                                    success: function(data, textStatus,
                                        jqXHR) {
                                        // console.log(data);
                                        if (isJson(data)) {
                                            var json = JSON.parse(
                                                data);
                                            if (json.status) {
                                                Swal.fire({
                                                    text: json
                                                        .msg +
                                                        "!",
                                                    icon: "success",
                                                    buttonsStyling:
                                                        !1,
                                                    confirmButtonText: "{{ __('basic.OK') }}",
                                                    customClass: {
                                                        confirmButton: "btn fw-bold btn-primary"
                                                    }
                                                }).then((
                                                    function() {

                                                    }))
                                            } else {
                                                page.loading.stop();
                                                Swal.fire({
                                                    text: json
                                                        .msg +
                                                        "!",
                                                    icon: "error",
                                                    buttonsStyling:
                                                        !1,
                                                    confirmButtonText: "{{ __('basic.OK') }}",
                                                    customClass: {
                                                        confirmButton: "btn fw-bold btn-primary"
                                                    }
                                                }).then((
                                                    function() {
                                                        $(_this)
                                                            .prop(
                                                                "checked",
                                                                !
                                                                checked
                                                            );
                                                    }))
                                            }
                                        }
                                    },
                                    error: ajaxError
                                });
                            } else {
                                $(_this).prop("checked", !checked);
                            }
                        }))
                    });
                });
            });

            // flatpickr init
            $("#sale_date").flatpickr();
            /*
            $("#payment_time").flatpickr({
                enableTime: true,
                dateFormat: "Y-m-d H:i",
            });
            $("#is_payment").change(function() {
                if (this.value == 1) {
                    $('#payment_time').prev().addClass('required');
                    validator.enableValidator('payment_time');
                } else {
                    $('#payment_time').prev().removeClass('required');
                    $('#payment_time').val('');
                    validator.disableValidator('payment_time');
                }
            })
            */
            $("#delivery_id").change(function() {
                if (this.value == 'delivery') {
                    $('#receiver_zip').prev().addClass('required');
                    validator.enableValidator('receiver_zip');

                    $('#receiver_address').prev().addClass('required');
                    validator.enableValidator('receiver_address');

                    $('#store_name').prev().removeClass('required');
                    $('#store_name').val('');
                    validator.disableValidator('store_name');
                } else {
                    $('#receiver_zip').prev().removeClass('required');
                    $('#receiver_zip').val('');
                    validator.disableValidator('receiver_zip');

                    $('#receiver_address').prev().removeClass('required');
                    $('#receiver_address').val('');
                    validator.disableValidator('receiver_address');

                    $('#store_name').prev().addClass('required');
                    validator.enableValidator('store_name');
                }
            })
            // repeater init
            $('#repeater_detail').repeater({
                initEmpty: false,

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

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

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

                    /*
                    setTimeout(function() {
                        let $scroll = $('#detail_modal_scroll');
                        let scrollHeight = $scroll.prop("scrollHeight");

                        $scroll.animate({
                            scrollTop: scrollHeight,
                        }, 800);
                    },500);
                    */

                    detail_ctrl();
                },

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

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

                    detail_ctrl();
                }
            });

            $('body')
                .on('add_row_start', function() {
                    $('div[data-repeater-item]').not(":first").remove();

                    $('#delivery_meta_img').removeAttr("src");
                    $('#address_img_name').val('');
                })
                .on('edit_row_start', function(e) {
                    $('div[data-repeater-item]').not(":first").remove();

                    $('#delivery_meta_img').removeAttr("src");
                    $('#address_img_name').val('');
                });
        })

        function detail_ctrl() {
            $('.detail_stock_id').unbind('select2:select').on('select2:select', function() {
                let index = $('.detail_stock_id').index(this);
                let id = $(this).val();

                $('.detail_stock_spec_id').eq(index).find('option').remove();
                $.ajax({
                    data: {
                        module: "Stock",
                        controller: "StockController",
                        type: 'read',
                        where: {
                            id: id,
                        },
                        print_log: false,
                    },
                    success: function(data, textStatus, jqXHR) {
                        // console.log(data);
                        if (isJson(data)) {
                            var json = JSON.parse(data);
                            let stock = json['data']['list'][0];

                            let option = "";
                            if (!empty(stock['spec_combination'])) {
                                let combination = JSON.parse(stock['spec_combination']['meta_value']);

                                combination.forEach(function(item) {
                                    let name = "";
                                    let com = "";
                                    item.forEach(function(value) {
                                        name += com + value['name'];
                                        com = "_";
                                    })

                                    option += `<option value="${name}">${name}</option>`;
                                })
                            }

                            $('.detail_stock_spec_id').eq(index).append(option).trigger(
                                'change.select2');
                        }
                    },
                    error: ajaxError
                });

                calculateTotal(index);
            })

            $('.detail_price').unbind('change').change(function() {

                let index = $('.detail_price').index(this);
                calculateTotal(index);

            })

            $('.detail_qty').unbind('change').change(function() {

                let index = $('.detail_qty').index(this);
                calculateTotal(index);

            })

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

        function calculateTotal(index) {
            var qty = $($('.detail_qty')[index]).val();
            var price = $($('.detail_price')[index]).val();

            if (isNaN(price)) price = 0;
            if (isNaN(qty)) qty = 0;

            let total_amount = price * qty;
            $($('.detail_tax_amount')[index]).val(total_amount);
        }

        function populateTemplate(data, target) {
            const table = document.querySelector('#data_table');
            const tbody = table.querySelector('tbody');

            data.forEach((d, index) => {

                var inStock = "有庫存";
                var stockClass = "text-muted";
                if (d.in_stock == "0") {
                    inStock = "無庫存";
                    stockClass = "text-danger";
                }

                let template = document.createElement('tr');
                template.setAttribute('data-kt-docs-datatable-subtable', 'subtable_template');
                if (d.in_stock == "0") {
                    template.classList.add('text-danger');
                }
                template.innerHTML = `<td></td>
                                    <td class="text-start" colspan="2">
                                        <div class="text-dark fs-7">商品</div>
                                        <div class="${stockClass} fs-7 fw-bold" data-kt-docs-datatable-subtable="template_stock">${d.stock.name}</div>
                                    </td>
                                    <td class="text-start">
                                        <div class="text-dark fs-7">規格</div>
                                        <div class="${stockClass} fs-7 fw-bold" data-kt-docs-datatable-subtable="template_spec">${(!empty(d.stock_spec_id))?d.stock_spec_id:"--"}</div>
                                    </td>
                                    <td class="text-end">
                                        <div class="text-dark fs-7">價錢</div>
                                        <div class="${stockClass} fs-7 fw-bold" data-kt-docs-datatable-subtable="template_price">${appendFormat(d.price,',')}</div>
                                    </td>
                                    <td class="text-end">
                                        <div class="text-dark fs-7">數量</div>
                                        <div class="${stockClass} fs-7 fw-bold" data-kt-docs-datatable-subtable="template_qty">${d.qty}</div>
                                    </td>
                                    <td class="text-end">
                                        <div class="text-dark fs-7">小計</div>
                                        <div class="${stockClass} fs-7 fw-bold" data-kt-docs-datatable-subtable="template_total">${appendFormat(d.tax_amount,',')}</div>
                                    </td>
                                    <td class="text-end">
                                        <div class="text-dark fs-7">庫存狀態</div>
                                        <div class="${stockClass} fs-7 fw-bold " data-kt-docs-datatable-subtable="template_in_stock">${inStock}</div>
                                    </td>
                                    <td></td>`;
                tbody.insertBefore(template, target.nextSibling);
            })
        }
    </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 class="form-control form-control-solid w-250px ps-14" data-kt-table-filter="search"
                        type="text" 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 class="btn btn-light-primary me-3" data-kt-menu-trigger="click"
                        data-kt-menu-placement="bottom-end" type="button">
                        <!--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" id="kt-toolbar-filter"
                        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">{{ __('sale.Date') }} ({{ __('basic.DateFrom') }}):</label>
                                <input type='date' class='form-control' id='filter_sale_date_from' data-kt-table-filter='sale_date' />
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10">
                                <label class="form-label fs-6 fw-bold">{{ __('sale.Date') }} ({{ __('basic.DateTo') }}):</label>
                                <input type='date' class='form-control' id='filter_sale_date_to' data-kt-table-filter='sale_date' />
                            </div>
                            <div class="mb-10">
                                <label class="form-label fs-6 fw-bold">{{ __('sale.PaymentStatus') }}:</label>
                                <select class="form-select form-select-solid fw-bolder" id="filter_is_payment"
                                    data-kt-select2="true" data-placeholder="{{ __('basic.PleaseChoice') }}"
                                    data-allow-clear="true" data-kt-table-filter="is_payment" data-hide-search="true"
                                    data-dropdown-parent="#kt-toolbar-filter">
                                    <option value="">{{ __('basic.All') }}</option>
                                    <option value="1">{{ __('sale.Paid') }}</option>
                                    <option value="0">{{ __('sale.Unpaid') }}</option>
                                </select>
                            </div>
                            <div class="mb-10">
                                <label class="form-label fs-6 fw-bold">{{ __('sale.SaleStatus') }}:</label>
                                <select class="form-select form-select-solid fw-bolder" id="filter_sale_status_id"
                                    data-kt-select2="true" data-placeholder="{{ __('basic.PleaseChoice') }}"
                                    data-allow-clear="true" data-kt-table-filter="sale_status_id" data-hide-search="true"
                                    data-dropdown-parent="#kt-toolbar-filter" >
                                    <option value="">{{ __('basic.All') }}</option>
                                    {!! app('FrontendService')->getOption($select['sale_status'], 'id', 'name', '', '') !!}
                                </select>
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            {{-- <div class="mb-10">
                                <label class="form-label fs-6 fw-bold">{{ __('stock.Brand') }}:</label>
                                <select class="form-select form-select-solid fw-bolder" id="filter_stock_brand_id"
                                    data-kt-select2="true" data-placeholder="{{ __('basic.PleaseChoice') }}"
                                    data-allow-clear="false" data-kt-table-filter="stock_brand_id" data-hide-search="false"
                                    data-dropdown-parent="#kt-toolbar-filter">
                                    <option value="">{{ __('basic.All') }}</option>
                                    {!! app('FrontendService')->getOption($select['brand'], 'id', 'name', '', '') !!}
                                </select>
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10">
                                <label class="form-label fs-6 fw-bold">{{ __('stock.Category') }}:</label>
                                <select class="form-select form-select-solid fw-bolder" id="filter_stock_category_id"
                                    data-kt-select2="true" data-placeholder="{{ __('basic.PleaseChoice') }}"
                                    data-allow-clear="false" data-kt-table-filter="stock_category_id"
                                    data-hide-search="false" data-dropdown-parent="#kt-toolbar-filter">
                                    <option value="">{{ __('basic.All') }}</option>
                                    {!! app('FrontendService')->getOption($select['category'], 'id', 'name', '', '') !!}
                                </select>
                            </div> --}}
                            <!--end::Input group-->
                            <!--begin::Actions-->
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary fw-bold me-2 px-6" data-kt-menu-dismiss="true"
                                    data-kt-table-filter="filter" type="submit">送出</button>
                                <button class="btn btn-light btn-active-light-primary fw-bold px-6"
                                    data-kt-menu-dismiss="true" data-kt-table-filter="reset" type="reset">重設</button>
                            </div>
                            <!--end::Actions-->
                        </div>
                    </div>    

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

                    <!--end::Filter-->
                    <!--begin::Add user-->
                    {{--
                    <button class="btn btn-primary" id="add_btn" type="button">
                        <!--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" aria-hidden="true" tabindex="-1">
                    <!--begin::Modal dialog-->
                    <div class="modal-dialog modal-dialog-centered mw-1100px">
                        <!--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" id="modal_close"
                                    data-kt-users-modal-action="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-xl-15 mx-5 my-7">
                                <!--begin::Form-->
                                <form class="form" id="detail_fm" method="post" enctype="multipart/form-data">
                                    <input id='detail_type' name='detail_type' type='hidden' />
                                    <input id='detail_master_id' name='detail_master_id' type='hidden' />
                                    <!--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 row mb-7">
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ __('sale.Code') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3" id="code"
                                                    name="code" type="text" value="" placeholder="系統產生"
                                                    readonly />
                                                <!--end::Input-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label class="required fw-bold fs-6 mb-2">{{ __('sale.Date') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid" id="sale_date"
                                                    name="sale_date" placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            {{-- <div class='col-md-6'>
                                            <label class="required fw-bold fs-6 mb-2">{{ __('sale.SalePoint') }}</label>
                                            <!--begin::Input-->
                                            <select id="sale_point_id" name="sale_point_id" data-control="select2" data-placeholder="{{__('basic.PleaseChoice')}}" data-dropdown-parent="#detail_modal" class="form-select form-select-solid fw-bolder">
                                                {!! app('FrontendService')->getOption($select['sale_point'],'id','name','','') !!}
                                            </select>
                                            <!--end::Input-->
                                        </div> --}}
                                            <div class='col-md-6'>
                                                <label class="required fw-bold fs-6 mb-2">{{ __('sale.Payment') }}</label>
                                                <!--begin::Input-->
                                                <select class="form-select form-select-solid fw-bolder" id="payment_id"
                                                    name="payment_id" data-control="select2"
                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                    data-dropdown-parent="#detail_modal">
                                                    {!! app('FrontendService')->getOption($select['payment'], 'id', 'name', '', '') !!}
                                                </select>
                                                <!--end::Input-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ __('sale.Invoice') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="invoice_id" name="invoice_id" type="text" value=""
                                                    placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label class="required fw-bold fs-6 mb-2">{{ __('basic.Member') }}</label>
                                                <!--begin::Input-->
                                                <select class="form-select form-select-solid fw-bolder" id="member_id"
                                                    name="member_id" data-control="select2"
                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                    data-dropdown-parent="#detail_modal">
                                                    {!! app('FrontendService')->getOption($select['member'], 'id', 'name', '', '') !!}
                                                </select>
                                                <!--end::Input-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('sale.Delivery') }}</label>
                                                <!--begin::Input-->
                                                <select class="form-select form-select-solid fw-bolder" id="delivery_id"
                                                    name="delivery_id" data-control="select2"
                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                    data-dropdown-parent="#detail_modal">
                                                    {{-- {!! app('FrontendService')->getOption($select['delivery'],'id','name','','') !!} --}}
                                                    @foreach ($select['delivery'] as $key => $value)
                                                        @php
                                                            $price = $value['price'] > 0 ? '-' . $value['price'] : '';
                                                        @endphp
                                                        <option value="{{ $value['id'] }}">{{ $value['name'] . $price }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        {{--
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ __('sale.PaymentStatus') }}</label>
                                                <!--begin::Switch-->
                                                <label class="form-check form-switch form-check-custom form-check-solid">
                                                    <!--begin::Input-->
                                                    <input class="form-check-input" id="is_payment" name="is_payment"
                                                        type="checkbox" value="1" />
                                                    <input id="payment_time" name="payment_time"
                                                        type="hidden" value="" />
                                                    <!--end::Input-->
                                                </label>
                                                <!--end::Switch-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ '揀貨狀態' }}</label>
                                                <!--begin::Switch-->
                                                <label class="form-check form-switch form-check-custom form-check-solid">
                                                    <!--begin::Input-->
                                                    <input class="form-check-input" id="is_pick" name="is_pick"
                                                        type="checkbox" value="1" />
                                                    <input id="pick_time" name="pick_time"
                                                        type="hidden" value="" />
                                                    <!--end::Input-->
                                                </label>
                                                <!--end::Switch-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        --}}
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label class="required fw-bold fs-6 mb-2">{{ '訂單狀態' }}</label>
                                                <!--begin::Input-->
                                                <select class="form-select form-select-solid fw-bolder"
                                                    id="sale_status_id" name="sale_status_id" data-control="select2"
                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                    data-dropdown-parent="#detail_modal">
                                                    {!! app('FrontendService')->getOption($select['sale_status'], 'id', 'name', '', '') !!}
                                                </select>
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class="col-12">
                                                <label class="fw-bold fs-6 mb-2">{{ __('basic.Description') }}</label>
                                                <textarea class="form-control form-control-solid mb-lg-0 mb-3" id="description" name="description" placeholder=""
                                                    rows=3></textarea>
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <div class="mb-8 mt-5 text-center">
                                            <!--begin::Title-->
                                            <h1 class="mb-0">{{ __('sale.ReceiverInfo') }}</h1>
                                            <!--end::Title-->
                                        </div>
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('sale.ReceiverName') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="receiver_name" name="receiver_name" type="text"
                                                    value="" placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('sale.ReceiverPhone') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="receiver_phone" name="receiver_phone" type="text"
                                                    value="" placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('sale.ReceiverZip') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="receiver_zip" name="receiver_zip" type="text" value=""
                                                    placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                            <div class='col-md-6'>
                                                <label
                                                    class="required fw-bold fs-6 mb-2">{{ __('sale.ReceiverAdress') }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="receiver_address" name="receiver_address" type="text"
                                                    value="" placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="fv-row row mb-7">
                                            <div class='col-md-6'>
                                                <label class="fw-bold fs-6 mb-2">{{ '取貨門市名稱' }}</label>
                                                <!--begin::Input-->
                                                <input class="form-control form-control-solid mb-lg-0 mb-3"
                                                    id="store_name" name="store_name" type="text" value=""
                                                    placeholder="" />
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <div class="fv-row row mb-7">
                                            <img id="delivery_meta_img" src="" alt="">
                                            <input id="address_img_name" name="address_img_name" type="hidden" />
                                        </div>
                                        <div class="mb-8 mt-5 text-center">
                                            <!--begin::Title-->
                                            <h1 class="mb-0">商品</h1>
                                            <!--end::Title-->
                                        </div>
                                        <!--begin::Repeater-->
                                        <div id="repeater_detail">
                                            <!--begin::Form group-->
                                            <div class="form-group">
                                                <div data-repeater-list="repeater_detail">
                                                    <div class="form-group row mb-5">
                                                        <div class="col-md-3 text-center">
                                                            <label class="form-label">{{ __('basic.Stock') }}</label>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <label class="form-label">{{ __('stock.Spec') }}</label>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <label class="form-label">{{ __('basic.Price') }}</label>
                                                        </div>
                                                        <div class="col-md-1 text-center">
                                                            <label class="form-label">{{ __('basic.Qty') }}</label>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <label class="form-label">{{ __('sale.SubTotal') }}</label>
                                                        </div>
                                                        <div class="col-md-2 text-center"></div>
                                                    </div>
                                                    <div data-repeater-item>
                                                        <div class="form-group row mb-5">
                                                            <div class="col-md-3">
                                                                <select
                                                                    class="form-select form-select-solid fw-bolder detail_stock_id"
                                                                    name="stock_id" data-kt-repeater="select2"
                                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                                    data-dropdown-parent="#detail_modal">
                                                                    {!! app('FrontendService')->getOption($select['stock'], 'id', 'name', '', '') !!}
                                                                </select>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <select
                                                                    class="form-select form-select-solid fw-bolder detail_stock_spec_id"
                                                                    name="stock_spec_id" data-kt-repeater="select2"
                                                                    data-placeholder="{{ __('basic.PleaseChoice') }}"
                                                                    data-dropdown-parent="#detail_modal">
                                                                </select>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <input class="form-control detail_price mb-md-0 mb-2"
                                                                    name="price" type="text" placeholder="" />
                                                            </div>
                                                            <div class="col-md-1">
                                                                <input class="form-control detail_qty mb-md-0 mb-2"
                                                                    name="qty" type="text" placeholder="" />
                                                            </div>
                                                            <div class="col-md-2">
                                                                <input class="form-control detail_tax_amount mb-md-0 mb-2"
                                                                    name="tax_amount" type="text" placeholder="" />
                                                            </div>
                                                            <div class="col-md-2">
                                                                <a class="btn btn-sm btn-light-danger mb-md-0 del_row_btn mb-2"
                                                                    data-repeater-delete href="javascript:;">
                                                                    <i
                                                                        class="la la-trash-o fs-3"></i>{{ __('basic.DeleteThisRow') }}
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Form group-->

                                            <!--begin::Form group-->
                                            <div class="form-group mt-5">
                                                <a class="btn btn-light-primary add_row_btn" data-repeater-create
                                                    href="javascript:;">
                                                    <i class="la la-plus"></i>{{ __('basic.AddRow') }}
                                                </a>
                                            </div>
                                            <!--end::Form group-->
                                        </div>
                                        <!--end::Repeater-->
                                    </div>
                                    <!--end::Scroll-->
                                    <!--begin::Actions-->
                                    <div class="pt-15 text-center">
                                        <button class="btn btn-primary me-3" id="modal_submit"
                                            data-kt-users-modal-action="submit" type="submit">
                                            <span class="indicator-label">{{ __('basic.Save') }}</span>
                                            <span class="indicator-progress">{{ __('basic.PleaseWait') }}...
                                                <span
                                                    class="spinner-border spinner-border-sm ms-2 align-middle"></span></span>
                                        </button>
                                        <button class="btn btn-light" id="modal_cancel"
                                            data-kt-users-modal-action="cancel"
                                            type="reset">{{ __('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-row-dashed fs-6 gy-5 table align-middle" id="data_table">
                <!--begin::Table head-->
                <thead>
                    <!--begin::Table row-->
                    <tr class="text-muted fw-bolder fs-7 text-uppercase gs-0 text-start">
                        {{-- <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"></th>
                        {{-- <th class=" min-w-100px">
                        {{ __('basic.ItemIndex') }}
                    </th> --}}
                        <th class="min-w-125px text-center">{{ __('basic.Actions') }}</th>
                        {{-- <th class="min-w-125px text-center">{{ __('sale.ShippingStatus') }}</th> --}}
                        <th class="min-w-125px text-center">{{ __('sale.Code') }}</th>
                        <th class="min-w-125px text-center">{{ __('sale.Date') }}</th>
                        <th class="min-w-125px text-center">{{ __('basic.Member') }}</th>
                        <th class="min-w-125px text-center">{{ __('sale.Payment') }}</th>
                        <th class="min-w-125px text-center">{{ __('sale.TotalTaxAmount') }}</th>
                        <th class="min-w-125px text-center">{{ __('sale.SaleStatus') }}</th>
                        <th class="min-w-125px text-center">{{ __('sale.PaymentStatus') }}</th>
                        {{-- <th class="min-w-125px text-center">{{ __('sale.PaymentTime') }}</th> --}}
                        <th class="min-w-125px text-center">{{ __('sale.Invoice') }}</th>
                    </tr>
                    <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="fw-bold text-gray-600">
                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </div>
        <!--end::Card body-->


    </div>
    <!--end::Card-->
@endsection