@extends('layouts.main')
@section('content')
<div class="row">
	 <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                <div class="card-block">   
                        <div class="form-body">    
                            <div class="col-md-6">       
                                    <label for="imei">IMEI</label>
                                    <p class="form-control-plaintext">{{$device->IMEI}}</p>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="alias">Alias</label>
                                    <p class="form-control-plaintext">{{$device->ALIAS}}</p>
                                </div>   
                            </div>
                        </div> 
                </div>
            </div>
        </div>
    </div>
</div>

@php $count = 1; @endphp
@foreach ($device->tanks as $tank)  
<div class="row">
    <div class="col-md-12">        
        <div class="card">           
            <div class="card-body" style="min-height: 450px;">
                <div class="col-md-12"><h2>Sensor #{{$count}} </h2></div>
                @php $count++; @endphp
                <div class="col-md-6">
                    <form class="form">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="type_{{$tank->id}}">Tipo de tanque</label>
                            <select id="type_{{$tank->id}}" name="type_{{$tank->id}}" class="form-control" onchange="onTypeChange(this,'{{$tank->id}}')">
                                <option value="rectangle" {{$tank->type == "rectangle" ? "selected":""}}>Rectangular</option>
                                <option value="cylinder" {{$tank->type == "cylinder" ? "selected":""}}>Cilíndrico</option>
                                <option value="vertical_cylinder" {{$tank->type == "vertical_cylinder" ? "selected":""}}>Cilindro Vertical</option>
                                <option value="backpack" {{$tank->type == "backpack" ? "selected":""}}>Backpack</option>
                                <option value="horizontal_oval_tank" {{$tank->type == "horizontal_oval_tank" ? "selected":""}}>Oval Horizontal</option>
                            </select>
                        </div>
                        <input type="hidden" name="tank_id_{{$tank->id}}" value="{{$tank->id}}">

                        <div class="form-group" id="width-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">Ancho <b>(W) cm.</b></label>
                            <input id="width_{{$tank->id}}" name="width_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->width}}" step="0.01">
                        </div>

                        <div class="form-group" id="height-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">Alto <b>(H) cm.</b></label>
                            <input id="height_{{$tank->id}}" name="height_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->height}}" step="0.01">
                        </div>

                        <div class="form-group" id="length-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">Largo <b>(L) cm.</b></label>
                            <input id="length_{{$tank->id}}" name="length_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->length}}" step="0.01">
                        </div> 

                        <div class="form-group" id="capacity-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">Capacidad Máxima <b>(Litros)</b></label>
                            <input id="capacity_{{$tank->id}}" name="capacity_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->max_capacity}}" step="0.01">
                        </div> 

                        <div class="form-group" id="capacity-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">{{__('strings.min_sensor')}} <b>(mm)</b></label>
                            <input id="min_sensor_{{$tank->id}}" name="min_sensor_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->min_sensor}}" step="0.01">
                        </div> 

                        <div class="form-group" id="capacity-div_{{$tank->id}}">
                            <label for="normal-input" class="form-control-label">{{__('strings.max_sensor')}} <b>(mm)</b></b></label>
                            <input id="max_sensor_{{$tank->id}}" name="max_sensor_{{$tank->id}}" type="number"  class="form-control" value="{{$tank->max_sensor}}" step="0.01">
                        </div> 
                    </form>
                </div>
                <div class="col-md-6">
                    <img id="tank-image_{{$tank->id}}"  class="img-fluid mx-auto d-block p-4" src="{{asset('images/')}}/{{$tank->type}}-tank.png">                        		
                </div>
                <div class="col-md-12">
                    <div class="form-group col-md-6">
                        <input type="submit" class="btn btn-success btn-block" value="{{__('strings.submit_upgrade')}}" onclick="updateTankRequest('{{$tank->id}}')">
                    </div>
                    <div class="form-group col-md-6">
                        <input type="submit" class="btn btn-danger btn-block" value="{{__('strings.submit_delete')}}" onclick="deleteTankRequest('{{$tank->id}}')">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endforeach

<div class="row">
    <div class="col-md-12">        
        <div class="card">           
            <div class="card-body"  id="tank-content" style="min-height: 450px; display:none;">
                    <div class="col-md-6">
                        <form class="form" method="post" action="{{route('add_fuel_tank_to_device')}}">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="type">Tipo de tanque</label>
                                <select id="type" name="type" class="form-control">
                                    <option value="rectangle">Rectangular</option>
                                    <option value="cylinder">Cilíndrico</option>
                                    <option value="vertical_cylinder">Cilindro Vertical</option>
                                    <option value="backpack">Backpack</option>
                                    <option value="horizontal_oval_tank">Oval Horizontal</option>
                                </select>
                            </div>
                            <input type="hidden" name="imei" value="{{$device->IMEI}}">
                            <div class="form-group" id="width-div">
                                <label for="normal-input" class="form-control-label">Ancho <b>(W) cm.</b></label>
                                <input id="width" name="width" type="number"  class="form-control" value="0" step="0.01">
                            </div>

                            <div class="form-group" id="height-div">
                                <label for="normal-input" class="form-control-label">Alto <b>(H) cm.</b></label>
                                <input id="height" name="height" type="number"  class="form-control" value="0" step="0.01">
                            </div>

                            <div class="form-group" id="length-div">
                                <label for="normal-input" class="form-control-label">Largo <b>(L) cm.</b></label>
                                <input id="length" name="length" type="number"  class="form-control" value="0" step="0.01">
                            </div>
                            <div class="form-group" id="length-div">
                                <label for="normal-input" class="form-control-label">Capacidad Máxima <b>(Litros)</b></label>
                                <input id="capacity" name="capacity" type="number"  class="form-control" value="0" step="0.01">
                            </div>


                            <div class="form-group" id="length-div">
                                <label for="normal-input" class="form-control-label">{{__('strings.min_sensor')}} <b>(mm)</b></label>
                                <input id="min_sensor" name="min_sensor" type="number"  class="form-control" value="0" step="0.01">
                            </div>


                            <div class="form-group" id="length-div">
                                <label for="normal-input" class="form-control-label">{{__('strings.max_sensor')}} <b>(mm)</b></label>
                                <input id="max_sensor" name="max_sensor" type="number"  class="form-control" value="0" step="0.01">
                            </div>
                            <div class="form-group">
                                <input type="submit" class="btn btn-primary btn-block" value="{{__('strings.submit_update')}}">
                            </div>
                        </form>
                    </div>
                    <div class="col-md-6">
                        <img id="tank-image"  class="img-fluid mx-auto d-block p-4" src="{{asset('images/rectangle-tank.png')}}">                        		
                    </div>
                </div>
            <div class="pull-right">
                <button class="col-md-4 btn btn-primary float-right m-1" onclick="$('#tank-content').toggle('slow');">{{__('strings.fuel_config')}}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('js/bootbox.min.js')}}" type="text/javascript"></script>
<script>

    $("#type").change(function(){
        if($(this).val() == "rectangle") {
            $("#tank-image").attr("src","{{asset('images/rectangle-tank.png')}}");
            $("#width-div").show("slow");
            $("#height-div").show("slow");
            $("#length-div").show("slow");
        } else if($(this).val() == "cylinder") {
            $("#tank-image").attr("src","{{asset('images/cylinder-tank.png')}}");
            $("#width-div").hide("slow");
            $("#length-div").show("slow");
        }else if($(this).val() == "vertical_cylinder") {
            $("#tank-image").attr("src","{{asset('images/vertical-cylinder-tank.png')}}");
            $("#length-div").hide("slow");
            $("#width-div").show("slow");
        } else if($(this).val() == "backpack") {
            $("#tank-image").attr("src","{{asset('images/backpack-tank.png')}}");
            $("#width-div").show("slow");
            $("#height-div").show("slow");
            $("#length-div").show("slow");
        } else if($(this).val() == "horizontal_oval_tank") {
            $("#tank-image").attr("src","{{asset('images/horizontal_oval_tank.png')}}");
            $("#width-div").show("slow");
            $("#height-div").show("slow");
            $("#length-div").show("slow");
        }
    });

    $(function(){
        $( "#type" ).trigger( "change" );
        @php $count = 1; @endphp
        @foreach ($device->tanks as $tank) 
            $( "#type_{{$tank->id}}" ).trigger( "change" );
        @endforeach
    });

    function onTypeChange(select, id) {
        if($(select).val() == "rectangle") {
            $("#tank-image_" + id).attr("src","{{asset('images/rectangle-tank.png')}}");
            $("#width-div_" + id).show("slow");
            $("#height-div_" + id).show("slow");
            $("#length-div_" + id).show("slow");
        } else if($(select).val() == "cylinder") {
            $("#tank-image_" + id).attr("src","{{asset('images/cylinder-tank.png')}}");
            $("#width-div_" + id).hide("slow");
            $("#length-div_" + id).show("slow");
        } else if($(select).val() == "vertical_cylinder") {
            $("#tank-image_" + id).attr("src","{{asset('images/vertical-cylinder-tank.png')}}");
            $("#length-div_" + id).hide("slow");
            $("#width-div_" + id).show("slow");
        } else if($(select).val() == "backpack") {
            $("#tank-image_" + id).attr("src","{{asset('images/backpack-tank.png')}}");
            $("#width-div_" + id).show("slow");
            $("#height-div_" + id).show("slow");
            $("#length-div_" + id).show("slow");
        } else if($(select).val() == "horizontal_oval_tank") {
            $("#tank-image_" + id).attr("src","{{asset('images/horizontal_oval_tank.png')}}");
            $("#width-div_" + id).show("slow");
            $("#height-div_" + id).show("slow");
            $("#length-div_" + id).show("slow");
        }
    }
    

    function deleteTankRequest(id) {
        $.showPreloader("{{__('strings.wait_momment')}}");    
        $.post("{{route('delete_device_fuel_tank')}}", {
            tank_id: id,
            user_token: "{{Auth::user()->TOKEN}}",
            imei: "{{$device->IMEI}}"
        }, function(){
            $.hidePreloader();

            bootbox.alert({
                    message:"{{__('strings.success_delete')}}",
                    callback: function () {
                    window.location.replace("{{URL::to("/")}}/alerts/fuel-tanks/{{$device->IMEI}}/update");
                }
                }).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";
                }
            });  
        }).fail(function(){
            $.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";
                }
            }); 
        });
    }

    function updateTankRequest(id) {
        var width = $("#width_" + id).val();
        var height = $("#height_" + id).val();
        var length = $("#length_" + id).val();
        var capacity = $("#capacity_" + id).val();
        var type = $("#type_" + id).val();
        var minSensor = $("#min_sensor_" + id).val();
        var maxSensor = $("#max_sensor_" + id).val();

        $.showPreloader("{{__('strings.wait_momment')}}");    
        $.post("{{route('update_device_fuel_tank')}}", {
            user_token: "{{Auth::user()->TOKEN}}",
            tank_id: id,
            imei: "{{$device->IMEI}}",
            width:width,
            height:height,
            length:length,
            capacity:capacity,
            type:type,
            min_sensor: minSensor,
            max_sensor: maxSensor
        }, function(){
            $.hidePreloader();

            bootbox.alert({
                    message:"{{__('strings.update_success')}}",
                    callback: function () {
                    //window.location.replace("{{URL::to("/")}}/alerts/fuel-tanks/{{$device->IMEI}}/update");
                }
                }).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";
                }
            });  
        }).fail(function(){
            $.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