@extends('layouts.main')

@push('styles')
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/handsontable.full.css')}}" />
<script src="{{asset('js/handsontable.full.js')}}" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{{asset('css/ion.rangeSlider.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/ion.rangeSlider.skinFlat.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/custom.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/bootbox.min.css')}}" />
<script>
    var hotData = {!!$devices!!};
    var lang = [];
    var session = {ID: "{!!Auth::user()->ID!!}", TOKEN: "{!!Auth::user()->TOKEN!!}"};
</script>
@endpush

@section('content')
        <div class="card">
            <div class="col-md-12">
            <div class="card-header">
                <h4 class="form-section"><br>{{__('strings.select_devices')}} </h4><br>
            </div>
                <!-- Tabs -->
                <div class="col-md-12">
                    

                        <form >
                        <div class="col-md-12">                            
                            <div class="input-group">
                                <div class="ln_solid"></div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">ALIAS</span>
                                    </div>
                                    <input type="text" id="alias" class="form-control" required="required"  maxlength="64">
                                </div>
                            </div>
                            <div class="input-group" >
                                <input id="search_field" type="search" class="form-control" placeholder="Search">
                                <span class="input-group-btn">
                                    <button id="search_button" class="btn btn-default" type="button"><span class="fa fa-search " aria-hidden="true"></span></button>
                                </span>                                
                            </div>
                            <div  id="data" style="width:100%; height: 450px; overflow: hidden"></div>
                        </div>

                        
                        <div class="clearfix"></div>
                        <div class="ln_solid"></div>
                        <div class="card-header">
                            <h4 class="form-section"><br>{{__('strings.emails_configuration')}} </h4><br>
                        </div>
                            <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;1</span> </div>        <input type="text" id="email1" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;2</span> </div>        <input type="text" id="email2" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;3</span> </div>        <input type="text" id="email3" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;4</span> </div>        <input type="text" id="email4" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;5</span> </div>        <input type="text" id="email5" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;6</span> </div>        <input type="text" id="email6" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;7</span> </div>        <input type="text" id="email7" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;8</span> </div>        <input type="text" id="email8" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;9</span> </div>        <input type="text" id="email9" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div><div class="input-group"> <div class="input-group-prepend"><span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;10</span> </div>        <input type="text" id="email10" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-7 col-xs-12 has-feedback-left" ></div>                            <div class="ln_solid"></div>
                            <div class="form-group">
                                <div class="col-md-12 col-md-offset-3">
                                    <button id="btn_add_alert" type="button" class="btn btn-primary" onclick="apiCall()">{{__('strings.submit_update')}}</button>
                                </div>
                            </div>   
                        </form>

                </div>
                <!-- End SmartWizard Content -->
            </div>
        </div>
@endsection

@push('scripts')
<script src="{{asset('js/jquery.smartWizard.js')}}" type="text/javascript"></script>
<script src="{{asset('js/ion.rangeSlider.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/jquery.knob.js')}}" type="text/javascript"></script>
<script src="{{asset('js/custom.js')}}" type="text/javascript"></script>
<script src="{{asset('js/bootbox.min.js')}}" type="text/javascript"></script>

<script>
var hot,
    container,
    searchField,
    rangeSensor;
    
    searchField = document.getElementById('search_field');
    searchButton = document.getElementById('search_button');
    container = document.getElementById('data');
    $(document).ready(function () {   
      Handsontable.Dom.addEvent(searchField, 'keyup', function(event) {
          if(event.keyCode == 13) {
              hot.search.query(this.value);
              hot.render();
          }        
      });
      Handsontable.Dom.addEvent(searchButton, 'click', function(event) {
          hot.search.query(searchField.value);
              hot.render();       
      });
      rangeSensor = $("#range_sensor").ionRangeSlider({
        type: "double",
        grid: true,
        min: -128,
        max: 127,
        from: 10,
        to: 20,
        postfix: "°"
    });
  });
    
    hot = new Handsontable(container, {
        data: hotData,
        colHeaders: ['IMEI', 'ALIAS', ''],
        columns: [
            {data: 'imei', editor: false},      
            {data: 'alias', editor: false},
            {data: 'selected',type: 'checkbox', checkedTemplate: '1',uncheckedTemplate: '0'}
        ],
        rowHeaders: true,
        contextMenu: true,
        stretchH: 'all',
        search:{callback: searchInData}
      });
      
   
    function searchInData(instance, row, col, value, result) {
        Handsontable.Search.DEFAULT_CALLBACK.apply(this, arguments);
        if (result) {
          instance.selectCell(row,col);
          instance.deselectCell(row,col);
        }
    }
    
    /**
     * Sent alert to server
     * @returns {undefined}
     */
    function apiCall() {
        var data = hot.getData();
        var alias = document.getElementById("alias").value;        
        
        if(alias == "") {
            bootbox.alert("Establece el alias de la alerta").find('.modal-content').css({
                'margin-top': function (){
                    var w = $( window ).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w-b)/2;
                    return h+"px";
                }
            });
            return;
        }
        
        var hotJson = {};
        for(var id in hotData) {
            hotJson[hotData[id].imei] = hotData[id]; 
        }
        // detect selected devices
        // detect selected devices
        var devices = {};
        for(var id in data) {
            if(data[id][2] == "1") {   
                var key ='' + data[id][0];                
                devices[key] = hotJson[key];
            }
        }
        
        if(Object.keys(devices).length == 0) {
            
            bootbox.alert("Selecciona al menos un dipositivo").find('.modal-content').css({
                'margin-top': function (){
                    var w = $( window ).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w-b)/2;
                    return h+"px";
                }
            });
            return;
        }
        
        var emails = {
            email_1:document.getElementById("email1").value,
            email_2:document.getElementById("email2").value,
            email_3:document.getElementById("email3").value,
            email_4:document.getElementById("email4").value,
            email_5:document.getElementById("email5").value,
            email_6:document.getElementById("email6").value,
            email_7:document.getElementById("email7").value,
            email_8:document.getElementById("email8").value,
            email_9:document.getElementById("email9").value,
            email_10:document.getElementById("email10").value
        };
        
        $("#btn_add_alert").prop( "disabled", true );
        
        $.showPreloader("");
        $.ajax({
              url: "{{route('add_light_alert')}}",
              type: "POST",
              contentType: "application/json",
              data:  JSON.stringify({
                    token: session["TOKEN"],
                    id_client: session["ID"],
                    alias: alias,
                    devices: devices,
                    emails: emails
                }),
                dataType: "json",
                success: function(response) {
                    $.hidePreloader();
                    bootbox.alert({
                             message:"{{__('strings.success_registration')}}",
                             callback: function () {
                                window.location.replace("{{route('light_alerts_view')}}");
                            }
                         }).find('.modal-content').css({
                            'margin-top': function (){
                                var w = $( window ).height();
                                var b = $(".modal-dialog").height();
                                // should not be (w-h)/2
                                var h = (w-b)/2;
                                return h+"px";
                            }
                        });
                },
                error: function(err){
                    $("#btn_add_alert").prop( "disabled", false );
                    console.log(err);
                    $.hidePreloader();
                    bootbox.alert("{{__('strings.app_error')}}").find('.modal-content').css({
                        'margin-top': function (){
                            var w = $( window ).height();
                            var b = $(".modal-dialog").height();
                            // should not be (w-h)/2
                            var h = (w-b)/2;
                            return h+"px";
                        }
                    });
                }
          });
        
    }
</script>
@endpush