@extends('loader')
@extends('layouts.app')
@extends('layouts.master')
<style>
#packageList thead tr {
  cursor: pointer;
  outline: none;
}
#packageList thead tr th::after { 
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
#packageList #no-sort::after { 
  content: '';
}
</style>
@section('content')
<link rel="stylesheet" href="{{url('/')}}/css/bootstrap-datetimepicker.min.css">
      <link rel="stylesheet" href="{{url('/')}}/css/font-awesome-4.7.0/css/font-awesome.min.css">
<div class="main-panel dashboard"> 
    <div class="content-wrapper">

    <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="row">
                    <div class="col-md-4">
                        <!-- <form method="get" class="search_form_keys" id="search_form_keys" action=""> -->
                          <div class="input-group rounded-bar">
                              <div class="input-group-prepend hover-cursor" id="navbar-search-icon">
                                <button type="submit"><span class="input-group-text" id="search">
                                  <i class="ti-search"></i>
                                </span></button>
                                
                              </div>
                              <input type="text" name="search" class="form-control search_key" id="navbar-search-input" placeholder="{{ trans('language.search') }}" aria-label="search" aria-describedby="search" value="">
                            </div>
                          <!-- </form> -->
                    </div>

                    <div class="col-md-3">
            <div class="form-group">
                        <!-- <label>{{trans('language.status')}}</label> -->
                          <select class="form-control"  id="status">
                              <option value="">{{ trans('language.all') }}</option>
                              <option value="active">{{ trans('language.active') }}</option>
                              <option value="inactive">{{ trans('language.inactive') }}</option>
                          </select>
                      </div></div>
                      
                      <div class="col-md-5">
                        <button class="btn btn-primary btn-icon-text" onclick="search()">
                                <i class="ti-search btn-icon-prepend"></i>{{ trans('language.submit') }}
                        </button>
                        <button class="btn btn-primary btn-icon-text dvce_export" >
                        {{ trans('language.export_csv') }}
                        </button>
                        <!-- &nbsp;&nbsp; -->
                        <!-- <button class="btn btn-primary btn-icon-text" data-toggle="modal" data-target="#packageModal">
                                <i class="ti-plus btn-icon-prepend"></i>{{ trans('language.add_new') }}
                        </button> -->
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>{{ trans('language.plan_remain_day') }} </label>
                        <div class="input-group">
                        <input type="number" class="form-control" id="period_filter_from" name="period_filter_from" placeholder="{{ trans('language.from') }}">
                        <input type="number" class="form-control" id="period_filter_to" name="period_filter_to" placeholder="{{ trans('language.to') }}">
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group">
                        <label>{{ trans('language.remaining_days') }} </label>
                        <div class="input-group">
                        <input type="number" class="form-control" id="remaining_days_filter_from" name="remaining_days_filter_from" placeholder="{{ trans('language.from') }}">
                        <input type="number" class="form-control" id="remaining_days_filter_to" name="remaining_days_filter_to" placeholder="{{ trans('language.to') }}">
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3">
                       <div class="form-group">
                        <label>{{trans('language.lock_status')}}</label>
                          <select class="form-control"  id="force_status_filter">
                              <option value="">{{ trans('language.all') }}</option>
                              <option value="1">{{ trans('language.forcefully_locked') }}</option>
                              <option value="2">{{ trans('language.forcefully_unlocked') }}</option>
                              <option value="0">{{ trans('language.unforced') }}</option>
                          </select>
                      </div></div>

                </div>
            </div>
        </div>

        <div class="row" id="tableBody"></div>

    </div>
</div>

<div class="modal fade" id="delete_package" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="modal-body">
            {{ trans('language.do_you_want_to_delete') }}
    </div>
      <div class="modal-footer text-center">
            <input type="hidden" name="" value="" id="area_id"> 
            <button type="button" class="btn btn-secondary btn-rounded"  data-dismiss="modal">{{ trans('language.close') }}</button>
            <a href="" id="delete_btn" class="btn btn-primary" >{{ trans('language.delete') }} </a>
        </div>
    </div>
  </div>
</div>

<div class="modal fade" id="device_groupview" tabindex="-1"  role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content-wrapper">
<div class="modal-content">
<div class="modal-header clearfix text-left">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
</button>
<h5 style="padding-right: 800px;"><span class="semi-bold">{{ trans('language.view') }}</span></h5>

</div>
<div class="modal-body" id="divice_viewgroup">

</div>
</div>
</div>

</div>
</div>

@extends('device_edit')


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    var page=1; // initial page in the list
    var sortorder = "DESC";
    var sortcolumn = "id";
    var tab = "";
    var devicedata = {};

   
$(".dvce_export").click(function(){
  

  $("#packageList").table2csv({
  filename: 'DeviceList.csv',
  excludeColumns:".col24",
});

});

$("body").on("click",'.groupid', function(){    
      
    
      var groupid = $(this).data("groupid");
      
      var url = baseurl+'/viewgroup/'+groupid;

      //alert(url);

      $.ajax({url: url, success: function(result){
      
       $("#divice_viewgroup").html(result);
          
      $('#device_groupview').modal('show'); 
          
     
   
}});

});

$(document).ready(function(){
  initializeSumoSelect("group_id");
    $('#packageModalTitle').html("{{trans('language.edit_device')}}");
    getAllDevices();

     // event for catching click on pagination links
     $(document).on('click', '.pagination a', function(event){

      event.preventDefault(); 
      page = $(this).attr('href').split('page=')[1];
      getAllDevices(page,sortcolumn,sortorder);

    });
    // event for catching click on pagination links ends

});

// ajax function to fetch group data
function getAllDevices(page=1,field="lastupdate",sort="DESC"){
        
        sortcolumn = field;
        sortorder = sort;
        showorhideloader();

        $.ajax({
            url:"{{url('/getAllDevices')}}",
            data:{'page':page,'field_to_sort':field,'sort':sort,'search' : $('#navbar-search-input').val(),
            'status':$('#status').val(),'period_filter_from':$('#period_filter_from').val(),
            'period_filter_to':$('#period_filter_to').val(),
            'remaining_days_filter_from':$('#remaining_days_filter_from').val(),
            'remaining_days_filter_to':$('#remaining_days_filter_to').val(),
            'force_status_filter':$('#force_status_filter').val()},
            success:function(data) 
            {
               if(data == ""){
                window.location = "{{url('/login')}}";
               }
                $('#tableBody').html(data);
                showorhideloader('hide');
            },error: function (responseData, textStatus, errorThrown) {
                console.log(responseData+" "+textStatus+" "+errorThrown);
            },
        });
        
    }
    // ajax function to fetch group data ends

function sortorderchange(field,sort){
  if(sort == "ASC"){
    sort = "DESC";
  }
  else{
    sort = "ASC";
  }
  getAllDevices(page,field,sort);
}

function numberValidator(id) {

var name = $('#'+id).val();
const regex = /^([0-9]+)$/;
if(name.match(regex)){
  
}
else
{
  str = name.substring(0, name.length - 1);
  $("#"+id).val(str);
  if($("#"+id).val() != ""){
    phoneValidator(id);
  }
}
}

function validate(){

  // console.log(devicedata);return false;
  // $('#plan_startdate').val(devicedata.plan_startdate);
  // $('#plan_enddate').val(devicedata.plan_enddate);
  $('#plan_period').trigger('focusout');
if($('#device_id').val() == "" || $('#device_name').val() == "" || $('#group_id').val() == "" ||
$('#is_active').val() == ""){
    swal('{{trans("language.mandatory_fields_msg")}}');
    return false;
}

}

// search submit button click handler function
function search(){
        page =1;
        // var sortcolumn = getSortColumn('areasortcolumn');
        getAllDevices(page,sortcolumn,sortorder);
    }
     // search submit button click handler function ends

var plan_startdate = "";
var plan_enddate = "";
     // function to populate data for editing in modal
  function loadDataToEdit(dataobj){
        $('#div_packageModalTitle').html('