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


{% block title %}
    Wohler iAM-Audio : Channel Naming 
{% endblock %}

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

{% block config_menu_collapse %}
   class="collapse""
{% 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-table"></i> {{ subtitle }}
                           </li>
                       </ol>
                   </div>
               </div>
{% endblock %}


{% block content %}

                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading panel-heading-wohler">
                                <h3 class="panel-title"><i class="fa fa-table fa-fw"></i> Channel Naming </h3>
                            </div>
                            <div class="panel-body">
                                <div >
 				  <!-------->
                                    <div id="content">


                                         <div id="my-tab-content" class="tab-content">


                                             <script type="text/javascript">


                                                 $(document).ready(function(){
                                                       
                                                      var invalid_chars = new Array(34, 39, 44, 59, 96, 126);

                                                      $('[data-toggle="tooltip"]').tooltip({container:'body'}); 

                                                      $('input[type=radio][name=input_type]').change(function(e) {
                                                              $('#updating-modal').modal('show');
                                                              value = $('input[type=radio][name=input_type]:checked').val();
                                                              //alert (value);
                                                              window.location = '/channelnaming/'+value;
                                                              return true;
                                                      });



                                                      $('#btn-save').click(function(e) {
                                                           var submit_value = $(this).val()
                                                           if ( check_form(e) ) {
                                                               $('#submit_button').val(submit_value);
                                                               $('#updating-modal').modal('show');
                                                               $('form').submit();
                                                           }
                                                           else {
                                                                e.preventDefault();
                                                                return false;
                                                           }
                                                      });

                                                      $('#btn-save-down').click(function(e) {
                                                           var submit_value = $(this).val()
                                                           valid = check_form(e) ;
                                                           if ( valid ) {   
                                                              var submit_value = $(this).val()
                                                              $('#submit_button').val(submit_value);
                                                              $('#db-modal').modal('show');
                                                              //$('form').submit();
                                                           }
                                                           else {
                                                               e.preventDefault();
                                                               return false;
                                                           }
                                                      });


                                                      $('#btnYes').click(function(e) {

                                                           if ( valid ) {   
                                                               $('#db-modal').modal('hide');
                                                               $('#updating-modal').modal('show');
                                                               $('form').submit();
                                                               return true;
                                                           }
                                                           else {
                                                               e.preventDefault();
                                                               return false;
                                                           }


                                                       });


                                                      $('.ch_naming').keypress(function(event){
                                                          tmpId = this.id;
                                                          tmpValue = $('#' + tmpId).val();
                                                          for (i = 0; i < invalid_chars.length; ++i) { 
                                                              if ( event.which == invalid_chars[i] ) {
                                                                alert ("Invalid Character");
                                                                break;
                                                              }
                                                          }
                                                          
                                                      });



                                                  });


                                                  function check_form(e){
                                                     return true;
                                                     inputs = document.querySelectorAll('input[type="text"]');
                                                     for (i = 0; i < inputs.length; ++i) {
                                                       var inputTxtId = inputs[i].id ;
                                                       tmpTxtId = $('#' + inputTxtId );
                                                       tmpValue = tmpTxtId.val().trim(); 
                                                       if ( (tmpValue == '') || (tmpValue.length == 0)  ){
                                                           alert ("Empty Value" );
                                                           e.preventDefault();
                                                           $('#' + tmpTxtId).focus();
                                                           return false;
                                                       }
                                  
                                                     }
                                                     return true;
                                                }

                                                function checkInput(control){
                                                    tmpValue = control.value;
                                                    newValue = tmpValue.replace(/\"|'|,|;|`|~/g,"*");
                                                    $('#' + control.id).val(newValue);
                                                }


                                             </script>




                                       </div>
                                   </div>
                                    
                                    
                                   </div> <!-- container -->

                                    <form class="form-horizontal" action="" method="post" id="ChannelNameForm" >
                                    {{ form.hidden_tag() }}


                                           <div class="tab-pane-responsive active" id="monitor1">
                
                                   
                                                <div>
                                                    <div class="heading">
                                                       <h4 class="form-heading">Channel Naming</h4>
                                                     </div>
                                                     <div style="height:15px;" > </div>
                                                     <div class="heading">
                                                       <h4 class="form-heading">Please Select the input type of the channel's label you want to update :</h4>
                                                     </div>
                                                     <div style="height:15px;" > </div>


                                                     <div class="btn-group" data-toggle="buttons"   >
                                                      {% for feature in features %}

                                                          <label class="btn btn-default {% if input_type == feature %} active {% endif %} " >
                                                             <input type="radio" id="rb-txt_{{feature}}"   name="input_type" value="{{feature}}"    /> {% if input_type ==feature %} <i class="fa fa-check-square"></i> {% else %} <i class="fa fa-square-o"></i> {% endif %} &nbsp; <strong>{% if feature == "SDI" %} SDI-1 {% else %}{{feature}} {% endif %} Naming </strong>
                                                          </label>
                                                                
                                                      {% endfor %}

                                                     </div>


                                                     <div style="height:15px;" > </div>
                                                     <div class="table-responsive" style="width:250px;text-align:left;" > 
                                                        <table class="table table-striped" >
                                                                <tr>
                                                                  <td style="vertical-align:middle; text-align:right;" > 
                                                                       <a href="#" data-toggle="tooltip" title="This is Channel Number"><i class="fa fa-info-circle"></i> </a>
                                                                       <span class="channel-btn-name" >XX</span>
                                                                  </td >
                                                                   <td>
                                                                        <div style="border:1px solid #999;padding:3px; text-align:center; vertical-align:middle; "> 
                                                                           <a href="#" data-toggle="tooltip" title="Text will be displayed on line one of front panel."> <i class="fa fa-info-circle"></i> </a>
                                                                           <input type="text" name="s_label1_XX"  id="s_label1_XX" value ="Label 1" size="8" maxlength="8" class="ch_naming" disabled="disabled"  >   </div>
                                                                        <div style="border:1px solid #999; padding:3px; text-align:center; vertical-align:middle;">
                                                                           <a href="#" data-toggle="tooltip" title="Text will be displayed on line two of front panel."><i class="fa fa-info-circle"></i> </a>
                                                                           <input type="text" name="s_label2_XX"  id="s_label2_XX" value ="Label 2" size="8" maxlength="8"  class="ch_naming" disabled="disabled" >   </div>
                                                                   </td>
                                                                </tr>
                                                        </table>
                                                     </div>

                                                {% if input_type_id != 27 %}
                                                     <div class="table-responsive" style="overflow:auto;" >

                                                        <div style="width:100%; overflow:auto;" >

                                                        <table class="table table-striped">
                                                            {% if channels %}
                                                                <tr>

                                                                {% for channel in channels %}
                                                                  <td style="vertical-align:middle; text-align:right;" >
                                                                       <span class=
                                                                          {% if channel.id < 10 %}
                                                                              {% if channel.audio_id == 6 %}
                                                                                  "channel-btn-name">
                                                                              {% else %}
                                                                                  "channel-btn-name">
                                                                              {% endif %}
                                                                              0{{ channel.id}}
                                                                           {% else %}
                                                                              {% if channel.audio_id == 6 %}
                                                                                   "channel-btn-name">
                                                                              {% else %}
                                                                                   "channel-btn-name">
                                                                              {% endif %}
                                                                              {{ channel.id}}
                                                                           {% endif %}
                                                                       </span>
                                                                   </td>
                                                                  <td>
                                                                        <div style="border:1px solid #999;padding:3px; text-align:center; vertical-align:middle; ">
                                                                           <input type="hidden" name="ch_{{ channel.id }}"  id="ch_{{ channel.id }}" value ="{{ channel.id }}" size="8" maxlength="8" >
                                                                           <input type="text" name="label1_{{ channel.id }}"  id="label1_{{ channel.id }}" value ="{{ channel.name }}" size="8" maxlength="6" class="ch_naming" required onchange="checkInput(this)"  >   </div>
                                                                        <div style="border:1px solid #999; padding:3px; text-align:center; vertical-align:middle;">
                                                                           <input type="text" name="label2_{{ channel.id }}"  id="label2_{{ channel.id }}" value ="{{ channel.name2 }}" size="8" maxlength="6"  class="ch_naming" required >   </div>
                                                                   </td>

                                                                   {% if (channel.id % 8)  == 0 %}
                                                                      </tr>

                                                                      <tr>

                                                                   {% endif %}

                                                                {% endfor %}
                                                                </tr>

                                                            {% endif %}
                                                        </table>
                                                        </div>
                                                    </div>

                                                {% else %}
        <div class="table-responsive" style="overflow:auto;" >

        <div style="width:100%; overflow:auto;" >


                                                        <!--  Accordion start -->
                                    <div class="panel-group" id="accordion">



                                        {% set counter = 1 %}
                                        {% set grp_counter = 0 %}
                                        {% set create_header = 0 %}

                                        {% for channel in channels %}
                                            {% if create_header == 0 %}

                                                {% set grp_counter = grp_counter + 1 %}
                                                {% set create_header = 1 %}
                                                <div class="panel panel-default">
                                                    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse{{ channel.id }}">
                                                        <h4 class="panel-title"><a class="accordion-toggle">Channels {{ channel.id }} -  {{ grp_counter * 64 }}</a></h4>
                                                    </div>

                                                    <div id="collapse{{ channel.id }}" class="panel-collapse collapse {% if  grp_counter == 1 %}in {% endif %}">
                                                        <div class="panel-body">
                                                             <table class="table table-striped">
                                                                <tr>

                                            {% endif %}


                                                                  <td style="vertical-align:middle; text-align:right;" >
                                                                       <span class=
                                                                          {% if channel.id < 10 %}
                                                                              {% if channel.audio_id == 6 %}
                                                                                  "channel-btn-name">
                                                                              {% else %}
                                                                                  "channel-btn-name">
                                                                              {% endif %}
                                                                              0{{ channel.id}}
                                                                           {% else %}
                                                                              {% if channel.audio_id == 6 %}
                                                                                   "channel-btn-name">
                                                                              {% else %}
                                                                                   "channel-btn-name">
                                                                              {% endif %}
                                                                              {{ channel.id}}
                                                                           {% endif %}
                                                                       </span>
                                                                   </td>
                                                                  <td>
                                                                        <div style="border:1px solid #999;padding:3px; text-align:center; vertical-align:middle; ">
                                                                           <input type="hidden" name="ch_{{ channel.id }}"  id="ch_{{ channel.id }}" value ="{{ channel.id }}" size="8" maxlength="8" >
                                                                           <input type="text" name="label1_{{ channel.id }}"  id="label1_{{ channel.id }}" value ="{{ channel.name }}" size="8" maxlength="6" class="ch_naming" required onchange="checkInput(this)"  >   </div>
                                                                        <div style="border:1px solid #999; padding:3px; text-align:center; vertical-align:middle;">
                                                                           <input type="text" name="label2_{{ channel.id }}"  id="label2_{{ channel.id }}" value ="{{ channel.name2 }}" size="8" maxlength="6"  class="ch_naming" required >   </div>
                                                                   </td>

                                                                   {% if (channel.id % 8)  == 0 %}
                                                                      </tr>
                                                                       <tr>
                                                                   {% endif %}

                                            {% if counter == 64 %}
                                                                    </tr>
                                                                 </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% set counter = 1 %}
                                                {% set create_header = 0 %}
                                            {% else %}
                                                {% set counter = counter + 1 %}
                                            {% endif %}
                                        {% endfor %}


                                    </div>



                                                        <!--  Accordion End -->

        </div>
        </div>




                                    {% endif %}

                                       <div style="height:20px;"></div>
                                       <div class="tab-pane-responsive active" id="monitor1">
                                          <div class="table " > 
                                              <input type="hidden" name="submit_button" id="submit_button"  >
                                             <ul class="horizontal-list"  >

                                                <li>
                                                   <a href="#db-modal" class="modal-toggle" data-toggle="modal" id="ref_submit_left" >
                                                   <div class="button-box">
                                                   <span class="submit-button" >
                                                      <button class='btn btn-primary btn-md'  type="submit"  id="btn-save" value="save_namming" >
                                                         <a href="#" data-toggle="tooltip" style="color:white;" title="Labels will be saved."><i class="fa fa-info-circle"></i> </a>
                                                         Save
                                                      </button>
                                                   </span>
                                                   </div>
                                                   </a>
                                                </li>
                                                <li>
                                                   <div class="button-box">
                                                   <span class="submit-button" >   
                                                      <button type="button" class="btn btn-primary btn-md"  id="btn-save-down" value="apply_preset" >
                                                         <a href="#" data-toggle="tooltip" style="color:white;" title="Labels will be saved and Preset Labels will be updated."><i class="fa fa-info-circle"></i> </a>
                                                         Save & Apply to Presets
                                                      </button>
                                                   </span>
                                                   </div>
                                                </li>

                                             </ul>
                                          </div > 
                                         
 
                                       </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>




                <div class="modal fade" id="db-modal" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
                   <div class="modal-dialog modal-md">
                      <div class="modal-content">
                        <div class="modal-header label-primary" style="color:#fff; font-size:1.4em;" >
                            <a href="#" data-dismiss="modal" aria-hidden="true" class="close"><span class="fa fa-close"></span></a>
                             <label  for="lbl_confirmation_header"  >Save & Apply to Presets </label> 
                        </div>
                        <div class="modal-body">
                            <label class="text-warning" for="lbl_confirmation_text" ><h4> All Labels of the Presets are going to be updated. Are you sure  you want to save and update all labels?</h4></label>
                            <p><h4>Note : There is not undo. </h4> </p>
                        </div>
                        <div class="modal-footer" style=""  >
          
                          <table>
                          <tr>
                          <td style="width:80%;">&nbsp; </td> 
                          <td style="width:10%;">
                          <a href="#" id="btnYes" class="btn confirm" >
                           <button class='btn btn-success btn-md' ><span class="fa fa-check"></span> &nbsp; Yes</button>
                          </a>
                          </td>
                          <td style="width:10%;">
                          <a href="#" id="btnNo" data-dismiss="modal" aria-hidden="true" class="btn secondary" >
                           <button class='btn btn-danger' data-dismiss="modal" ><span class="fa fa-close"></span> &nbsp; No</button>
                          </a>
                          </td>
                          </tr>
                          </table>

                        </div>
                      </div>
                    </div>
                </div>




                 <div id="updating-modal" class="modal fade" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true" >
                   <div class="modal-dialog">
                       <div class="modal-content">
                          <div class="modal-header" style="text-align: center">
                              <h3>
                                 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>

                                        </form >
                <div style='height:300px;'></div>
                <!-- /.row -->

{% endblock %}