@extends('layouts.app')
@extends('layouts.master')
@section('content')
      
      <div class="main-panel dashboard"> 
        <div class="content-wrapper">
          <div style="padding: 15px">
          <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="row">
                      <div class="col-md-7">
                        <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('location.search') }}" aria-label="search" aria-describedby="search" value="">
                            </div>
                          </form>
                      </div>

                      <div class="col-md-3">
                          <select class="form-control" onchange="getval(this.value);" id="exampleFormControlSelect3">
                            <option value="">{{ trans('location.all') }}</option>
                              <option value="Active" >{{ trans('location.active') }}</option>
                              <option value="Inactive" >{{ trans('location.inactive') }}</option>
                            
                            </select>
                      </div>
                     <div class="col-md-2">
                          <a href="{{url('/add_location')}}" class="btn btn-primary btn-icon-text">
                              <i class="ti-plus btn-icon-prepend"></i>
                              {{ trans('location.add_new') }}
                            </a>
                        </div>
                    </div>

            <div class="row" style="margin-bottom: -25px">
                      <div class="col-md-12">
              <form method="GET" id="chart-form" action="">
                <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('location.area') }} </label>
                        <select class="form-control area" name="area" id="area">
                        <option value="">{{ trans('chart.all') }}</option>
                                                                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('task.location') }} </label>
                        <select class="form-control location" name="location_id" id="location">
                        <option value="">{{ trans('chart.all') }}</option>
                                                                        </select>
                        </div>
                      </div>
                     <div class="col-md-3">
                      <br>
                          <button type="submit" id="submit-button" class="btn btn-primary" style="margin-top: 15px;">
                              {{ trans('chart.submit') }}
                            </button>
                      </div>
                    
                </div>
              </form>
            </div>
            </div>
            </div>
            </div>
            <div class="row">
            <div class="col-md-3 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex">
                  <img src="{{url('/')}}/images/fa-lock.png" class="icon-style" height="18" width="20">
                  <p class="card-title text-md-center text-xl-left">{{ trans('home.total_devices') }}</p>
                  </div>
                  <div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
                    <h2 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0">{{$device_count}}</h2>
                  </div>    
                  
                </div>
              </div>
            </div>
            </div>
            </div>
            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                                                                                                                                                       
                      <thead>
                        <tr>
                          <th>{{ trans('location.area') }}</th>
                          <th>{{ trans('location.location') }}</th> 
                          <th>{{ trans('location.no_of_devices') }}</th>
                          <th>{{ trans('location.usage_time_start_end') }}</th>
                          <th>{{ trans('location.price_initial_excess') }}</th>
                          <th>{{ trans('location.status') }}</th>
                          <th>{{ trans('payments.more_details') }}</th>
                          <th>{{ trans('location.actions') }}</th>
                        </tr>
                      </thead>
                      <tbody id="append_search_data">

                                                @foreach($data as $location)
                                                   <tr data-toggle="collapse" id="table{{$i}}" data-target=".table{{$i}}">
                          <td>{{$area}}</td>
                          <td>{{$location->location}}</td>
                          <td>{{$location->device_count}}</td>
                          <td>{{$usage_time_start_end}}</td>
                          <td>{{$price_initial_excess}}</td>
                          @if($location->status == "Active")
                          <td>{{trans('location.active')}}</td>
                          @else
                          <td>{{trans('location.inactive')}}</td>
                          @endif
                          <td><img src="{{url('/')}}/images/down-arrow.png" class="icon-style" style="height:20px;width:20px;cursor: pointer;"></td>
                          <td>
                          <div class="btn-group">
                           <button type="button" class="btn btn-outline-secondary dropdown-toggle drop-dots" data-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></button>
                           <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
                            <a class="dropdown-item" onclick="location_view(this)" id="{{$location->location_id}}"><i class="ti-eye"></i> {{ trans('location.view') }}</a>
                             <a class="dropdown-item locker_edit" id="{{$location->location_id}}" href="/edit_location?id={{$location->location_id}}"><i class="ti-pencil"></i> {{ trans('location.edit') }}</a>
                             <a class="dropdown-item locker_delt_id" onclick="location_delt_id(this)" id="{{$location->location_id}}" data-toggle="modal" data-target="#delete_location"><i class="ti-trash"></i> {{ trans('location.delete') }}</a> 
                           </div>                          
                         </div>
                         </td>
                        </tr>
                        <tr class="collapse table{{$i}}" style="background-color:rgb(233, 233, 233);">
                          <td colspan="999">
                            <table class="table">
                              <thead>
                                <tr>
                                  <th>{{ trans('location.landmark') }}</th>
                                  <th>{{ trans('location.no_of_devices') }}</th>
                                </tr>
                              </thead>
                              <tbody>
                          @foreach($location->landmarks as $lnmrk)
                            <tr> 
                              <td>
                              {{ $lnmrk['landmark'] }}
                              </td>
                              <td>
                              {{ $lnmrk['deviceCount'] }}
                              </td>
                            </tr>
                          @endforeach
                          </tbody>
                          </table>
                                                @endforeach
                     
      
                      </tbody>
                    </table>
                  
                  </div>
                    <table class="table">
                       <tr> <td> {{ $links }}</td></tr>
                    </table>
                </div>
              </div>
            </div>
  
  
    

        </div>
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->


   <!-- Modal -->
<div class="modal fade" id="qr_code" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title dev_name" 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 text-center">
      
      </div>
      
    </div>
  </div>
</div>




    <!-- Modal -->
<div class="modal fade" id="view_location" 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="">{{ trans('location.location_details') }}</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>
   </div>
  </div>
</div>





    <!-- Modal -->
<div class="modal fade" id="delete_location" 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('location.do_you_want_to_delete') }}
    </div>
      <div class="modal-footer text-center">
            <input type="hidden" name="" value="" id="get_id"> 
            <button type="button" class="btn btn-secondary btn-rounded"  data-dismiss="modal">{{ trans('location.close') }}</button>
            <button type="button" class="btn btn-primary" id="location_delete">{{ trans('location.delete') }} </button>
        </div>
    </div>
  </div>
</div>



    <!-- Modal -->
<div class="modal fade" id="delete_success" 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 text-center padding-lg">
    </div>
   </div>
  </div>
</div>




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


function getval(val)
{
  if(val != ""){
    window.location = "{{url('/')}}/location?status="+val;
  }else{
    window.location = "{{url('/')}}/location";
  }  
}



function location_view(val)
{ 
      var id = val.id;
      console.log(id);

     if(id)
        {
         $.ajax({
               // type:'post',
               url:'{{url('/view_location')}}',
               data:{id : id },
               success:function(data) 
               {

                 $("#view_location .modal-body").html(data);
                 $('#view_location').modal('show');
                 
               }
            });
      }
}


function location_delt_id(val)
{ 
     var id =val.id;
     $("#get_id").val(id);
}


$('#location_delete').on("click",function()
  { 
    $('#delete_location').modal('hide');
    var id = $('#get_id').val();

     if(id)
        {
          
         $.ajax({
               // type:'post',
               url:'{{url('/delete_location')}}',
               data:{location_id : id },
               success:function(data) {
                 
                 if(data =='false')
                 {
                   $("#delete_success .modal-body").html('Cannot delete this Location. Some of devices in this location are currently in use.');
                   $('#delete_success').modal('show');
                 }
                 else
                 {
                   // $("#delete_success .modal-body").html('Device Deleted');
                   // $('#delete_success').modal('show');
                  setTimeout(function(){ location.reload(); }, 20);

                   
                 }
                 
               }
            });
      }
      
       // event.preventDefault();
});


      $("#area").change(function () {
              var area = $(this).val();
              if(area.length==0){
                area = null;
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getLocationList')}}',
                  data:{area : area },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('language.all')}}</option>';
                      $.each(responseData.locations, function (index, value) {
                        htmlAppend += '<option value="' + value.location_id + '">' + value.location +'</option>';
                      });
                      console.log(htmlAppend);
                      $("#location").html(htmlAppend);
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });      
</script>


@endsection