<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    .theatre-config-module { font-family: 'Inter', sans-serif; }
    .panel-container { background: #fff; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow:hidden;}
    
    .config-tabs { background: #f8fafc; border-bottom: 2px solid #cbd5e1; display: flex; padding: 10px 20px 0 20px; overflow-x: auto; white-space: nowrap;}
    .config-tab-btn { background: transparent; border: none; padding: 12px 25px; font-size: 14px; font-weight: 700; color: #64748b; cursor: pointer; transition: 0.2s; border-bottom: 3px solid transparent;}
    .config-tab-btn.active { color: #0284c7; border-bottom-color: #0284c7; background: #fff; border-radius: 8px 8px 0 0;}
    .config-tab-btn:hover:not(.active) { color: #0f172a; }

    table.dataTable { width: 100% !important; margin: 0 !important; font-size: 13.5px; }
    table.dataTable thead th { background: #f8fafc; color: #475569; padding: 16px 20px; font-weight: 800; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #cbd5e1;}
    table.dataTable tbody td { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .select2-container { width: 100% !important; z-index: 1055; text-align: left; }
    
    .rule-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
    .rule-card:hover { border-color: #bae6fd; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08); }
    .rule-info h6 { margin: 0 0 5px 0; font-weight: 700; color: #0f172a; }
    .rule-info p { margin: 0; font-size: 13px; color: #64748b; font-weight: 500; }
    
    .form-switch .form-check-input { width: 3em; height: 1.5em; cursor: pointer; }
    .form-switch .form-check-input:checked { background-color: #ef4444; border-color: #ef4444; }
</style>

<div class="theatre-config-module">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-dark m-0" style="letter-spacing: -0.5px;">
                <i class="fa-solid fa-cogs text-primary me-2"></i> Theatre & Surgery Configuration
            </h4>
            <p class="text-muted small mb-0 mt-1">Manage operating rooms, clinical mappings, surgical billing, and workflow access rules.</p>
        </div>
        <button class="btn btn-primary fw-bold px-4 shadow-sm" id="btnAddNew" onclick="openConfigModal()"><i class="fa-solid fa-plus me-2"></i> Add Configuration</button>
    </div>

    <div class="panel-container">
        <div class="config-tabs">
            <button class="config-tab-btn active" onclick="loadConfigTab('rooms')"><i class="fa-solid fa-door-open me-1"></i> Operating Rooms</button>
            <button class="config-tab-btn" onclick="loadConfigTab('beds')"><i class="fa-solid fa-bed me-1"></i> Recovery Beds</button>
            <button class="config-tab-btn" onclick="loadConfigTab('roles')"><i class="fa-solid fa-clipboard-user me-1"></i> Surgical Roles</button>
            <button class="config-tab-btn" onclick="loadConfigTab('categories')"><i class="fa-solid fa-layer-group me-1"></i> Surgery Categories</button>
            <button class="config-tab-btn" onclick="loadConfigTab('staff')"><i class="fa-solid fa-user-doctor me-1"></i> Mapped Theatre Staff</button>
            <button class="config-tab-btn" onclick="loadConfigTab('anesthesia')"><i class="fa-solid fa-syringe me-1"></i> Anesthesia Billing</button>
            <button class="config-tab-btn" onclick="loadConfigTab('procedures')"><i class="fa-solid fa-scalpel-line-dashed me-1"></i> Surgical Procedures</button>
            <button class="config-tab-btn" onclick="loadConfigTab('billing_rules')"><i class="fa-solid fa-file-invoice-dollar me-1"></i> Auto-Charges</button>
            <button class="config-tab-btn" onclick="loadConfigTab('access_rules')"><i class="fa-solid fa-shield-halved me-1 text-danger"></i> Access & Workflow Rules</button>
        </div>
        
        <div class="p-4" id="table_wrapper">
            <h5 class="fw-bold text-primary mb-3" id="current_tab_title">Operating Rooms Configuration</h5>
            <div class="table-responsive">
                <table id="tblConfig" class="table table-hover align-middle w-100">
                    <!-- Columns injected dynamically via JS -->
                </table>
            </div>
        </div>

        <!-- NEW ACCESS RULES FORM WRAPPER -->
        <div class="p-4" id="access_rules_wrapper" style="display:none; background:#f8fafc;">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold text-danger m-0"><i class="fa-solid fa-lock me-2"></i> Clinical Access & Form Restrictions</h5>
                <button type="button" class="btn btn-success fw-bold px-4 shadow-sm" onclick="saveAccessRules()" id="btnSaveRules"><i class="fa-solid fa-save me-2"></i> Save Rules</button>
            </div>
            
            <form id="frmAccessRules">
                <input type="hidden" name="action" value="save_access_rules">
                
                <h6 class="fw-bold text-primary text-uppercase mb-3 mt-4">1. Ward IPD Records (Discharge Recommendations)</h6>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Adding New Records</h6>
                        <p>If activated, users cannot add new entries at the Clinical Command Center when a patient is Recommended for Discharge.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_new_ipd_on_discharge" id="rl_new_dis"></div>
                </div>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Editing Existing Records</h6>
                        <p>If activated, users cannot update or edit existing records at the Clinical Command Center when recommended for discharge.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_edit_ipd_on_discharge" id="rl_edit_dis"></div>
                </div>

                <h6 class="fw-bold text-primary text-uppercase mb-3 mt-4">2. Ward IPD Records (Theatre Transfers)</h6>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Adding New Records (Awaiting Theatre)</h6>
                        <p>If activated, users cannot add new entries when a patient is recommended for transfer to theatre (awaiting surgery).</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_new_ipd_on_theatre_req" id="rl_new_th_req"></div>
                </div>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Editing Existing Records (Awaiting Theatre)</h6>
                        <p>If activated, users cannot edit records when a patient is recommended for transfer to theatre.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_edit_ipd_on_theatre_req" id="rl_edit_th_req"></div>
                </div>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Adding New Records (Rejected / Sent Back)</h6>
                        <p>If activated, users cannot make new inputs if a patient's theatre transfer is rejected or they are sent back without surgery.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_new_ipd_on_theatre_revert" id="rl_new_th_rev"></div>
                </div>

                <h6 class="fw-bold text-primary text-uppercase mb-3 mt-4">3. Theatre Command Center (Post-Surgery / Transferred Out)</h6>
                <div class="rule-card">
                    <div class="rule-info">
                        <h6>Block Adding New Theatre Records</h6>
                        <p>If activated, users cannot add new inputs at the Theatre Command Center once the patient is sent back to the ward after surgery.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_new_theatre_post_surgery" id="rl_new_th_post"></div>
                </div>
                <div class="rule-card border-bottom-0 mb-0">
                    <div class="rule-info">
                        <h6>Block Editing Theatre Records</h6>
                        <p>If activated, users cannot update or edit inputs at the Theatre Command Center once the patient is sent back to the ward after surgery.</p>
                    </div>
                    <div class="form-check form-switch"><input class="form-check-input shadow-sm" type="checkbox" name="block_edit_theatre_post_surgery" id="rl_edit_th_post"></div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- DYNAMIC UNIVERSAL CONFIG MODAL -->
<div class="modal fade" id="configModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form id="frmConfig" class="modal-content border-0 shadow-lg" style="border-radius:12px;">
            <div class="modal-header bg-primary text-white border-0 p-3">
                <h6 class="modal-title fw-bold m-0"><i class="fa-solid fa-pen-to-square me-2"></i> Manage Configuration</h6>
                <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_config">
                <input type="hidden" name="config_type" id="cfg_type">
                <input type="hidden" name="id" id="cfg_id">
                
                <div class="row g-3">
                    
                    <!-- BASIC INFO -->
                    <div class="col-12" id="grp_name">
                        <label class="small fw-bold text-dark mb-1" id="lbl_name">Configuration Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="cfg_name" class="form-control fw-bold" placeholder="Enter name...">
                    </div>

                    <!-- FOR THEATRE BEDS -->
                    <div class="col-md-6" id="grp_bed_room" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Select Theatre Room <span class="text-danger">*</span></label>
                        <select name="room_id" id="cfg_bed_room_id" class="form-select select2-modal"></select>
                    </div>

                    <!-- FOR BILLING RULES -->
                    <div class="col-12 billing-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Rule Target / Scope <span class="text-danger">*</span></label>
                        <select name="rule_target_type" id="cfg_rule_target_type" class="form-select fw-bold">
                            <option value="Global">Global (Applies to all Theatre activities)</option>
                            <option value="Room">Specific Operating Room</option>
                            <option value="Bed">Specific Recovery Bed</option>
                            <option value="Procedure">Specific Surgical Procedure</option>
                        </select>
                    </div>

                    <div class="col-md-6 billing-fld target-room" style="display:none;">
                        <label class="small fw-bold text-primary mb-1">Target Room <span class="text-danger">*</span></label>
                        <select name="target_room_id" id="cfg_target_room_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6 billing-fld target-bed" style="display:none;">
                        <label class="small fw-bold text-primary mb-1">Target Bed <span class="text-danger">*</span></label>
                        <select name="target_bed_id" id="cfg_target_bed_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6 billing-fld target-proc" style="display:none;">
                        <label class="small fw-bold text-primary mb-1">Target Procedure <span class="text-danger">*</span></label>
                        <select name="target_procedure_id" id="cfg_target_procedure_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6 billing-fld" style="display:none;">
                        <label class="small fw-bold text-success mb-1">Charge Item (Service) <span class="text-danger">*</span></label>
                        <select name="charge_service_id" id="cfg_charge_service_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6 billing-fld" style="display:none;">
                        <label class="small fw-bold text-success mb-1">Charge Frequency (Optional)</label>
                        <select name="charge_frequency_id" id="cfg_charge_frequency_id" class="form-select select2-modal"></select>
                    </div>

                    <!-- FOR SURGICAL PROCEDURES -->
                    <div class="col-md-4" id="grp_dept" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Owning Department <span class="text-danger">*</span></label>
                        <select name="department_id" id="cfg_dept_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-4" id="grp_cat" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Surgery Category <span class="text-danger">*</span></label>
                        <select name="category_id" id="cfg_category_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-4" id="grp_gdrg_proc" style="display:none;">
                        <label class="small fw-bold text-success mb-1">Search & Map G-DRG <span class="text-danger">*</span></label>
                        <select name="gdrg_code_proc" id="cfg_gdrg_proc" class="form-select select2-modal"></select>
                    </div>

                    <!-- FOR ANESTHESIA -->
                    <div class="col-12" id="grp_proc_link" style="display:none;">
                        <label class="small fw-bold text-primary mb-1">Linked Surgical Procedure (Optional)</label>
                        <select name="procedure_id" id="cfg_procedure_id_anes" class="form-select select2-modal"></select>
                        <div class="form-text mt-1"><i class="fa fa-info-circle"></i> If left empty, this anesthesia package applies globally to any surgery.</div>
                    </div>

                    <!-- FOR STAFF MAPPING -->
                    <div class="col-md-6" id="grp_staff" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Select Staff Member <span class="text-danger">*</span></label>
                        <select name="staff_id" id="cfg_staff_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6" id="grp_role" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Assign Theatre Role <span class="text-danger">*</span></label>
                        <select name="role_id" id="cfg_role_id" class="form-select select2-modal"></select>
                    </div>

                    <!-- SECTION: CASH PRICING & DEMOGRAPHICS (ONLY FOR ANESTHESIA) -->
                    <div class="col-12 fw-bold text-primary border-bottom pb-1 mt-4 pricing-fld" style="display:none;">Cash Pricing & Demographics</div>
                    
                    <div class="col-md-4 pricing-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Target Age Group</label>
                        <select name="target_age_group" id="cfg_age" class="form-select fw-bold">
                            <option value="All Ages">All Ages</option>
                            <option value="Adult Only">Adult Only</option>
                            <option value="Child Only">Child Only</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 pricing-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Applicable Gender</label>
                        <select name="applicable_gender" id="cfg_gender" class="form-select fw-bold">
                            <option value="Both">Both</option>
                            <option value="Male">Male Only</option>
                            <option value="Female">Female Only</option>
                        </select>
                    </div>

                    <div class="col-md-2 pricing-fld" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Adult Cash</label>
                        <input type="number" step="any" name="cash_price_adult" id="cfg_cash_adult" class="form-control text-danger fw-bold border-danger" value="0.00">
                    </div>

                    <div class="col-md-2 pricing-fld" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Child Cash</label>
                        <input type="number" step="any" name="cash_price_child" id="cfg_cash_child" class="form-control text-danger fw-bold border-danger" value="0.00">
                    </div>

                    <!-- SECTION: NHIS & GDRG BILLING (ONLY FOR ANESTHESIA) -->
                    <div class="col-12 fw-bold text-success border-bottom pb-1 mt-4 pricing-fld" style="display:none;">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" name="nhis_covered" id="cfg_nhis_covered" value="1" style="transform:scale(1.2); margin-top:0.1rem;">
                            <label class="form-check-label ms-2">Covered by NHIS / National Insurance</label>
                        </div>
                    </div>

                    <div class="col-12 pricing-fld p-0" style="display:none;">
                        <div class="row g-3 bg-success bg-opacity-10 p-3 rounded" id="nhis_section" style="display:none; margin:0;">
                            
                            <div class="col-md-6">
                                <label class="small fw-bold text-success mb-1">Adult NHIS Tariff (GHS)</label>
                                <input type="number" step="any" name="tariff_adult" id="cfg_tariff_adult" class="form-control fw-bold border-success" value="0.00">
                            </div>
                            <div class="col-md-6">
                                <label class="small fw-bold text-success mb-1">Child NHIS Tariff (GHS)</label>
                                <input type="number" step="any" name="tariff_child" id="cfg_tariff_child" class="form-control fw-bold border-success" value="0.00">
                            </div>

                            <div class="col-12 mt-3 border-top border-success pt-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input ms-1" type="checkbox" name="is_copay_required" id="cfg_copay_req" value="1" style="transform:scale(1.2); cursor:pointer;">
                                    <label class="form-check-label ms-2 fw-bold text-warning small" for="cfg_copay_req" style="cursor:pointer;">Requires Out-of-Pocket Co-Payment</label>
                                </div>
                            </div>
                            
                            <div class="col-md-6 copay-fld" style="display:none;">
                                <label class="small fw-bold text-warning mb-1">Adult Co-Pay (GHS)</label>
                                <input type="number" step="any" name="nhis_copay_adult" id="cfg_copay_adult" class="form-control text-dark fw-bold border-warning" value="0.00">
                            </div>
                            <div class="col-md-6 copay-fld" style="display:none;">
                                <label class="small fw-bold text-warning mb-1">Child Co-Pay (GHS)</label>
                                <input type="number" step="any" name="nhis_copay_child" id="cfg_copay_child" class="form-control text-dark fw-bold border-warning" value="0.00">
                            </div>
                        </div>
                    </div>

                    <!-- SECTION: CORPORATE INSURANCE BILLING (ONLY FOR ANESTHESIA) -->
                    <div class="col-12 fw-bold text-info border-bottom pb-1 mt-4 pricing-fld" style="display:none;">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" name="corp_covered" id="cfg_corp_covered" value="1" style="transform:scale(1.2); margin-top:0.1rem;">
                            <label class="form-check-label ms-2">Covered by Corporate / Private Insurance</label>
                        </div>
                    </div>

                    <div class="col-12 pricing-fld p-0" id="corp_section" style="display:none;">
                        <div class="alert alert-info py-2 small mb-2"><i class="fa fa-info-circle me-1"></i> Enter specific tariffs for each accepted Private Insurance scheme. Leave as 0.00 if not covered by a specific provider.</div>
                        <div id="corporate_tariffs_container"></div>
                    </div>

                </div>
            </div>
            <div class="modal-footer bg-white border-0 p-3">
                <button type="button" class="btn btn-light border fw-bold" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary fw-bold px-4" id="btnSaveConfig">Save Master Catalog Record</button>
            </div>
        </form>
    </div>
</div>

<!-- DELETE CONFIRMATION MODAL -->
<div class="modal fade" id="deleteModal" tabindex="-1" style="z-index: 1060;">
    <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 class="fa-solid fa-triangle-exclamation text-danger fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark">Confirm Deletion</h5>
                <p class="text-muted small">Are you sure you want to permanently delete this record? If it is linked to historical clinical data, it cannot be deleted.</p>
                <div class="d-flex justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-light fw-bold border" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger fw-bold px-4" id="btnConfirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CUSTOM APPLICATION ALERT MODAL -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1060;">
    <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>