<style>
    .med-calc-wrapper { width: 100%; padding: 20px 0; font-family: 'Inter', sans-serif;}
    .view-header { text-align: center; margin-bottom: 40px; }
    .view-header h2 { font-weight: 800; color: #0f172a; margin-bottom: 5px; font-size:26px;}
    .view-header p { color: #64748b; font-weight: 500; font-size: 14px;}
    .view-header .icon-box { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #e0f2fe; color: #0284c7; font-size: 24px; margin-bottom: 15px;}

    .custom-tabs { display: flex; justify-content: center; gap: 40px; border-bottom: 1px solid #e2e8f0; margin-bottom: 30px; }
    .custom-tabs .tab-link { color: #64748b; font-weight: 700; font-size: 14px; padding: 15px 0; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; background: none; border-top:none; border-left:none; border-right:none;}
    .custom-tabs .tab-link:hover { color: #0284c7; }
    .custom-tabs .tab-link.active { color: #0284c7; border-bottom-color: #0284c7; }

    .tbl-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .tbl-header-bar h5 { font-weight: 800; color: #0f172a; margin: 0; font-size: 18px;}

    table.dataTable { width: 100% !important; margin: 0 !important; font-size: 13.5px; }
    table.dataTable thead th { background: #fff; color: #0284c7; padding: 15px; font-weight: 800; font-size: 11.5px; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; text-align: left;}
    table.dataTable tbody td { padding: 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155;}
    
    .sandbox-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 30px;}
</style>

<div class="med-calc-wrapper">
    
    <div class="view-header">
        <div class="icon-box"><i class="fa-solid fa-microchip"></i></div>
        <h2>Clinical Calculation Engine</h2>
        <p>Configure formulas, routing, and frequency multipliers to decouple dosage from inventory.</p>
    </div>

    <div class="custom-tabs" id="calcTabs">
        <button class="tab-link active" onclick="loadCalcTab('rules')"><i class="fa-solid fa-scale-balanced me-2"></i> Engine Configuration Rules</button>
        <button class="tab-link" onclick="loadCalcTab('freqs')"><i class="fa-solid fa-clock me-2"></i> Frequency Multipliers</button>
        <button class="tab-link" onclick="loadCalcTab('sandbox')"><i class="fa-solid fa-flask me-2"></i> Testing Sandbox</button>
    </div>

    <div class="calc-tab-content">
        
        <!-- RULES TAB -->
        <div id="tab_rules" class="calc-pane active">
            <div class="tbl-header-bar">
                <h5>Master Calculation Protocols</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openRuleModal()"><i class="fa-solid fa-plus me-1"></i> New Protocol</button>
            </div>
            <div class="table-responsive">
                <table id="tblRules" class="table table-hover">
                    <thead><tr><th width="5%">#</th><th>Protocol Name</th><th>Formula Logic</th><th>Operation Mode</th><th>Rounding Strategy</th><th class="text-end">Action</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- FREQUENCIES TAB -->
        <div id="tab_freqs" class="calc-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5>Prescription Frequency Multipliers</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openFreqModal()"><i class="fa-solid fa-plus me-1"></i> Add Frequency</button>
            </div>
            <div class="table-responsive">
                <table id="tblFreqs" class="table table-hover">
                    <thead><tr><th width="5%">#</th><th>Frequency Code</th><th>Clinical Description</th><th>Math Multiplier (/Day)</th><th class="text-end">Action</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- SANDBOX TAB -->
        <div id="tab_sandbox" class="calc-pane" style="display:none;">
            <div class="sandbox-box">
                <h5 class="fw-bold text-dark mb-4"><i class="fa-solid fa-vial text-primary me-2"></i> Algorithm Simulator</h5>
                
                <!-- ONSUBMIT ADDED TO PREVENT NATIVE REDIRECTS -->
                <form id="frmSandbox" class="row g-4" onsubmit="event.preventDefault();">
                    <input type="hidden" name="action" value="test_engine">
                    <div class="col-md-12">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Select Engine Rule to Test</label>
                        <select name="test_rule_id" id="sb_rule" class="form-select fw-bold border-secondary" required></select>
                    </div>
                    <div class="col-md-3">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Prescribed Dose [DOSE]</label>
                        <input type="number" step="any" name="test_dose" class="form-control fw-bold border-secondary" value="500" required>
                    </div>
                    <div class="col-md-3">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Base Strength [STRENGTH]</label>
                        <input type="number" step="any" name="test_strength" class="form-control fw-bold border-secondary" value="250" required>
                    </div>
                    <div class="col-md-2">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Freq [FREQ_MULT]</label>
                        <input type="number" step="any" name="test_freq" class="form-control fw-bold border-secondary" value="3" required>
                    </div>
                    <div class="col-md-2">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Days [DUR_DAYS]</label>
                        <input type="number" step="any" name="test_duration" class="form-control fw-bold border-secondary" value="5" required>
                    </div>
                    <div class="col-md-2">
                        <label class="small fw-bold text-muted mb-1 text-uppercase">Pack [PACK_SIZE]</label>
                        <input type="number" step="any" name="test_pack_size" class="form-control fw-bold border-secondary" value="100" required>
                    </div>
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary fw-bold px-5 shadow-sm" id="btnTest"><i class="fa-solid fa-play me-2"></i> Simulate Output</button>
                    </div>
                </form>

                <div class="bg-white border rounded-3 p-4 mt-4" id="sandbox_result" style="display:none;">
                    <h6 class="text-muted fw-bold text-uppercase mb-3">Engine Output <span id="res_mode" class="badge bg-primary bg-opacity-10 text-primary border ms-2 px-2 py-1">Auto</span></h6>
                    <div class="row align-items-center text-center">
                        <div class="col-md-4 border-end">
                            <span class="d-block small text-muted fw-bold mb-1 text-uppercase">Formula Equation</span>
                            <code class="fs-6 text-dark" id="res_equation">()</code>
                        </div>
                        <div class="col-md-4 border-end">
                            <span class="d-block small text-muted fw-bold mb-1 text-uppercase">Unrounded Math Result</span>
                            <h4 class="fw-bold text-danger mb-0" id="res_raw">0.00</h4>
                        </div>
                        <div class="col-md-4">
                            <span class="d-block small text-muted fw-bold mb-1 text-uppercase">Final Dispensary Output</span>
                            <h2 class="fw-bold text-success mb-0"><span id="res_final">0</span> <span id="res_unit" class="fs-5 text-muted">Units</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- MODAL: ADD / EDIT RULE -->
<div class="modal fade" id="ruleModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form id="frmRule" class="modal-content border-0 shadow-lg" style="border-radius:16px;" onsubmit="event.preventDefault();">
            <div class="modal-header bg-dark text-white border-0 p-4">
                <h5 class="modal-title fw-bold m-0"><i class="fa-solid fa-cogs me-2"></i> Configure Protocol</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <input type="hidden" name="action" value="save_rule">
                <input type="hidden" name="rule_id" id="f_rule_id">

                <div class="row g-4">
                    <div class="col-md-8">
                        <label class="small fw-bold text-dark mb-1">Protocol Name <span class="text-danger">*</span></label>
                        <input type="text" name="rule_name" id="f_rule_name" class="form-control fw-bold border-secondary" required>
                    </div>
                    <div class="col-md-4">
                        <label class="small fw-bold text-dark mb-1">Base Inventory Unit</label>
                        <input type="text" name="base_inventory_unit" id="f_base_unit" class="form-control fw-bold border-secondary" placeholder="e.g. Bottle, Tube">
                    </div>
                    <div class="col-md-12">
                        <label class="small fw-bold text-primary mb-1">Mathematical Formula <span class="text-danger">*</span></label>
                        <select name="formula_id" id="f_formula_id" class="form-select fw-bold border-primary" required></select>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-dark mb-1">Rounding Strategy <span class="text-danger">*</span></label>
                        <select name="rounding_id" id="f_rounding_id" class="form-select fw-bold border-secondary" required></select>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-dark mb-1">Operation Mode <span class="text-danger">*</span></label>
                        <select name="mode_id" id="f_mode_id" class="form-select fw-bold border-secondary" required></select>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white border-0 p-3">
                <button type="button" class="btn btn-light border fw-bold px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-dark fw-bold px-5 shadow-sm" id="btnRuleSubmit"><i class="fa-solid fa-save me-1"></i> Save Protocol</button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL: ADD / EDIT FREQUENCY -->
<div class="modal fade" id="freqModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <form id="frmFreq" class="modal-content border-0 shadow-lg" style="border-radius:16px;" onsubmit="event.preventDefault();">
            <div class="modal-header bg-dark text-white border-0 p-4">
                <h5 class="modal-title fw-bold m-0"><i class="fa-solid fa-clock me-2"></i> Frequency Multiplier</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <input type="hidden" name="action" value="save_freq">
                <input type="hidden" name="freq_id" id="f_freq_id">

                <div class="mb-3">
                    <label class="small fw-bold text-dark mb-1">Frequency Code <span class="text-danger">*</span></label>
                    <input type="text" name="freq_code" id="f_freq_code" class="form-control fw-bold border-secondary text-uppercase" required>
                </div>
                <div class="mb-3">
                    <label class="small fw-bold text-dark mb-1">Clinical Description <span class="text-danger">*</span></label>
                    <input type="text" name="description" id="f_freq_desc" class="form-control fw-bold border-secondary" required>
                </div>
                <div class="mb-3">
                    <label class="small fw-bold text-primary mb-1">Math Multiplier (/Day) <span class="text-danger">*</span></label>
                    <input type="number" step="any" name="multiplier" id="f_freq_mult" class="form-control fw-bold border-primary text-primary" required>
                </div>
            </div>
            <div class="modal-footer bg-white border-0 p-3">
                <button type="button" class="btn btn-light border fw-bold px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-dark fw-bold px-5 shadow-sm" id="btnFreqSubmit"><i class="fa-solid fa-save me-1"></i> Save Frequency</button>
            </div>
        </form>
    </div>
</div>

<!-- CUSTOM APP MODALS -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1070;" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-body p-4 text-center">
                <i id="appResIcon" class="fa-solid fa-circle-check text-success fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark" id="appResTitle">Success</h5>
                <p class="text-muted small" id="appResMsg"></p>
                <button type="button" id="appResBtn" class="btn btn-success fw-bold px-4 mt-2" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>