<?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>Daily Sales 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">

                <!-- ORDER SEARCH -->
                <div class="col-md-3">
                    <input
                        type="text"
                        id="search"
                        class="form-control"
                        placeholder="Search Order ID"
                    >
                </div>

                <!-- DATE -->
                <div class="col-md-3">
                    <input
                        type="date"
                        id="report_date"
                        class="form-control"
                        value="<?= date('Y-m-d') ?>"
                    >
                </div>

                <!-- STATUS -->
                <div class="col-md-2">
                    <select id="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="PAID">PAID</option>
                        <option value="CANCELLED">CANCELLED</option>
                    </select>
                </div>

                <!-- PAGE SIZE -->
                <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="loadDailySales(1)"
                    >
                        Search
                    </button>
                </div>

            </div>

        </div>
    </div>

    <div id="daily-sales-container"></div>

</div>

<script>
loadDailySales();

function loadDailySales(page = 1)
{
    let search = document.getElementById('search').value;
    let reportDate = document.getElementById('report_date').value;
    let status = document.getElementById('status').value;
    let limit = document.getElementById('limit').value;

    fetch(
        `load_daily_sales.php?search=${encodeURIComponent(search)}`
        + `&report_date=${encodeURIComponent(reportDate)}`
        + `&status=${encodeURIComponent(status)}`
        + `&limit=${limit}`
        + `&page=${page}`
    )
    .then(res => res.text())
    .then(data => {
        document.getElementById('daily-sales-container').innerHTML = data;
    });
}

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

document.getElementById('report_date').addEventListener('change', function () {
    loadDailySales(1);
});

document.getElementById('status').addEventListener('change', function () {
    loadDailySales(1);
});

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

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