@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.alert_type')}} </h4><br>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <select id="alert_type" name="alert_type"  class="form-control">
                        <option value="temp" selected="">{{__('strings.temp_alert')}}</option>
                        <option value="ph">{{__('strings.ph_alert')}}</option>
                    </select>                                    
                </div>
                <hr>
                
                <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.min_max_values')}} </h4><br>
                        </div>

                            <div class="form-group">
                                <label class="control-label col-md-12" for="range_sensor"></label>
                                <div class="col-md-12">
                                    <input type="text" id="range_sensor" value="" name="range" />
                                </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@example.com" required="required" class="form-control col-md-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@example.com" required="required" class="form-control col-md-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@example.com" required="required" class="form-control col-md-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@example.com" required="required" class="form-control col-md-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@example.com" required="required" class="form-control col-md-12 has-feedback-left" ></div><div class="ln_solid"></div><div class="title_left">