<?php
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$domainName = $_SERVER['HTTP_HOST'];
$baseDir = str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME']);
$computedBaseUrl = $protocol . $domainName . $baseDir;
?>

<div class="container-fluid py-4 px-4">
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h2 class="h4 text-dark fw-bold m-0"><i class="fa-solid fa-truck-ramp-box text-primary me-2"></i>Enterprise Stock Movement Ledger</h2>
            <p class="text-muted small m-0 mt-1">Real-time audit trail and traceability of all inventory transactions across the facility.</p>
        </div>
        <div class="d-flex gap-2">
            <a href="inventory/pdfExport.php" class="btn btn-danger fw-bold shadow-sm" target="_blank"><i class="fa-solid fa-file-pdf me-2"></i> Export PDF</a>
            <a href="inventory/wordExport.php" class="btn btn-primary fw-bold shadow-sm" target="_blank"><i class="fa-solid fa-file-word me-2"></i> Export Word</a>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white rounded-3">
                <div>
                    <span class="text-uppercase text-muted small fw-bold">Total Transactions</span>
                    <h3 class="m-0 fw-bold text-dark mt-1" id="kpi_total_tx">0</h3>
                </div>
                <div class="bg-primary-subtle text-primary p-3 rounded-3"><i class="fa-solid fa-list-check fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white rounded-3">
                <div>
                    <span class="text-uppercase text-muted small fw-bold">Items Received / In</span>
                    <h3 class="m-0 fw-bold text-success mt-1" id="kpi_qty_in">0</h3>
                </div>
                <div class="bg-success-subtle text-success p-3 rounded-3"><i class="fa-solid fa-arrow-right-to-bracket fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white rounded-3">
                <div>
                    <span class="text-uppercase text-muted small fw-bold">Items Issued / Out</span>
                    <h3 class="m-0 fw-bold text-warning mt-1" id="kpi_qty_out">0</h3>
                </div>
                <div class="bg-warning-subtle text-warning p-3 rounded-3"><i class="fa-solid fa-arrow-right-from-bracket fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white rounded-3">
                <div>
                    <span class="text-uppercase text-muted small fw-bold">Current Asset Value</span>
                    <h3 class="m-0 fw-bold text-danger mt-1">GH₵ <span id="kpi_asset_value">0.00</span></h3>
                </div>
                <div class="bg-danger-subtle text-danger p-3 rounded-3"><i class="fa-solid fa-vault fs-4"></i></div>
            </div>
        </div>
    </div>

    <div class="bg-white p-3 rounded-3 border shadow-sm mb-4">
        <form id="movementFilterForm" class="row g-3 align-items-end" autocomplete="off">
            <div class="col-md-2">
                <label class="form-label small fw-bold text-muted text-uppercase">Start Date</label>
                <input type="date" name="start_date" id="filter_start" class="form-control form-control-sm" required>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-bold text-uppercase text-muted">End Date</label>
                <input type="date" name="end_date" id="filter_end" class="form-control form-control-sm" required>
            </div>
            
            <div class="col-md-2">
                <label class="form-label small fw-bold text-uppercase text-muted">Location Type</label>
                <select name="location_type" id="filter_loc_type" class="form-select form-select-sm">
                    <option value="">-- All Types --</option>
                    <option value="Store">Store</option>
                    <option value="Department">Department</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-bold text-uppercase text-muted">Specific Location</label>
                <select name="location_id" id="filter_location" class="form-select form-select-sm">
                    <option value="">-- Select Type First --</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-bold text-uppercase text-muted">Transaction Type</label>
                <select name="transaction_type" id="filter_type" class="form-select form-select-sm">
                    <option value="">-- All Types --</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-bold text-uppercase text-muted">Search Product</label>
                <input type="text" name="search" id="filter_search" class="form-control form-control-sm" placeholder="Ref, Batch, Name...">
            </div>
            <div class="col-12 d-flex justify-content-end gap-2 mt-3 pt-3 border-top">
                <button type="button" class="btn btn-sm btn-light border fw-bold text-muted px-4" onclick="window.resetFilters()">Reset to Today</button>
                <button type="submit" class="btn btn-sm btn-primary fw-bold px-4"><i class="fa-solid fa-filter me-1"></i> Apply Engine Filters</button>
            </div>
        </form>
    </div>

    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle m-0 table-sm" id="movementsTable">
                    <thead class="table-dark small text-uppercase" style="letter-spacing: 0.5px;">
                        <tr>
                            <th class="py-3 px-3">Date & Time</th>
                            <th>Reference</th>
                            <th>Transaction</th>
                            <th>Product & Brand</th>
                            <th>Batch Identifier</th>
                            <th class="text-center">Movement Matrix</th>
                            <th class="text-center">Qty</th>
                            <th>Authorized By</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="movementsGridBody" class="small">
                        <tr><td colspan="9" class="text-center py-5"><div class="spinner-border text-primary"></div></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>