<?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-file-invoice text-primary me-2"></i>New Purchase Requisition</h2>
            <p class="text-muted small m-0 mt-1">Initiate an internal request for external procurement.</p>
        </div>
        <a href="?cat=procurement&page=procurement/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>
        
        <h6 class="fw-bold text-secondary mb-3"><i class="fa-solid fa-circle-info me-2"></i>1. Requisition Details</h6>
        <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="request_date" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-uppercase">Required By Date <span class="text-danger">*</span></label>
                <input type="date" name="required_date" id="required_date" class="form-control border-primary" required>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-uppercase">Requesting Department <span class="text-danger">*</span></label>
                <select name="department_id" id="department_id" class="form-select" required>
                    <option value="" selected disabled>-- Fetching Departments --</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-uppercase">Priority Level</label>
                <select name="priority" class="form-select">
                    <option value="Routine" selected>Routine</option>
                    <option value="Urgent">Urgent</option>
                    <option value="Emergency">Emergency</option>
                </select>
            </div>
            <div class="col-12 mt-2">
                <label class="form-label small fw-bold text-uppercase">Clinical / Operational Justification <span class="text-danger">*</span></label>
                <input type="text" name="justification" class="form-control" placeholder="Provide reason for this request (required for approval)..." required>
            </div>
        </div>

        <h6 class="fw-bold text-secondary mb-3"><i class="fa-solid fa-cart-flatbed me-2"></i>2. Requested Items</h6>
        <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 style="width: 15%">Requested Qty</th>
                        <th style="width: 15%">Est. Unit Cost (GH₵)</th>
                        <th style="width: 15%">Total Est. Value (GH₵)</th>
                        <th style="width: 10%">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 Requisition 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="summary_total">0.00</span></h4>
                    <input type="hidden" name="estimated_total_value" id="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 shadow-sm">
                <i class="fa-solid fa-paper-plane me-2"></i> Submit for Approval
            </button>
        </div>
    </form>
</div>

<script>
    window.AppConfig = {
        apiPath: "/rimax/application/dripend/procurement/"
    };
</script>
<script src="<?php echo BASE_URL; ?>application/assets/js/purchaseRequisition.js?v=<?= time(); ?>"></script>