@extends('buyers_sellers.layout2.master')
@section('title', 'Edit Profile')
@section('content')
    <style>
        select.form-control {
            height: 39px !important;
        }

    </style>
    <div class="page-content-wrapper">
        <div class="page-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="page-bar">
                    <div class="page-title-breadcrumb">
                        <div class=" pull-left">
                            <div class="page-title">Add Services</div>
                        </div>
                        <ol class="breadcrumb page-breadcrumb pull-right">
                            <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                    href="{{ route('seller.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                            </li>
                            {{-- <li><a class="parent-item" href="">UI Elements</a>&nbsp;<i class="fa fa-angle-right"></i> --}}
                            </li>
                            <li class="active">Add Services</li>
                        </ol>
                        
                    </div> 
                </div>
                <div class="card">
                    <div class="card-body ">
                        @if (Session::has('message'))
                    <div class="alert alert-danger" role="alert">
                        {{Session::get('message')}}
                      </div>
                    @endif
                        <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="job-tags p-3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                {{-- <h6 class="theme-color font-weight-bold">Add A New Service</h6> --}}
                                            </div>

                                            <div class="col-md-12 p-3">
                                                <form class="form" method="post"
                                                    action="{{ route('seller.service.store') }}"
                                                    enctype="multipart/form-data">
                                                    @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="selectservice" class="bold">Service Title</label>
                                                            <input type="text" name="title" class="form-control"
                                                                placeholder="Service Title">
                                                            <p class="text-danger"><b>@error('title') {{ $message }}
                                                                    @enderror</b></p>
                                                        </div> --}}
                                                        <div class="form-group col-md-3">
                                                            <label for="selectservice" class="bold">Select Service
                                                                Category</label>
                                                            <select class="custom-select form-control"
                                                                name="sub_category_id" id="sub_category_id">
                                                                <option value="">Select Service Category</option>
                                                                @foreach ($data as $row)
                                                                    @if($row->type == 'physically')
                                                                    <option value="{{ $row->id }}" data-id="{{ $row->type }}">{{ $row->name }} | Physical
                                                                    </option>
                                                                    @endif
                                                                    @if($row->type == 'remotely')
                                                                    <option value="{{ $row->id }}" data-id="{{ $row->type }}">{{ $row->name }} | Remote
                                                                    </option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                            <p class="text-danger"><b>@error('sub_category_id')
                                                                    {{ $message }} @enderror</b></p>
                                                        </div>
                                                        {{-- <div  class="form-group col-md-3">
                                                            <label for="selectservice" class="bold">Select Nearest
                                                                Town</label>
                                                            <select class="custom-select form-control" name="Town">
                                                                <option value="">Select Town</option>
                                                                @foreach ($towns as $town)
                                                                    <option value="{{ $town->id }}">{{ $town->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <p class="text-danger"><b>@error('Town') {{ $message }}
                                                                    @enderror</b></p>
                                                        </div> --}}
                                                        {{-- <div class="col-md-3">
                                                            <label for="selectservice" class="bold">Service Price</label>
                                                            <input type="text" name="price" class="form-control"
                                                                placeholder="Service Price">
                                                            <p class="text-danger"><b>@error('price') {{ $message }}
                                                                    @enderror</b></p>
                                                        </div> --}}
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label for="selectservice" class="bold">Service
                                                                Description</label>
                                                            <textarea type="text" cols="30" rows="10" name="description"
                                                                class="form-control"
                                                                placeholder="Service Description"></textarea>
                                                            <p class="text-danger"><b>@error('description')
                                                                    {{ $message }} @enderror</b></p>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="selectservice" class="bold">Attach Service
                                                                Image(Optional)</label>
                                                            <input type="file" accept="image/jpg" name="service_image"
                                                                class="btn btn-theme btn-sm col-sm-7 mb-3 w-50 uploadbtn" />
                                                            <p class="text-danger"><b></b></p>
                                                        </div>
                                                    </div>
                                                    
                                                    <div style="display:none" id="map">
                                                        <div id="googleMap" style="width:100%;height:200px;"></div>
                                                    </div>
                                                    <div class="col-md-12 p-1">
                                                        <input type="submit" class="btn btn-theme float-md-right"
                                                            value="Add Service">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </main>
        </div>
    </div>
    @endsection
    @section('scripts')
    <!-- Checking Service -->
    <script>
        $(document).ready(function() {
            $(document).on('change','#sub_category_id', function() {
                var type = $(this).find(':selected').data('id');
                if (type == "remotely") {
                    $("#map").css("display", "none");
                }else{
                    $("#map").css("display", "block");
                }
            });
        });
    </script>



    <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'
        });
        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);
                  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');
                        marker.setPosition(mapsMouseEvent.latLng);
                        // alert(mapsMouseEvent.latLng.lat());
                        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('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>
@endsection