<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row row-flex">
    <div class="col-xs-12 text-center">
        <h1>Control</h1>
    </div>
    <div class='col-xs-6 text-center box-me'>
        <!-- Use data-confirm-message to set the exact message that pops up in the alert window.  -->

        <a href="#"
        data-confirm-message="Are you sure you want to remotely start the well?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Start', 'val': 1}"
        data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
        data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
        data-name="<%= channels["advvfdipp.writeplctag"].name%>"
        data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
        id="<%= channels["advvfdipp.writeplctag"].channelId %>"
        class="btn btn-large btn-theme animated confirmstatic pad15">
        Start</a>
    </div>
    <div class='col-xs-6 text-center box-me'>
        <a href="#"
        data-confirm-message="Are you sure you want to remotely stop the well?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Stop', 'val': 1}"
        data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
        data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
        data-name="<%= channels["advvfdipp.writeplctag"].name%>"
        data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
        id="<%= channels["advvfdipp.writeplctag"].channelId %>"
        class="btn btn-large btn-theme animated confirmstatic pad15">
        Stop</a>

    </div>
</div>

<div class="row row-flex">
    <div class="col-xs-12 text-center">
        <h1>PID Settings</h1>
    </div>
    <div class="col-md-6 box-me">
        <div class="entry-top-level" id="flowsetpoint">
            <div class="pad15">
                <h2>Flow Setpoint
                    <% if (channels["advvfdipp.pidcontrolmode"].value == "Flow"){ %>
                        <span class="label label-success">ACTIVE</span>
                    <% } %>
                </h2>
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control val_box"
                        type="number"
                        step="any"
                        value="<%=channels['advvfdipp.flowsetpoint'].value %>">
                    </div>
                    <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'cfg_PID_FlowSP', 'val': <%=channels['advvfdipp.flowsetpoint'].value %>}"
                    data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                    data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    class="btn btn-large btn-theme animated confirmstatic material-icons">send</a>
                </form>
            </div>
        </div>
        <div class="pad15">
            <a href="#"
            style="width:95%"
            data-confirm-message="Are you sure you want to activate Flow Control Mode?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'tag': 'cfg_PID_Flow', 'val': 1}"
            data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
            data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
            data-name="<%= channels["advvfdipp.writeplctag"].name%>"
            data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
            id="<%= channels["advvfdipp.writeplctag"].channelId %>"
            class="btn btn-large btn-theme animated setstatic">
            Activate Flow Control</a>
        </div>
    </div>

    <div class="col-md-6 box-me">
        <div class="entry-top-level" id="fluidlevelsetpoint">
            <div class="pad15">
                <h2>Fluid Level Setpoint
                    <% if (channels["advvfdipp.pidcontrolmode"].value == "Fluid Level"){ %>
                        <span class="label label-success">ACTIVE</span>
                    <% } %>
                </h2>
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control val_box"
                        type="number"
                        step="any"
                        value="<%=channels['advvfdipp.fluidlevelsetpoint'].value %>">
                    </div>
                    <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'cfg_PID_FluidLevelSP', 'val': <%=channels['advvfdipp.fluidlevelsetpoint'].value %>}"
                    data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                    data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                </form>
            </div>
        </div>
        <div class="pad15">
            <a href="#"
                style="width:95%"
                data-confirm-message="Are you sure you want to activate Fluid Level Control Mode?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'cfg_PID_FluidLevel', 'val': 1}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic ">
                Activate Fluid Level Control</a>
        </div>
    </div>

    <div class="col-md-6 box-me">
        <div class="entry-top-level" id="tubingpressuresetpoint">
            <div class="pad15">
                <h2>Tubing Pressure Setpoint
                    <% if (channels["advvfdipp.pidcontrolmode"].value == "Tubing Pressure"){ %>
                        <span class="label label-success">ACTIVE</span>
                    <% } %>
                </h2>
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control val_box"
                        type="number"
                        step="any"
                        value="<%=channels['advvfdipp.tubingpressuresetpoint'].value %>">
                    </div>
                    <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'cfg_PID_TubingPressureSP', 'val': <%=channels['advvfdipp.tubingpressuresetpoint'].value %>}"
                    data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                    data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                </form>
            </div>
        </div>
        <div class="pad15">
            <a href="#"
                style="width:95%"
                data-confirm-message="Are you sure you want to activate Tubing Pressure Control Mode?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'cfg_PID_TubingPressure', 'val': 1}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic">
                Activate Tubing Pressure Control</a>
        </div>
    </div>

    <div class="col-md-6 box-me">
        <div class="entry-top-level" id="manualfrequencysetpoint">
            <div class="pad15">
                <h2>Manual Frequency Setpoint
                    <% if (channels["advvfdipp.pidcontrolmode"].value == "Manual"){ %>
                        <span class="label label-success">ACTIVE</span>
                    <% } %>
                </h2>
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control val_box"
                        type="number"
                        step="any"
                        value="<%=channels['advvfdipp.manualfrequencysetpoint'].value %>">
                    </div>
                    <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'cfg_PID_ManualFrequencySP', 'val': <%=channels['advvfdipp.manualfrequencysetpoint'].value %>}"
                    data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                    data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                </form>
            </div>
        </div>
        <div class="pad15">
            <a href="#"
                style="width:95%"
                data-confirm-message="Are you sure you want to activate Manual Control Mode?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'cfg_PID_Manual', 'val': 1}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic">
                Activate Manual Frequency Control</a>
        </div>
    </div>
</div>

<div class="row row-flex">
    <div class="col-md-12 text-center">
        <h1>Shutdown Parameters</h1>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="pressureshutdownlimit">
        <div class="pad15">
            <h2>Pressure Shutdown Limit</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.pressureshutdownlimit'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'AIn_IntakePressure.PSet_LoLim', 'val': <%=channels['advvfdipp.pressureshutdownlimit'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="pressurestartuplimit">
        <div class="pad15">
            <h2>Pressure Startup Limit</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.pressurestartuplimit'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'AIn_IntakePressure.PSet_HiLim', 'val': <%=channels['advvfdipp.pressurestartuplimit'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="temperatureshutdownlimit">
        <div class="pad15">
            <h2>Temperature Shutdown Limit</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.temperatureshutdownlimit'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'AIn_IntakeTemperature.PSet_HiLim', 'val': <%=channels['advvfdipp.temperatureshutdownlimit'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="temperaturestartuplimit">
        <div class="pad15">
            <h2>Temperature Startup Limit</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.temperaturestartuplimit'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'AIn_IntakeTemperature.PSet_LoLim', 'val': <%=channels['advvfdipp.temperaturestartuplimit'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>
</div>

<div class="row row-flex">
    <div class="col-md-12 text-center">
        <h1>Well Parameters</h1>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="fluidspecificgravity">
        <div class="pad15">
            <h2>Specific Gravity</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.fluidspecificgravity'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'cfg_FluidSpecificGravity', 'val': <%=channels['advvfdipp.fluidspecificgravity'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="sensorheight">
        <div class="pad15">
            <h2>Sensor Height</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.sensorheight'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'cfg_DHSensorDistToIntake', 'val': <%=channels['advvfdipp.sensorheight'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>
</div>

<div class="row row-flex">
    <div class="col-md-12 text-center">
        <h1>Motor Parameters</h1>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="minvfdfrequency">
        <div class="pad15">
            <h2>Min Frequency</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.minvfdfrequency'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'PowerFlex755.Cfg_MinSpdRef', 'val': <%=channels['advvfdipp.minvfdfrequency'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>

    <div class="col-md-6 box-me entry-top-level" id="maxvfdfrequency">
        <div class="pad15">
            <h2>Max Frequency</h2>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control val_box"
                    type="number"
                    step="any"
                    value="<%=channels['advvfdipp.maxvfdfrequency'].value %>">
                </div>
                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'PowerFlex755.Cfg_MaxSpdRef', 'val': <%=channels['advvfdipp.minvfdfrequency'].value %>}"
                data-channelId="<%= channels["advvfdipp.writeplctag"].channelId %>"
                data-techname="<%=channels["advvfdipp.writeplctag"].techName %>"
                data-name="<%= channels["advvfdipp.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["advvfdipp.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["advvfdipp.writeplctag"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>
</div>

<script>

$('.val_box').each(function(topLevel){
    $(this).change(function(){
        var id = "#" + $(this).closest(".entry-top-level").attr('id');
        if (id !== "#undefined"){
            // console.log("before parse", $(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
            var jsobj = JSON.parse($(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
            // console.log("after parse", jsobj)
            // var tagStart = $(id).find('.setstatic').attr('data-staticsend').indexOf("tag") + 3;
            // var tagStop = $(id).find('.setstatic').attr('data-staticsend').indexOf("] ]");
            // var tag = $(id).find('.setstatic').attr('data-staticsend').substring(tagStart, tagStop).split(',')[0].replace(/'/g,"");
            var val = $(id).find('.val_box').val();
            var newData = "{'tag': '" + jsobj.tag +"', 'val': " + val.toString() + "}"
            var tag = $(id).find('.setstatic').attr('data-staticsend', newData);
            console.log($(id).find('.setstatic').attr('data-staticsend'));
        }
    });
});

</script>

<style>
.box-me {
    position: relative;
    padding: 0.5em;
    padding-bottom: 1.5em;
    border: 1px solid #eee;
    /*margin: 1em 0;*/
}
.box-me .gauge-box {
    margin-top: -0.25em;
}

.pad15 {
    margin: 15px 15px;
}

.box-me h2 {
    text-transform: uppercase;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    letter-spacing: 1px;
    z-index: 100;
}
.dynamic-chart-form {
    background-color: whiteSmoke;
    padding: 1em 0.5em;
    margin-top: 1em;
}

.row-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
}
.row-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

</style>
