<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="css/main/main.css?ver=<?php echo time(); ?>">
    <script src="js/main/main.js?ver=<?php echo time(); ?>" defer></script>
    <script src="https://api.squizee.in/datatable/main.js?ver=<?php echo time(); ?>" defer></script>

    <style>
        #data-table-container {
            margin-top: 20px;
            max-height: calc(100vh - 200px) !important;
            overflow: auto;
            border-radius: 3px;    
        }
        
        .address-column {
            min-width: 250px;
        }
        
        .final-order-status-column {
            min-width: 200px;
        }
        
        .customer-name-column {
            min-width: 150px;
        }
        
    </style>
</head>
<body>

    <!-- Left Panel (Navigation) -->
    <div class="left-panel left-panel-show" id="left-panel">
    </div>

    <!-- Main Content Area -->
    <div class="main-content main-content-normal" id="main-content">

        <!-- Content Area (Dynamic Content Based on the selected menu) -->
        <div id="content">
            <div id="data-table-wrapper"></div>
        </div>
    </div>

  <script>
  
  
   // 💡 Define a comprehensive configuration object.
    const tableConfig = {
        enable_wbr: true,
        wbr_config: {
            "Address": { wbr: false, wbr_limit: 15 }
        },
        column_config: {
            "Address": {
                class: 'address-column'
            },
            "Final Order Status": {
                class: 'final-order-status-column'
            },
            "Customer Name": {
                class: 'customer-name-column'
            }

        }

    }
  
  
  
    // Function to fetch data from fetch_data.php
    function fetchData() {
        fetch('../php/fetch_orders.php')  // URL to your PHP file
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();  // Assume the response is in JSON format
            })
            .then(data => {
                // Define the headers with the proper case and replacements for clarity
                const options = {
                    replace_headers: [
                        ['name', 'Customer Name'],
                        ['customerType', 'Customer Type'],
                        ['countryCode', 'Country'],
                        ['phone', 'Phone Number'],
                        ['address', 'Address'],
                        ['remarks', 'Remarks'],
                        ['orderCategory', 'Order Category'],
                        ['orderReference', 'Order Reference'],
                        ['referenceNumber', 'Reference Number'],
                        ['orderReceivedFrom', 'Received From'],
                        ['dateOfBooking', 'Booking Date'],
                        ['dateOfDelivery', 'Delivery Date'],
                        ['shippingCost', 'Shipping Cost'],
                        ['overallDiscount', 'Overall Discount'],
                        ['overallTax', 'Overall Tax'],
                        ['finalInvoiceAmount', 'Final Invoice Amount'],
                        ['actualAmountReceived', 'Amount Received'],
                        ['pendingAmount', 'Pending Amount'],
                        ['paymentMethod', 'Payment Method'],
                        ['paymentStatus', 'Payment Status'],
                        ['finalOrderStatus', 'Final Order Status'],
                        ['dispatchedThrough', 'Dispatched Through'],
                        ['courierName', 'Courier Name'],
                        ['cnNumber', 'CN Number'],
                        ['courierPartnerId', 'Courier Partner'],
                        ['dispatchDate', 'Dispatch Date'],
                        ['actualWeight', 'Actual Weight'],
                        ['length', 'Length'],
                        ['width', 'Width'],
                        ['height', 'Height'],
                        ['divisor', 'Divisor'],
                        ['volumetricWeight', 'Volumetric Weight'],
                        ['totalPackets', 'Total Packets'],
                        ['urgencyStatus', 'Urgency Status'],
                        ['destination', 'Destination'],
                        ['pinCode', 'Pin Code'],
                        ['orderType', 'Order Type'],
                        ['created_at', 'Created At'],
                        ['orderId', 'Order ID'],
                        ['items', 'Items']
                    ],
                    // Define the column arrangement
                    arrange_columns: [
                        'Order ID', 
                        'Customer Name', 
                        'Customer Type',
                        'Phone Number',
                        'Address',
                        'Remarks',
                        'Order Reference',
                        'Reference Number',
                        'Order Category',
                        'Booking Date',
                        'Delivery Date',
                        'Shipping Cost',
                        'Final Invoice Amount',
                        'Amount Received',
                        'Pending Amount',
                        'Payment Method',
                        'Payment Status',
                        'Final Order Status',
                        'Dispatched Through',
                        'Courier Name',
                        'CN Number',
                        'Dispatch Date',
                        'Actual Weight',
                        'Length',
                        'Width',
                        'Height',
                        'Divisor',
                        'Volumetric Weight',
                        'Total Packets',
                        'Urgency Status',
                        'Destination',
                        'Pin Code',
                        'Order Type',
                        'Created At'
                    ],
                    filter_blanks: true,
                    sort_by: 'Order ID',
                    sort_direction: 'desc'
                };

                // Call loadData with the 2D array and options
                loadData(data, 'json', options);
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
    }

    document.addEventListener("DOMContentLoaded", fetchData);

  </script>

</body>
</html>
