{% extends "base.htm" %}
{% from "form_macros.htm" import render_field, render_monitor_net_setup %}


{% block title %}
    Wohler iAM-Mix : System Setup 
{% endblock %}

{% block config_menu_collapse %}
   class="collapse""
{% endblock %}

{% block cluster_collapse %}
   class="collapse""
{% endblock %}

{% block system_setup_active  %}
   class="side-nav-active-wohler"
{% endblock %}

{% block network_collapse %}
   class="collapse"
{% endblock %}

{% block db_collapse %}
   class="collapse""
{% endblock %}



{% block header_content %}

               <div class="row">
                   <div class="col-lg-12">
                       <h1 class="page-header "><span class="page-header-wohler"> {{ title }} </span> </h1>
                       <ol class="breadcrumb">
                           <li class="active"  >
                               <i class="fa fa-dashboard"></i> Dashboard
                           </li>
                           <li class="active">
                               <i class="fa fa-wrench"></i> {{ title }} 
                           </li>
                       </ol>
                   </div>
               </div>
{% endblock %}


{% block content %}

<style>
.div_hidden_key { font-size:1.4em; padding-right:5px; }
</style>
  <form class="form-horizontal" action="" method="post" id="OptionForm"  >
  {{ form.hidden_tag() }}
                                            <script src="{{ url_for('static', filename='js/jquery.inputmask.bundle.min.js') }}" type="text/javascript"></script>
                                            <script src="{{ url_for('static', filename='js/jquery.inputmask.extensions.js') }}" type="text/javascript"></script>

                                             <script type="text/javascript">
                                                var chkboxes_array = new Array();
                                                var option_array = new Array();
                                                var invalid_keys_array = new Array();

                                               $(document).ready(function(){
 
                                                $('#txt_title' ).attr('checked', true);
                                                //$("#txt_aes_key").inputmask({ alias: "ip"});
                                                $("#txt_aes_key").inputmask("****-****-****-****-****-****-****-****");
                                                $("#txt_analog_key").inputmask("****-****-****-****-****-****-****-****");
                                                $("#txt_aoip_key").inputmask("****-****-****-****-****-****-****-****");
                                                $("#txt_optical_key").inputmask("****-****-****-****-****-****-****-****");
                                                $("#txt_sdi_key").inputmask("****-****-****-****-****-****-****-****");
                                                $("#txt_dby_key").inputmask("****-****-****-****-****-****-****-****");

                                                {% set counter = 0 %}
                                                {% for feature in features %}
                                                   feature_id = {{ feature.feature_id }};
                                                   idx = {{ counter }};
                                                   option_array[idx]= feature_id;
                                                   {% set counter = counter + 1 %}
                                                {% endfor %}

                                                {% for invalid_key in invalid_keys  %}
                                                   feature_id = {{ invalid_key.feature_id }};
                                                   invalid_keys_array.push(feature_id);
                                                   idx = option_array.length;
                                                   option_array[idx]= feature_id;
                                                {% endfor %}


 
                                                 if (option_array.length === 0)  {
                                                     $('#txt_bnc' ).attr('checked', true);
                                                     $('#div_txt_bnc_key' ).removeClass('hidden');
                                                 }
                                                 else{
                                                     set_features();                                                
                                                 }
 
                                                 $('input[type=checkbox]').click( function(){
                                                      showinput(this);

                                                  });

                                              
                                                   $('#btn_save').click(function() {
                                                   
                                                        check_form();
                                                        if (chkboxes_array.length ===0) {
                                                            $('#updating-modal').modal('hide');
                                                        }
                                                        else {
                                                            $('#updating-modal').modal('show');
                                                        }

                                                   });


                                               });



                                                function isEmpty( control  ){

                                                     var tmpVal= $(control).val();
                                                     if  (tmpVal == '' ) {
                                                        event.preventDefault();
                                                        $(control).focus();
                                                     }
                                                     return true;
                                                }

                                                function check_form(){
                                                     chkboxes = document.querySelectorAll('input[type="checkbox"]');
                                                     for (i = 0; i < chkboxes.length; ++i) {
                                                       var chkboxId = chkboxes[i].id ;
                                                       var isChecked= $('#' + chkboxId).is(':checked');
						       if (isChecked) {
                                                            tmpTxtId = $('#' + chkboxId + '_key');
                                                            if ( tmpTxtId.val() == '' ){
                                                                event.preventDefault();
                                                               $('#' + tmpTxtId).focus();
                                                            }
                                                       }
                                                     }
                                                }


                                                function set_features(){
                                                   for (i = 0; i < option_array.length; ++i) {
                                                      option = option_array[i];
                                                      var is_invalid = invalid_keys_array.indexOf(option);
                                                      switch(option) {
                                                          case 1:
                                                              control = $('#txt_aes');
                                                              break;
                                                          case 2:
                                                              control = $('#txt_analog');
                                                              break;
                                                          case 3:
                                                              control = $('#txt_aoip');
                                                              break;
                                                          case 4:
                                                              control = $('#txt_bnc');
                                                              break;
                                                          case 5:
                                                              control = $('#txt_optical');
                                                              break;
                                                          case 6:
                                                              control = $('#txt_sdi');
                                                              break;
                                                          case 7:
                                                              control = $('#txt_dby');
                                                              break;
                                                      }
                                                      $(control).attr("checked", true);

                                                      key_id = $(control).attr('id') + '_key' ; 
                                                      $('#'+key_id).attr("required", "required");
                                                      div_id ='div_'+  $(control).attr('id') + '_key'; 
                                                      $('#'+ div_id).removeClass('hidden');
                                                      chkboxes_array.push(control);

                                                      h_div_id ='h_div_' +  $(control).attr('id'); 
                                                      s_div_id ='s_div_' +  $(control).attr('id'); 
                                                      if ( is_invalid < 0 ){
                                                        $('#'+key_id).attr("readonly", true);
                                                        $('#' + h_div_id).removeClass('hidden');
                                                        $('#' + s_div_id).addClass('hidden');
                                                      }
                                                      else {
                                                        $('#' + h_div_id).addClass('hidden');
                                                        $('#' + s_div_id).removeClass('hidden');
                                                      }

                                                   }
                                                }


                                                function showinput(control){
                                                   var tmp = $('#' + control.id).is(':checked');
                                                   var tmpKeyId= control.id + '_key';     
                                                   var divKeyId = "div_" + control.id + '_key'; 
                                                   var isReadOnly = $('#' + tmpKeyId).is('[readonly]');
                                                   if ( isReadOnly == false ) {
                                                       if  (tmp === true ) {
                                                           $('#' + divKeyId).removeClass('hidden');
                                                           $('#' + tmpKeyId).attr('required','required');
                                                           if  ( $('#' +  tmpKeyId).val() === '' ) {
                                                               $('#' + tmpKeyId).focus();
                                                           }
                                                           chkboxes_array.push(control);
                                                        }
                                                        else {
                                                           $('#' + tmpKeyId).val('');
                                                           $('#' + tmpKeyId).removeAttr('required');
                                                           $('#' + divKeyId).addClass('hidden');
                                                          chkboxes_array.pop();
                                                        }
                                                   }
                                                   




                                                }

                                               </script>


                <!-- /.row -->
                 <div class="row">

                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <div class="panel-heading panel-heading-wohler">
                                <h3 class="panel-title"><i class="fa fa-tag"></i> Product Information </h3>
                            </div>
                            <div class="panel-body" >
                                <div class="table-responsive">
                                    <div style="height:460px;" >  
                                    <table class="table table-bordered table-hover table-striped table-responsive" id="table_A5"  >
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                      <label for="name" class="control-label">Name</label>
                                                     </div>                                                    
                                                </td>
                                                <td>
                                                    <div class="col-lg-12" >
    						      iAM-Mix 
                                                          
                                                     </div>                                                    
						</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                        <label for="model" class="control-label">Model</label>
                                                     </div>                                                    
                                                </td>
                                                <td >
                                                    <div class="col-lg-12" >
                                                          {{ product.model }}  
                                                     </div>                                                    
						</td>
                                             </tr>
                                             <tr>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                       <label for="serial_number" class="control-label">Serial #</label>
                                                    </div>                                                    
                                                </td>
                                                <td>
                                                    <div class="col-lg-12"  >      
                                                       {% if serial_number %}
                                                           {{ serial_number }}
                                                       {% endif %}
                                                    </div>                                                    
                                                </td>
                                             </tr>
                                             <tr>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                        <label for="hardware_version" class="control-label">Hardware Version</label>
                                                    </div>                                                    
                                                </td>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                    {% if hardware %}
                                                       {{ hardware.version }}.{{ hardware.release }}
                                                    {% endif %}
                                                  </div>                                                    
                                                </td>
                                             </tr>
                                             <tr>
                                                <td>
                                                    <div class="col-lg-12"  >
                                                       <label for="system_version" class="control-label">System Version</label>
                                                    </div>                                                    
                                               </td>
                                               <td>
                                                    <div class="col-lg-12"  >
                                                        {% if software %}
                                                           {{ software.version}}.{{ software.release }} 
                                                        {% endif %}
                                                  </div>                                                    
                                               </td>
                                             </tr>
                                        </tbody>
                                     </table>
                                    </div>
                                </div>
                                <div class="text-right"> </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="panel panel-default">
                            <div class="panel-heading panel-heading-wohler">
                                <h3 class="panel-title"><i class="fa fa-chain-broken fa-fw"></i> System Options. </h3>
                            </div>
                            <div class="panel-body">

                              <div style="height:40px;">
                                            <div class="" >
                                                <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> 
                                                <label for="txt_title" class="panel-title"  >Features installed on System. </label>
                                            </div>
                              </div>

                              <div class="table-responsive">
                               <div style="height:420px;" >  
                                    <table class="table table-bordered table-hover table-striped">
                                      <tr>
                                      <th> Mix Option </th>
                                      <th>  License Key </th>
                                      </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_aes" class="hidden" >
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> AES 
                                            </div>
                                            <div id="s_div_txt_aes" class="checkbox checkbox-success"  >
                                                <input type="checkbox" id="txt_aes" name="chkb_options"  value="1"  style="styled" >
                                                <label for="txt_aes" >AES </label>
                                            </div>
                                          </td>
                                          <td>
                                             <div id="div_txt_aes_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_aes_key" size="50" id="txt_aes_key" class="form-control" placeholder="Please enter Key Option" 
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 1  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
                                                  </div>
  					      </div>
                                          </td>
                                       </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_analog"  class="hidden">
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> Analog 
                                            </div>
                                            <div id="s_div_txt_analog" class="checkbox checkbox-success" >
                                                <input type="checkbox" id="txt_analog" name="chkb_options" value="2"  style="styled" >
                                                <label for="txt_analog" >Analog </label>
                                            </div>
                                          </td>
                                          <td>
                                             <div id="div_txt_analog_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_analog_key" size="50" id="txt_analog_key" class="form-control" placeholder="Please enter Key Option"
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 2  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                        {% for invalid_key in invalid_keys  %}
                                                          {% if invalid_key.feature_id|int == 2  %}
                                                             style="color:red;"
                                                             value="{{invalid_key.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_aoip"  class="hidden">
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> AoIP 
                                            </div>
                                            <div id="s_div_txt_aoip"  class="checkbox checkbox-success"  >
                                                <input type="checkbox" id="txt_aoip" name="chkb_options" value="3"  style="styled"  >
                                                <label for="txt_aoip" >AoIP </label>
                                            </div>
                                          </td>
                                          <td> 
                                             <div id="div_txt_aoip_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_aoip_key" size="50"  id="txt_aoip_key" class="form-control" placeholder="Please enter Key Option"
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 3  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}

                                                        {% for invalid_key in invalid_keys  %}
                                                          {% if invalid_key.feature_id|int == 3  %}
                                                             style="color:red;"
                                                             value="{{invalid_key.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_bnc" class="hidden"  >
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> MADI BNC 
                                            </div>
                                            <div id="s_div_txt_bnc" class="checkbox checkbox-success" >
                                                <input type="checkbox" id="txt_bnc" name="chkb_options" value="4"  style="styled" disabled='disabled' >
                                                <label for="txt_bnc" >MADI BNC </label>
                                            </div>
                                          </td>
                                          <td> 
                                             <div id="div_txt_bnc_key"  >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_bnc_key"  size="50" id="txt_bnc_key" class="form-control" placeholder="Please enter Key Option" required="required" 
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 4  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                   disabled='disabled'   >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_optical"  class="hidden" >
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> MADI Optical 
                                            </div>
                                            <div id="s_div_txt_optical" class="checkbox checkbox-success" >
                                                <input type="checkbox" id="txt_optical"  name="chkb_options" value="5" style="styled"  >
                                                <label for="txt_optical" >MADI Optical </label>
                                            </div>
                                          </td>
                                          <td> 
                                             <div id="div_txt_optical_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_optical_key"  size="50" id="txt_optical_key" class="form-control" placeholder="Please enter Key Option"
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 5  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}

                                                        {% for invalid_key in invalid_keys  %}
                                                          {% if invalid_key.feature_id|int == 5  %}
                                                             style="color:red;display:block;"
                                                             value="{{invalid_key.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>
                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_sdi"  class="hidden" >
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> SDI
                                            </div>
                                            <div id="s_div_txt_sdi" class="checkbox checkbox-success" >
                                                <input type="checkbox" id="txt_sdi" name="chkb_options" value="6"  style="styled" >
                                                <label for="txt_sdi" >SDI </label>
                                            </div>
                                          </td>
                                          <td> 
                                             <div id="div_txt_sdi_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_sdi_key"  size="50" id="txt_sdi_key" class="form-control" placeholder="Please enter Key Option"
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 6  %}
                                                                value="{{feature.license_key}}"
                                                                     
 
                                                          {% endif %}
                                                        {% endfor %}

                                                        {% for invalid_key in invalid_keys  %}
                                                          {% if invalid_key.feature_id|int == 6  %}
                                                             style="color:red;"
                                                             value="{{invalid_key.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>

                                       <tr>
                                          <td> 
                                            <div id="h_div_txt_dby"  class="hidden" >
                                               <label class="div_hidden_key" ><i class="text-success fa fa-check-square"></i></label> Dolby
                                            </div>
                                            <div id="s_div_txt_dby" class="checkbox checkbox-success" >
                                                <input type="checkbox" id="txt_dby" name="chkb_options" value="7"  style="styled" disabled="disabled"  >
                                                <label for="txt_dby" >Dolby </label>
                                            </div>
                                          </td>
                                          <td> 
                                             <div id="div_txt_dby_key" class="hidden" >
 				                  <div class="col-lg-12"  >
    					             <input type="text" name="txt_dby_key"  size="50" id="txt_dby_key" class="form control"  placeholder="Please enter Key Option"
                                                        {% for feature in features %}
                                                          {% if feature.feature_id|int == 7  %}
                                                                value="{{feature.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                         
                                                        
                                                        {% for invalid_key in invalid_keys  %}
                                                          {% if invalid_key|int == 7  %}
                                                             style="color:red;"
                                                             value="{{invalid_key.license_key}}"
                                                          {% endif %}
                                                        {% endfor %}
                                                     >
  					          </div>
  					      </div>
                                          </td>
                                       </tr>

                                       {% if  invalid_keys %}

                                       <tr>
                                          <td> 
                                          </td> 
                                          <td> 
                                                <label class="text-danger" style="padding-left:20px;" > Invalid Key(s) have been entered.</label>
                                          </td>
                                       </tr>

                                             

                                       {% endif %}
         

                                    </table>

                                    </div>  <!-- height  -->
                                </div>   <!-- responsive  -->
                                <div class="text-right"> </div>
                            </div>   <!-- panel body -->
                        </div>   <!-- panel  -->
                    </div>  <!-- col -->


                </div>

                <!-- /.row -->
                <div class="table-responsive">

                   <table>
                       <tr>
                       <td >
                       {% if set_key_err  %}
                          <label class="text-danger" style="padding-left:20px;font-size:1.2em;" > {{ set_key_err}} Contact Wohler Support. </label>
                       {% else %}
                       <td style="width:130px;">
                           <div class="submit-button" >
                              <button class='btn btn-primary btn-md'  name="btn_update_sys" id="btn_save"    >
                              <span class="fa fa-floppy-o"></span> Save Product Info </button> 
                           </div>
                       {% endif %}
                       </td>
                       </tr>
                       </table>

                </div>


                <div id="updating-modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
                   <div class="modal-dialog">
                       <div class="modal-content">
                          <div class="modal-header" style="text-align: center">
                              <h3>Saving System Setup Data.Please wait ... </h3>
                          </div>
                          <div class="modal-body" style="text-align: center;  "  >
                              <div style="height:100px; width:100%; ">
                                 <div style="vertical-align: middle; width:100%; ">
                                    <i class="fa fa-refresh fa-spin" style="font-size: 3.5em;" ></i>
                                 </div>
                               </div>
                           </div>
                           <div class="modal-footer" style="text-align: center"></div>
                       </div>
                   </div>
                </div>

               <div style="height:230px;">&nbsp;</div>

</form>


{% endblock %}