@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 alertData = {!!$alert!!};
    var idAlert = {!!$alert->id!!};
    var lang = [];
    var session = {ID: "{!!Auth::user()->ID!!}", TOKEN: "{!!Auth::user()->TOKEN!!}"};
</script>
@endpush

@section('content')
<div class="card">
    <div class="card-header">
        <h1 class="form-section"><br>{{$alert['alert']['alias']}} </h1><br>
    </div>
    <div class="col-md-12">

        <div class="card-header">
            <h4 class="form-section"><br>{{__('strings.modify_temp_interval')}} </h4><br>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h5></h5>
                <div class="col-md-4 col-sm-12 col-xs-12">
                    <select onchange="showDeviceData()" id="id_device_select"  class="form-control">
                        <option>{{__('strings.select_a_device')}}</option>
                                            </select>                                    
                </div>
                <div class="clearfix"></div><br>
                <div class="form-group">
                    <label class="control-label " for="range_sensor"></label>
                    <div class="">
                        <input type="text" id="range_sensor" value="" name="range" />
                    </div>
                </div>
                <div class="ln_solid"></div><br><br>
                <div class="clearfix"></div><br>
            </div>
            <br>

            <div class="card-header">
                <h4 class="form-section">{{__('strings.email_editing')}} </h4>
            </div>
            <form class="form-horizontal form-label-left" >
                                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                        <button type="button" id="btn_add_alert"   class="btn btn-primary" onclick="apiCall()">{{__('strings.submit_upgrade')}}</button>
                    </div>
                </div>

            </form>

        </div>
    </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.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/bootbox.min.js')}}" type="text/javascript"></script>

<script>
var rangeSensor;

$(document).ready(function () {

  rangeSensor = $("#range_sensor").ionRangeSlider({
    type: "double",
    grid: true,
    min: -128,
    max: 127,
    from: 0,
    to: 1,
    postfix: "°",
    onChange: function(data){
        var imei = document.getElementById("id_device_select").value;
        alertData.alert.devices[imei].t_min = data.from;
        alertData.alert.devices[imei].t_max = data.to;
    }
});
});          
   
function showDeviceData() {
    var imei = document.getElementById("id_device_select").value;
    rangeSensor.data("ionRangeSlider").update({
         from : alertData.alert.devices[imei].t_min , 
         to: alertData.alert.devices[imei].t_max 
     });
}
    
function apiCall() {   
    alertData.alert.time_level2 = document.getElementById("min6").value;
    alertData.alert.time_level3 = document.getElementById("min11").value;

    for(var i=1;i<=15;i++) {
        alertData.alert.emails["email_"+i] = document.getElementById("email" + i).value;
    }

    $("btn_add_alert").prop( "disabled", true );
    $.showPreloader("");
    $.ajax({
          url: "{{route('update_temp_alert')}}",
          type: "POST",
          contentType: "application/json",
          data:  JSON.stringify({
                token: "{!!Auth::user()->TOKEN!!}",
                id_alert: alertData.id,
                alert: alertData.alert
            }),
            dataType: "json",
            success: function(json) {
                $.hidePreloader();
                bootbox.alert({
                     message: "{{__('strings.update_success')}}",
                     callback: function () {
                        window.location.replace("{{route('temp_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){
                console.log(err);                
                $("btn_add_alert").prop( "disabled", false );
                $.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