{% extends 'base.html.twig' %}

{% block body_id 'bled' %}

{#
    the homepage is a special page which displays neither a header nor a footer.
    this is done with the 'trick' of defining empty Twig blocks without any content
#}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/colorpicker/css/bootstrap-colorpicker.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/colorpalette/bootstrap-colorpalette.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/css/vendor/bootstrap-checkbox.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/css/vendor/bootstrap/bootstrap-dropdown-multilevel.css') }}">
{% endblock %}
{% block header %}
{% endblock %}

{% block modal %}
    {{ parent() }}
    <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
      <div class="md-content">
      <h3>ERROR</h3>   
      <div id="id-msg-err" class="tile-body nopadding rounded-corners">
      </div>
      <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
      </div>
    </div>

{% endblock %}

{% block body %}



    <!-- Wrap all page content here -->
    <div id="wrap">    
      <!-- Make page fluid -->
      <div class="row">
        <!-- Page content -->
        <div id="content" class="col-md-12">
          <!-- page header -->
          <div class="pageheader">
            

            <h2><i class=" fa fa-lightbulb-o" style="line-height: 48px;padding-left: 1px;"></i> Balance Light  <span>// Support & Managment</span></h2>
            

            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="index.html">Minimal</a></li>
                <li><a href="form-elements.html">Forms</a></li>
                <li class="active">Form Elements</li>
              </ol>
            </div>


          </div>
          <!-- /page header -->
          
          




          <!-- content main container -->
          <div class="main">




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

              <!-- col 12 -->
              <div class="col-md-6">



                <!-- tile -->
                <section class="tile color transparent-black">



                  <!-- tile header -->
                  <div class="tile-header">
                    <h1><strong>Light </strong> Services</h1>

                    <div class="controls">
                      <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->

                  <!-- tile widget -->
                  <div class="tile-widget bg-transparent-black-2">
                    <div class="row">
                      
                      <div class="col-sm-4 col-xs-6">
                        <div class="input-group table-options">
                          <span class="input-group-btn">
                          </span>
                        </div>
                      </div>

                      <div class="col-sm-8 col-xs-6 text-right">
                        

                      </div>


                    </div>
                  </div>
                  <!-- /tile widget -->



                  <!-- tile body -->
                  <div class="tile-body nopadding">
                    
                    <table class="table table-bordered table-sortable">
                      <thead>
                        <tr>
                          <th width="64">
                            <div class="checkbox check-transparent">
                              <input type="checkbox" value="1" id="allchck">
                              <label for="allchck"></label>
                            </div>
                          </th>
                          <th width="182">{{ 'Service'|trans }}</th>
                          <th width="258">{{ 'Desciption'|trans }}</th>
                          <th width="258">{{ 'Color'|trans }}</th>
                          <th width="64" style="width: 30px;">{{ 'Status'|trans }}</th>
                        </tr>
                      </thead>
                      <tbody>


                        {% for bledctrl in bledlist %}
                          <tr>
                            <td>
                              <div class="checkbox check-transparent">
                                <input type="checkbox" value="{{ bledctrl.id }}" id="chck{{ loop.index }}">
                                <label for="chck{{ loop.index }}"></label>
                              </div>
                            </td>
                            <td>{{ bledctrl.service }}</td>
                            <td>{{ bledctrl.desciption }}</td>
                            <td>{{ bledctrl.name }}</td>
                            <td>
                              <div class="onoffswitch labeled {{ bledctrl.color }}">
                                <input type="checkbox" name="onoffswitch" data-offcmd="{{ bledctrl.offcmd }}" class="onoffswitch-checkbox" id="myonoffswitch{{ loop.index }}" value="{{ bledctrl.cmd }}" {% if bledctrl.checked %}checked="checked"{% endif %}>
                                <label class="onoffswitch-label" for="myonoffswitch{{ loop.index }}">
                                      <span class="onoffswitch-inner"></span>
                                      <span class="onoffswitch-switch"></span>
                                    </label>
                              </div>
                            </td>
                          </tr>
                        {% endfor %} 
                      </tbody>
                    </table>

                  </div>
                  <!-- /tile body -->


                  <!-- tile footer -->
                  <div class="tile-footer bg-transparent-black-2 rounded-bottom-corners">
                    <div class="row">  
                      
                      <div class="col-sm-4">
                        <div class="input-group table-options">
                          <span class="input-group-btn">
                          </span>
                        </div>
                      </div>

              <!--        <div class="col-sm-4 text-center">
                        <small class="inline table-options paging-info">showing 1 of 2 items</small>
                      </div>

                      <div class="col-sm-4 text-right sm-center">
                        <ul class="pagination pagination-xs nomargin pagination-custom">
                          <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
                        </ul>
                      </div> -->

                    </div>
                  </div>
                  <!-- /tile footer -->
                  
                


                </section>
                <!-- /tile -->




              </div>
              <!-- /col 6 -->


              <!-- col 12 -->
              <div class="col-md-6">


                <!-- tile -->
                <section class="tile color transparent-white">



                  <!-- tile header -->
                  <div class="tile-header">
                    <h1><strong> Light </strong> Balance Manager</h1>
                    <div class="controls">
                      <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->

                  <!-- tile body -->
                  <div class="tile-body">
                    
                    <div class="form-horizontal" role="form">
                      
                      <div class="form-group">
                        <label for="input01" class="col-sm-4 control-label">SERVIZIO</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="input01">
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label for="datepicker" class="col-sm-4 control-label">Termine di validitĂ  servizio</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="datepicker">
                        </div>
                      </div>

                       <div class="form-group">
                        <label for="input08" class="col-sm-4 control-label">Selezione Multipla Canali</label>
                        <div class="col-sm-8">
                          <select multiple class="chosen-select chosen-transparent form-control" id="input02">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                          </select>
                          <span class="help-block">Seleziona Gruppo Canali  <code> .RGB </code> &nbsp; &nbsp;che vuoi gestire.</span>
                        </div>
                      </div>


                      <div class="form-group">
                        <label for="colorpicker-rgb" class="col-sm-4 control-label">Colorpicker RGB field</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="colorpicker-rgb">
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="col-sm-4 control-label">Colorpalette</label>
                        <div class="col-sm-8">
                          <div class="input-group">
                            <input type="text" class="form-control" id="color" name="color" readonly>
                            <div class="input-group-btn">
                              <button type="button" class="btn btn-greensea dropdown-toggle" data-toggle="dropdown"><i class="fa fa-tint"></i></button>
                              <ul class="dropdown-menu pull-right">
                                <li>
                                  <div id="event-colorpalette" data-return-color="#color"></div>
                                </li>
                              </ul>
                            </div><!-- /btn-group -->
                          </div><!-- /input-group -->
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="colorpicker-rgb" class="col-sm-4 control-label">Carica file de per aggiungere &quot;procedure&quot;</label>
                        <div class="col-sm-8">
                          <div class="input-group">
                            <span class="input-group-btn">
                              <span class="btn btn-primary btn-file">
                                <i class="fa fa-upload"></i><input type="file" multiple>
                              </span>
                            </span>
                            <input type="text" class="form-control" readonly>
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="col-sm-4 control-label">Condizioni di lavoro</label>
                        <div class="col-sm-8">
                          <div class="checkbox check-transparent">
                            <input type="checkbox" value="1" id="opt03" checked>
                            <label for="opt03">Salva come Servizio </label>
                          </div>
                          <div class="checkbox check-transparent">
                            <input type="checkbox" value="1" id="opt04">
                            <label for="opt04">Attiva come test</label>
                          </div>
                          <div class="checkbox check-transparent">
                            <input type="checkbox" value="1" id="opt05">
                            <label for="opt05">Esegui una volta </label>
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="col-sm-4 control-label">Light Balance Action</label>
                        <div class="col-sm-8">
                          <div class="radio radio-transparent">
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                            <label for="optionsRadios1">Intermittenza Di Servizio 3sec+2sec. spento</label>
                          </div>
                          <div class="radio radio-transparent">
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                            <label for="optionsRadios2">Intermittenza veloce - Intervallo 2 secondi</label>
                          </div>
                          <div class="radio radio-transparent">
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                            <label for="optionsRadios3">Luce fissa </label>
                          </div>
                        </div>
                      </div>

                      <div class="form-group form-footer footer-white">
                        <div class="col-sm-offset-4 col-sm-8">
                          <button type="submit" class="btn btn-greensea">Submit</button>
                          <button type="reset" class="btn btn-red">Reset</button>
                        </div>
                      </div>
                            
                    </div>

                  </div>
                  <!-- /tile body -->
                  
                


                </section>
                <!-- /tile -->




              </div>
              <!-- /col 6 -->


              
            </div>
            <!-- /row -->




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

              <!-- col 12 -->
              <div class="col-md-12">
              

                

                







              </div>
              <!-- /col 12 -->


            </div>
            <!-- /row -->
          


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






        </div>
        <!-- Page content end -->
      </div>
      <!-- Make page fluid-->
    </div>
    <!-- Wrap all page content end -->




{% endblock %}
{% block javascripts %}
{{ parent() }}

    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/colorpicker/bootstrap-colorpicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/colorpalette/bootstrap-colorpalette.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/blockui/jquery.blockUI.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/sparkline/jquery.sparkline.min.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/nicescroll/jquery.nicescroll.min.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/bootstrap/bootstrap-dropdown-multilevel.js') }}"></script>    

    <script>

    //initialize file upload button function
    $(document)
      .on('change', '.btn-file :file', function() {
        var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });


    $(function(){

      //load wysiwyg editor
      $('#input06').summernote({
        toolbar: [
          //['style', ['style']], // no style button
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['height', ['height']],
          //['insert', ['picture', 'link']], // no insert buttons
          //['table', ['table']], // no table button
          //['help', ['help']] //no help button
        ],
        height: 137   //set editable area's height
      });

      //chosen select input
      $(".chosen-select").chosen({disable_search_threshold: 10});

      //initialize datepicker
	  
				var today = new Date();
				var dd = today.getDate();

				var mm = today.getMonth()+1; 
				var yyyy = today.getFullYear();
				if(dd<10) 
				{
					dd='0'+dd;
				} 

				if(mm<10) 
				{
					mm='0'+mm;
				} 

				today = mm+'/'+dd+'/'+yyyy; 
				
      $('#datepicker').datetimepicker({
	  defaultDate: today,
	  format: "DD/MM/YYYY",
        icons: {
		
          time: "fa fa-clock-o",
          date: "fa fa-calendar",
          up: "fa fa-arrow-up",
          down: "fa fa-arrow-down"
        }
      });

      $("#datepicker").on("dp.show",function (e) {
        var newtop = $('.bootstrap-datetimepicker-widget').position().top - 45;      
        $('.bootstrap-datetimepicker-widget').css('top', newtop + 'px');
      });

      //initialize colorpicker
      $('#colorpicker').colorpicker();

      $('#colorpicker').colorpicker().on('showPicker', function(e){
        var newtop = $('.dropdown-menu.colorpicker.colorpicker-visible').position().top - 45;      
        $('.dropdown-menu.colorpicker.colorpicker-visible').css('top', newtop + 'px');
      });

      //initialize colorpicker RGB
      $('#colorpicker-rgb').colorpicker({
        format: 'rgb'
      });

      $('#colorpicker-rgb').colorpicker().on('showPicker', function(e){
        var newtop = $('.dropdown-menu.colorpicker.colorpicker-visible').position().top - 45;      
        $('.dropdown-menu.colorpicker.colorpicker-visible').css('top', newtop + 'px');
      });

      //initialize file upload button
      $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

            console.log(log);
        
        if( input.length ) {
          input.val(log);
        } else {
          if( log ) alert(log);
        }
        
      });

      // Initialize colorpalette
      $('#event-colorpalette').colorPalette({ 
        colors:[['#428bca', '#5cb85c', '#5bc0de', '#f0ad4e' ,'#d9534f', '#ff4a43', '#22beef', '#a2d200', '#ffc100', '#cd97eb', '#16a085', '#FF0066', '#A40778', '#1693A5']] 
      }).on('selectColor', function(e) {
        var data = $(this).data();

        $(data.returnColor).val(e.color);
        $(this).parents(".input-group").css("border-bottom-color", e.color );
      });
      $('.onoffswitch-checkbox').change(function(event) {
        if ($(this).is(":checked")) {
          $('.onoffswitch-checkbox').not(this).attr("checked", false);
          $.ajax(
            {
              url: "{{ path('bledcmd_api') }}",
              type:"PUT",
              dataType: 'json',
              contentType: 'application/json',              
              data: {"err":"0","light-cmd":$(this).val()}
            }
          )
          .done(function(v) {
            alert("OK: " + JSON.stringify(v));
          })
          .fail(function(v) {
            alert("ERR: " + JSON.stringify(v));
          })
          .always(function() {
            console.log('..... OK');
          });       
        }
        else {
          $.ajax(
            {
              url: "{{ path('bledcmd_api') }}",
              type:"PUT",
              dataType: 'json',
              contentType: 'application/json',              
              data: {"err":"0","light-cmd":$(this).data('offcmd')}
            }
          )
          .done(function(v) {
            alert("OK: " + JSON.stringify(v));
          })
          .fail(function(v) {
            alert("ERR: " + JSON.stringify(v));
          })
          .always(function() {
            console.log('..... OK');
          });       
        
        }
      });
      
    })
      
    </script>
  
{% endblock %}

{% block footer %}
{% endblock %}