<?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>Stock History</h3>

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

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

            <div class="row g-2">

                <!-- SEARCH -->
                <div class="col-md-3">
                    <input
                        type="text"
                        id="search"
                        class="form-control"
                        placeholder="Search item / barcode / reference"
                    >
                </div>

                <!-- TYPE FILTER -->
                <div class="col-md-2">
                    <select id="type" class="form-select">
                        <option value="">All Types</option>
                        <option value="IN">Stock IN</option>
                        <option value="OUT">Stock OUT</option>
                    </select>
                </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>

                <!-- PAGE SIZE -->
                <div class="col-md-1">
                    <select id="limit" class="form-select">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>

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

            </div>

        </div>
    </div>

    <div id="history-container"></div>

</div>

<script>
loadHistory();

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

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

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

document.getElementById('type').addEventListener('change', function () {
    loadHistory(1);
});

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

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

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

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