@extends('layouts.main')
@push('styles')
<!-- Include Full Calendar view -->
<script src="{{asset('fullcalendar/dist/index.global.js')}}"></script>   
<script src="{{asset('fullcalendar/packages/core/locales-all.global.min.js')}}"></script>  
<link rel="stylesheet" type="text/css" href="{{asset('css/timepicker.min.css')}}" />

<style> 
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #b4b4b4;
  padding: 20px; 
}
</style>
@endpush

@section('content')
<div class="row">
	 <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h1>{{__('strings.update_device')}}</h1>
                </div>
                <hr>
                <div class="card-body">
                <div class="card-block">   
                    <form class="form" action="{{route('device_post_update', ["device" => $device])}}" method="post">
                        {{ csrf_field() }}
                        <div class="form-body">    
                            <div class="col-md-6">                                
                                <div class="form-group">
                                    <label for="imei">IMEI</label>
                                    <input type="text" id="imei" class="form-control" placeholder="IMEI" name="imei" value="{{ $device->IMEI }}" autocomplete="off" disabled>
                                </div> 
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="alias">Alias</label>
                                    <input type="text" id="alias" class="form-control" placeholder="Alias" name="alias" value="{{ $device->ALIAS }}" autocomplete="off">
                                </div>   
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="carrier">Transportista</label>
                                    <input type="text" id="carrier" class="form-control" placeholder="Transportista" name="carrier" value="{{ $device->CARRIER }}" autocomplete="off">
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="commodity">Mercancía</label>
                                    <input type="text" id="commodity" class="form-control" placeholder="Mercancía" name="commodity" value="{{ $device->COMMODITY }}" autocomplete="off">
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="plates">Placa</label>
                                    <input type="text" id="plates" class="form-control" placeholder="Placa" name="plates" value="{{ $device->PLATES }}" autocomplete="off">
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="truck">Camión</label>
                                    <input type="text" id="truck" class="form-control" placeholder="Camión" name="truck" value="{{ $device->TRUCK }}" autocomplete="off">
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="invoice">Factura</label>
                                    <input type="text" id="invoice" class="form-control" placeholder="Factura" name="invoice" value="{{ $device->INVOICE }}" autocomplete="off">
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="custom_1">Extra 1</label>
                                    <input type="text" id="custom_1" class="form-control" placeholder="Extra 1" name="custom_1" value="{{ $device->CUSTOM_1 }}" autocomplete="off">
                                    <code>Suntech/HMR, ingrese el tiempo de control en Milisegundos</code>
                                </div>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="custom_2">Extra 2</label>
                                    <input type="text" id="custom_2" class="form-control" placeholder="Extra 2" name="custom_2" value="{{ $device->CUSTOM_2 }}" autocomplete="off">
                                    <code>Suntech/HMR, ingrese el Lím. Velocidad en km/h</code>
                                </div>   
                            </div> 

                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="time_zone">{{__('strings.time_zone')}}</label>
                                    <input type="text" id="time_zone" class="form-control" placeholder="Extra 2" name="time_zone" value="{{ $device->TIME_ZONE }}" autocomplete="off" disabled>
                                </div>   
                            </div> 

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="single-select">{{ __('strings.interval_report') }}</label>
                                    <select name="interval" class="form-control">
                                        <option value="7" {{$device->INTERVAL == 7 ? 'selected':''}} >5 min.</option>
                                        <option value="1" {{$device->INTERVAL == 1 ? 'selected':''}} >10 min.</option>
                                        <option value="2" {{$device->INTERVAL == 2 ? 'selected':''}} >20 min.</option>
                                        <option value="3" {{$device->INTERVAL == 3 ? 'selected':''}} >30 min.</option>
                                        <option value="6" {{$device->INTERVAL == 6 ? 'selected':''}} >60 min.</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="single-select">{{ __('strings.hmr_status') }}</label>
                                    <select name="hmr" class="form-control">
                                        <option value="HMR2" {{$device->HMR == "HMR2" ? 'selected':''}} >Manual</option>
                                        <option value="HMR0" {{$device->HMR == "HMR0" ? 'selected':''}} >Deshabilitado</option>
                                        <option value="HMR1" {{$device->HMR == "HMR1" ? 'selected':''}} >Habilitado</option>
                                    </select>
                                </div>
                            </div>
                            <div id="rcorners2" class="col-md-12">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Ecuacion de la recta</label>
                                        <p class="form-control-plaintext"><a href="https://www.herramientasingenieria.com/onlinecalc/spa/matematicas/recta-dos-puntos.html" target="_blank">https://www.herramientasingenieria.com/onlinecalc/spa/matematicas/recta-dos-puntos.html</a></p>
                                    </div>
                                </div>
                                <div class="col-md-6"> 
                                    <div class="form-group">
                                        <label for="slope">{{__('strings.slope')}}</label>
                                        <input type="number" step="any" id="slope" class="form-control" placeholder="m" name="slope" value="{{ $device->SLOPE }}" lang="en">
                                        <small class="form-text">{{__('strings.only_ph_devices')}}</small>
                                    </div>   
                                </div> 
                                <div class="col-md-6"> 
                                    <div class="form-group">
                                        <label for="y_intercept">{{__('strings.y_intercept')}}</label>
                                        <input type="number" step="any" id="y_intercept" class="form-control" placeholder="b" name="y_intercept" value="{{ $device->Y_INTERCEPT }}" lang="en">
                                        <small class="form-text">{{__('strings.only_ph_devices')}}</small>
                                    </div>   
                                </div> 
                            </div>
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="in_route">En ruta?</label>
                                    <input type="checkbox" id="in_route"  name="in_route" {{$device->IN_ROUTE ? "checked":""}}>
                                </div>  
                            </div>
                            <div class="clearfix"></div>                            
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <a href="#" onclick="window.history.back();" class="btn btn-secondary">  {{__('strings.submit_cancel')}} </a>    
                                    <button type="submit" class="btn btn-primary">{{ __('strings.submit_update') }}</button>
                                </div>
                            </div>
                        </div> 

                    </form>
                </div>
                <div class="card-header">
                    <h1>{{__('strings.working_hours')}}</h1>
                <code>{{__('strings.click_on_event_to_delete')}}</code>
                </div>
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalRegisterEvents" tabindex="10000" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('strings.add_working_hours')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="1"> {{__('strings.monday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="2"> {{__('strings.tuesday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="3"> {{__('strings.wednesday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="4"> {{__('strings.thursday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="5"> {{__('strings.friday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="6"> {{__('strings.saturday')}}<label> 
                </div>
                <div class="col-md-12">
                    <label><input type="checkbox" name="days_of_week[]" value="0"> {{__('strings.sunday')}}<label> 
                </div>
                
                <div class="container">
                    <p class="lead">{{__('strings.start_at')}}</p>
                    <input id="start_time" type="text" class="form-control bs-timepicker">
                </div>
                <div class="container">
                    <p class="lead">{{__('strings.end_at')}}</p>
                    <input id="end_time" type="text" class="form-control bs-timepicker">
                </div>

                
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">{{__('strings.submit_cancel')}}</button>
                <button id="submitButton" type="button" class="btn btn-primary">{{__('strings.submit_register')}}</button>
            </div>

        </div>
    </div>
</div>
@endsection


@push('scripts')
<script src="{{asset('js/timepicker.min.js')}}"></script>
<script>
    var calendar;
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            locale: '{{Auth::user()->LANG}}',
            headerToolbar: {
                left: 'prev,next myCustomButton',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            selectable: false,
            eventClick: function(arg) {
                $.confirm('{{__("strings.event_delete_header")}}', function () {  

                    $.showPreloader("{{__('strings.wait_momment')}}");
                    $.post( "{{route('delete_device_events')}}",{
                        imei: "{{$device->IMEI}}",
                        user_token: '{{Auth::user()->TOKEN}}',
                        event_id: arg.event.id
                    }, function( response ) {
                        calendar.refetchEvents();
                        $.hidePreloader();      
                    }).fail(function(error){
                        $.hidePreloader();
                        console.log(error);
                        $.alert("{{__('errors.error')}}");
                    });
	            });
            },
            customButtons: {
                myCustomButton: {
                text: '{{__('strings.add_working_hours')}}',
                click: function() {
                    $('#modalRegisterEvents').modal('show')
                }
                }
            },
            eventSources: [ {
                    url: "{{route('device_events')}}",
                    method: 'POST',
                    extraParams: {
                        user_token: '{{Auth::user()->TOKEN}}',
                        imei: "{{ $device->IMEI }}"
                    },
                    failure: function() {
                        alert('there was an error while fetching events!');
                    },
                    color: 'yellow',   // a non-ajax option
                    textColor: 'black' // a non-ajax option
            } ]

        });
        calendar.render();
        
        $('.bs-timepicker').timepicker();
    });

    $("#submitButton").click(function(){
        makeRequest();
    });

    function makeRequest() {
        $.showPreloader("{{__('strings.wait_momment')}}");
        
        const daysOfWeek = [];
        $("input[name='days_of_week[]']:checked").each(function() {
            daysOfWeek.push($(this).val());
        });
        const startAt = $("#start_time").val();
        const endAt = $("#end_time").val();    

        $.post( "{{route('device_working_hours')}}",{
            user_token: '{{Auth::user()->TOKEN}}',
            imei: "{{$device->IMEI}}",
            dow: daysOfWeek,
            start: startAt,
            end: endAt
        }, function( response ) {
            calendar.refetchEvents();
            $.hidePreloader();
            $('#modalRegisterEvents').modal('hide');
            $.alert(response.message);
        }).fail(function(error){
            $('#modalRegisterEvents').modal('hide')
            $.hidePreloader();
            $.alert("{{__('errors.error')}}");
        });
    }
</script>
@endpush