@extends("cms.layouts.app", ['page_id' => 'picking_index'])

@push("css")
@endpush

@push("js")
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.13/xlsx.full.min.js"></script>
<script type="text/javascript">
    $(function () {



        $(".download-shipping").click(function () {
            var datas = table.rows({ selected: true }).data();
            var workbook = XLSX.utils.book_new();
            var excelData = [];
            var worksheetData = [];
            console.log(datas);
            if (datas.length > 0) {

                if ($("select[name='download_platform_id'").val() === '8') {
                    let orders = [];
                    $(".selected").each(function () {
                        orders.push($(this).find('.text-green').html());
                    });

                    const url = "https://oms-dev.vibexpharmaceutical.com/cms/shipping/download_shipping" + "?orders=" + orders.join(',') + "&store=" + $('select[id="store-option"]').val() + "&platform=" + getUrlParameter('platform');
                    window.open(url);
                    return true;
                } else if ($("select[name='download_platform_id'").val() === '18') {
                    for (var i = 0; i < datas.length; i++) {
                        var d = [];
                        d.push(i + 1); // 번호
                        d.push(datas[i]['order_products'][0]['product_order']['Bundle delivery number'] ?? datas[i]['order_products'][0]['product_order']['묶음배송번호']); // 묶음배송번호
                        d.push(datas[i]['external_order_id'] ?? ''); // 주문번호
                        d.push(
                            datas[i]['courier_name'] === 'EMS' ? '우체국 EMS' :
                                datas[i]['courier_name'] === 'CJ GLS (New)' ? 'CJ 대한통운' : ''
                        );
                        // 택배사
                        d.push(datas[i]['tracking_number'] ?? ''); // 운송장번호
                        d.push('N'); // 분리배송 Y/N
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push('');
                        d.push(datas[i]['order_products'][0]['product_order']['Option ID'] ?? datas[i]['order_products'][0]['product_order']['옵션ID']); // 옵션ID
                        excelData.push(d);
                    }

                    // Header
                    var worksheetData = [
                        ['번호', '묶음배송번호', '주문번호', '택배사', '운송장번호', '분리배송 Y/N', '분리배송 출고예정일', '주문시 출고예정일', '출고일(발송일)', '주문일', '등록상품명', '등록옵션명', '노출상품명(옵션명)', '노출상품ID', '옵션ID', '최초등록옵션명', '업체상품코드', '바코드', '결제액', '배송비구분', '배송비', '도서산간 추가배송비', '구매수(수량)', '옵션판매가(판매단가)', '구매자', '구매자전화번호', '수취인이름', '수취인전화번호', '우편번호', '수취인 주소', '배송메세지', '상품별 추가메시지', '주문자 추가메시지', '배송완료일', '구매확정일자', '개인통관번호(PCCC)', '통관용구매자전화번호', '기타', '결제위치'],
                        ...excelData
                    ];
                } else if ($("select[name='download_platform_id'").val() === '19') {




                    for (var i = 0; i < datas.length; i++) {
                        var d = [];
                        d.push(''); // 번호
                        d.push(''); // 묶음배송번호
                        d.push(datas[i]['external_order_id'] ?? ''); // 주문번호
                        d.push('');
                        d.push(datas[i]['tracking_number'] ?? ''); // 운송장번호
                        d.push(
                            datas[i]['courier_name'] === 'EMS' ? '2' :
                                datas[i]['courier_name'] === 'CJ GLS (New)' ? '4' : ''
                        );
                        d.push(''); // 옵션ID
                        excelData.push(d);
                    }

                    // Header
                    var worksheetData = [
                        ['쇼핑몰', '쇼핑몰번호', '주문번호', '품목별 주문번호', '운송장번호', '배송 업체 번호', '수량'],
                        ...excelData
                    ];


                } else {
                    return false;
                };


                // Create worksheet from combined data
                var worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

                // Add to workbook
                XLSX.utils.book_append_sheet(workbook, worksheet, "Shipping");

                // Save file
                XLSX.writeFile(workbook, "shipping-download.xls");

            }


        });




        $('.apply-btn').on('click', function () {
            $('#dataTable').DataTable().ajax.reload();
        });




        $(".shipping-button").on('click', function () {
            let orders = [];
            $(".selected").each(function () {
                orders.push($(this).find('.text-green').html());
            });

            const url = "{{ route('cms.shipping.download_shipping')}}" + "?orders=" + orders.join(',') + "&store=" + $('select[id="store-option"]').val() + "&platform=" + getUrlParameter('platform');
            window.open(url);
        });

        $(".selected-picking").on('click', function (e) {
            e.preventDefault();
            const selectedRows = window.dataTablesHelper.instance['#dataTable'].rows({ selected: true }).data().toArray();
            const ids = selectedRows.map(row => {
                if (row.platform_id == 1) return row.order_item_id;
                return row.external_order_id;
            }).filter(Boolean).join(',');

            let date = $('input[name="dates"]').val() || (moment().format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
            let url = window.location.origin + window.location.pathname + "/details?ids=" + ids + "&date=" + date + "&mode=1";
            window.open(url, '_blank');
        });

        function getShopByPlatform(p) {
            $.get("/cms/stores/get_store", { platform: p, country: $("#country-option").val() }, function(data) {
                let $selector = $("select[name='store_option']").empty();
                $selector.append('<option value="0">All Stores</option>');
                data.forEach(e => $selector.append(`<option value="${e.id}">${e.name}</option>`));
            });
        }

        function getPlatformByCountry(p) {
            $.get("/cms/analysts/get_platform", { country_id: p }, function(data) {
                let $selector = $("select[name='platforms_option']").empty();
                if (data.length) {
                    $selector.append('<option value="0">All Platforms</option>');
                    data.forEach(e => $selector.append(`<option value="${e.id}">${e.name}</option>`));
                    $selector.parent().show();
                } else {
                    $selector.parent().hide();
                }
            });
        }



        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] === sParam) {
                    return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }
            return false;
        };
        if (getUrlParameter('platform') == 8 || getUrlParameter('platform') == 4 || getUrlParameter('platform') == 6) {
            $("#store-option").show();
            $(".shipping-button").show();
        } else {
            $("#store-option").hide();
            $(".shipping-button").hide();
        }


        let platformVal = getUrlParameter('platform') || '';


        let platformArray = Array.isArray(platformVal)
            ? platformVal
            : (platformVal ? platformVal.split(',') : []);

        let jp = ['17', '12', '13', '14', '15', '20'];
        let china = ['9', '10', '11'];
        let hk = ['3'];
        let korea = ['5', '16', '7', '8', '2', '4', '6', '18', '19', '21'];
        let usa = ['1'];

        // Check if any values match
        let isJp = jp.some(val => platformArray.includes(val));
        let isChina = china.some(val => platformArray.includes(val));
        let isHk = hk.some(val => platformArray.includes(val));
        let isKorea = korea.some(val => platformArray.includes(val));
        let isUsa = usa.some(val => platformArray.includes(val));

        // Apply logic in order of priority
        if (isJp) {
            $("#country-option").val(3);   // Japan
        } else if (isChina) {
            $("#country-option").val(1);   // China
        } else if (isHk) {
            $("#country-option").val(2);   // Hong Kong
        } else if (isKorea) {
            $("#country-option").val(4);   // Korea
        } else if (isUsa) {
            $("#country-option").val(5);   // USA
        }



        if (platformVal.includes(',') || platformVal.trim() === '') {
            platformVal = '0';
        }

        $("#platform-option").val(platformVal);

        getPlatformByCountry($("#country-option").val());
        getShopByPlatform($("#platform-option").val());

        $("#country-option").on('change', function () {
            getPlatformByCountry($("#country-option").val());
            getShopByPlatform($("#platform-option").val());
        });

        $("#platform-option").on('change', function () {
            getShopByPlatform($("#platform-option").val());
        });


        @php
        $no_data_message = __('cms.order.no_data.'.\App\Order:: Picking);
        @endphp
        const table = window.dataTablesHelper.init({
            language: {
                emptyTable: "{{ $no_data_message }}"
            },
            fixedColumns: {
                leftColumns: 2 // This freezes the first 2 columns
            },
            autoWidth: false,
            serverSide: true,
            deferLoading: 0,
            pageLength: 200,
            deferRender: true,
            lengthMenu: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
            stateSave: true,
            scrollX: true,
            ajax: {
                url: '{!! route('cms.orders.datatable', ['status' => \App\Order::Picking, 'platform' => $platform]) !!}',
                data: function (d) {
                    Object.assign(d, window.dataTablesHelper.commonFilters.getParams());
                    if ($('input[name="dates"]').val()) {
                        d.date_option = '3'; // Fixed to picking_date for this view
                    }
                    d.store = $('#store-option').val();


                    if ($('input[name="product_name"]').val()) {
                        d.product_name = $('input[name="product_name"]').val();
                    }

                    if ($('input[name="buyer_id"]').val()) {
                        d.buyer_id = $('input[name="buyer_id"]').val();
                    }

                    if ($('input[name="phone_number"]').val()) {
                        d.phone_number = $('input[name="phone_number"]').val();
                    }

                    if ($('input[name="address"]').val()) {
                        d.address = $('input[name="address"]').val();
                    }

                    if ($('input[name="buyer_name"]').val()) {
                        d.buyer_name = $('input[name="buyer_name"]').val();
                    }

                    if ($('input[name="receiver_name"]').val()) {
                        d.receiver_name = $('input[name="receiver_name"]').val();
                    }

                    if ($('input[name="tracking_no"]').val()) {
                        d.tracking_no = $('input[name="tracking_no"]').val();
                    }

                    if ($('input[name="order_no"]').val()) {
                        d.order_no = $('input[name="order_no"]').val();
                    }

                },
            },
            order: [[3, 'desc']],
            buttons: {
                buttons: [
                    {
                        extend: 'selected',
                        text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Shipping)]) }}",
                        className: 'btn-move-to-status',
                        //key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);

                            $.ajax({
                                url: "{{ route('cms.orders.update_status') }}",
                                method: 'post',
                                dataType: "json",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    "ids": ids,
                                    "target_status": "{{ \App\Order::Shipping }}"
                                },
                                beforeSend: function (XMLHttpRequest) {

                                },
                                complete: function (jqXHR, textStatus) {

                                },
                                success: function (data) {
                                    alert("{{ __('cms.success') }}");
                                    table.ajax.reload();
                                },
                                error: function (request, status, error) {
                                    let json = $.parseJSON(request.responseText);
                                    alert(json.message);
                                    console.log(json);
                                }
                            });
                        }
                    },

                    {
                        extend: 'selected',
                        text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Deleted)]) }}",
                        className: 'btn-move-to-deleted-status',
                        //  key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);

                            $.ajax({
                                url: "{{ route('cms.orders.update_status') }}",
                                method: 'post',
                                dataType: "json",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    "ids": ids,
                                    "target_status": "{{ \App\Order::Deleted }}"
                                },
                                beforeSend: function (XMLHttpRequest) {

                                },
                                complete: function (jqXHR, textStatus) {

                                },
                                success: function (data) {
                                    alert("{{ __('cms.success') }}");
                                    table.ajax.reload();
                                },
                                error: function (request, status, error) {
                                    let json = $.parseJSON(request.responseText);
                                    alert(json.message);
                                    console.log(json);
                                }
                            });
                        }
                    },



                    {
                        extend: 'selected',
                        text: "{{ __('cms.order.print_invoice') }}",
                        className: 'btn-print-invoice',
                        //key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);

                            const url = "{{ route('cms.orders.invoice', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))
                            window.open(url);
                        }
                    },
                    {
                        extend: 'selected',
                        text: "Print Dispatch Note",
                        className: 'btn-print-dispatch',
                        //  key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);
                            // const date = $("input[name='dates']").val();

                            const url = "{{route('cms.picking.dispatch_note', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))

                            window.open(url);
                        }
                    },
                    {
                        extend: 'selected',
                        text: "Print Delivery Note",
                        className: 'btn-print-delivery',
                        //  key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);
                            // const date = $("input[name='dates']").val();

                            const url = "{{route('cms.picking.delivery_note', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))

                            window.open(url);
                        }
                    },
                    {
                        extend: 'selected',
                        text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Pending)]) }}",
                        className: 'btn-move-to-status-pending',
                        //key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);

                            $.ajax({
                                url: "{{ route('cms.orders.update_status') }}",
                                method: 'post',
                                dataType: "json",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    "ids": ids,
                                    "target_status": "{{ \App\Order::Pending }}"
                                },
                                beforeSend: function (XMLHttpRequest) {

                                },
                                complete: function (jqXHR, textStatus) {

                                },
                                success: function (data) {
                                    alert("{{ __('cms.success') }}");
                                    table.ajax.reload();
                                },
                                error: function (request, status, error) {
                                    let json = $.parseJSON(request.responseText);
                                    alert(json.message);
                                    console.log(json);
                                }
                            });
                        }
                    },
                    {
                        extend: 'selected',
                        text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Deleted)]) }}",
                        className: 'btn-move-to-deleted-status',
                        //  key: 'm',
                        action: function (e, dt, node, config) {
                            const rows = dt.rows({ selected: true });
                            const ids = rows.data().toArray().map(item => item.id);

                            $.ajax({
                                url: "{{ route('cms.orders.update_status') }}",
                                method: 'post',
                                dataType: "json",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    "ids": ids,
                                    "target_status": "{{ \App\Order::Deleted }}"
                                },
                                beforeSend: function (XMLHttpRequest) {

                                },
                                complete: function (jqXHR, textStatus) {

                                },
                                success: function (data) {
                                    alert("{{ __('cms.success') }}");
                                    table.ajax.reload();
                                },
                                error: function (request, status, error) {
                                    let json = $.parseJSON(request.responseText);
                                    alert(json.message);
                                    console.log(json);
                                }
                            });
                        }
                    },




                ],
            },
            columns: [
                {
                    ...window.dataTablesHelper.selectCheckbox.columnData,
                    render: function (data, type, row, meta) {
                        return window.dataTablesHelper.selectCheckbox.html;
                    },
                },
                {
                    data: 'id',
                    name: 'id',
                    render: function (data, type, row, meta) {
                        var url = '{{ route("cms.orders.show", "__id__") }}'.replace('__id__', data);
                        return `<a href="${url}">${data}</a>`;
                    }
                },
                {
                    data: 'product_number', name: 'product_number',
                    render: function (data, type, row, meta) {
                        if (row.platform_id == 1) {
                            return row.order_item_id;
                        }
                        if (row.platform_id == 4) {
                            return "N/A"
                        }
                        return data;
                    },
                },
                {
                    data: 'external_order_id', name: 'external_order_id',
                    render: function (data, type, row, meta) {
                        if (row.platform_id == 1) {
                            return `<span class="text-green">${row.order_item_id}</span>`;
                        }
                        return `<span class="text-green">${data}</span>`;
                    },
                },
                { data: 'invoice_number', name: 'invoice_number', },
                {
                    data: 'platform_name', name: 'platforms.name',
                    render: function (data, type, row, meta) {
                        return `${data}` + row.store_id;
                    }
                },

                {
                    data: 'order_products', name: 'product_name',
                    render: function (data, type, row, meta) {
                        return row.order_products.map(p => p.product_name).join('|');;
                    }
                },
                {
                    data: 'order_products', name: 'product_qty',
                    render: function (data, type, row, meta) {
                        return row.order_products.map(p => p.qty).join('|');;
                    }
                },

                {
                    data: 'courier_name', name: 'couriers.name',
                    render: function (data, type, row, meta) {
                        var displayName = '{{ __('cms.na') }}';
                    if(data) { displayName = data; }
                    		return displayName;
                }
            	},
            { data: 'tracking_number', name: 'tracking_number', },
            {
                data: 'status', name: 'status',
                render: function (data) {
                    return window.dataTablesHelper.renderers.statusBadge(data, {
                        1: "{{ __('cms.order.status.1') }}",
                        2: "{{ __('cms.order.status.2') }}",
                        3: "{{ __('cms.order.status.3') }}",
                        4: "{{ __('cms.order.status.4') }}",
                        5: "{{ __('cms.order.status.5') }}",
                        6: "{{ __('cms.order.status.6') }}",
                        7: "{{ __('cms.order.status.7') }}"
                    });
                }
            },
        { data: 'orderer_name', name: 'orderer_name', },
        { data: 'receiver_name', name: 'receiver_name', },
        { data: 'orderer_id', name: 'orderer_id', },
        { data: 'orderer_phone_number', name: 'orderer_phone_number', },
        { data: 'receiver_address', name: 'receiver_address', },
        { data: 'order_datetime', name: 'order_datetime', },
        { data: 'created_at', name: 'created_at', },
        { data: 'picking_datetime', name: 'picking_datetime', },

        { data: 'shipping_datetime', name: 'shipping_datetime', },
        {
            data: 'action', name: 'action', searchable: false, class: 'action-cell text-center',
            render: function (data, type, row, meta) {
                var isDataOK = true;
                if (row['shipping_datetime'] && row['tracking_number']) {
                    isDataOK = true;
                }
                return isDataOK ? `<button type="button" class="btn btn-sm btn-plain btn-info-modal" data-index="${meta['row']}"><i class="px-3 fas fa-pencil-alt"></i></button>` : `<button type="button" class="btn btn-sm btn-outline-primary btn-info-modal" data-index="${meta['row']}">{{ __('cms.fill') }}</button>`
            }
        },
        {
            data: 'aftership_status', name: 'aftership_status', searchable: false, class: 'action-cell text-center',
            render: function (data, type, row, meta) {
                if (data == 0) {
                    return `<span> Not Synced</span>`;
                } else {
                    return `<span>Synced</span>`;
                }
            }
        },
        {
            data: 'total_amount', name: 'total_amount',
            render: function (data, type, row, meta) {
                return '<span>' + Number(data).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }) + '</span>';
            }
        },
        ],
        enableSelect: true,
        isSelectableRow: function (row, data, dataIndex) {
            return true;
        },
        onSelectRow: function (count) {
            // $(".testing-card > .card-body > .row > .col > .my-2 > .display-value").text(count);
            $('.btn-move-to-status span').html(`{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Shipping)]) }}${count > 0 ? ` (${count})` : ''}`)
            $('.btn-move-to-status-pending span').html(`{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Pending)]) }}${count > 0 ? ` (${count})` : ''}`)
            $('.btn-print-invoice:eq(0) span').html(`{{ __('cms.order.print_invoice') }}${count > 0 ? ` (${count})` : ''}`)
            $('.btn-print-dispatch span').html(`Print Dispatch Note ${count > 0 ? ` (${count})` : ''}`)
            $('.btn-print-delivery span').html(`Print Delivery Note ${count > 0 ? ` (${count})` : ''}`)
            $("#selected-picking > div > .row > div > h2> span").text(count);
        },
        onClickRow: function (id) {
            if (!id) { return; }

            var url = '{{ route('cms.orders.show', '__id__') }}'.replace('__id__', id);
            // window.location.href = url;
        },
        stateSaveCallback: function (settings, data) {
            localStorage.setItem('clist_DataTables_' + settings.sInstance, JSON.stringify(data))
        },
        stateLoadCallback: function (settings) {
            if (performance.navigation.type == 2) {
                return JSON.parse(localStorage.getItem('clist_DataTables_' + settings.sInstance))
            } else {
                return true;
            }
        },
    })


    $(document).on('click', '.btn-info-modal', function () {
        $('#modal_info').remove()

        const id = table.row($(this).data('index')).data()['id']

        $.ajax({
            url: "{{ route('cms.shipping.info_modal') }}",
            method: 'get',
            data: {
                "_token": "{{ csrf_token() }}",
                id
            },
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (jqXHR, textStatus) {
            },
            success: function (data) {
                $('body').append(data)

                $('#modal_info').on('shown.bs.modal', function (e) {
                    window.initFormSubmit({
                        selector: '#modal_info form',
                        onSubmit: function ({ form }) {
                            $('#modal_info').modal('toggle')
                            table.ajax.reload()
                        }
                    })
                })
                    .modal('toggle')

                let shipper = {!! json_encode($shippers) !!};
                window.initShipperDropdownOnChange(shipper)
            },
            error: function (request, status, error) {
                let json = $.parseJSON(request.responseText);
                alert(json.message);
                console.log(json);
            }
        });
    })



});



</script>
@endpush

@section("title")

@if (count(explode(',', $platform))>1)
{{$country}} Total Picking
@endif

@if (count(explode(',', $platform)) == 1)
{{ __('cms.order.platforms.' . $platform) }} {{ __('cms.sidemenu.picking') }}
@endif

@endsection

@section("content")
<div class="row mb-5">
    <div class="col-md-auto mb-2 mb-md-0">
        <div class="row">
            <div class="col-auto">
                <x-card.stat class="testing-card" title="{{ __('cms.picking.stats.today') }}"
                    value="{{ $today_count }}">
                    <div class="col-auto d-flex align-items-center ml-5">
                        <a href="{{ route('cms.picking.details') }}"
                            class="badge badge-pill badge-outline-primary badge-details">
                            {{ __('cms.picking.details') }}
                            <i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </x-card.stat>
            </div>

            <div class="col-auto">
                <x-card.stat class="testing-card" title="Selected Picking" value="0" id="selected-picking">
                    <div class="col-auto d-flex align-items-center ml-5">
                        <a href="{{ route('cms.picking.details') }}"
                            class="badge badge-pill badge-outline-primary badge-details selected-picking">
                            {{ __('cms.picking.details') }}
                            <i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </x-card.stat>
            </div>

            <div class="col col-sm-auto">
                <x-card.stat title="{{ __('cms.picking.stats.month') }}" value="{{ $this_month_count }}" />
            </div>

            <div class="col col-sm-auto">
                <x-card.stat title="Total {{isset($status)? __('cms.order.status.' . $status) : ' All'}} Picking "
                    value="{{ $month_status_count }}" />
            </div>

            <div class="col col-sm-auto">
                <x-card.stat title="Sales Today" value="{{ $today_sales_count }}">
                    <div class="col-auto d-flex align-items-center ml-5">
                        <a href="{{ route('cms.picking.today')}}"
                            class="badge badge-pill badge-outline-primary badge-details sales-detail">
                            {{ __('cms.picking.details') }}
                            <i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </x-card.stat>
            </div>
        </div>
    </div>

    @if ($platform ==4 || $platform ==8 || $platform ==6)
    <div class="col-md d-flex justify-content-md-end align-items-end">
        <div class="row">
            <div class="col-auto">
                <button type="button" class="btn btn-primary btn-icon shipping-button">
                    <i class="las la-download mr-2"></i>
                    {{ __('cms.shipping.download_shipping') }}
                </button>
            </div>
        </div>
    </div>

    @endif

</div>

<div class="row" style="justify-content:right;margin-bottom:25px;">

    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-icon" data-toggle="modal"
            data-target="#shipping_number_download">
            <i class="las la-download mr-2"></i>
            Download Shipping No.
        </button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-secondary btn-icon" data-toggle="modal"
            data-target="#tracking_number_import">
            <i class="las la-upload mr-2"></i>
            Upload Shipping No.
        </button>
    </div>
</div>

@php
$dates_options = [
'+0' => __('cms.today'),
'+1' => __('cms.tomorrow'),
'+2' => __('cms.2_days_later'),
'+7' => __('cms.this_week'),
];
@endphp



<div class="card">
    <div class="card-body table-dataTable table-responsive">
        <x-cms.datatable-filters 
            :show-status="false"
            :stores="[]"
        >
            <x-cms.datatable-search :fields="[
                ['name' => 'order_no', 'placeholder' => 'Order Number'],
                ['name' => 'buyer_name', 'placeholder' => 'Buyer Name'],
                ['name' => 'receiver_name', 'placeholder' => 'Receiver Name'],
                ['name' => 'buyer_id', 'placeholder' => 'Buyer ID'],
                ['name' => 'phone_number', 'placeholder' => 'Phone Number'],
                ['name' => 'address', 'placeholder' => 'Address'],
                ['name' => 'tracking_no', 'placeholder' => 'Tracking No.'],
                ['name' => 'product_name', 'placeholder' => 'Product Name'],
            ]">
                <div class="col-sm-auto">
                    <button type="button" class="btn btn-sm btn-primary apply-btn px-3">
                        <i class="fas fa-search mr-1"></i> {{ __('cms.search') }}
                    </button>
                </div>
            </x-cms.datatable-search>
        </x-cms.datatable-filters>


        <table id="dataTable" class="table table-hover w-100">
            <thead>
                <tr>
                    <th class="align-middle"><span class="select-checkbox"></span></th>
                    <th>Order ID</th>
                    <th>Product Order Number</th>
                    <th>{{ __('cms.order.order_no')}}</th>
                    <th>{{ __('cms.order.invoice_no')}}</th>
                    <th>{{ __('cms.order.platform')}}</th>
                    <th>Product Name</th>
                    <th>Qty</t>
                    <th>{{ __('cms.order.courier')}}</th>
                    <th>Tracking No. / HAWB No.</th>
                    <th>{{ __('cms.status')}}</th>
                    <th>Buyer Name</th>
                    <th>Receiver Name</th>
                    <th>Buyer ID</th>
                    <th>Phone Number</th>
                    <th>Delivery Address</th>
                    <th>{{ __('cms.order.order_date')}}</th>
                    <th>{{ __('cms.order.import_date')}}</th>
                    <th>Picking Date</th>
                    <th>Shipping Date</th>
                    <th>Edit</th>
                    <th>Sync After Ship</th>
                    <th>Sales</th>
                </tr>
            </thead>
        </table>
    </div>
</div>




<x-modal.master id="shipping_number_download" class="modal-import" title="Download Shipping No." size="lg">

    @php
    $platforms_options = \App\Platform::all()->pluck('name', 'id');
    @endphp

    <div class="mb-3">
        <label for="download_platform_id" class="form-label">Platforms</label>
        <select name="download_platform_id" id="download_platform_id" class="form-select form-control ">

            @foreach ($platforms_options as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="row my-6">
        <div class="col"></div>
        <div class="col-auto">
            <button class="download-shipping btn btn-primary btn-lg">
                Download
            </button>
        </div>
    </div>

</x-modal.master>



<x-modal.master id="tracking_number_import" class="modal-import" title="{{ __('cms.import') }}" size="lg">
    {{ Form::open(['route' => 'cms.orders.import_tracking', 'method' => 'POST', 'id' => 'upload_tracking', 'files' =>
    true]) }}
    <x-form.form-group.master name="upload_tracking" label="{{ __('cms.order.raw_files_excel') }}" type="file">
        {{ Form::fileUpload('upload_tracking', null, [
        'multiple' => true,
        'type' => 'document',
        'accept' => '.xlsx, .xls, .csv',
        ]) }}
    </x-form.form-group.master>

    @php
    $couriers_options = \App\Courier::all()->pluck('name', 'id');
    @endphp

    <div class="mb-3">
        <label for="courier_id" class="form-label">Apply Courier</label>
        <select name="courier_id" id="courier_id" class="form-select form-control ">
            <option value="0">none</option>
            @foreach ($couriers_options as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="row my-6">
        <div class="col"></div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary btn-lg">
                {{ __('cms.import') }}
            </button>
        </div>
    </div>

    {{ Form::close() }}
</x-modal.master>


<x-modal.master id="modal_export" title="{{ __('cms.export')}}">

    {{ Form::open(['route' => 'cms.orders.export', 'method' => 'POST', 'id' => 'form_export']) }}

    <input type="hidden" name="status" value="{{ \App\Order::Picking }}">

    @php
    $couriers_options = $couriers->pluck('name', 'id');
    $platforms_options = $platforms->pluck('name', 'id');
    $dates_options = [
    '0' => __('cms.today'),
    '+1' => __('cms.tomorrow'),
    '+2' => __('cms.2_days_later'),
    '+7' => __('cms.this_week'),
    ];

    $fields = [
    [
    'type' => 'select',
    'name' => 'courier_id',
    'label' => __('cms.order.courier'),
    'options' => $couriers_options,
    'withAny' => '1'
    ],
    [
    'type' => 'select',
    'name' => 'platform_id',
    'label' => __('cms.order.platform'),
    'options' => $platforms_options,
    'withAny' => '1',
    ],
    [
    'type' => 'select',
    'name' => 'picking_date',
    'label' => __('cms.order.picking_date'),
    'options' => $dates_options,
    'withAny' => '1'
    ],
    ];

    @endphp
    <x-form.fields field-class="col-12 mb-5" :fields="$fields" editing="1"></x-form.fields>


    <div class="row my-6">
        <div class="col"></div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary btn-lg">
                {{ __('cms.picking.export_today_picking_list') }}
            </button>
        </div>
    </div>
    {{ Form::close() }}
</x-modal.master>
@endsection