<?php
session_start();

require_once '../../config/database.php';
require_once '../../includes/auth.php';

$basePath = '../../';
include '../../includes/header.php';
?>

<div class="container mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Profit Report</h3>

        <a href="dashboard.php" class="btn btn-secondary">
            Back to Reports
        </a>
    </div>

    <div class="card shadow-sm mb-3">
        <div class="card-body">

            <div class="row g-2">

                <!-- ITEM SEARCH -->
                <div class="col-md-4">
                    <input
                        type="text"
                        id="search"
                        class="form-control"
                        placeholder="Search item..."
                    >
                </div>

                <!-- FROM DATE -->
                <div class="col-md-2">
                    <input
                        type="date"
                        id="from_date"
                        class="form-control"
                    >
                </div>

                <!-- TO DATE -->
                <div class="col-md-2">
                    <input
                        type="date"
                        id="to_date"
                        class="form-control"
                    >
                </div>

                <!-- LIMIT -->
                <div class="col-md-2">
                    <select id="limit" class="form-select">
                        <option value="10">10 per page</option>
                        <option value="25">25 per page</option>
                        <option value="50">50 per page</option>
                        <option value="100">100 per page</option>
                    </select>
                </div>

                <!-- SEARCH -->
                <div class="col-md-2">
                    <button
                        class="btn btn-primary w-100"
                        onclick="loadProfitReport(1)"
                    >
                        Search
                    </button>
                </div>

            </div>

        </div>
    </div>

    <div id="profit-report-container"></div>

</div>

<script>
loadProfitReport();

function loadProfitReport(page = 1)
{
    let search = document.getElementById('search').value;
    let fromDate = document.getElementById('from_date').value;
    let toDate = document.getElementById('to_date').value;
    let limit = document.getElementById('limit').value;

    fetch(
        `load_profit_report.php?search=${encodeURIComponent(search)}`
        + `&from_date=${encodeURIComponent(fromDate)}`
        + `&to_date=${encodeURIComponent(toDate)}`
        + `&limit=${limit}`
        + `&page=${page}`
    )
    .then(res => res.text())
    .then(data => {
        document.getElementById('profit-report-container').innerHTML = data;
    });
}

document.getElementById('search').addEventListener('keyup', function () {
    loadProfitReport(1);
});

document.getElementById('from_date').addEventListener('change', function () {
    loadProfitReport(1);
});

document.getElementById('to_date').addEventListener('change', function () {
    loadProfitReport(1);
});

document.getElementById('limit').addEventListener('change', function () {
    loadProfitReport(1);
});
</script>

<?php include '../../includes/footer.php'; ?>