@extends('layouts.app')
@extends('layouts.master')
@section('content')
      <style type="text/css">
        .nav-link{
          font-size: 17px;
          font-weight: 600;
        }
      </style>
      
      <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-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('errors.search') }}" aria-label="search" aria-describedby="search" value="">
                            </div>
                          </form>
                      </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">
                        <div class="form-group">
                        <label> {{ trans('location.landmark') }} </label>
                        <select class="form-control landmark" name="landmark" id="landmark">
                        <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 class="row" style="margin-top:15px;">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-md-3 grid-margin stretch-card">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex">
                        <i class="ti-support menu-icon"></i>&nbsp;&nbsp;
                        <p class="card-title text-md-center text-xl-left">{{ trans('errors.total_app_errors') }}</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" id="total_devices">{{$total_error}}</h2>
                        </div>     
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
          </div>

            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <!-- Nav tabs -->
                  <ul class="nav nav-tabs">
                    <li class="nav-item">
                      <a class="nav-link" href="{{url('/errors')}}" href="{{url('/errors')}}">{{ trans('errors.device_error') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab">{{ trans('errors.app_error') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="{{url('/cube_errors')}}">{{ trans('errors.cube_error') }}</a>
                    </li>
                  </ul>
                  <br>
                  <div class="table-responsive">
                    <table class="table table-hover">
                                                                                                                                                       
                      <thead>
                        <tr>
                      
                          <th>{{ trans('errors.app') }}</th>
                          <th>{{ trans('errors.user') }}</th>
                          <th>{{ trans('errors.device') }}</th>
                          <th>{{ trans('errors.comments') }}</th>
                          <th>{{ trans('errors.datetime') }}</th>
                          <th>{{ trans('errors.more_details') }}</th>

                        </tr>
                      </thead>
                      <tbody id="append_search_data">
                                                @foreach($data as $error)
                        
                         <tr data-toggle="collapse" id="table{{$i}}" data-target=".table{{$i}}">
                      
                          <td>{{$error->app}}</td>
                          <td>{{$error->first_name}}</td>
                          <td>{{$error->device_name}}</td>
                          <td>
                                                                              </td>
                          <td>{{convertDateTime($error->datetime)}}</td>
                          <td><img src="{{url('/')}}/images/down-arrow.png" class="icon-style" style="height:20px;width:20px;"></td>                  
                        </tr>

                        <tr class="collapse table{{$i}}" style="background-color:rgb(233, 233, 233);">
                        <td colspan="999">
                          <div class="col-mb-12">
                            <div class="row">
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.app') }}</b>: {{$error->app}}</div>
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.command_sent') }}</b>: </div>
                            </div>
                            <div class="row">
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.device_model') }}</b>: </div>
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.command_received') }}</b>: </div>
                            </div>
                            <div class="row">
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.device_version') }}</b>: </div>
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.scanned_qr') }}</b>: </div>
                            </div>
                            <div class="row">
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.device_status') }}</b>: </div>
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.payment_require') }}</b>: </div>
                            </div>
                            <div class="row">
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.available_blt') }}</b>: </div>
                              <div class="col-sm-6 mb-3"><b>{{ trans('errors.payment_api_response') }}</b>: </div>
                            </div>
                          </div>
                        </td>
                      </tr>
                                                @endforeach
                     
      
                      </tbody>
                    </table>
                  
                  </div>
                  <table class="table">
                       <tr> <td> {{ $data->links() }}</td></tr>
                  </table>
                </div>
              </div>
            </div>
 
          </div>
  
  
    

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

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $("#location").change(function () {
              var location = $(this).val();
              if(location.length==0){
                location = null;
                $("#device-id").hide();
              }else{
                $("#device-id").show();
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getDevicesList')}}',
                  data:{location : location },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('language.all')}}</option>';
                      var htmlAppend2 = '<option value="">{{trans('language.all')}}</option>';
                      $.each(responseData.devices, function (index, value) {
                        htmlAppend += '<option value="' + value.id + '">' + value.device_name +'</option>';
                      });
                      $.each(responseData.landmarks, function (index, value) {
                        htmlAppend2 += '<option value="' + value.landmark + '">' + value.landmark +'</option>';
                      });
                      console.log(htmlAppend2);
                      $("#device").html(htmlAppend);
                      $("#landmark").html(htmlAppend2);
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });

      $("#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>




    <!-- Modal -->



@endsection