@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <ul class="nav marketplace-tabs">
                        <li class="nav-item">
                            <button class="buttonTab nav-link border-0 active" data-bs-toggle="tab" data-bs-target="#shopee"
                                data-tab="shopee">
                                Shopee
                            </button>
                        </li>

                        <li class="nav-item">
                            <button class="buttonTab nav-link border-0" data-bs-toggle="tab" data-bs-target="#tiktok"
                                data-tab="tiktok">
                                TikTok Shop
                            </button>
                        </li>

                        <li class="nav-item">
                            <button class="buttonTab nav-link border-0" data-bs-toggle="tab" data-bs-target="#lazada"
                                data-tab="lazada">
                                Lazada
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-toolbar ms-auto">
                    <div class="d-flex gap-4 justify-content-end" data-kt-user-table-toolbar="base">
                        <div class="d-flex align-items-center position-relative my-1">
                            <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"></rect>
                                    <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"></path>
                                </svg>
                            </span>
                            <input type="text" id="searchTable"
                                data-kt-user-table-filter="search"class="form-control form-control-solid ps-14 h-50px"
                                style="width: 400px" placeholder="Cari toko, produk, no pesanan..." />
                        </div>
                        @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                            <select name="filterStore" id="filterStore"
                                class="form-select form-select-solid w-200px h-50px">
                                <option value="">Semua Toko</option>
                            </select>
                        @endif
                        @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                            <button class="btn btn-icon btn-bg-light btn-active-color-primary h-50px"
                                data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                <i class="bi bi-three-dots fs-3"></i>
                            </button>
                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3"
                                data-kt-menu="true" style="">
                                <div class="menu-item px-3">
                                    <div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Menu Detail</div>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="javascript:void(0)" class="menu-link px-3" data-bs-toggle="modal"
                                        data-bs-target="#uploadModal">Unggah Data</a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="tab-content mt-3">
                    <div class="tab-pane fade show active" id="shopee">
                        <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <div id="custom-loading"
                                    class="position-absolute top-0 start-0 w-100 h-100 
                            d-flex justify-content-center align-items-center"
                                    style="background: rgba(255,255,255,0.8); z-index: 10;">

                                    <div class="text-center">
                                        <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                        <div class="mt-3 fw-semibold text-gray-700">
                                            Memuat data...
                                        </div>
                                    </div>
                                </div>
                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                    id="tableShopee">
                                    <!--begin::Table head-->
                                    <thead>
                                        <tr class="">
                                            <th>No</th>
                                            <th>Nama Toko</th>
                                            <th>No. Pesanan</th>
                                            <th>Status</th>
                                            <th>Status Batal / Retur</th>
                                            <th>Opsi Kirim</th>
                                            <th>Waktu Pesanan Dibuat</th>
                                            <th>Metode Pembayaran</th>
                                            <th>SKU Induk</th>
                                            <th>Nama Produk</th>
                                            <th>No. Ref SKU</th>
                                            <th>Variasi</th>
                                            <th>Harga Awal</th>
                                            <th>Harga Diskon</th>
                                            <th>Jumlah</th>
                                            <th>Jumlah Retur Produk</th>
                                            <th>Total Harga</th>
                                            <th>Total Diskon</th>
                                            <th>Diskon Penjual</th>
                                            <th>Diskon Shopee</th>
                                            <th>Jumlah Dipesan</th>
                                            <th>Voucher Penjual</th>
                                            <th>Cashback Koin</th>
                                            <th>Voucher Shopee</th>
                                            <th>Paket Diskon</th>
                                            <th>Paket Diskon Shopee</th>
                                            <th>Paket Diskon Penjual</th>
                                            <th>Potongan Koin</th>
                                            <th>Diskon Kartu</th>
                                            <th>Ongkir Pembeli</th>
                                            <th>Estimasi Potongan Ongkir</th>
                                            <th>Ongkir Retur Produk</th>
                                            <th>Total Bayar</th>
                                            <th>Perkiraan Ongkir</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-600 fw-bold">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tiktok">
                        <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <div id="custom-loading-tiktok"
                                    class="position-absolute top-0 start-0 w-100 h-100 
                            d-flex justify-content-center align-items-center"
                                    style="background: rgba(255,255,255,0.8); z-index: 10;">

                                    <div class="text-center">
                                        <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                        <div class="mt-3 fw-semibold text-gray-700">
                                            Memuat data...
                                        </div>
                                    </div>
                                </div>
                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                    id="tableTiktok">
                                    <!--begin::Table head-->
                                    <thead>
                                        <tr class="">
                                            <th>No</th>
                                            <th>Nama Toko</th>
                                            <th>ID Pesanan</th>
                                            <th>Status Pesanan</th>
                                            <th>ID SKU</th>
                                            <th>SKU Penjual</th>
                                            <th>Nama Produk</th>
                                            <th>Variasi Produk</th>
                                            <th>Jumlah Dibeli</th>
                                            <th>Jumlah SKU Diretur</th>
                                            <th>Harga Satuan Asli SKU</th>
                                            <th>Subtotal SKU Sebelum Diskon</th>
                                            <th>Diskon dari Platform</th>
                                            <th>Diskon dari Penjual</th>
                                            <th>Subtotal SKU Setelah Diskon</th>
                                            <th>Biaya Pengiriman Setelah Diskon</th>
                                            <th>Biaya Pengiriman Awal</th>
                                            <th>Diskon Ongkir dari Penjual</th>
                                            <th>Diskon Ongkir dari Platform</th>
                                            <th>Biaya Pengiriman Berdasarkan Jarak</th>
                                            <th>Biaya Tambahan Jarak</th>
                                            <th>Jumlah Refund Pesanan</th>
                                            <th>Diskon Pembayaran dari Platform</th>
                                            <th>Biaya Layanan Pembeli</th>
                                            <th>Biaya Penanganan</th>
                                            <th>Asuransi Pengiriman</th>
                                            <th>Asuransi Barang</th>
                                            <th>Total Nilai Pesanan</th>
                                            <th>Waktu Pesanan Dibuat</th>
                                            <th>Metode Pengiriman</th>
                                            <th>Nama Jasa Pengiriman</th>
                                            <th>Metode Pembayaran</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-600 fw-bold">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="lazada">
                        <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="table-responsive">
                                <div id="custom-loading-lazada"
                                    class="position-absolute top-0 start-0 w-100 h-100 
                            d-flex justify-content-center align-items-center"
                                    style="background: rgba(255,255,255,0.8); z-index: 10;">

                                    <div class="text-center">
                                        <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                        <div class="mt-3 fw-semibold text-gray-700">
                                            Memuat data...
                                        </div>
                                    </div>
                                </div>
                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                    id="tableLazada">
                                    <!--begin::Table head-->
                                    <thead>
                                        <tr class="">
                                            <th>No</th>
                                            <th>Nama Toko</th>
                                            <th>ID Item Pesanan</th>
                                            <th>Jenis Pengiriman</th>
                                            <th>ID Marketplace Lazada</th>
                                            <th>SKU Penjual</th>
                                            <th>SKU Lazada</th>
                                            <th>Waktu Pesanan Dibuat</th>
                                            <th>Nomor Pesanan</th>
                                            <th>Nomor Invoice</th>
                                            <th>Metode Pembayaran</th>
                                            <th>Total Dibayar</th>
                                            <th>Harga Produk</th>
                                            <th>Total Diskon Penjual</th>
                                            <th>Ongkos Kirim Dibayar Pembeli</th>
                                            <th>Diskon Wallet / Kredit</th>
                                            <th>Nama Produk</th>
                                            <th>Variasi Produk</th>
                                            <th>Jasa Pengiriman</th>
                                            <th>Status Pesanan</th>
                                            <th>Diskon Bundling</th>
                                            <th>Jumlah Refund</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-600 fw-bold">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content rounded">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <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>
                    </div>
                </div>
                <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                    <form id="formUpload" class="formUpload" action="#" enctype="multipart/form-data">
                        <div class="mb-7">
                            <h1 class="mb-3">Data Pendapatan</h1>
                            <div class="text-muted fw-mdeium fs-5">Unggah file data pendapatan perusahaan anda.</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Channel <span class="text-danger">*</span></label>
                                <select class="form-select form-select-solid" id="selectChannel" name="selectChannel">
                                    <option value="shopee">Shopee</option>
                                    <option value="tiktok">Tiktok Shop</option>
                                    <option value="lazada">Lazada</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Toko <span class="text-danger">*</span></label>
                                <select class="form-select form-select-solid" id="selectStore" name="selectStore">
                                    <option value="">Pilih Toko</option>
                                </select>
                            </div>
                        </div>
                        <div class="upload-box my-5" onclick="document.getElementById('fileInput').click()">
                            <i class="bi bi-cloud-arrow-up" style="font-size: 75pt"></i>
                            <h6 class="fw-semibold">Pilih file excel</h6>
                            <small class="text-muted">Support .xlsx and .xls files</small>

                            <input type="file" id="fileInput" name="fileInput" accept=".xls,.xlsx">
                            <div class="file-name" id="fileName"></div>
                        </div>
                        <div class="notes-box p-5 mb-8">
                            <p class="fw-bold">Catatan :</p>
                            <ul class="mb-0 ps-3">
                                <li>File harus dalam format .xlsx atau .xls</li>
                            </ul>
                        </div>
                        <div class="text-end">
                            <button type="submit" id="buttonUpload" class="btn btn-primary">
                                <span class="indicator-label">Unggah File</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            const fileInput = document.getElementById('fileInput');
            const fileName = document.getElementById('fileName');
            let tabActive = 'shopee';

            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) {
                    fileName.textContent = "File terpilih : " + this.files[0].name;
                }
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let tableShopee = $('#tableShopee').DataTable({
                processing: false,
                serverSide: true,
                dom: 'rtip',
                scrollX: true,
                scrollCollapse: true,
                language: {
                    processing: `...`
                },
                ajax: {
                    url: "{{ route('order-sales.datatable') }}",
                    data: function(d) {
                        d.store = $('#filterStore').val();
                        d.marketplace = tabActive;
                    }
                },
                fixedColumns: {
                    leftColumns: 3
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'store_name',
                        name: 'store_name',
                        orderable: false,
                    },
                    {
                        data: 'order_number',
                        name: 'order_number',
                        orderable: false,
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                    },
                    {
                        data: 'cancel_return_status',
                        name: 'cancel_return_status',
                        orderable: false,
                    },
                    {
                        data: 'delivery_option',
                        name: 'delivery_option',
                        orderable: false,
                    },
                    {
                        data: 'order_created_at',
                        name: 'order_created_at',
                        orderable: false,
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method',
                        orderable: false,
                    },
                    {
                        data: 'parent_sku',
                        name: 'parent_sku',
                        orderable: false,
                    },
                    {
                        data: 'product_name',
                        name: 'product_name',
                        orderable: false,
                    },
                    {
                        data: 'sku_reference',
                        name: 'sku_reference',
                        orderable: false,
                    },
                    {
                        data: 'variation',
                        name: 'variation',
                        orderable: false,
                    },
                    {
                        data: 'original_price',
                        name: 'original_price',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'discount_price',
                        name: 'discount_price',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'qty',
                        name: 'qty',
                        orderable: false,
                    },
                    {
                        data: 'qty_return',
                        name: 'qty_return',
                        orderable: false,
                    },
                    {
                        data: 'total_price',
                        name: 'total_price',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'total_discount',
                        name: 'total_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'seller_discount',
                        name: 'seller_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'marketplace_discount',
                        name: 'marketplace_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'order_amount',
                        name: 'order_amount',
                        orderable: false,
                    },
                    {
                        data: 'seller_voucher',
                        name: 'seller_voucher',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'coin_cashback',
                        name: 'coin_cashback',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'marketplace_voucher',
                        name: 'marketplace_voucher',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'bundle_discount',
                        name: 'bundle_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'bundle_discount_marketplace',
                        name: 'bundle_discount_marketplace',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'bundle_discount_seller',
                        name: 'bundle_discount_seller',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'coin_deduction',
                        name: 'coin_deduction',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'card_discount',
                        name: 'card_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'buyer_shipping_fee',
                        name: 'buyer_shipping_fee',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'estimated_shipping_discount',
                        name: 'estimated_shipping_discount',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'return_shipping_fee',
                        name: 'return_shipping_fee',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'total_paid',
                        name: 'total_paid',
                        render: rupiah,
                        orderable: false,
                    },
                    {
                        data: 'estimated_shipping_fee',
                        name: 'estimated_shipping_fee',
                        render: rupiah,
                        orderable: false,
                    }
                ],

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                order: [
                    // [3, 'desc']
                ],

                pageLength: 10,
            });

            let tableLazada = null;
            let tableTiktok = null;

            $.ajax({
                url: '/user/division',
                type: 'GET',
                beforeSend: function() {},
                success: function(response) {
                    if (response.success) {
                        let select = $('#filterDivision');
                        select.empty();
                        select.append('<option value="">Semua Departemen</option>');

                        $.each(response.data, function(index, division) {
                            select.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select.trigger('change');

                        let select2 = $('#editDivision');
                        select2.empty();
                        select2.append('<option value="">Pilih Departemen</option>');

                        $.each(response.data, function(index, division) {
                            select2.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select2.trigger('change');
                    }
                },
                error: function() {
                    showToast('Gagal memuat data divisi', 'danger');
                }
            });

            function loadStore(val) {
                $.ajax({
                    url: '/order-sales/store',
                    type: 'POST',
                    data: {
                        marketplace: val,
                        // _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $('#selectStore').prop('disabled', true);
                    },
                    success: function(response) {
                        if (response.success) {
                            let select = $('#selectStore');
                            select.empty();
                            select.append('<option value="">Pilih Toko</option>');
                            $.each(response.data, function(index, store) {
                                select.append(
                                    '<option value="' + store.id + '">' + store
                                    .name + '</option>'
                                );
                            });
                            select.prop('disabled', false);
                            select.trigger('change');

                            let select2 = $('#filterStore');
                            select2.empty();
                            select2.append('<option value="">Semua Toko</option>');
                            $.each(response.data, function(index, store) {
                                select2.append(
                                    '<option value="' + store.id + '">' + store
                                    .name + '</option>'
                                );
                            });
                            select2.prop('disabled', false);
                            select2.trigger('change');
                        }
                    },
                    error: function() {
                        showToast('Gagal memuat data toko', 'danger');
                    }
                });
            }

            $('#selectChannel').on('change', function() {
                let marketplace = $(this).val();

                loadStore(marketplace);
            });

            function rupiah(data) {
                if (data == null) return '-';
                return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
            }

            function applySearchToActiveTable() {
                let keyword = $('#searchTable').val();

                if (tabActive == 'shopee') {
                    tableShopee.search(keyword).draw();
                } else if (tabActive == 'lazada' && tableLazada) {
                    tableLazada.search(keyword).draw();
                } else if (tabActive == 'tiktok' && tableTiktok) {
                    tableTiktok.search(keyword).draw();
                }
            }

            function reloadActiveTable() {
                if (tabActive == 'shopee') {
                    tableShopee.ajax.reload(null, false);
                } else if (tabActive == 'lazada' && tableLazada) {
                    tableLazada.ajax.reload(null, false);
                } else if (tabActive == 'tiktok' && tableTiktok) {
                    tableTiktok.ajax.reload(null, false);
                }
            }

            // Filter change
            $('#filterStore').change(function() {
                reloadActiveTable();
            });

            $('#searchTable').on('keyup', function() {
                applySearchToActiveTable();
            });

            tableShopee.on('processing.dt', function(e, settings, processing) {
                if (processing) {
                    $('#custom-loading').removeClass('d-none');
                } else {
                    $('#custom-loading').addClass('d-none');
                }
            });

            $('#formUpload').on('submit', function(e) {
                e.preventDefault();

                let fileInput = $('#fileInput')[0];

                if (!fileInput.files.length) {
                    showToast('Silakan pilih file terlebih dahulu', 'warning');
                    return;
                }

                let formData = new FormData();
                formData.append('file', fileInput.files[0]);
                formData.append('store_id', $('#selectStore').val());
                formData.append('marketplace', $('#selectChannel').val());

                $.ajax({
                    url: "{{ route('order-sales.import') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $('#buttonUpload')
                            .prop('disabled', true)
                            .html(
                                '<span class="spinner-border spinner-border-sm me-2"></span> Mengunggah...'
                            );
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#formUpload')[0].reset();
                            $('#fileName').html('');

                            var modalEl = document.getElementById('uploadModal');
                            var modal = bootstrap.Modal.getInstance(modalEl);
                            modal.hide();

                            showToast('File berhasil diunggah', 'success');
                            if (tabActive == 'shopee') {
                                if ($.fn.DataTable.isDataTable('#tableShopee')) {
                                    $('#tableShopee').DataTable().ajax.reload(null, false);
                                }
                            } else if (tabActive == 'lazada') {
                                if ($.fn.DataTable.isDataTable('#tableLazada')) {
                                    $('#tableLazada').DataTable().ajax.reload(null, false);
                                }
                            } else {
                                if ($.fn.DataTable.isDataTable('#tableTiktok')) {
                                    $('#tableTiktok').DataTable().ajax.reload(null, false);
                                }
                            }
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonUpload')
                            .prop('disabled', false)
                            .html('<span class="indicator-label">Unggah File</span>');
                    }
                });
            });

            loadStore('shopee');
            
            $(document).on('click', '.buttonTab', function(e) {
                e.preventDefault();
                let tabData = $(this).data('tab');
                tabActive = tabData;
                let searchKeyword = $('#searchTable').val().trim();
                loadStore(tabActive);
                if (tabActive == 'lazada') {
                    if (!$.fn.DataTable.isDataTable('#tableLazada')) {
                        tableLazada = $('#tableLazada').DataTable({
                            processing: false,
                            serverSide: true,
                            dom: 'rtip',
                            scrollX: true,
                            scrollCollapse: true,
                            language: {
                                processing: `...`
                            },
                            ajax: {
                                url: "{{ route('order-sales.datatable') }}",
                                data: function(d) {
                                    d.store = $('#filterStore').val();
                                    d.marketplace = tabActive;
                                }
                            },
                            fixedColumns: {
                                leftColumns: 3
                            },
                            columns: [{
                                    data: null,
                                    orderable: false,
                                    searchable: false,
                                    render: function(data, type, row, meta) {
                                        return meta.row + meta.settings._iDisplayStart + 1;
                                    }
                                },
                                {
                                    data: 'store_name',
                                    name: 'store_name',
                                    orderable: false,
                                },
                                {
                                    data: 'order_item_id',
                                    name: 'order_item_id',
                                    orderable: false,
                                },
                                {
                                    data: 'delivery_option',
                                    name: 'delivery_option',
                                    orderable: false,
                                },
                                {
                                    data: 'marketplace_id',
                                    name: 'marketplace_id',
                                    orderable: false,
                                },
                                {
                                    data: 'parent_sku',
                                    name: 'parent_sku',
                                    orderable: false,
                                },
                                {
                                    data: 'sku_reference',
                                    name: 'sku_reference',
                                    orderable: false,
                                },
                                {
                                    data: 'order_created_at',
                                    name: 'order_created_at',
                                    orderable: false,
                                },
                                {
                                    data: 'order_number',
                                    name: 'order_number',
                                    orderable: false,
                                },
                                {
                                    data: 'invoice_number',
                                    name: 'invoice_number',
                                    orderable: false,
                                },
                                {
                                    data: 'payment_method',
                                    name: 'payment_method',
                                    orderable: false,
                                },
                                {
                                    data: 'total_paid',
                                    name: 'total_paid',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'total_price',
                                    name: 'total_price',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'total_discount',
                                    name: 'total_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'buyer_shipping_fee',
                                    name: 'buyer_shipping_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'card_discount',
                                    name: 'card_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'product_name',
                                    name: 'product_name',
                                    orderable: false,
                                },
                                {
                                    data: 'variation',
                                    name: 'variation',
                                    orderable: false,
                                },
                                {
                                    data: 'shipping_provider',
                                    name: 'shipping_provider',
                                    orderable: false,
                                },
                                {
                                    data: 'status',
                                    name: 'status',
                                    orderable: false,
                                },
                                {
                                    data: 'bundle_discount',
                                    name: 'bundle_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'refund_amount',
                                    name: 'refund_amount',
                                    render: rupiah,
                                    orderable: false,
                                }
                            ],

                            columnDefs: [{
                                targets: '_all',
                                className: 'text-nowrap'
                            }],

                            order: [
                                // [3, 'desc']
                            ],

                            pageLength: 10,
                        });

                        tableLazada.on('processing.dt', function(e, settings, processing) {
                            if (processing) {
                                $('#custom-loading-lazada').removeClass('d-none');
                            } else {
                                $('#custom-loading-lazada').addClass('d-none');
                            }
                        });
                    }

                    if (searchKeyword !== '') {
                        tableLazada.search(searchKeyword).draw();
                    } else if ($.fn.DataTable.isDataTable('#tableLazada')) {
                        tableLazada.ajax.reload(null, false);
                    }
                } else {
                    if (tabActive == 'tiktok' && !$.fn.DataTable.isDataTable('#tableTiktok')) {
                        tableTiktok = $('#tableTiktok').DataTable({
                            processing: false,
                            serverSide: true,
                            dom: 'rtip',
                            scrollX: true,
                            scrollCollapse: true,
                            language: {
                                processing: `...`
                            },
                            ajax: {
                                url: "{{ route('order-sales.datatable') }}",
                                data: function(d) {
                                    d.store = $('#filterStore').val();
                                    d.marketplace = tabActive;
                                }
                            },
                            fixedColumns: {
                                leftColumns: 3
                            },
                            columns: [{
                                    data: null,
                                    orderable: false,
                                    searchable: false,
                                    render: function(data, type, row, meta) {
                                        return meta.row + meta.settings._iDisplayStart + 1;
                                    }
                                },
                                {
                                    data: 'store_name',
                                    name: 'store_name',
                                    orderable: false,
                                },
                                {
                                    data: 'order_number',
                                    name: 'order_number',
                                    orderable: false,
                                },
                                {
                                    data: 'status',
                                    name: 'status',
                                    orderable: false,
                                },
                                {
                                    data: 'parent_sku',
                                    name: 'parent_sku',
                                    orderable: false,
                                },
                                {
                                    data: 'sku_reference',
                                    name: 'sku_reference',
                                    orderable: false,
                                },
                                {
                                    data: 'product_name',
                                    name: 'product_name',
                                    orderable: false,
                                },
                                {
                                    data: 'variation',
                                    name: 'variation',
                                    orderable: false,
                                },
                                {
                                    data: 'qty',
                                    name: 'qty',
                                    orderable: false,
                                },
                                {
                                    data: 'qty_return',
                                    name: 'qty_return',
                                    orderable: false,
                                },
                                {
                                    data: 'original_price',
                                    name: 'original_price',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'subtotal_before_discount',
                                    name: 'subtotal_before_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'marketplace_discount',
                                    name: 'marketplace_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'seller_discount',
                                    name: 'seller_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'subtotal_after_discount',
                                    name: 'subtotal_after_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'shipping_fee_after_discount',
                                    name: 'shipping_fee_after_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'original_shipping_fee',
                                    name: 'original_shipping_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'bundle_discount_seller',
                                    name: 'bundle_discount_seller',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'bundle_discount_marketplace',
                                    name: 'bundle_discount_marketplace',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'distance_shipping_fee',
                                    name: 'distance_shipping_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'distance_fee',
                                    name: 'distance_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'refund_amount',
                                    name: 'refund_amount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'payment_platform_discount',
                                    name: 'payment_platform_discount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'buyer_service_fee',
                                    name: 'buyer_service_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'handling_fee',
                                    name: 'handling_fee',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'shipping_insurance',
                                    name: 'shipping_insurance',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'item_insurance',
                                    name: 'item_insurance',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'order_amount',
                                    name: 'order_amount',
                                    render: rupiah,
                                    orderable: false,
                                },
                                {
                                    data: 'order_created_at',
                                    name: 'order_created_at',
                                    orderable: false,
                                },
                                {
                                    data: 'delivery_option',
                                    name: 'delivery_option',
                                    orderable: false,
                                },
                                {
                                    data: 'shipping_provider',
                                    name: 'shipping_provider',
                                    orderable: false,
                                },
                                {
                                    data: 'payment_method',
                                    name: 'payment_method',
                                    orderable: false,
                                }
                            ],

                            columnDefs: [{
                                targets: '_all',
                                className: 'text-nowrap'
                            }],

                            order: [
                                // [3, 'desc']
                            ],

                            pageLength: 10,
                        });

                        tableTiktok.on('processing.dt', function(e, settings, processing) {
                            if (processing) {
                                $('#custom-loading-tiktok').removeClass('d-none');
                            } else {
                                $('#custom-loading-tiktok').addClass('d-none');
                            }
                        });
                    }

                    if (tabActive == 'shopee') {
                        if (searchKeyword !== '') {
                            tableShopee.search(searchKeyword).draw();
                        } else {
                            tableShopee.ajax.reload(null, false);
                        }
                    } else if (tabActive == 'tiktok') {
                        if (searchKeyword !== '') {
                            tableTiktok.search(searchKeyword).draw();
                        } else if ($.fn.DataTable.isDataTable('#tableTiktok')) {
                            tableTiktok.ajax.reload(null, false);
                        }
                    }
                }
            })
        });
    </script>
@endsection