<?php require_once dirname(__DIR__, 2) . '/dripend/config/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>Requisitions Tracker | RiMax</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>body{background:#f8fafc;font-family:'Inter',sans-serif;margin:0;} .main-content{margin-left:300px;padding:20px;min-height:100vh;} @media(max-width:1024px){.main-content{margin-left:0;}}</style>
</head>
<body>
    <?php include(dirname(__DIR__, 2) . '/dripend/statpages/sidebar.php'); ?>
    <div class="main-content">
        <div class="container-fluid py-2">
            
            <!-- In-App Notification Anchor -->
            <div id="prListMessage" class="d-none alert shadow-sm mb-3 rounded-3 border-0"></div>

            <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-list-check text-primary me-2"></i>Purchase Requisitions Tracker</h2>
                </div>
                <a href="addPurchaseRequisition.php" class="btn btn-primary fw-bold shadow-sm">
                    <i class="fa-solid fa-plus me-2"></i> New Requisition
                </a>
                <a href="purchaseRequisitionApproval.php" class="btn btn-primary fw-bold shadow-sm">
                    <i class="fa-solid fa-plus me-2"></i> Approvals
                </a>
            </div>

            <!-- KPIs -->
            <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 Requisitions</span><h3 class="m-0 fw-bold text-dark mt-1" id="kpi_pr_total">0</h3></div><div class="bg-primary-subtle text-primary p-3 rounded-3"><i class="fa-solid fa-folder-open 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">Pending Approval</span><h3 class="m-0 fw-bold text-warning mt-1" id="kpi_pr_pending">0</h3></div><div class="bg-warning-subtle text-warning p-3 rounded-3"><i class="fa-solid fa-clock-rotate-left 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">Approved</span><h3 class="m-0 fw-bold text-success mt-1" id="kpi_pr_approved">0</h3></div><div class="bg-success-subtle text-success p-3 rounded-3"><i class="fa-solid fa-check-double 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">Total Est. Value</span><h3 class="m-0 fw-bold text-danger mt-1">GH₵ <span id="kpi_pr_value">0.00</span></h3></div><div class="bg-danger-subtle text-danger p-3 rounded-3"><i class="fa-solid fa-coins fs-4"></i></div></div></div>
            </div>

            <!-- Filters -->
            <div class="bg-white p-3 rounded-3 border shadow-sm mb-4">
                <form id="prFilterForm" class="row g-3 align-items-end" autocomplete="off">
                    <div class="col-md-3"><label class="form-label small fw-bold text-muted text-uppercase">From Date</label><input type="date" id="filter_start" class="form-control form-control-sm"></div>
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase text-muted">To Date</label><input type="date" id="filter_end" class="form-control form-control-sm"></div>
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase text-muted">Status</label><select id="filter_status" class="form-select form-select-sm"><option value="">-- All --</option></select></div>
                    <div class="col-md-3"><button type="submit" class="btn btn-sm btn-primary fw-bold w-100"><i class="fa-solid fa-filter me-1"></i> Apply Filters</button></div>
                </form>
            </div>

            <!-- Data Table -->
            <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-hover align-middle m-0 table-sm bg-white">
                        <thead class="table-dark small text-uppercase">
                            <tr>
                                <th class="py-3 px-3 text-center">#</th>
                                <th>Req Date</th>
                                <th>No.</th>
                                <th>Requesting Store</th>
                                <th>Priority</th>
                                <th class="text-center">Items</th>
                                <th class="text-end">Est. Value</th>
                                <th>Status</th>
                                <th>Requested By</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="prGridBody"><tr><td colspan="10" class="text-center py-5"><div class="spinner-border text-primary"></div></td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Delete Confirmation Modal -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title fw-bold"><i class="fa-solid fa-triangle-exclamation me-2"></i> Confirm Deletion</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <p class="mb-1 text-muted">Are you sure you want to permanently delete Requisition:</p>
                    <h4 id="deletePrNoText" class="text-dark fw-bold mb-3"></h4>
                    <p class="small text-danger m-0">This action cannot be undone.</p>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger fw-bold" id="btnConfirmDelete">Delete Record</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo BASE_URL; ?>application/assets/js/purchaseRequisition.js?v=<?= time(); ?>"></script>
</body>
</html>