<?php require_once dirname(__DIR__, 2) . '/dripend/config/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>New Requisition</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">
            <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-file-invoice text-primary me-2"></i>New Purchase Requisition</h2></div>
                <a href="listPurchaseRequisition.php" class="btn btn-light border fw-bold text-secondary shadow-sm"><i class="fa-solid fa-list me-2"></i> View Requisitions</a>
            </div>
            
            <div id="prResponseMessage" class="d-none alert shadow-sm mb-4 rounded-3 border-0"></div>
            
            <form id="purchaseRequisitionForm" class="bg-white p-4 rounded-3 border shadow-sm" autocomplete="off" novalidate>
                <div class="row g-3 mb-4 bg-light-subtle p-3 rounded border">
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase">Request Date</label><input type="date" name="request_date" id="pr_request_date" class="form-control" required></div>
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase">Required By Date *</label><input type="date" name="required_date" id="pr_required_date" class="form-control border-primary" required></div>
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase">Requesting Store *</label><select name="store_id" id="pr_store_id" class="form-select" required></select></div>
                    <div class="col-md-3"><label class="form-label small fw-bold text-uppercase">Priority Level</label><select name="priority" id="pr_priority" class="form-select"></select></div>
                    <div class="col-12 mt-2"><label class="form-label small fw-bold text-uppercase">Justification *</label><input type="text" name="justification" class="form-control" placeholder="Provide reason..." required></div>
                </div>
                <div class="table-responsive mb-4">
                    <table class="table table-bordered align-middle table-sm" id="prItemsTable">
                        <thead class="table-dark small text-center"><tr><th style="width: 45%">Product Catalog Item</th><th>Qty</th><th>Est. Unit (GH₵)</th><th>Est. Total (GH₵)</th><th>Action</th></tr></thead>
                        <tbody id="prItemsBody"></tbody>
                    </table>
                    <button type="button" class="btn btn-sm btn-outline-primary fw-bold" onclick="window.addPrRow()"><i class="fa-solid fa-plus me-1"></i> Add Line</button>
                </div>
                <div class="row g-3 mb-4 border-top pt-4 justify-content-end">
                    <div class="col-md-3">
                        <div class="p-3 bg-light rounded border text-center">
                            <span class="d-block small text-muted text-uppercase fw-bold">Estimated Total Value</span>
                            <h4 class="m-0 text-danger fw-bold">GH₵ <span id="pr_summary_total">0.00</span></h4>
                            <input type="hidden" name="estimated_total_value" id="pr_hidden_total" value="0">
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end pt-3 border-top"><button type="submit" id="btnPostPr" class="btn btn-success px-5 fw-bold"><i class="fa-solid fa-paper-plane me-2"></i> Submit for Approval</button></div>
            </form>
        </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>