<link rel="stylesheet" href="/rimax/application/assets/css/dynamicFormBuilder.css">

<div class="container-fluid pb-5">
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h4 class="text-primary fw-bold" style="letter-spacing: -0.5px;">
                <i class="fa-solid fa-hammer me-2"></i> Clinical Template & Form Builder
            </h4>
            <p class="text-muted mb-0">Build nested Master Forms, assign them to specific Application Modules, and link to Config Parameters.</p>
        </div>
        <div class="col-md-4 text-end">
            <button class="btn btn-outline-secondary shadow-sm fw-bold" onclick="openCategoryModal()"><i class="fa-solid fa-list me-1"></i> Manage Categories</button>
        </div>
    </div>

    <div class="row g-4">
        <!-- LEFT COLUMN: FORMS REGISTRY -->
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-header bg-white border-bottom pt-3 pb-2 px-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-dark">Forms Registry</h6>
                    <button class="btn btn-sm btn-primary shadow-sm fw-bold" onclick="openFormModal()"><i class="fa-solid fa-plus me-1"></i> New Form</button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover w-100 m-0 align-middle" id="tblForms">
                            <thead style="background-color: #f1f5f9; font-size: 13px;">
                                <tr><th>Template Details & Mappings</th><th width="10%" class="text-end">Action</th></tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN: THE CANVAS -->
        <div class="col-md-8">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-header bg-white border-bottom pt-3 pb-2 px-4 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-primary" id="canvasTitle">Form Canvas</h6>
                    <div id="canvasActions" style="display:none;">
                        <button class="btn btn-sm btn-success shadow-sm fw-bold" onclick="openSectionModal()"><i class="fa-solid fa-folder-plus me-1"></i> Add Section</button>
                    </div>
                </div>
                <div class="card-body p-4">
                    <input type="hidden" id="active_form_id" value="">
                    <div class="form-canvas" id="formCanvas">
                        <div class="empty-canvas text-center py-5">
                            <i class="fa-solid fa-object-ungroup fa-4x mb-3 text-muted" style="opacity:0.3;"></i>
                            <h5 class="fw-bold text-dark">Select a form to map and edit</h5>
                            <p class="small text-muted">Add clinical config linkages, dictionary lookups, native modules and sub-forms.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODAL: MANAGE CATEGORIES -->
<div class="modal fade" id="modalCategory" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header text-white" style="background:#475569;">
                <h6 class="modal-title fw-bold">Manage Form Categories</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <form id="frmCategory" class="d-flex mb-4">
                    <input type="hidden" name="action" value="save_category">
                    <input type="hidden" name="id" id="cat_id" value="">
                    <input type="text" name="category_name" id="f_cat_name" class="form-control me-2" required placeholder="New Category Name">
                    <button type="submit" class="btn btn-primary fw-bold px-4">Save</button>
                </form>
                <div class="table-responsive bg-white border rounded">
                    <table class="table table-sm table-hover m-0" id="tblCategories">
                        <thead class="table-light"><tr><th class="ps-3 py-2">Category Name</th><th width="25%" class="text-end pe-3">Action</th></tr></thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODAL: MASTER FORM PROPERTIES -->
<div class="modal fade" id="modalForm" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fa-solid fa-file-medical me-2"></i> Template Properties & Mapping</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="frmMasterForm">
                <input type="hidden" name="action" value="save_form">
                <input type="hidden" name="id" id="form_id" value="">
                <div class="modal-body p-4 bg-light">
                    
                    <div class="row g-3 mb-3">
                        <div class="col-12">
                            <label class="form-label fw-bold text-muted small text-uppercase">Form Title <span class="text-danger">*</span></label>
                            <input type="text" name="form_name" id="f_form_name" class="form-control fw-bold" required placeholder="e.g. Daily Ward Round">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted small text-uppercase">Form Category <span class="text-danger">*</span></label>
                            <select name="category_id" id="f_form_type" class="form-select fw-bold" required></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-muted small text-uppercase text-primary">Target Module / Department <span class="text-danger">*</span></label>
                            <select name="target_module" id="f_target_module" class="form-select fw-bold border-primary" required>
                                <option value="">Loading Modules...</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="bg-white p-3 border rounded shadow-sm mb-3">
                        <h6 class="fw-bold text-dark mb-3 small text-uppercase"><i class="fa-solid fa-map-location-dot text-primary me-2"></i> Infrastructure Routing (Optional)</h6>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold text-danger small text-uppercase">Target Staff Role</label>
                            <select name="target_role_id" id="f_target_role_id" class="form-select border-danger">
                                <option value="">-- Available to All Staff Roles --</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold text-info small text-uppercase">Map to Specific Ward / Unit</label>
                            <select name="ward_id" id="f_ward_id" class="form-select border-info">
                                <option value="">-- Available to All Wards Globally --</option>
                            </select>
                        </div>

                        <div class="mb-1" id="room_mapping_div" style="display:none;">
                            <label class="form-label fw-bold text-info small text-uppercase">Restrict to Specific Room</label>
                            <select name="room_id" id="f_room_id" class="form-select border-info">
                                <option value="">-- Apply to Entire Ward --</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-check form-switch border p-3 rounded bg-white shadow-sm">
                        <input class="form-check-input ms-1" type="checkbox" name="requires_signature" id="f_req_sig" value="1" style="transform:scale(1.2); cursor:pointer;">
                        <label class="form-check-label ms-2 fw-bold text-danger small" for="f_req_sig" style="cursor:pointer;">Require Authorized Electronic Signature to Save</label>
                    </div>
                </div>
                <div class="modal-footer bg-white border-0">
                    <button type="button" class="btn btn-light border fw-bold" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-4 shadow-sm fw-bold">Save Mapping</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODAL: ADD SECTION -->
<div class="modal fade" id="modalSection" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fa-solid fa-layer-group me-2"></i> Section Grouping</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="frmSection">
                <input type="hidden" name="action" value="save_section">
                <input type="hidden" name="section_id" id="section_id" value="">
                <input type="hidden" name="form_id" id="sec_form_id" value="">
                <div class="modal-body p-4 bg-light">
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small text-uppercase">Section Header <span class="text-danger">*</span></label>
                        <input type="text" name="section_title" id="sec_title" class="form-control fw-bold" required placeholder="e.g. Clinical Assessment">
                    </div>
                    <div class="mb-1">
                        <label class="form-label fw-bold text-muted small text-uppercase">Display Order</label>
                        <input type="number" name="display_order" id="sec_order" class="form-control" value="0">
                    </div>
                </div>
                <div class="modal-footer border-0 bg-white p-3">
                    <button type="submit" class="btn btn-success fw-bold w-100">Save Section</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODAL: ADD FIELD -->
<div class="modal fade" id="modalField" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-info text-dark border-0">
                <h6 class="modal-title fw-bold"><i class="fa-solid fa-code me-2"></i> Field / Configuration Builder</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="frmField">
                <input type="hidden" name="action" value="save_field">
                <input type="hidden" name="field_id" id="field_id" value="">
                <input type="hidden" name="section_id" id="fld_sec_id" value="">
                <div class="modal-body p-4 bg-light">
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small text-uppercase">Field / Block Label <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" id="fld_label" class="form-control fw-bold" required placeholder="e.g. Pharmacy Prescriptions">
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-8">
                            <label class="form-label fw-bold text-muted small text-uppercase">Data Input Type <span class="text-danger">*</span></label>
                            <select name="field_type" id="fld_type" class="form-select bg-white fw-bold border-info" required>
                                
                                <optgroup label="Native Clinical Engines" class="text-danger">
                                    <option value="Native: Pharmacy">Pharmacy e-Prescription Engine</option>
                                    <option value="Native: Service Order">Diagnostic / Service Order Engine (Dynamic Depts)</option>
                                    <option value="Native: Ward Service Order">Order Ward Service / PoC Test</option>
                                    <option value="Native: Clinical Diagnosis">Clinical Diagnosis (ICD-10 & G-DRG Auto-Map)</option>
                                    <option value="Native: Blood Transfusion Request">Blood Transfusion Order Engine</option>
                                    <option value="Native: Ambulance Request">Ambulance Dispatch Request Engine</option>
                                    <option value="Native: Clinical Outcome">Clinical Outcome / Patient Disposition</option>
                                </optgroup>

                                <optgroup label="Native Clinical Charting" class="text-primary">
                                    <option value="Native: Medication Chart">Medication Administration Chart</option>
                                    <option value="Native: Fluid Chart">Fluid I/O Charting</option>
                                    <option value="Native: Oxygen Chart">Oxygen Therapy Charting</option>
                                    <option value="Native: Blood Transfusion Charting">Blood Transfusion Administration Chart</option>
                                </optgroup>

                                <optgroup label="Native Clinical Reports (Auto-Graphs)" class="text-info">
                                    <option value="Report: Vital Signs Flowsheet">Vital Signs Flowsheet (Graph & Table)</option>
                                    <option value="Report: Medication Chart">Medication Administration Chart (MAR)</option>
                                    <option value="Report: Fluid IO Chart">Fluid Intake / Output Chart</option>
                                </optgroup>

                                <optgroup label="Auto-Mapped Configurations" class="text-success">
                                    <option value="ConfigMap: Ward Services">Pending Ward Services (Result Input)</option>
                                    <option value="ConfigMap: Vitals">Vital Signs Grid (From Config)</option>
                                    <option value="ConfigMap: Diets">Diet Types Dropdown (From Config)</option>
                                    <option value="ConfigMap: Fluids">Fluid Types Dropdown (From Config)</option>
                                    <option value="ConfigMap: Blood Products">Blood Products Dropdown (From Config)</option>
                                    <option value="ConfigMap: Oxygen Modes">Oxygen Modes (From Config)</option>
                                    <option value="ConfigMap: Isolation & PPE">Isolation & PPE Rules Dropdown</option>
                                    <option value="ConfigMap: Ward Equipment">Ward Equipment Config Dropdown</option>
                                </optgroup>

                                <optgroup label="Standard Form Inputs">
                                    <option value="Short Text">Short Text String</option>
                                    <option value="Long Text">Long Textarea</option>
                                    <option value="Number">Numeric Value</option>
                                    <option value="Select Dropdown">Select Dropdown (Custom Options)</option>
                                    <option value="Radio (Single)">Radio Buttons (Single Option)</option>
                                    <option value="Date">Date Picker</option>
                                </optgroup>

                                <optgroup label="Advanced Linkages">
                                    <option value="Dictionary Reference">Link to Database Dictionary (Single Select)</option>
                                    <option value="Embed Custom Form">Embed Custom Sub-Form</option>
                                </optgroup>
                                
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-bold text-muted small text-uppercase">Sort Order</label>
                            <input type="number" name="field_display_order" id="fld_order" class="form-control" value="0">
                        </div>
                    </div>
                    
                    <!-- Conditional UI Elements -->
                    
                    <!-- DYNAMIC DEPARTMENT BINDING FOR SERVICE ENGINE (NATIVE SELECT TO PREVENT CRASHES) -->
                    <div class="mb-3 p-3 bg-danger bg-opacity-10 border border-danger rounded shadow-sm" id="div_service_depts" style="display:none;">
                        <label class="form-label fw-bold text-danger small text-uppercase mb-1"><i class="fa-solid fa-building text-danger me-1"></i> Bind to Departments</label>
                        <select name="service_departments[]" id="fld_service_depts" class="form-select border-danger fw-bold text-danger" multiple="multiple" size="4">
                            <!-- Populated via JS -->
                        </select>
                        <p class="small text-muted mt-2 mb-0"><i class="fa-solid fa-circle-info"></i> Hold <b>CTRL</b> (Windows) or <b>CMD</b> (Mac) to select multiple departments to pull services from dynamically.</p>
                    </div>

                    <div class="mb-3 p-3 bg-success bg-opacity-10 border border-success rounded shadow-sm" id="div_dict_reference" style="display:none;">
                        <label class="form-label fw-bold text-success small text-uppercase mb-1"><i class="fa-solid fa-book text-success me-1"></i> Select Dictionary to Bind</label>
                        <select name="dictionary_reference" id="fld_dict_ref" class="form-select border-success fw-bold text-success">
                            <option value="">-- Choose Target Database --</option>
                        </select>
                    </div>

                    <div class="mb-3 p-3 bg-primary bg-opacity-10 border border-primary rounded shadow-sm" id="div_embed_form" style="display:none;">
                        <label class="form-label fw-bold text-primary small text-uppercase mb-1"><i class="fa-solid fa-file-import text-primary me-1"></i> Select Sub-Form to Embed</label>
                        <select name="embedded_form_id" id="fld_embed_form" class="form-select border-primary fw-bold text-primary">
                            <option value="">-- Choose Custom Form --</option>
                        </select>
                    </div>

                    <div class="mb-3 p-3 bg-white border border-info rounded shadow-sm" id="div_field_options" style="display:none;">
                        <label class="form-label fw-bold text-info small text-uppercase mb-1"><i class="fa-solid fa-list-check text-info me-1"></i> Selection Options</label>
                        <p class="text-muted small mb-2">Separate options with commas (e.g. Yes, No, N/A).</p>
                        <textarea name="options_csv" id="fld_opts" class="form-control border-info" rows="2"></textarea>
                    </div>
                    
                    <div class="form-check form-switch border p-3 rounded bg-white shadow-sm mt-3" id="div_mand_switch">
                        <input class="form-check-input ms-1" type="checkbox" name="is_mandatory" id="fld_mand" value="1" style="transform:scale(1.2); cursor:pointer;">
                        <label class="form-check-label ms-2 fw-bold text-danger small" for="fld_mand" style="cursor:pointer;">Mandatory Field (Required to submit form)</label>
                    </div>
                </div>
                <div class="modal-footer bg-white border-0">
                    <button type="button" class="btn btn-light border fw-bold" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info px-4 shadow-sm fw-bold">Inject Field</button>
                </div>
            </form>
        </div>
    </div>
</div>