<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-form-builder { font-family: 'Inter', sans-serif; }
    .panel-container { background: #fff; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.02); overflow:hidden;}
    
    .config-tabs { background: #f8fafc; border-bottom: 2px solid var(--border-color); 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: var(--primary); border-bottom-color: var(--primary); 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 var(--border-color);}
    table.dataTable tbody td { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    
    .type-badge { padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; }
    .select2-container { width: 100% !important; z-index: 1055; text-align: left; }
    .select2-selection--multiple { border-color: #dee2e6 !important; min-height: 38px !important; border-radius: 0.375rem !important;}
</style>

<div class="theatre-form-builder">
    <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-file-invoice text-secondary me-2"></i> Theatre Form Builder
            </h4>
            <p class="text-muted small mb-0 mt-1">Dynamically map clinical stages, sections, and complex input fields to specific surgical procedures or departments.</p>
        </div>
        <button class="btn btn-primary fw-bold px-4 shadow-sm" 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('stages')"><i class="fa-solid fa-layer-group me-1"></i> Clinical Stages</button>
            <button class="config-tab-btn" onclick="loadConfigTab('sections')"><i class="fa-solid fa-folder-tree me-1"></i> UI Section Groups</button>
            <button class="config-tab-btn" onclick="loadConfigTab('fields')"><i class="fa-solid fa-pen-to-square me-1"></i> Form Fields Builder</button>
        </div>
        
        <div class="p-4">
            <h5 class="fw-bold text-primary mb-3" id="current_tab_title">Clinical Stages</h5>
            <div class="table-responsive">
                <table id="tblConfig" class="table table-hover align-middle w-100">
                    <!-- Columns injected via JS -->
                </table>
            </div>
        </div>
    </div>
</div>

<!-- DYNAMIC BUILDER MODAL -->
<div class="modal fade" id="configModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl 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-dark text-white border-0 p-3">
                <h6 class="modal-title fw-bold m-0"><i class="fa-solid fa-hammer me-2"></i> Configure Form Elements</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 NAME (Used for Stages & Sections) -->
                    <div class="col-12" id="grp_name" style="display:none;">
                        <label class="small fw-bold text-dark mb-1" id="lbl_name">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="cfg_name" class="form-control fw-bold" placeholder="Enter name...">
                    </div>

                    <!-- BUILDER FIELDS (Used for Form Fields Builder) -->
                    
                    <div class="col-12 border-bottom pb-2 mb-2 builder-fld" style="display:none;">
                        <h6 class="fw-bold text-primary m-0"><i class="fa-solid fa-bullseye me-1"></i> Field Targeting & Scope</h6>
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Target Departments (Optional)</label>
                        <select name="target_departments[]" id="cfg_target_depts" class="form-select select2-modal" multiple="multiple"></select>
                        <div class="form-text mt-1" style="font-size:10px;"><i class="fa fa-info-circle"></i> Leave empty to apply globally to all departments.</div>
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Target Surgical Procedures (Optional)</label>
                        <select name="target_procedures[]" id="cfg_target_procs" class="form-select select2-modal" multiple="multiple"></select>
                        <div class="form-text mt-1" style="font-size:10px;"><i class="fa fa-info-circle"></i> Leave empty to apply globally to all procedures.</div>
                    </div>

                    <div class="col-12 border-bottom pb-2 mb-2 mt-4 builder-fld" style="display:none;">
                        <h6 class="fw-bold text-success m-0"><i class="fa-solid fa-code me-1"></i> Field Properties</h6>
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Clinical Stage <span class="text-danger">*</span></label>
                        <select name="stage_id" id="cfg_stage_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">UI Section Group <span class="text-danger">*</span></label>
                        <select name="section_id" id="cfg_section_id" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-12 builder-fld" style="display:none;">
                        <label class="small fw-bold text-danger mb-1">Field Label (Question) <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" id="cfg_field_label" class="form-control fw-bold border-danger" placeholder="e.g. Pre-Operative Vitals Summary">
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Input Type <span class="text-danger">*</span></label>
                        <select name="field_type" id="cfg_field_type" class="form-select">
                            <optgroup label="Standard Inputs">
                                <option value="text">Short Text (Single Line)</option>
                                <option value="textarea">Long Text Area (Plain Text)</option>
                                <option value="richtext">Rich Text Editor (WYSIWYG Formatting)</option>
                                <option value="number">Numeric Input</option>
                                <option value="date">Date Picker</option>
                                <option value="time">Time Picker</option>
                            </optgroup>
                            <optgroup label="Selection Inputs">
                                <option value="select">Dropdown Menu (Select)</option>
                                <option value="radio">Radio Buttons</option>
                                <option value="checkbox">Checkbox (Multiple Select)</option>
                            </optgroup>
                            <optgroup label="Advanced & Native Modules">
                                <option value="native_diagnosis">Clinical Diagnosis Engine (ICD-10/G-DRG)</option>
                                <option value="native_pharmacy">Pharmacy / Prescription Engine</option>
                                <option value="native_lab">Laboratory Request Engine</option>
                                <option value="native_imaging">Radiology / Imaging Request Engine</option>
                                <option value="native_vitals">Integrated Vitals Signs Interface</option>
                                <option value="embedded_form">Embed Another Form Section</option>
                                <option value="config_map">Map to System Dictionary</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="col-md-6 builder-fld" style="display:none;">
                        <label class="small fw-bold text-dark mb-1">Display Order</label>
                        <input type="number" name="display_order" id="cfg_order" class="form-control" value="0">
                    </div>

                    <!-- CONDITIONAL CONFIGURATIONS -->
                    
                    <div class="col-12" id="grp_dictionary" style="display:none;">
                        <label class="small fw-bold text-info mb-1"><i class="fa fa-database"></i> Map to System Dictionary <span class="text-danger">*</span></label>
                        <select name="dictionary_reference" id="cfg_dictionary" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-12" id="grp_embedded_section" style="display:none;">
                        <label class="small fw-bold text-warning text-dark mb-1"><i class="fa fa-plug"></i> Select Form Section to Embed <span class="text-danger">*</span></label>
                        <select name="embedded_section_id" id="cfg_embedded_section" class="form-select select2-modal"></select>
                    </div>

                    <div class="col-12" id="grp_richtext_options" style="display:none;">
                        <label class="small fw-bold text-primary mb-1"><i class="fa fa-font"></i> Rich Text Formatting Toolbar <span class="text-danger">*</span></label>
                        <select name="field_options_richtext" id="cfg_richtext_options" class="form-select">
                            <option value="basic">Basic (Bold, Italic, Underline, Bullet Lists)</option>
                            <option value="standard">Standard (Basic + Headings, Text Colors, Hyperlinks)</option>
                            <option value="advanced">Advanced (Standard + Tables, Images, Full HTML)</option>
                        </select>
                    </div>

                    <div class="col-12" id="grp_options" style="display:none;">
                        <label class="small fw-bold text-success mb-1"><i class="fa fa-list"></i> Dropdown / Radio Options <span class="text-danger">*</span></label>
                        <textarea name="field_options" id="cfg_options" class="form-control border-success" rows="2" placeholder="Enter options separated by comma e.g. Class I, Class II, Class III"></textarea>
                    </div>

                    <div class="col-12 mt-3 pt-3 border-top builder-fld" style="display:none;">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" name="is_required" id="cfg_required" value="1" style="transform:scale(1.2);">
                            <label class="form-check-label ms-2 fw-bold text-danger">Mandatory Field (Required)</label>
                        </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 Configuration</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? Form history will be preserved.</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>

<!-- APP 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" class="btn btn-dark fw-bold px-4 mt-2" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>