@extends('layouts.app')

@section('link')
    <link rel="stylesheet" href="{{asset('css/dataTables.bootstrap4.min.css')}}" type="text/css" />
    
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">    
    <link href="{{ asset('css/admin_filters.css') }}" rel="stylesheet">
@endsection

@section('style')
<style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      .box-header{
        position: fixed;
        padding: 1rem;
        height: 100px;
        width: 85%;
        background: #fff;
        margin-top:-25px;
        z-index:3;
      }
      
      #devices_div{
          padding-top:70px;
      }
      
      .pagination{
          position:fixed;
          bottom:5px;
      }

      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
        position:fixed;
        top:10px;
        left:0px;
      }
      
      .pac-container {          
            z-index: 10000 !important;
        }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 550px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      
      table {
        width: 100%;
      }
      
      .modal { z-index: 1001 !important;} 
.modal-backdrop {z-index: 1000 !important;}
.pac-container {z-index: 1055 !important;}
</style>
@endsection

@section('content')

<div class="row-col">

    <div class="col-sm">
        <div class="padding">
            @include('shared.messages')
            <div class="box">
                <div class="box-header">
                    <ul class="nav nav-tabs" id="myTab" role="tablist" style="padding: 10px 0 0 10px;width:500px;">
                        <li class="nav-item {{!isset($type) || $type=='devices' ? 'active' : ''}}">
                            <a class="nav-link" href="{{route('devices.index')}}"><h4>Devices</h4></a>
                        </li>
                        
                        @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Admin Guest')
                        <li class="nav-item {{isset($type) && $type=='new_devices' ? 'active' : ''}}">
                            <a class="nav-link" href="{{route('new_devices.index')}}"><h4>New Devices</h4></a>
                        </li>
                        <!--
                        <li class="nav-item {{isset($device_types) ? 'active' : ''}}">
                            <a class="nav-link" href="{{route('device_types.index')}}"><h4>Devices Types</h4></a>
                        </li>
                        -->
                        @endif 
                        @if(auth()->user()->role->role!='Installer')
                        <li class="nav-item {{isset($attach_devices) ? 'active' : ''}}">
                            <a class="nav-link" href="{{route('devices.attach')}}"><h4>Attach devices</h4></a>
                        </li>
                        @endif
                    </ul>
                    <small>{{!isset($type) || $type=='devices' ? 'List of all devices' : 'List of new devices'}}</small>
                    
                    @if(isset($type) && $type=='new_devices' && auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin')
                    <div class="pull-right">
                        <a id="AddNewUser" href="{{route('devices.create')}}" class="btn btn-sm white w-xs">
                            New Device
                        </a>
                    </div>
                    @endif
                </div>                
                
                <div class="panel-body">                    
                    <div id='devices_div'>
                        <form id="rows_form" class="form-inline" method="GET" role="form" action="{{route(isset($type) && $type=='new_devices' ? 'new_devices.index' : 'devices.index')}}">
                            <div class="form-group">
                                <label for="perPage">Results per page:  </label>
                                <select class="form-control" id="perPage" name="perPage">
                                    <option value="5" {{isset($perPage) && $perPage==5 ? "selected" : ""}}>5</option>
                                    <option value="10" {{isset($perPage) && $perPage==10 ? "selected" : ""}}>10</option>
                                    <option value="20" {{isset($perPage) && $perPage==20 ? "selected" : ""}}>20</option>
                                    <option value="50" {{isset($perPage) && $perPage==50 ? "selected" : ""}}>50</option>
                                    <option value="100" {{isset($perPage) && $perPage==100 ? "selected" : ""}}>100</option>
                                </select>
                            </div>                            
                            
                            <div class="form-group">
                                <div class="input-group">
                                    <select class="form-control" id="status" name="status">                                    
                                        <option value="">Status</option>
                                        <option value="0" {{isset($status) && $status==0 ? 'selected' : ''}}>Suspended</option>
                                        <option value="4" {{isset($status) && $status==4 ? 'selected' : ''}}>Active</option>
                                    </select>
                                </div>
                            </div>
                            
                            @if(auth()->user()->role->role!=='Installer')
                            <div class="form-group">
                                <div class="input-group">
                                    <select class="form-control" id="user" name="user">                                    
                                        <option value="">Users</option>
                                        @foreach($users as $user)
                                        <option value="{{$user->orbit_account_id}}" {{isset($user_id) && $user->orbit_account_id==$user_id ? 'selected' : ''}}>{{$user->first_name.' '.$user->last_name}}</option>
                                        @endforeach                                    
                                    </select>
                                </div>
                            </div>      
                            @endif
                        </form>
                        
                        <div id="UsersTableHolder" class="table-responsive">
                            <table id="myTable" class="table table-hover table-striped table-condensed dataTables-example">
                                @if(isset($devices))
                                <thead>
                                    <tr>
                                        <th>Status</th>
                                        <th>Orbit id</th>
                                        <th>Owner</th>
                                        <th>Created</th>
                                        <th>Suspended</th>
                                        <th>Device name</th>
                                        <th>Version</th>
                                        <th style="text-align:right;padding-right:100px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>  
                                    @foreach($devices as $device)
                                    <tr>
                                        <td>@if(isset($device['data']['status'])) <span class='label {{__('texte.statuses_arr')[$device['data']['status']]}}' title='{{__('texte.statuses_text_arr')[$device['data']['status']]}}'>{{__('texte.statuses_text_arr')[$device['data']['status']]}}</span> @endif</td>
                                        <td>{{$device['data']['id']}}</td>
                                        <td>{{strpos($device['structure'], auth()->user()->first_name." ".auth()->user()->last_name)!==false ? substr($device['structure'], strpos($device['structure'], auth()->user()->first_name." ".auth()->user()->last_name)) : ''}}</td>
                                        <td>{{isset($device['data']['created_at']) ? date('d.m.Y',strtotime($device['data']['created_at'])) : ''}}</td>
                                        <td>{{$device['data']['update_at']!='' && $device['data']['update_at']!=null && $device['data']['status']==0 ? ((new DateTime())->diff(new DateTime($device['data']['update_at']))->format("%a")!=='0' ? (new DateTime())->diff(new DateTime($device['data']['update_at']))->format("%a") : (new DateTime())->diff(new DateTime($device['data']['update_at']))->format("%H:%I")) : 0 }}</td>
                                        <td>{{$device['device_name']}}</td>
                                        <td>{{$device['model']}}</td>
                                        <td style="text-align:right;padding-right:5px;">
                                            <a class="installDevice" type='button' title='Location' data-id='{{$device['id']}}' data-lat='{{$device['gps_lat'] ?? 0}}' data-lng='{{$device['gps_lng'] ?? 0}}'><i class="material-icons md-24" style='{{!$device['gps_lat'] || !$device['gps_lng'] ? 'background-color:red;' : '' }}'>room</i></a> 
                                            <a type="button" class="remark_btn" data-id='{{$device['id']}}' data-name="{{$device['device_name']}}" title='Remark'><i class="material-icons md-24">note_add</i></a> 
                                            <a type="button" class="bind_btn" data-id='{{$device['id']}}' data-name="{{$device['device_name']}}" title='Bind'><i class="material-icons md-24">build</i></a> 
                                            <a type="button" class="SN" title='SN' data-serial="{{$device['serial_number']}}" data-name="{{$device['device_name']}}" data-security="{{$device['security_number']}}"><i class="material-icons md-24">assignment</i></a> 
                                                                                        
                                            @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Manufacturer')
                                            <a type="button" class="orbit_setup_btn" title='Orbit setup' data-id='{{$device['id']}}' data-orbit_device_id='{{$device['orbit_device_id']}}'><i class="material-icons md-24">settings</i></a>
                                            @endif
                                            
                                            <a href="{{route('devices.show',$device['id'])}}" title='Live/History'><i class="material-icons md-24">info</i></a>   
                                            
                                            @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Manufacturer')
                                            <a onclick="delete_device({{$device['id']}})" title='Delete'><i class="material-icons md-24">delete</i></a>
                                            @endif
                                        </td>
                                    </tr>   
                                    @endforeach
                                </tbody>
                                @else
                                <thead>
                                    <tr>                                    
                                        <th>Orbit id</th>
                                        <th>IP</th>
                                        <th>Created</th>
                                        <th>First update</th>
                                        <th>Update at</th>
                                        <th>Status</th>
                                        <th>Device name</th>
                                        <th>Manufacturer</th>
                                        <th style="text-align:right;padding-right:100px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>  
                                    @foreach($new_devices as $device)
                                    <tr>
                                        <td>{{$device['data']['id']}}</td>
                                        <td>{{$device['data']['ip']}}</td>                                        
                                        <td>{{isset($device['data']['created_at']) ? date('d.m.Y',strtotime($device['data']['created_at'])) : ''}}</td>
                                        <td>{{isset($device['data']['first_update_at']) ? date('d.m.Y',strtotime($device['data']['first_update_at'])) : ''}}</td>
                                        <td>{{isset($device['data']['update_at']) ? date('d.m.Y H:i:s',strtotime($device['data']['update_at'])) : ''}}</td>
                                        <td>@if(isset($device['data']['status'])) <span class='label {{__('texte.statuses_arr')[$device['data']['status']]}}' title='{{__('texte.statuses_text_arr')[$device['data']['status']]}}'>{{__('texte.statuses_text_arr')[$device['data']['status']]}}</span> @endif</td>
                                        <td>{{$device['device_name']}}</td>
                                        <td>{{$device['manufacturer_name']}}</td>
                                        <td style="text-align:right;padding-right:5px;">
                                            <a type="button" class="SN" title='SN' data-serial="{{$device['serial_number']}}" data-name="{{$device['device_name']}}" data-security="{{$device['security_number']}}"><i class="material-icons md-24">assignment</i></a>   
                                            <a href="{{route('devices.print_label',$device['id'])}}" target='_blank' title='Print'><i class="material-icons md-24">print</i></a> 
                                            <a type="button" class="set_btn" title='Set' data-id='{{$device['id']}}'><i class="material-icons md-24">done</i></a>
                                            
                                            @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Manufacturer')
                                             <a type="button" class="orbit_setup_btn" title='Orbit setup' data-id='{{$device['id']}}' data-orbit_device_id='{{$device['orbit_device_id']}}'><i class="material-icons md-24">settings</i></a>
                                            <a onclick="delete_device({{$device['id']}})" title='Delete'><i class="material-icons md-24">delete</i></a>
                                            @endif
                                        </td>
                                    </tr>   
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                            @if(isset($devices))
                            {{ $devices->appends(['perPage' => $perPage])->links() }}
                            @else
                            {{ $new_devices->appends(['perPage' => $perPage])->links() }}
                            @endif
                        </div>
                        <!-- Modal window on delete-->
                        <div id="modal-install" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form id="device_install" method="POST" action="{{route('devices.set_installer')}}" role="form" class="form form-horizontal">
                                        {{ csrf_field() }}

                                        <input type="hidden" id="gps_lat" name="gps_lat" value=""/>
                                        <input type="hidden" id="gps_lng" name="gps_lng" value=""/>

                                        <input type="hidden" id="id" name="id" value=""/>

                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 id="modal-label" class="modal-title"></h4>
                                        </div>
                                        <div class="modal-body" style="overflow:auto;">                                        
                                            <div class="form-group" style="overflow:auto;">
                                                <div class="pac-card" id="pac-card">
                                                    <div id="pac-container">
                                                      <input id="pac-input" name="address" type="text" placeholder="Enter a location" />
                                                    </div>
                                                </div>
                                                <div id="map"></div>
                                            </div>
                                        </div>        
                                        <div class="modal-footer">                                       
                                            <button type="submit" id="install_btn" class="btn btn-default">Done</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div id="modal-setup" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form id="device_setup" method="POST" action="" role="form" class="form form-horizontal">
                                        {{ csrf_field() }}
                                        
                                        <input type='hidden' name='id' value=''/>
                                        <input type='hidden' name='orbit_device_id' value=''/>

                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 id="modal-label" class="modal-title"></h4>
                                        </div>
                                        <div class="modal-body" style="overflow:auto;">                                        
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="time_to_connect" class="control-label col-xs-3 col-sm-3 col-md-3">Time to connect</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input type="number" class="form-control" id="time_to_connect" name="time_to_connect" value="" style="margin-bottom:5px;" required {{ auth()->user()->role->role!='Admin' &&  auth()->user()->role->role!='Super Admin' ? 'readonly' : ''}}/>
                                                </div>
                                            </div>  
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="url_domain_server" class="control-label col-xs-3 col-sm-3 col-md-3">URL domain server</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input type="text" class="form-control" id="url_domain_server" name="url_domain_server" value="" style="margin-bottom:5px;" required {{ auth()->user()->role->role!='Admin' &&  auth()->user()->role->role!='Super Admin' ? 'readonly' : ''}}/>
                                                </div>
                                            </div>  
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="local_network" class="control-label col-xs-3 col-sm-3 col-md-3">Local network</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input type="text" class="form-control" id="local_network" name="local_network" value="" style="margin-bottom:5px;" required {{ auth()->user()->role->role!='Admin' &&  auth()->user()->role->role!='Super Admin' ? 'readonly' : ''}}/>
                                                </div>
                                            </div>  
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="port" class="control-label col-xs-3 col-sm-3 col-md-3">Port</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input type="number" class="form-control" id="port" name="port" value="" style="margin-bottom:5px;" required {{ auth()->user()->role->role!='Admin' &&  auth()->user()->role->role!='Super Admin' ? 'readonly' : ''}}/>
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="network_activity" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Network activity</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input class="admin_only" name="network_activity" type="radio" value="false"> False
                                                    <input class="admin_only" name="network_activity" type="radio" value="true"> True
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="restart_device" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Restart device</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input name="restart_device" type="radio" value="false" required> False
                                                    <input name="restart_device" type="radio" value="true" required> True
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="protokol_get_back" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Protocol get back</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input class="admin_only" name="protokol_get_back" type="radio" value="false"> False
                                                    <input class="admin_only" name="protokol_get_back" type="radio" value="true"> True
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="sending_all_data" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Sending all data</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input name="sending_all_data" type="radio" value="false"> False
                                                    <input name="sending_all_data" type="radio" value="true"> True
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="sent_network_activity" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Sent network activity</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input class="admin_only" name="sent_network_activity" type="radio" value="false"> False
                                                    <input class="admin_only" name="sent_network_activity" type="radio" value="true"> True
                                                </div>
                                            </div> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="sent_address_zero" class="control-label-1 col-xs-3 col-sm-3 col-md-3">Sent address zero</label>
                                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                    <input name="sent_address_zero" type="radio" value="false"> False
                                                    <input name="sent_address_zero" type="radio" value="true"> True
                                                </div>
                                            </div> 
                                        </div>        
                                        <div class="modal-footer">                                       
                                            <button type="submit" id="install_btn" class="btn btn-default">Done</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Modal window on delete-->
                        <div id="modal-sn" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 id="modal-label" class="modal-title"></h4>
                                    </div>
                                    <div class="modal-body" style="overflow:auto;"> 
                                        <div class="form-group" style="overflow:auto;">
                                            <label for="serial_number" class="control-label col-xs-3 col-sm-3 col-md-3">Serial number</label>
                                            <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                                <input type="text" class="form-control" id="serial_number" name="serial_number" value="" style="margin-bottom:5px;" disabled/>
                                            </div>
                                        </div>
                                        <div class="form-group" style="overflow:auto;">
                                            <label for="security_number" class="control-label col-xs-3 col-sm-3 col-md-3">Security number</label>
                                            <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                                <input type="text" class="form-control" id="security_number" name="security_number" value="" style="margin-bottom:5px;" readonly/>
                                            </div>
                                        </div>
                                    </div>        
                                </div>
                            </div>
                        </div>
                        
                        <!-- Modal window remark-->
                        <div id="modal-remark" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 id="modal-label" class="modal-title"></h4>
                                    </div>
                                    <input type="hidden" name="device_id" id="device_id" value=""/>
                                    <div class="modal-body" style="overflow:auto;"> 
                                        <div class="form-group" style="overflow:auto;">
                                            <label for="remark" class="control-label col-xs-3 col-sm-3 col-md-3">Remark</label>
                                            <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                                <textarea type="text" class="form-control" id="remark" name="remark" value="" style="margin-bottom:5px;"></textarea>
                                            </div>
                                        </div>                                       
                                     </div> 
                                     <div class="modal-footer">                                       
                                         <button id="set_remark" type="button" class="btn btn-default" onclick="set_remark();">Done</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Modal window remark-->
                        <div id="modal-product_number" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 id="modal-label" class="modal-title"></h4>
                                    </div>
                                    <input type="hidden" name="device_id" id="device_id" value=""/>
                                    <div class="modal-body" style="overflow:auto;"> 
                                        <div class="form-group" style="overflow:auto;">
                                            <label for="product_number" class="control-label col-xs-3 col-sm-3 col-md-3">Product number</label>
                                            <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                                <input type="text" class="form-control" id="product_number" name="product_number" value="" style="margin-bottom:5px;"/>
                                            </div>
                                        </div>                                       
                                     </div> 
                                     <div class="modal-footer">                                       
                                         <button id="set_remark" type="button" class="btn btn-default" onclick="set_product_number();">Done</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal window on delete-->
                        <div id="modal-distribute" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form id="device_distribute" method="POST" action="{{route('devices.set_distributor')}}" role="form" class="form form-horizontal">
                                        {{ csrf_field() }}

                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 id="modal-label" class="modal-title"></h4>
                                        </div>
                                        <div class="modal-body" style="overflow:auto;"> 
                                            <div class="form-group" style="overflow:auto;">
                                                <label for="device_barcode" class="control-label col-xs-2 col-sm-2 col-md-2">Баркод</label>
                                                <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                                    <input type="text" class="form-control" id="device_barcode" name="device_barcode" value="" style="margin-bottom:5px;" required/>
                                                </div>
                                            </div>
                                        </div>        
                                        <div class="modal-footer">                                       
                                            <button type="submit" class="btn btn-default">Done</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/datatables.min.js') }}"></script> 
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script> 

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy60tIF4PIJFWEhqF1RprIPDxySj0Ptn8&callback=initMap&libraries=places&v=weekly" defer></script>

<script>

    var map;
    var marker;
    
    $(document).ready(function(){
        setInterval(function() {
            get_selected_devices();
        }, 3000);
        
        initMap();
    });
    
    var statuses = {'-1' : 'grey',
                    '0' : 'red',
                    '1' : 'yellow',
                    '2' : 'yellow',
                    '3' : 'yellow',
                    '4' : 'green',
                    '5' : 'orange',
                    '6' : 'orange'};
                
    var statuses_text={ '-1' : 'Unknown',
                        '0' : 'Suspended',
                        '1' : 'Initialization',
                        '2' : 'Initialization',
                        '3' : 'Initialization',
                        '4' : 'Active',
                        '5' : 'Tunnel',
                        '6' : 'Update'};
    
    

    function delete_device(id){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/ajax_delete_device',
                    type: 'POST',
            data: { 'id' : id},
            beforeSend:function(){
                return confirm("Are you sure you want to delete this Device?");
            },
            success: function(response){
                        $("button[data-dismiss=\"modal\"]").click();
                        if(response.warning){
                            alert(response.warning);
                        }
                        else if(response.success){
                            alert(response.success);
                            location.reload();
                        }
                    }
        });    
    }
    
    $(document).on('click', '.installDevice', function(){        
        $('#id').val($(this).attr('data-id'));
        $('#gps_lat').val($(this).attr('data-lat'));
        $('#gps_lng').val($(this).attr('data-lng'));
        
        var old_lat = $('#gps_lat').val() && $('#gps_lat').val()!=0 ? parseFloat($('#gps_lat').val()) : '';
        var old_lng = $('#gps_lng').val() && $('#gps_lng').val()!=0 ? parseFloat($('#gps_lng').val()) : '';
        
        if(old_lat!=='' && old_lng!==''){            
            var new_marker_position = new google.maps.LatLng(old_lat, old_lng);
            marker.setPosition(new_marker_position);
            marker.setVisible(true);
            map.panTo(new_marker_position);
            map.setZoom(17);
            
            var geocoder = new google.maps.Geocoder();
            
            geocoder.geocode({
                'latLng': new_marker_position
              }, function (results, status) {
                if(status === google.maps.GeocoderStatus.OK) {
                    if(results[0]) {
                        $('#pac-input').val(results[0]['formatted_address']);
                    } 
                    else{
                        $('#pac-input').val('');
                        alert('No results found');
                    }
                } 
                else{
                        $('#pac-input').val('');
                        alert('Geocoder failed due to: ' + status);
                }
              });
        }
        else{
            $('#pac-input').val('');
            marker.setVisible(false);
            map.setZoom(8);
        }
        
        $('#modal-install').modal('show');
    });

    $(document).on('click', '.orbit_setup_btn', function(){
        var orbit_device_id = $(this).attr('data-orbit_device_id');
        var id = $(this).attr('data-id');
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/ajax_get_device_status',
                    type: 'POST',
                    data: { 'id' : orbit_device_id},
            success: function(response){
                    
                    $('input[name=time_to_connect]').val(response['time_to_connect']!=undefined ? response['time_to_connect'] : '');
                    $('input[name=url_domain_server]').val(response['url_domain_server']!=undefined ? response['url_domain_server'] : '');
                    $('input[name=local_network]').val(response['local_network']!=undefined ? response['local_network'] : '');
                    $('input[name=port]').val(response['port']!=undefined ? response['port'] : '');
                    
                    response['network_activity']!== undefined ? $('input[name=network_activity][value='+response['network_activity']+']').prop('checked',true) : $('input[name=network_activity]').prop('checked',false);
                    response['restart_device']!==undefined ? $('input[name=restart_device][value='+response['restart_device']+']').prop('checked',true) : $('input[name=restart_device]').prop('checked',false);
                    response['protokol_get_back']!==undefined ? $('input[name=protokol_get_back][value='+response['protokol_get_back']+']').prop('checked',true) : $('input[name="protokol_get_back"]').prop('checked',false);
                    response['sending_all_data']!== undefined ? $('input[name=sending_all_data][value='+response['sending_all_data']+']').prop('checked',true) : $('input[name="sending_all_data"]').prop('checked',false);
                    response['sent_network_activity']!== undefined ? $('input[name=sent_network_activity][value='+response['sent_network_activity']+']').prop('checked',true) : $('input[name="sent_network_activity"]').prop('checked',false);
                    response['sent_address_zero']!== undefined ? $('input[name=sent_address_zero][value='+response['sent_address_zero']+']').prop('checked',true): $('input[name="sent_address_zero"]').prop('checked',false);
                              
                    $('input[name=id]').val(id);
                    $('input[name=orbit_device_id]').val(response['id']);
                    $('#device_setup').attr('action','/devices/setup/'+id);    
                    
                    var is_admin = {!! auth()->user()->role->role!='Admin' &&  auth()->user()->role->role!='Super Admin' ? 0 : 1!!};

                    if(is_admin!=1){
                        $('.admin_only').not(':checked').attr('disabled', true);
                    }
                    
                    $('#modal-setup').modal('show');
            }
        }); 
        
        
        
    });
    
    $(document).on('click','.SN', function(){
        $('#serial_number').val($(this).attr('data-serial'));
        $('#security_number').val($(this).attr('data-security'));
        $('#modal-sn').find('h4').html($(this).attr('data-name'));
        $('#modal-sn').modal('show');
    });
    
    $(document).on('click', '.remark_btn', function(){
        $('#device_id').val($(this).attr('data-id'));
        var remark = get_remark($(this).attr('data-id'));
        $('#remark').val(remark);
        $('#modal-remark').find('h4').html($(this).attr('data-name'));
        $('#modal-remark').modal('show');
    });
    
    function set_remark(){
        var id = $('#device_id').val();
        var remark = $('#remark').val();
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/set_device_remark',
                    type: 'POST',
                    data: { 'id' : id,
                            'remark' : remark},
            success: function(response){
                       if(response.success){
                           alert(response.success);
                       }
                       else{
                           alert(response.warning);
                       }
                       $('#modal-remark').modal('hide');
                    }
        });  
    }
    
    function get_remark(id){
        var remark = '';
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/get_device_remark',
                    type: 'POST',
                    async:false,
                    data: { 'id' : id},
            success: function(response){
                       if(!response.warning){
                           remark = response;
                       }
                       else{
                           alert(response.warning);
                       }
            }
        });  
        
        return remark;
    }
    
    $(document).on('click','.bind_btn', function(){
        $('#device_id').val($(this).attr('data-id'));
        var product_number = get_product_number($(this).attr('data-id'));
        $('#product_number').val(product_number);
        $('#modal-product_number').find('h4').html($(this).attr('data-name'));
        $('#modal-product_number').modal('show');
    });
    
    function set_product_number(){
        var id = $('#device_id').val();
        var product_number = $('#product_number').val();
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/set_device_product_number',
                    type: 'POST',
                    data: { 'id' : id,
                            'product_number' : product_number},
            success: function(response){
                       if(response.success){
                           alert(response.success);
                       }
                       else{
                           alert(response.warning);
                       }
                       $('#modal-product_number').modal('hide');
                    }
        });  
    }
    
    function get_product_number(id){
        var remark = '';
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/get_device_product_number',
                    type: 'POST',
                    async:false,
                    data: { 'id' : id},
            success: function(response){
                       if(!response.warning){
                           product_number = response;
                       }
                       else{
                           alert(response.warning);
                       }
            }
        });  
        
        return product_number;
    }
    
    $(document).on('click','.set_btn', function(){
        var id = $(this).attr('data-id');
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/set_device',
                    type: 'POST',
                    data: { 'id' : id},
            success: function(response){
                       if(!response.warning){
                           alert(response.success);
                           location.reload();
                       }
                       else{
                           alert(response.warning);
                       }
            }
        });
    });
    
    
    $('#device_install').on('keyup keypress', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) { 
          e.preventDefault();
          return false;
        }
    });
    
    function get_selected_devices(){
    
        var devices_ids = $('#myTable tr').find('td:eq({!! isset($devices) ? 1 : 0 !!})').map(function(){
            return $(this).text()
        }).get()
       
        var page = 1;
        var results = devices_ids.length;
        
        if (devices_ids.length>0) { 
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/get_selected_devices',
                        data:{  'devices_ids' : devices_ids,
                                'page' : page,
                                'results' : results},
                        type: 'POST',
                success: function(response){
                            for(var index in response){    
                                var tableRow = $("td:nth-child("+{{$type=='devices' ? 2 : 1}}+")").filter(function() {
                                    return $(this).text() == response[index].orbit_device_id;
                                }).closest("tr");

                                tableRow.find('td').eq({{$type=='devices' ? 0 : 5}}).html('<span class="label '+statuses[response[index].status] + '" title="'+statuses_text[response[index].status]+'" >'+statuses_text[response[index].status]+'</span>');
                            }                                  
                        }
            });    
        }
        
        
    }
    
    
    
    
    function initMap() {
        var lat = 42.607709548752355, lng = 26.01724681854248;
        
        var options = {
            zoom: 17,
            center: new google.maps.LatLng(lat, lng),
            mapTypeControlOptions: { mapTypeIds: [] },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            draggableCursor:'crosshair',
            draggingCursor: 'move'
        }
        
        map = new google.maps.Map(document.getElementById('map'), options);
        
        const card = document.getElementById("pac-card");
        const input = document.getElementById("pac-input");
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
        const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.

        autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

        autocomplete.setFields([
          "address_components",
          "geometry",
          "icon",
          "name",
        ]);
        
        marker = new google.maps.Marker({position: {lat: lat, lng: lng}, map: map});
        
        
        autocomplete.addListener("place_changed", () => {          
          marker.setVisible(false);
          const place = autocomplete.getPlace();

          if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert(
              "No details available for input: '" + place.name + "'"
            );
            return;
          } // If the place has a geometry, then present it on a map.

          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17); // Why 17? Because it looks good.
          }

          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
          
          $('#gps_lat').val(marker.getPosition().lat());
          $('#gps_lng').val(marker.getPosition().lng());
        });
        
        var geocoder = new google.maps.Geocoder();
        
        google.maps.event.addListener(map, 'click', function(event) {
            marker.setPosition(event.latLng);
            marker.setVisible(true);
            
            $('#gps_lat').val(marker.getPosition().lat());
            $('#gps_lng').val(marker.getPosition().lng());
            
            geocodeLatLng(event.latLng, geocoder)
            
        });
    }
    
    function geocodeLatLng(latlng, geocoder) {
        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
              if (results[0]) {
                  $('#pac-input').val(results[0].formatted_address);
              }
              else {
                alert("No results");
              }
            }
            else {
              alert("Geocoding unsuccessful: Status " + status);
            }
        });
    }

    $('#index_rule').on('change', function(){
        $('#user').val('');
        $('#rows_form').submit(); 
    });
    
    $('#user').on('change', function(){
        $('#index_rule').val('');
        $('#rows_form').submit(); 
    });
    
    $('#status').on('change', function(){
        $('#index_rule').val('');
        $('#rows_form').submit(); 
    });
    
    $('#perPage').on('change', function(){
        $('#rows_form').submit(); 
    });
    
</script>

@endsection