@extends('layouts.admin')
@section('title','Ongoing Service')
@section('css')
<style>
  .disable {
    display: none;
  }
</style>
@endsection
@section('breadcrumb', 'Ongoing Service')
@section('content')
<!--Action boxes-->
<div class="container-fluid">



  <div class="row-fluid">
    <div class="span12">

      <div class="widget-box">
        <div class="widget-title"> <span class="icon"><i class="icon-ok"></i></span>
          <h5>Ongoing Service</h5>
          <div class="buttons"><select class="form-control timezone"></select></div>

        </div>
        <div class="widget-content">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>User First Name</th>
                <th>User Last Name</th>
                <th>Provider First Name</th>
                <th>Provider Last Name</th>
                <th>Service</th>
                <th>Date</th>
                <th>View Details</th>
                <!-- <th>Status</th>

                  <th colspan="1">Action</th> -->

              </tr>
            </thead>
            <tbody>
              @if(count($service)>0)
              @foreach($service as $data)
             
              <tr class="odd gradeX">
                <td>@if(isset($data->user)){{$data->user->userFirstName}}@endif</td>
                <td>@if(isset($data->user)){{$data->user->userLastName}}@endif</td>
                <td>@if(isset($data->provider)){{$data->provider->userFirstName}}@endif</td>
                <td>@if(isset($data->provider)){{$data->provider->userLastName}}@endif</td>
                                  <td>N/A</td>
                                <td class="utc" data-utc="{{date('Y/m/d H:i:s',strtotime($data->created_at)).' GMT'}}">{{$data->created_at}}</td>
                <td><a class="View Details" href="{{route("viewdetailcontact",[$data->servicerequest_id])}}">View Details</a></td>
                <!-- <td class="center"></td> -->
              </tr>
              @endforeach
              @endif
            </tbody>
          </table>
          @if(count($service)>0)
          {{ $service->links('vendor.pagination.default') }}
          @endif

        </div>
      </div>





    </div>


  </div>
</div>
</div>
<!--end-main-container-part-->
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="{{asset('js/timezones.full.js')}}"></script> 
<script>
$(document).ready(function() {
    $('.timezone').timezones();
    $('.utc').each(function() {
        var udate = $(this).attr('data-utc');
        var zone = $('.timezone').val();
        const str2 = new Date(udate).toLocaleString('en-US', { timeZone: zone });
        var date = new Date(udate).toString();

       // var index = date.lastIndexOf(':') +3
        //$(this).html(date.substring(0, index));
        $(this).html(str2);
        
        
    });
    $('.timezone').change(function(){
         $('.utc').each(function() {
        var udate = $(this).attr('data-utc');
        var zone = $('.timezone').val();
        const str2 = new Date(udate).toLocaleString('en-US', { timeZone: zone });
        var date = new Date(udate).toString();

       // var index = date.lastIndexOf(':') +3
        //$(this).html(date.substring(0, index));
        $(this).html(str2);
        
        
    });
    });

    });
  $(".edit").click(function(e) {
    e.preventDefault();
    c = confirm("Are You sure");
    if (c == false)
      return false;
    aa = $(this);
    url = $(this).attr("href");
    axios.put(url)
      .then(function(response) {
        aa.html(response.data);
      })
      .catch(function(error) {

        //ele.remove();
      });
  });
</script>
@endsection