@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>{{__('strings.update_speed_alert')}} </h1>
    </div>
    <div class="col-md-12">
        <form method="post" action="{{route('post_edit_speed_alert',["alert_id"=>$alert->id])}}">
            {{ csrf_field() }}
            <div class="card-header">
                <h4 class="form-section">Alias</h4>
            </div>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">ALIAS</span>
                </div>
                <input type="text" id="alias" name="alias" class="form-control" required="required"  maxlength="64" value="{{$alert->alias}}">
            </div>
            <div class="card-header">
                <h4 class="form-section">{{__('strings.devices')}} </h4>
            </div>
            <div class="table-responsive">
                <table id="devices-table" class="table hover mb-0">
                    <thead class="thead-inverse">
                        <tr>
                            <th>IMEI</th>
                            <th>Alias</th>
                        </tr>
                    </thead>
                    <tbody>                       
                        <tr>
                            <td>{{$alert->device->IMEI}}</td>
                            <td>{{$alert->device->ALIAS}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="clearfix"></div><br>

            <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">{{__('strings.max_speed')}}</span>
                    </div>
                    <input type="number" min="0" max="240" value="{{$alert->max_speed}}" id="max_speed" name="max_speed" class="form-control" required="required" >
                </div>
            </div>
            
            <div class="ln_solid"></div>
            <div class="card-header">
                <h4 class="form-section">{{__('strings.email_editing')}} </h4>
            </div>

            <div id="emails">            
                @foreach($alert->emails as $email)
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;</span>
                    </div>
                    <input type="email" id="emails[]" name="emails[]" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-12" value="{{$email}}" >
                </div>
                @endforeach
            </div>

            <div class="form-group">
                <span class="float-sm-right">
                    <button  type="button" class="btn btn-success" onclick="addEmailField()"><i class="fa fa-plus"></i></button>
                </span>                    
            </div>

            <div class="form-group">
                <div class="col-md-12 col-md-offset-3">
                    <input type="submit" class="btn btn-primary" value="{{__('strings.submit_update')}}">
                </div>
            </div> 

        </form>
    </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>

/**
 * Add email field to documente
 * @returns {undefined}
 */
function addEmailField() {
    $("#emails").append( '<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;</span> </div> <input type="email" id="emails[]" name="emails[]" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-12" ></div>');
}     
</script>

@endpush