File "work_history.php"

Full path: /home/julaysp1/public_html/admin/work_history.php
File size: 4.6 B (4.6 KB bytes)
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

<?php include_once("header.php"); ?>

<div class=" my-2 overflow-auto">
    <!-- Row for displaying summary cards -->
    <div class="row mb-4">
        <!-- Card for Today's Total Orders -->
        <div class="col-md-6">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title"> Total Work</h5>
                    <p id="totalOrders" class="card-text">0</p>
                </div>
            </div>
        </div>
        <!-- Card for Today's Work Total Price -->
        <div class="col-md-6">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title"> Work Total Price</h5>
                    <p id="totalPrice" class="card-text">0</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Dropdown -->
    <label for="dateFilter">Filter by Days:</label>
    <select id="dateFilter" class="form-select mb-3">
        <option value="1">Today</option>
        <option value="3">Last 3 Days</option>
        <option value="7">Last 7 Days</option>
        <option value="10">Last 10 Days</option>
        <option value="15">Last 15 Days</option>
        <option value="20">Last 20 Days</option>
        <option value="25">Last 25 Days</option>
        <option value="30">Last 30 Days</option>
        <option value="all">All Days</option>
    </select>

    <!-- Table to display the work history -->
    <table id="myTable" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>ইমেইল</th>
                <th>কাজের ধরন</th>
                <th>পূর্ববর্তী ব্যাল্যন্স</th>
                <th>কাজের রেইট</th>
                <th>পরর্বতী ব্যাল্যন্স</th>
                <th>কাজের সময়</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<?php include_once("footer.php"); ?>

<script>
    $(document).ready(function () {
        // Initialize DataTable
        const table = $('#myTable').DataTable({
            "info": false,
            "ordering": false,
            "language": {
                "search": '<i class="fa-solid fa-magnifying-glass"></i>',
                'searchPlaceholder': "search here..."
            }
        });

        // Function to update summary cards based on selected days
        function updateSummaryCards(days) {
            $.ajax({
                url: 'get_work_summary.php',  // PHP file for summary values
                method: 'GET',
                data: { days: days },
                dataType: 'json',
                success: function(data) {
                    $('#totalOrders').text(data.totalOrders);
                    $('#totalPrice').text(data.totalPrice);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching summary data:", error);
                }
            });
        }

        // Function to fetch and update table data with filtering option
        function fetchAndUpdateData(days) {
            $.ajax({
                url: 'get_work_history.php',
                method: 'GET',
                data: { days: days },
                dataType: 'json',
                success: function(data) {
                    table.clear();
                    let counter = 1;
                    data.forEach(function(row) {
                        table.row.add([
                            counter++,
                            row.email,
                            row.orderType,
                            row.beforeBalance,
                            row.price,
                            row.afterBalance,
                            row.orderTime
                        ]).draw(false);
                    });
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching data:", error);
                }
            });
        }

        // Initial load with today's data
        const initialDays = 1;
        fetchAndUpdateData(initialDays);
        updateSummaryCards(initialDays);

        // Update cards and table based on the filter selection
        $('#dateFilter').on('change', function() {
            const selectedDays = $(this).val();
            fetchAndUpdateData(selectedDays);
            updateSummaryCards(selectedDays);
        });
    });
</script>