<!-- Begin Page Content -->
<div class="container-fluid">
    <div class="row column_title">
        <div class="col-md-12">
            <div class="page_title">
                <h2>Live Monitoring</h2>
            </div>
        </div>
    </div>

    <section class="content mt-5">
        <div class="container-fluid">
            <div class="card mx-auto">
                <div class="card-header">
                    <strong>Incomming Orders</strong>
                </div>
                <div class="card-body p-0">
                    <table class="table table-stripped mb-0" id="ordersTable">
                        <thead class="thead-dark">
                            <tr>
                                <th>User Name</th>
                                <th>Restaurant</th>
                                <th>Total Price</th>
                                <th>Rider</th>
                                <th>DateTime</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    John Doe
                                </td>
                                <td>
                                    Mamam's Kitchen
                                </td>
                                <td>$145</td>
                                <td>
                                    NA
                                </td>
                                <td>2025-05-29 12:30:15AM</td>
                                <td>Accepted</td>

                            </tr>
                            <tr>
                                <td>
                                    David Joe
                                </td>
                                <td>
                                    Mamam's Kitchen
                                </td>
                                <td>$75</td>
                                <td>
                                    Mr. Smith
                                </td>
                                <td>2025-05-29 11:25:15AM</td>
                                <td>In Progress</td>
                            </tr>

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

        </div>
    </section>
    <section class="content mt-5">
        <div class="container-fluid">
            <div class="card mx-auto">
                <div class="card-header">
                    <strong>Incomming Rides</strong>
                </div>
                <div class="card-body p-0">
                    <table class="table table-stripped mb-0" id="ridesTable">
                        <thead class="thead-dark">
                            <tr>
                                <th>Customer Name</th>
                                <th>Driver Name</th>
                                <th>Pick Location</th>
                                <th>Drop Location</th>
                                <th>Rent</th>
                                <th>Status</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Joe Root</td>
                                <td>Mr. Smith</td>
                                <td>F11 Markaz</td>
                                <td>E11 Markz</td>
                                <td>$20</td>
                                <td>Accepted</td>

                            </tr>
                            <tr>
                                <td>John Doe</td>
                                <td>Mr. Lee</td>
                                <td>G11 Markaz</td>
                                <td>F10 Markz</td>
                                <td>$45</td>
                                <td>In Progress</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </section>

</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    setInterval(function() {
        let $lastRow = $('#ordersTable tbody tr:last');

        if ($lastRow.length === 0) return;

        // Highlight and fade out last row
        $lastRow.css('background-color', '#f8d7da');
        $lastRow.fadeOut(800, function() {
            $(this).remove();

            // Add new row to the top with animation
            let $newRow = $(`
                <tr style="display:none; background-color: #d4edda;">
                    <td>
                        David Joe
                    </td>
                    <td>
                        Mamam's Kitchen
                    </td>
                    <td>$75</td>
                    <td>
                        Mr. Smith
                    </td>
                    <td>2025-05-29 11:25:15AM</td>
                    <td>In Progress</td>
                </tr>
            `);

            $('#ordersTable tbody').prepend($newRow);

            $newRow.fadeIn(800, function() {
                $(this).css('background-color', '');
            });
        });

    }, 5000); // Every 5 seconds

    setInterval(function() {
        let $lastRow = $('#ridesTable tbody tr:last');

        if ($lastRow.length === 0) return;

        // Highlight and fade out last row
        $lastRow.css('background-color', '#f8d7da');
        $lastRow.fadeOut(800, function() {
            $(this).remove();

            // Add new row to the top with animation
            let $newRow = $(`
                <tr style="display:none; background-color: #d4edda;">
                    <td>John Doe</td>
                    <td>Mr. Lee</td>
                    <td>G11 Markaz</td>
                    <td>F10 Markz</td>
                    <td>$45</td>
                    <td>In Progress</td>
                </tr>
            `);

            $('#ridesTable tbody').prepend($newRow);

            $newRow.fadeIn(800, function() {
                $(this).css('background-color', '');
            });
        });

    }, 4000); // Every 5 seconds
});
</script>
<!-- <script>
$(document).ready(function() {
    setInterval(function() {
        // Fetch new data from PHP server
        $.getJSON('get_row.php', function(data) {
            let $lastRow = $('#myTable tbody tr:last');

            // Highlight and fade out the last row
            $lastRow.css('background-color', '#f8d7da');
            $lastRow.fadeOut(800, function() {
                $(this).remove();

                // Create new row with fetched data
                let $newRow = $(`
                    <tr style="display:none; background-color: #d4edda;">
                        <td>${data.name}</td>
                        <td>${data.age}</td>
                    </tr>
                `);

                // Prepend new row
                $('#myTable tbody').prepend($newRow);

                // Fade in and reset background
                $newRow.fadeIn(800, function() {
                    $(this).css('background-color', '');
                });
            });
        });
    }, 5000); // every 5 seconds
});
</script> -->