@extends('buyers_sellers.layout2.master')
@section('title', 'Edit Profile')
@section('content')
    <style type="text/css">
        .profileimage {
            height: 146px;
            width: 152px;
            object-fit: fill;
        }

        .uploadbtn {
            margin-left: -8px !important; 
        }

        select.form-control {
            height: 39px !important;
        }
        #searchtown{
          width: 44%;
    height: 40px;
    margin-left: 36% !important;
    z-index: 0;
    position: absolute;
    left: 212px !important;
    top: 0px !important;

        }
        @media (max-width:992px){
          #searchtown{
          z-index: 0;
    position: absolute;
    left: -100px !important;
    top: 52px !important;
    }
        

        }

    </style>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ route('buyer.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        </li>
                        <li class="active">Jobs</li>
                    </ol>
                </div>
            </div>
          <div class="row">
                  
            <div class="col-sm-12">
                <div class="card">
                  <br>
                <div class="text-center">
  {{-- <p>Please note that Service Provider assignment is subject to their availability. In the event that we are
     unable to meet your requirements we will <br> contact
     you to discuss alternative arrangements in accordance with our Terms of Service.</p> --}}
                    </div>
                    <div class="card-body ">
                                <!-- Main Content -->
                                <main class="col col-xl-12 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="home" role="tabpanel"
                                            aria-labelledby="home-tab">
                                            <div class="d-flex"></div>
                                            <div class="job-tags p-3">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <form class="needs-validation" novalidate="" action="{{ route('buyer.job.post') }}" enctype="multipart/form-data" method="post" id="payment-form">
                                                          <input type="hidden" name="type" id="type" value="{{$type}}">
                                                            <input type="hidden" name="sub_category_id" id="sub_category_id" value="{{$id}}">
                                                            @csrf
                                                            <input type="hidden" id="lng" name="lng" value="">
                                                            <input type="hidden" id="lat" name="lat" value="">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <label for="jobtitle" class="bold">This Service Request is for a:</label>
                                                                    <input type="text" name="title" id="title" class="form-control" value="{{$data->name}}" placeholder="Job Title" required disabled>
                                                                    {{-- <p class="text-danger"><b>@error('title') {{$message}} @enderror</b></p> --}}
                                                                    <div class="invalid-feedback">
                                                                        Please fill in your email
                                                                      </div>
                                                                </div>
                                                                    
                                                                    
                                                                <div class="col-md-6">
                                                                    <label for="jobbudget" class="bold">Date required</label>
                                                                    <input type="date" id="date" name="date" class="form-control datepicker"
                                                                        placeholder="Job date" value="{{old('date')}}" autocomplete="off" required>
                                                                    <p class="text-danger"><b>@error('date') {{$message}} @enderror</b></p>
                                                                    <div class="invalid-feedback">
                                                                        Please put integer
                                                                      </div>
                                                                </div>
                                                                <!--<div class="form-group col-md-4">-->
                                                                        <!--<label for="selectservice" class="bold">Where is the service required?</label>-->
                                                                        {{-- <input type="hidden" name="Town" value="{{$towns->id}}" id="Town"> --}}
                                                                        <input type="text" id="searchtown"  placeholder="Service Request location">
                                                                        <input type="hidden" name="Town" id="Town" class="form-control" readonly>
                                                                       
                                                                        {{-- <div class="invalid-feedback">
                                                                            Please fill in your email
                                                                          </div> --}}
                                                                        {{-- <p class="text-danger"><b>@error('Town') {{$message}} @enderror</b></p> --}}
                                                                    <!--</div>-->
                                                                
                                                            </div>
                                                            @if ($type == "range")
                                                            <div class="row">
                                                              <div class="col-md-4">
                                                                      <label for="jobbudget" class="bold">Your Price</label>
                                                                      <input type="number" id="range" name="price" class="form-control"
                                                                          placeholder="Your fix price" value="{{old('price')}}" required>
                                                                      <p class="text-danger"><b>@error('price') {{$message}} @enderror</b></p>
                                                                      <div class="invalid-feedback">
                                                                          Please put integer
                                                                        </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                            @endif
                                                           

                                                            <div class="row">
                                                               
                                                                @if($data->type == "physically")
                                                                  <div id="googleMap" style="width:100%;height:200px;"></div>
                                                                @endif 
                                                                <br>
                                                                <br>
                                                                <div class="col-md-12">
                                                                  <label for="jobdescription" class="bold" style="margin-top: 25px;">Please provide us with the details of your requirements</label>
                                                                  <textarea type="text" cols="30" rows="10"
                                                                      name="details" id="details" class="form-control"
                                                                      placeholder="Job Description" required> {{old('details')}}</textarea>
                                                                      <p class="text-danger"><b>@error('details') {{$message}} @enderror</b></p>
                                                                      <div class="invalid-feedback">
                                                                          Please fill in your email
                                                                      </div>

                                                              </div>
                                                                <div class="form-group col-md-6">
                                                                    <label for="selectservice" class="bold">Please press the ctrl+click for multiple file image</label><br>
                                                                    <input type="file" accept="image/jpg" name="service_image[]" id="service_image" class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn" multiple/>
                                                                        <p class="text-danger"><b>@error('service_image') {{$message}} @enderror</b></p> 
                                                                 </div> 
                                                                <div class="col-md-12 m-1">
                                                                        <button type="submit" class="btn btn-theme"  style="float: left;background: #f0f0f0;">
                                                                            Continue @if($charges->price > 0 )  @endif
                                                                        </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </main>
                            </div>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>
    </div>
@endsection

@section('scripts')

<script>
        function myMap() {
        let infoWindow;
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });
  //       const request = {
  //   placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
  //   fields: ["name", "formatted_address", "place_id", "geometry"],
  // };
        const service = new google.maps.places.PlacesService(map);

        // service.getDetails(request, (place, status) => { 
        //   console.log({place, status})
        // })
        var marker;
        infoWindow = new google.maps.InfoWindow;
        let pos;
            // Try HTML5 geolocation.
            if (navigator.geolocation) {
              // alert();
                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);
                  document.getElementById("lng").value = pos.lng;
                  document.getElementById("lat").value = pos.lat;
                  marker = new google.maps.Marker({position: pos});
                  console.log("marker",marker);
                  marker.setMap(map);
                  google.maps.event.addListener(map, 'click', function(mapsMouseEvent) {
                    // alert('mudaisr');
                    console.log("mapsMouseEvent", mapsMouseEvent)
                      // var service = new google.maps.places.PlacesService(map);
                      // console.log(service);
                      service.getDetails(mapsMouseEvent, (place, status) => { 
                        console.log({place, status})
                        console.log(place.formatted_address)
                        document.getElementById("Town").value = place.formatted_address;
                      })
                        marker.setPosition(mapsMouseEvent.latLng);
                        document.getElementById("lng").value = mapsMouseEvent.latLng.lng();
                        document.getElementById("lat").value = 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('searchtown');
            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.
                    document.getElementById("Town").value = place.formatted_address;
                    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>

<script>
    $(function(){
    var dtToday = new Date();
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var maxDate = year + '-' + month + '-' + day;
    $('.datepicker').attr('min', maxDate);
});
</script>
@endsection