<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Table</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
</head>
<body>

<table class="display" style="width:100%" id="example">
    <thead>
        <tr>
            <th>Date</th>
            <th>Transaction ID</th>
            <th>Status</th>
            <th>Total Items (Wash)</th>
            <th>Total Items (Dry Clean)</th>
            <th>Total Order Amount</th>
            <th>Total Payout</th>
        </tr>
    </thead>
    <tbody id="searchResults4">
        <!-- Table rows will be populated here -->
    </tbody>
</table>

<script>
    $(document).ready(function() {
        // Fetch data from the API
        $.ajax({
            url: 'http://localhost:8000order_api',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    const orders = response.allOrders;
                    let rows = '';

                    orders.forEach(order => {
                        const status = order.statuses[0].label;
                        const date = new Date(order.created_at).toLocaleDateString();
                        const totalItemsWash = order.Items.filter(item => item.type === 'Wash').reduce((sum, item) => sum + item.quantity, 0);
                        const totalItemsDryClean = order.Items.filter(item => item.type === 'Dry Clean').reduce((sum, item) => sum + item.quantity, 0);
                        const totalOrderAmount = `₹${order.UserTotalCost}`;
                        const totalPayout = `₹${order.CleaneoProfit}`;

                        // Determine status button color
                        let statusButtonClass = '';
                        if (status === 'Pending') {
                            statusButtonClass = 'background: #F4BB0D; color: #ffff;';
                        } else {
                            statusButtonClass = 'background: #5EAA3A; color: #ffff;';
                        }

                        // Create table row
                        rows += `
                            <tr>
                                <td><a href="#">Deposited on ${date}</a></td>
                                <td>${order.OrderID}</td>
                                <td><button style="width:75px; border-radius: 2.78px; border: 0.7px solid #93C5FD; ${statusButtonClass} font-weight: 500;">${status}</button></td>
                                <td>${totalItemsWash}</td>
                                <td>${totalItemsDryClean}</td>
                                <td>${totalOrderAmount}</td>
                                <td>${totalPayout}</td>
                            </tr>
                        `;
                    });

                    // Populate the table body
                    $('#searchResults4').html(rows);

                    // Initialize DataTable
                    $('#example').DataTable();
                } else {
                    console.error('Failed to fetch data.');
                }
            },
            error: function() {
                console.error('An error occurred while fetching data.');
            }
        });
    });
</script>

</body>
</html>
<?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/undelivered_Order.blade.php ENDPATH**/ ?>