@extends('admin.layouts.master')
@section('title', 'Dashboard')
@section('content')
<style>
    .profile-sidebar {
    float: left;
    width: 450px; 
    margin-right: 20px;
}

.brand-img{
    height: 39rem;
    width: 100%;
    object-fit: contain;
}
</style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <div class=" pull-left">
                        <div class="page-title">Job View</div>
                        

                    </div>
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{route('admin.deshbord')}}">Home</a>&nbsp;<i
                                class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Job view</li>
                  
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PROFILE SIDEBAR -->
                    <div class="profile-sidebar">
                       <div class="row">
                           <div class="col-md-12">   
                                <div class="card">
                                    <div class="card-body no-padding height-9">
                                        <div class="row">
                                            <div class="profile-userpic">
                                                <img src="{{ asset('Client/Service/'.$job->image) }}" class="img-responsive" alt="">
                                            </div>
                                        </div>
                                        <div class="profile-usertitle">
                                            <div class="profile-usertitle-name"> {{ $job->user->full_name }} </div>
                                        </div>
                                        <!-- END SIDEBAR USER TITLE -->
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <b>Title</b> <a class="pull-right">{{ $job->title }}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>Service Need Date</b> <a class="pull-right">{{ $job->date }}</a>
                                            </li>
                                            @if (isset($job->town_name) && !empty($job->town_name))
                                                <li class="list-group-item">
                                                    <b>Town</b> <a class="pull-right">{{ $job->town_name }}</a>
                                                </li>
                                            @endif
                                            <li class="list-group-item">
                                                <b>Job Type</b> <a class="pull-right">@if($job->type == 'range') Fix Price @else Standard  @endif</a>
                                            </li>
                                            @if ($job->type == 'range')
                                            <li class="list-group-item">
                                                <b>Fix Price</b> <a class="pull-right">{{$job->price}}</a>
                                            </li>  
                                            @endif
                                            @if ($job->job_compelete_date !==null)
                                            <li class="list-group-item">
                                                <b>Job Complete Date</b> <a class="pull-right">{{ $job->job_compelete_date }}</a>
                                            </li>
                                            @endif

                                        </ul>
                                    </div>
                                </div>
                           </div>
                           <div class="col-md-12">
                            <div class="card">
                                <div class="card-head">
                                    <header>Job Description </header>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editdescription">
                                        Edit 
                                      </button>
                                </div>
                                <div class="card-body no-padding height-9">
                                    <div class="form-group col-md-12">
                                        <form action="{{ route('admin.job.assigm') }}" method="POST">
                                            @csrf
    
    
                                            {{-- <div class="col-md-12">
                                                <select class="form-select input-height" name="service_id" style="width: 100%;display: block;position: relative;">
                                            
                                                <option value="0">Please Select Service</option>
    
                                                @foreach ($service as $ser )      
                                                    <option value="{{ $ser->id }}" style="word-break: break-all;">{{ $ser->title }} | {{ $ser->user->full_name }}</option>
                                                <select class="form-select input-height" name="service_id" style="width: 160%;display: block;position: relative;">
                                                @endforeach
                                                
                                                </select>
                                            </div> --}}
                                            {{-- <ul class="list-group list-group-unbordered">
                                                <li class="list-group-item">
                                                    <b>Work Experiance </b>
                                                    <div class="profile-desc-item pull-right">1 Year</div>
                                                </li>
                                                <li class="list-group-item">
                                                    <b>Price </b>
                                                    <div class="profile-desc-item pull-right">$230.00</div>
                                                </li>
                                                <li class="list-group-item">
                                                    <b>Professor Name </b>
                                                    <div class="profile-desc-item pull-right">Abdul Saikh</div>
                                                </li>
                                                <li class="list-group-item">
                                                    <b>Date</b>
                                                    <div class="profile-desc-item pull-right">21st Jan 2017</div>
                                                </li>
                                            </ul> --}}
                                            <div class="row list-separated profile-stat">
                                                <div class="offset-md-2 col-md-8">
                                                    <p>{{ $job->desc }}</p>
                                                </div>
                                            </div>
                                            @if ($job->bank_slip !==null )
                                            {{-- <div class="row">
                                                <div class="offset-md-2 col-md-8 text-center">
                                                    <h2>Bank Slip</h2>
                                                    <img src="{{ asset('bank_slip/'.$job->bank_slip) }}" alt="{{ $job->bank_slip }}" width="600px" height="300px">
                                                </div>
                                            </div> --}}
                                            @endif
                                            
                                        </form>
                                    </div>
                                </div>
                            </div>
                           </div>
                       </div>
                    </div>
                    <!-- END BEGIN PROFILE SIDEBAR -->
                    <!-- BEGIN PROFILE CONTENT -->
                    <div class="profile-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-head">
                                        <header>Bank Slip</header>
                                    </div>
                                    <div class="card-body no-padding height-9">
                                        <div class="form-group col-md-12">
                                            <form action="{{ route('admin.job.assigm') }}" method="POST">
                                                @csrf
        
        
                                                {{-- <div class="col-md-12">
                                                    <select class="form-select input-height" name="service_id" style="width: 100%;display: block;position: relative;">
                                                
                                                    <option value="0">Please Select Service</option>
        
                                                    @foreach ($service as $ser )      
                                                        <option value="{{ $ser->id }}" style="word-break: break-all;">{{ $ser->title }} | {{ $ser->user->full_name }}</option>
                                                    <select class="form-select input-height" name="service_id" style="width: 160%;display: block;position: relative;">
                                                    @endforeach
                                                    
                                                    </select>
                                                </div> --}}
                                                {{-- <ul class="list-group list-group-unbordered">
                                                    <li class="list-group-item">
                                                        <b>Work Experiance </b>
                                                        <div class="profile-desc-item pull-right">1 Year</div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Price </b>
                                                        <div class="profile-desc-item pull-right">$230.00</div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Professor Name </b>
                                                        <div class="profile-desc-item pull-right">Abdul Saikh</div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Date</b>
                                                        <div class="profile-desc-item pull-right">21st Jan 2017</div>
                                                    </li>
                                                </ul> --}}
                                                {{-- <div class="row list-separated profile-stat">
                                                    <div class="offset-md-2 col-md-8">
                                                        <p>{{ $job->desc }}</p>
                                                    </div>
                                                </div> --}}
                                                @if ($job->bank_slip !==null )
                                                <div class="row">
                                                    <div class="col-md-12 text-center">
                                                        {{-- <h2>Bank Slip</h2> --}}
                                                        <img src="{{ asset('bank_slip/'.$job->bank_slip) }}" alt="{{ $job->bank_slip }}" class="img-responsive brand-img" height="300px">
                                                    </div>
                                                </div>
                                                @endif
                                                
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END PROFILE CONTENT -->
                </div>
                
            </div>
            {{-- <div class="row">
                <div class="col-md-4">
                    <div class="profile-sidebar">
                          
                      
                    </div>
                </div>
            </div> --}}
                <div id="googleMap" style="width:100%;height:200px;"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Service Provider List</header>
                        </div>
                        <div class="card-body ">
                            @if (Session::has('message'))
                            <div class="alert alert-primary" role="alert">
                                {{Session::get('message')}}
                              </div>
                            @endif

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table class="table display product-overview mb-30" id="support_table">
                                        <thead>
                                            <tr>
                                                <th>Town</th>
                                                <th>Name</th>
                                                <th>Previous RFQ sent</th>
                                                <th>Quote Replied</th>
                                                <th>Quote Amount</th>
                                                <th>Awarded</th>
                                                <th>Cancelled</th>
                                                <th>Avg Rating</th>
                                                <th>Action</th>
                                                <th>Download Doc</th>
                                                <th>Send Sms</th>
                                                <th>Job Status</th>
                                                <th>Job Feedback</th>
                                                <th>Complete Job </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- {{ dd($service) }} --}}
                                            @foreach ($service as $provider )
                                                <tr>
                                                    <td>
                                                        @if ($provider->user->towns)
                                                            {{$provider->user->towns->name}}  
                                                        @else
                                                            no town selected 
                                                        @endif
                                                        {{-- <div class="checkbox checkbox-icon-black p-0">
                                                            <input id="checkbox2" type="checkbox" checked="checked">
                                                            <label for="checkbox2"></label>
                                                        </div> --}}
                                                    </td>
                                                    <td>{{$provider->user->full_name}}</td>
                                                    <td>{{ $provider->user->countqouets_count}}</td>
                                                    <td>{{ $provider->user->replyqouets_count}}</td>
                                                    <td>
                                                        @if ($provider->user->qouets ==null)
                                                            None
                                                        @else
                                                        {{ $provider->user->qouets->quotes }}
                                                        @endif
                                                    </td>
                                                    <td>{{$provider->user->accept_count}}</td>
                                                    <td>{{$provider->user->rejected_count}}</td>
                                                    @if ($provider->user->rating->avg('rating') == 0)
                                                        <td>0 star</td>
                                                    @else
                                                        <td>{{$provider->user->rating->avg('rating')}} star</td>
                                                    @endif 
                                                    <td>
                                                        @if($provider->user->released == null)
                                                            <button class="detail-rel" data-id="{{$provider->user}}" type="button" class="btn-sm btn-theme">Release details </button>
                                                        @endif
                                                        @if($provider->user->released !=null)
                                                            @if($provider->user->released->status == 1)
                                                            <span class="label label-primary">Job Details Released To {{$provider->user->full_name}}</span>
                                                            @elseif($provider->user->released->status == 2)
                                                                <span class="label label-success">Available </span>
                                                                @if ($provider->user->Assign)
                                                                @else
                                                                    <form action="{{ route('admin.job.assigm') }}" method="POST" >
                                                                            @csrf
                                                                            <input type="hidden" name="service_id" value="{{ $provider->id }}">
                                                                            <input type="hidden" name="job_id" value="{{ $job->id }}">
                                                                            <input type="hidden" name="user_id" value="{{ $provider->user->id }}">
                                                                            <button type="submit" class="btn-sm btn-info">assign job</button>
                                                                        </form> 
                                                                @endif

                                                            @else
                                                            <span class="label label-danger">Rejected</span>
                                                            @endif
                                                        @endif
                                                    </td>
                                                    <td>
                                                    @if ($provider->user->qouets ==null)
                                                        No document

                                                    @else
                                                        @if($provider->user->qouets->doc == null)
                                                            No document
                                                        @else
                                                            <a href="{{asset('/doc/'.$provider->user->qouets->doc)}}" class="btn btn-small btn-primary" download>Download<a>
                                                        @endif
                                                    @endif
                                                        
                                                    </td>
                                                    <td>
                                                        <form action="{{route('sms.number')}}" method="POST">
                                                          @csrf
                                                          <input type="hidden" name="sr_number" value="{{$job->id}}">
                                                            <input type="hidden" name="number" value="{{$provider->user->phone_number}}">
                                                            <button type="submit" class="btn-sm btn-theme">Reminder Sms</button>
                                                        </form>
                                                    </td>
                                                    <td>
                                                        
                                                        @if ($provider->user->Assign ==null)
                                    
                                                            No Service Provider Assigned 
                                                        @else
                                                            @if ($provider->user->Assign->status == 0)
                                                            <span class="label label-info">In Progress</span>
                                                            @else
                                                            <span class="label label-success">complete</span>

                                                            @endif
                                                        @endif
                                                    </td>
                                                                                                                    <td>
                                                        
                                                        @if ($provider->user->Assign ==null)
                
                                                        No Feedback Yet 
                                                        @else
                                                            @if ($provider->user->Assign->feedback ==null)
                                                            <span class="label label-info">no feedback yet</span>
                                                            @else
                                                            <button onclick="seefeedback({{$provider->user->Assign->id}})" class="btn-sm btn-info">view feedback</button>
                                                            @endif
                                                        @endif
                                                    </td>
                                                    <td>
                                                        
                                                        @if ($provider->user->Assign ==null)
                                    
                                                            No Service Provider Assigned 
                                                        @else
                                                            @if ($provider->user->Assign->status == 0)
                                                             <a href="{{ route('job.compelte.by.admin',['id'=>$provider->user->Assign->id,'status'=>1,]) }}" class="btn btn-info">click to complete</a>
                                                            @else
                                                            <span class="label label-success">This job is complete</span>

                                                            @endif
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                           
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="current_job_id" value="{{$job->id}}">
            <input type="hidden" id="latitude_job_id" value="{{$job->latitude}}">
            <input type="hidden" id="longitude_job_id" value="{{$job->longitude}}">

            <div class="profile-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-head">
                                        <header>Job Images</header>
                                    </div>
                                    <div class="card-body no-padding height-9">
                                        <div class="form-group col-md-12">
        
                                                <ul class="list-group list-group-unbordered">    
                                                    @if(isset($job->jobImage) && !empty($job->jobImage))
                                                    @foreach($job->jobImage as $images)
                                                        <li class="list-group-item"><img src="{{ asset('/job/'.$images->image) }}" width="250px" height="150px" alt="{{ $images->image }}" /> </li>
                                                    @endforeach
                                                    @endif
                                                </ul>
                                                
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
           
        </div>
    </div>

    {{-- release --}}


    <button id="released-btn" data-toggle="modal" data-target="#released-modal">asd</button>
@endsection
@section('scripts')
<div id="released-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
      
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Job Details Released</h4>
            </div>
            <div class="modal-body">
                <form action="{{route('Details.Released')}}" method="post">
                    @csrf
                    <input type="hidden" name="job_id" value="{{ $job->id }}">
                    <input type="hidden" id="provider_id" name="provider_id" value="">
                    <input type="hidden" id="provider_number" name="provider_number" value="">
                    <div class="form-group">
                      <label for="recipient-name" class="col-form-label">Collect Administration fee:</label>
                      <input type="number" class="form-control" name="holding_fee" id="recipient-name" value="{{$automation->fee}}" required>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-theme">Submit</button>
            </form>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>



          <div class="modal fade" id="feedback" 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">Client Feedback</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="seefeedbackshow"></p>                

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>

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


    <!-- Modal -->
<div class="modal fade" id="editdescription" 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">Edit Description</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route('edit.job.desc') }}" method="POST">
            @csrf
            <input type="hidden" name="jobid" value="{{ $job->id }}">
        <div class="modal-body">
          <textarea class="form-control"  name="description" >{{ $job->desc }}</textarea>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save changes</button>
        </form>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        </div>
      </div>
    </div>
</div>
 <script>
    $(window).load(function() {

        $(document).on("click",".detail-rel",function(){
            // alert();
            let data = $(this).data("id");
            $('#provider_id').val(data.id);
            $('#provider_number').val(data.phone_number);
            // $('#released-modal').modal("show");
            $('#released-btn').trigger('click');

        });
    }); 

    function seefeedback(id){
            $.ajax({
                url:"{{ url('/see/client/feedback/') }}" + '/' + id,
                type:"get",
                success:function(data){
                    $('#seefeedbackshow').text(data.feedback);
                    $('#feedback').modal('show');
                }
            });
    }

    $(document).ready( function () {
    $('#support_table').DataTable({
        "paginate":false,
    });

    
} );
</script>  

<script>
        // $(document).ready(function(){
          
        // });
        function myMap() {
            let jobidclient = document.getElementById("current_job_id").value;
            var client_latitude = document.getElementById("latitude_job_id").value;
            var client_longitude = document.getElementById("longitude_job_id").value;
        let infoWindow;
        var map = new google.maps.Map(document.getElementById('googleMap'), {
            
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });
        var marker;
        infoWindow = new google.maps.InfoWindow;
        let pos;
            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                console.log(navigator.geolocation);

                navigator.geolocation.getCurrentPosition(function(position) {
                  pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                  };
                  showLocation(pos.lat, pos.lng);
                  console.log(pos);
                  marker = new google.maps.Marker({position: pos});
                  console.log("marker",marker);
                  marker.setMap(map);
                  let jobid = document.getElementById("current_job_id").value;
                //   alert(jobid);
                  

                    $.ajax({
                        headers: {
						    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					    },  
                        url:"{{ url('/view/client/job/java') }}" + '/' + jobid,
                        type: "get",
                        success: function(data) {
                            // alert();
                            console.log('servicejob',data);
                            marker = new   google.maps.Marker({
                                    position: {
                                        lat: Number(data.job.latitude),
                                        lng: Number(data.job.longitude)
                                    },
                                    map: map,
                                    title: 'Client',
                                    icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                                });
                            for (let index = 0; index < data.service.length; index++) {
                                const element = data.service[index];
                                console.log(element);
                                marker = new   google.maps.Marker({
                                    position: {
                                        lat: Number(element.latitude),
                                        lng: Number(element.longitude)
                                    },
                                    map: map,
                                    title: element.user.full_name,
                                });
                            }
                        },
                    });
                    
                



                  google.maps.event.addListener(map, 'click', function(mapsMouseEvent) {
                    // alert('mudaisr');
                        marker.setPosition(mapsMouseEvent.latLng);
                        // alert(mapsMouseEvent.latLng.lat());
                  
                        showLocation(mapsMouseEvent.latLng.lat(), mapsMouseEvent.latLng.lng());
                      });
                  google.maps.event.addListener(marker,'click',function() {
                        // map.setZoom(9);
                        map.setCenter(marker.getPosition());
                      });
                    map.setCenter(pos);
                  }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                  });
              }
              else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
              }
            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
              searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function() {
              var places = searchBox.getPlaces();
                // console.log("places changed");
                if (places.length == 0) {
                  return;
                }

                // Clear out the old markers.
                markers.forEach(function(marker1) {
                  marker1.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                  if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                  }
                  var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                  };
                  marker.setPosition(place.geometry.location);
                  showLocation(place.geometry.location.lat(), place.geometry.location.lng());
                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                      map: map,
                      icon: icon,
                      title: place.name,
                      position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                  } else {
                    bounds.extend(place.geometry.location);
                  }
                });
                map.fitBounds(bounds);
              });
          }

          function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
          }
          let latitude;
          let longitude;
          function showLocation(lat, lng){
            latitude = lat;
            longitude = lng;
            $('#inputLatitude4').val(latitude);
            $('#inputLongitude4').val(longitude);
         
        }

    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiIvCLftcHwIONNtyTUsGHkS1vZuCPeuw&libraries=places&callback=myMap" async defer></script>



 <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
@endsection