{% extends "base.html" %}

{% block title %}Settings{% endblock %}

{% block styles %}
    {{ super() }}
    <link href="{{ url_for('static', filename='styles/flow_control.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock %}

{% block scripts %}
    {{super()}}
{% endblock %}

{% block station_state %}
    <h3 id='station-state' style="display: inline"> - Uninitialized - </h3>
{% endblock %}

{% block content %}

    <div id="alert_section"></div>

    <div class="columns_section">
        <h3>Flow Control</h3>
    </div>

    <div id="init_feedback" class="columns_section" hidden="true">
        <h4>Page unavailable: System not initialized.</h4>
    </div>

    <div id="home_tab_running_tests_feedback" class="columns_section" hidden="true">
        <h4>Page unavailable: Home tab is currently running a test. Either stop it or wait for it to finish before using this page.</h4>
    </div>

    <div id="save_new_pid_profile_modal" class="modal">
        <div class="modal-content">
            <h3>New PID Tuning Profile</h3><br>
            <p>
                This will save the current PID tuning values as a new PID tuning profile. You can then load this profile at any time from the dropdown list.
            </p>
            <h5>Profile Directory</h5>
            <select id="parent_directory_selector" class="form-control">
            </select>
            <br>
            <h5>Profile Name</h5>
            <input type="text" placeholder="Profile name here" id="profile_name_input" class="form-control"><br>
            <div class="button-container">
                <button id="yes_save_new_profile_btn" class="btn btn-outline-success">Save Profile</button>
                <button id="no_save_new_profile_btn" class="btn btn-outline-danger">Cancel</button>
            </div>
        </div>
    </div>

    <div id="restore_profile_values_modal" class="modal">
        <div class="modal-content">
            <h3>Restore Profile Values?</h3><br>
            <p>
                This will restore the current PID tuning values to the last saved values in the active profile. Any unsaved values for PID tuning will be lost. Are you sure you want to do this?
            </p>
            <div class="button-container">
                <button id="yes_restore_profile_btn" class="btn btn-outline-success">Restore Values</button>
                <button id="no_restore_profile_btn" class="btn btn-outline-danger">Cancel</button>
            </div>
        </div>
    </div>

    <div id="update_profile_values_modal" class="modal">
        <div class="modal-content">
            <h3>Save Current Values to Profile?</h3><br>
            <p>
                This will save the current PID tuning values to the active profile. Are you sure you want to do this?
            </p>
            <div class="button-container">
                <button id="yes_update_profile_btn" class="btn btn-outline-success">Update Values</button>
                <button id="no_update_profile_btn" class="btn btn-outline-danger">Cancel</button>
            </div>
        </div>
    </div>

    <div id="page_content" hidden="true">

        <div class="columns_section">
            <i class="fa fa-circle" style="color: red; margin-right: 8px; vertical-align: middle;" id="flow_control_status_icon" hidden></i>
            <strong id="flow_control_state">STATUS: PID Flowrate Control Inactive</strong>
        </div>
        <br>

        <div class="form-check form-switch">
            <input class="form-check-input red-switch" type="checkbox" id="pid_tuning_divs_switch" onclick="toggle_pid_tuning_visibility()">
            <label class="form-check-label" for="pid_tuning_divs_switch">Show PID Tuning</label>
        </div>
        <br>

        <div id="main_content_div" class="left_sided">
            <div id="pid_tuning_section" class="pid_tuning_section_style rightlined collapsed">
                <h4 class="columns_section">PID Tuning</h4>
                
                <div class="value-input-group" id="pid_tuning_inputs_div">   

                    <div id="pid_profile_div" class="pid_subsection_style underlined">
                        <h5>Profile Selection</h5>
                        <select id="pid_profile_select" class="form-select"></select>
                        <br>

                        <h5>Profile Notes</h5>
                        <textarea id="tuning_profile_notes" class="profile-name-textarea" rows="1" placeholder="Enter profile notes..."></textarea><br>
                    </div>
                    

                    <div id="kp_tuning_div" class="pid_subsection_style">
                        <div class="opposite_sides">
                            <h5>Kp</h5>
                            <div class="input-row">
                                <button class="step-button" id="kp_down_btn" onclick="stepDown(this.id)">−</button>
                                <input type="number" class="text-input" id="kp_textInput" value="0" min="0" max="100" step="1">
                                <button class="step-button" id="kp_up_btn" onclick="stepUp(this.id)">+</button>
                            </div>
                        </div>
                            
                        <input type="range" class="slider" id="kp_slider" min="0" max="100" value="0" step="1">
                        
                        <div class="labels  underlined">
                            <span>0</span>
                            <span>50</span>
                            <span>100</span>
                        </div>
                    </div>
                    
                    <div id="ki_tuning_div" class="pid_subsection_style">
                        <div class="opposite_sides">
                            <h5>Ki</h5>
                            <div class="input-row">
                                <button class="step-button" id="ki_down_btn" onclick="stepDown(this.id)">−</button>
                                <input type="number" class="text-input" id="ki_textInput" value="0" min="0" max="100" step="1">
                                <button class="step-button" id="ki_up_btn" onclick="stepUp(this.id)">+</button>
                            </div>
                        </div>
                            
                        <input type="range" class="slider" id="ki_slider" min="0" max="100" value="0" step="1">
                        
                        <div class="labels  underlined">
                            <span>0</span>
                            <span>50</span>
                            <span>100</span>
                        </div>
                    </div>
                    
                    <div id="kd_tuning_div" class="pid_subsection_style">
                        <div class="opposite_sides">
                            <h5>Kd</h5>
                            <div class="input-row">
                                <button class="step-button" id="kd_down_btn" onclick="stepDown(this.id)">−</button>
                                <input type="number" class="text-input" id="kd_textInput" value="0" min="0" max="100" step="1">
                                <button class="step-button" id="kd_up_btn" onclick="stepUp(this.id)">+</button>
                            </div>
                        </div>
                            
                        <input type="range" class="slider" id="kd_slider" min="0" max="100" value="0" step="1">
                        
                        <div class="labels  underlined">
                            <span>0</span>
                            <span>50</span>
                            <span>100</span>
                        </div>
                    </div>
                
                    <div id="saturation_div" class="pid_subsection_style">
                        <h5>Input % Saturation</h5>
                        <input type="number" class="text-input" id="saturation_textInput" value="0" min="0" max="100" step="1"><br><br>
                        <input type="range" class="slider" id="saturation_slider" min="0" max="100" value="0" step="1">
                        <div class="labels underlined">
                            <span>0%</span>
                            <span>50%</span>
                            <span>100%</span>
                        </div>
                    </div>
                        
                    <div id="unloaded_values_warning" style="color: red;" hidden>
                        <strong>Displayed values haven't been loaded yet</strong>
                    </div>
                       
                    <div id="load_div">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <button id="load_pid_btn" title='Set the current values on the fields above as the active PID tuning settings (they are not saved to the profile until you press "Update Profile")' class="btn btn-success">Load PID Tuning</button>
                            <i class="fa fa-question-circle" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="top" 
                               title='Set the current values on the fields above as the active PID tuning settings (they are not saved to the profile until you press "Update Profile")'
                               style="cursor: pointer; color: #6c757d; flex-shrink: 0;"></i>
                        </div>
                    </div>                 

                    <div id="new_profile_div">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <button id="new_profile_btn" class="btn btn-outline-info" title="Create a new PID tuning profile out of the current input field values">+ New Profile</button>
                            <i class="fa fa-question-circle" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="top" 
                               title="Create a new PID tuning profile out of the current input field values"
                               style="cursor: pointer; color: #6c757d; flex-shrink: 0;"></i>
                        </div>
                    </div>

                    <div id="restore_profile_values_div">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <button id="restore_profile_values_btn" title="Restore the current values on the fields above to the last saved values in the active profile" class="btn btn-outline-warning">Restore Values</button>
                            <i class="fa fa-question-circle" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="top" 
                               title="Restore the current values on the fields above to the last saved values in the active profile"
                               style="cursor: pointer; color: #6c757d; flex-shrink: 0;"></i>
                        </div>
                    </div>

                    <div id="update_profile_div">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <button id="update_profile_btn" title="Current settings will be saved to the active profile on the dropdown list" class="btn btn-outline-primary" disabled>Update Profile</button>
                            <i class="fa fa-question-circle" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="top" 
                               title="Current settings will be saved to the active profile on the dropdown list"
                               style="cursor: pointer; color: #6c757d; flex-shrink: 0;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div id="control_signals_section" class="control_signals_section_style rightlined">
                <h4 class="columns_section">Control Signals</h4>
                <br>
                
                <div id="input_selection_div" class="control_signals_subsection_style">
                    <h5 title="Pressure controller used to regulate the flowrate being monitored">Input - u(t)</h5>
                    <div class="opposite_sides">
                        <select id="pressure_controller_select" class="form-control">
                            <option value="controller_0">Controller 1</option>
                            <option value="controller_1">Controller 2</option>
                            <option value="controller_2">Controller 3</option>
                            <option value="controller_3">Controller 4</option>
                        </select>
                        <button id="set_input_btn" class="btn btn-info">Set</button>
                    </div>
                </div>
                <br>

                <div id="output_selection_div" class="control_signals_subsection_style">
                    <h5 title="Flowrate sensor to monitor and control">Output - y(t)</h5>
                    <div class="opposite_sides">
                        <select id="flowrate_sensor_select" class="form-control">
                            <option value="air_1">Air Flowrate 1</option>
                            <option value="air_2">Air Flowrate 2</option>
                            <option value="liq_1">Liq. Flowrate 1</option>
                            <option value="liq_2">Liq. Flowrate 2</option>
                            <option value="liq_3">Liq. Flowrate 3</option>
                            <option value="liq_4">Liq. Flowrate 4</option>
                        </select>
                        <button id="set_output_btn" class="btn btn-info">Set</button>
                    </div>
                </div>
                <br>

                <div id="reference_div" class="control_signals_subsection_style">
                    <h5 title="Target value for the selected output (flowrate sensor)">Reference - y_r(t)</h5>
                    <div class="opposite_sides">
                        <div class="input-row">
                            <button class="step-button" id="reference_down_btn" onclick="stepDown(this.id)">−</button>
                            <input type="number" class="text-input" id="reference_textInput" value="0" min="0" max="100" step="1">
                            <button class="step-button" id="reference_up_btn" onclick="stepUp(this.id)">+</button>
                            <button id="set_ref_btn" class="btn btn-info">Set</button>
                        </div>
                    </div>
                        
                    <input type="range" class="slider" id="reference_slider" min="0" max="100" value="0" step="1">
                    
                    <div class="labels">
                        <span id="min_ref_value_label">0</span>
                        <span id="mid_ref_value_label">50</span>
                        <span id="max_ref_value_label">100</span>
                    </div>
                    
                </div><br>
                <button id="start_pid_btn" class="btn btn-success">Start Flow Control</button><br>
                <button id="stop_pid_btn" class="btn btn-danger" disabled>Stop Flow Control</button>
                <br>
            </div>

            <div id="sensor_plot_section" class="sensor_plot_section_style">
                <h4 class="columns_section" id="output_plot_title"> Output, y(t) - Flowrate</h4>
                <br>
                <div class="opposite_sides">
                    <div id="output_flowrate_sensor_plot_div"></div>
                    <div id="output_sensor_values_div">
                        <strong>Output Flow</strong>
                        <div class="sensor_value_container">
                            <span id="output_sensor_reading">0</span>
                            <span id="output_units_indicator"> [uL/min]</span>
                        </div>
                        <strong>Reference</strong>
                        <div class="sensor_value_container">
                            <span id="output_sensor_reference">0</span>
                            <span id="output_ref_units_indicator"> [uL/min]</span>
                        </div>
                    </div>
                </div>

                <h4 class="columns_section" id="input_plot_title"> Input, u(t) - Pressure Controller</h4>
                <br>
                <div class="opposite_sides">
                    <div id="input_pressure_controller_plot_div"></div>
                    <div class="input_sensor_values_div">
                        <strong>Input Pressure</strong>
                        <div class="sensor_value_container">
                            <span id="input_sensor_reading">0</span>
                            <span class="units_indicator"> [PSI]</span>
                        </div>
                        <strong>Saturation Limit</strong>
                        <div class="sensor_value_container">
                            <span id="input_saturation">0</span>
                            <span class="units_indicator"> [PSI]</span>
                        </div>
                    </div>
                </div>
                

            </div>
        </div>

        <div id="pid_diagram"  class="collapsed">
            <svg viewBox="0 0 750 280" xmlns="http://www.w3.org/2000/svg">
                <!-- Dark background -->
                <rect width="750" height="280" fill="rgb(33, 37, 41)"/>
                
                <!-- Arrow definitions -->
                <defs>
                    <marker id="arrowhead" markerWidth="5" markerHeight="3.5" refX="4.5" refY="1.75" orient="auto">
                    <polygon points="0 0, 5 1.75, 0 3.5" fill="#e5e7eb"/>
                    </marker>
                    <marker id="arrowhead-orange" markerWidth="5" markerHeight="3.5" refX="4.5" refY="1.75" orient="auto">
                    <polygon points="0 0, 5 1.75, 0 3.5" fill="#f59e0b"/>
                    </marker>
                    <marker id="arrowhead-blue" markerWidth="5" markerHeight="3.5" refX="4.5" refY="1.75" orient="auto">
                    <polygon points="0 0, 5 1.75, 0 3.5" fill="#60a5fa"/>
                    </marker>
                    <marker id="arrowhead-green" markerWidth="5" markerHeight="3.5" refX="4.5" refY="1.75" orient="auto">
                    <polygon points="0 0, 5 1.75, 0 3.5" fill="#10b981"/>
                    </marker>
                    <marker id="arrowhead-red" markerWidth="5" markerHeight="3.5" refX="4.5" refY="1.75" orient="auto">
                    <polygon points="0 0, 5 1.75, 0 3.5" fill="#ef4444"/>
                    </marker>
                </defs>
                
                <!-- Reference Input -->
                <text x="30" y="105" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Reference</text>
                <text x="30" y="120" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="12">y_r(t)</text>
                
                <!-- Input to summing junction arrow -->
                <path d="M 55 115 L 85 115" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Summing Junction -->
                <circle cx="100" cy="115" r="12" fill="none" stroke="#e5e7eb" stroke-width="2"/>
                <text x="100" y="120" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="14">+</text>
                <text x="110" y="140" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="14">-</text>
                
                <!-- Error signal -->
                <text x="125" y="105" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="11">e(t)</text>
                
                <!-- Split signal to three PID components -->
                <!-- Main split junction -->
                <circle cx="140" cy="115" r="3" fill="#e5e7eb"/>
                
                <!-- Summing junction to split point -->
                <path d="M 115 115 L 140 115" fill="none" stroke="#e5e7eb" stroke-width="2"/>
                
                <!-- Lines to P, I, D components -->
                <path d="M 140 115 L 175 115" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                <path d="M 140 115 L 140 55 L 175 55" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                <path d="M 140 115 L 140 175 L 175 175" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Proportional Block -->
                <rect x="180" y="95" width="80" height="40" fill="none" stroke="#60a5fa" stroke-width="2" rx="3"/>
                <text x="175" y="95" text-anchor="middle" fill="#60a5fa" font-family="Arial, sans-serif" font-size="12">P</text>
                <text x="220" y="120" text-anchor="middle" fill="#60a5fa" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Kp·e(t)</text>
                
                <!-- Integral Block -->
                <rect x="180" y="35" width="80" height="40" fill="none" stroke="#10b981" stroke-width="2" rx="3"/>
                <text x="175" y="35" text-anchor="middle" fill="#10b981" font-family="Arial, sans-serif" font-size="12">I</text>
                <text x="220" y="60" text-anchor="middle" fill="#10b981" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Ki ∫e(t)dt</text>
                
                <!-- Derivative Block -->
                <rect x="180" y="155" width="80" height="40" fill="none" stroke="#f59e0b" stroke-width="2" rx="3"/>
                <text x="175" y="155" text-anchor="middle" fill="#f59e0b" font-family="Arial, sans-serif" font-size="12">D</text>
                <text x="220" y="180" text-anchor="middle" fill="#f59e0b" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Kd·de(t)/dt</text>
                
                <!-- Lines from PID components to summing junction -->
                <path d="M 260 55 L 300 55 L 300 100" fill="none" stroke="#10b981" stroke-width="2" marker-end="url(#arrowhead-green)"/>
                <path d="M 260 115 L 288 115" fill="none" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrowhead-blue)"/>
                <path d="M 260 175 L 300 175 L 300 128" fill="none" stroke="#f59e0b" stroke-width="2" marker-end="url(#arrowhead-orange)"/>
                
                <!-- Final summing junction for PID outputs -->
                <circle cx="300" cy="115" r="12" fill="none" stroke="#e5e7eb" stroke-width="2"/>
                <text x="300" y="120" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="12">+</text>
                
                <!-- Control signal before saturation -->
                <text x="350" y="105" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="11">u(t)</text>
                
                <!-- Controller output to saturation arrow -->
                <path d="M 312 115 L 385 115" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Saturation Block -->
                <rect x="390" y="95" width="60" height="40" fill="none" stroke="#ef4444" stroke-width="2" rx="3"/>
                
                <!-- Saturation symbol (characteristic clipping curve) -->
                <g transform="translate(420, 115)">
                    <!-- Horizontal lines (saturated regions) -->
                    <path d="M -20 8 L -8 8" fill="none" stroke="#ef4444" stroke-width="1.5"/>
                    <path d="M 8 -8 L 20 -8" fill="none" stroke="#ef4444" stroke-width="1.5"/>
                    <!-- Diagonal line (linear region) -->
                    <path d="M -8 8 L 8 -8" fill="none" stroke="#ef4444" stroke-width="1.5"/>
                </g>
                
                <text x="420" y="90" text-anchor="middle" fill="#ef4444" font-family="Arial, sans-serif" font-size="9">Saturation</text>
                
                <!-- Saturated control signal -->
                <text x="475" y="105" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="11">u_sat(t)</text>
                
                <!-- Saturation to plant arrow -->
                <path d="M 451 115 L 505 115" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Plant/Process Block -->
                <rect x="510" y="95" width="90" height="40" fill="none" stroke="#e5e7eb" stroke-width="2" rx="5"/>
                <text x="550" y="110" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Plant</text>
                <text x="550" y="125" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="10">Process</text>
                
                <!-- Output signal -->
                <text x="630" y="105" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="11">y(t)</text>
                
                <!-- Plant to output arrow -->
                <path d="M 600 115 L 660 115" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Output -->
                <text x="630" y="90" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Output</text>
                
                <!-- Feedback line -->
                <path d="M 630 120 L 630 205 L 100 205 L 100 130" fill="none" stroke="#e5e7eb" stroke-width="2"/>
                
                <!-- Feedback arrow -->
                <path d="M 100 135 L 100 130" fill="none" stroke="#e5e7eb" stroke-width="2" marker-end="url(#arrowhead)"/>
                
                <!-- Feedback label -->
                <text x="365" y="220" text-anchor="middle" fill="#e5e7eb" font-family="Arial, sans-serif" font-size="11">Feedback Signal</text>
            
            </svg>
        </div>

        <script src="{{ url_for('static', filename='lib/socket.io.min.js') }}"></script>
        <script src="{{ url_for('static', filename='lib/plotly.min.js') }}"></script>
        <script src="{{ url_for('static', filename='flow_control.js') }}"></script>
    </div>
{% endblock %}