@extends('layouts.innermaster')
@section('content')

<div class="empty-space col-xs-b35 col-md-b100"></div>
<div class="empty-space col-xs-b35 "></div>
{{-- <div class="empty-space col-xs-b15 col-sm-b50 col-md-b100"></div> --}}
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5d1cb9e522d70e36c2a3f5e1/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<div class="container">
    <div class="row">

<div class="col-md-12">
    <img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1562240640/WEB_BANNER1_4_tnqjpj.jpg" alt="" style="width: 100%; height: auto;">

</div>
<div class="empty-space col-xs-b15 col-md-b15"></div>

        <div class="col-md-8">
            <div class="popup-container register-page">
                <div class="popup-align">
                    <h3 class="h3 text-center">Register Now</h3>
                    <div class="empty-space col-xs-b30"></div>
                    <form class="form-horizontal" method="POST" action="/auth/register/seller/create" id="sellerreg">
                        {{-- <div class="form-group">
                            <div class="col-md-12">
                                Image <input type="file" class="form-control" placeholder="Image">
                            </div>
                        </div> --}}
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="input-group reg-frm">
                                    <span class="input-group-btn">
                                        <select class="form-control" name="title">
                                            <option>Mr</option>
                                            <option>Miss</option>
                                            <option>Mrs</option>
                                            <option>Ms</option>
                                        </select>
                                    </span>
                                    <input type="text" name="name" placeholder="Name" class="form-first-name required form-control"
                                    id="form-first-name" value="{{ old('name') }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mb-xs-0">
                            <div class="col-md-6">
                                <input type="text" name="email" placeholder="Email..." class="form-email required form-control registermail"
                                       id="form-email" value="{{ old('email') }}">
                                       <p class="emailerror" style="color:red"></p>
                            </div>
                            <div class="col-md-6">
                                    <input type="text" name="phone" placeholder="Phone..." class="form-email required form-control"
                                    id="form-phone" value="{{ old('phone') }}">
                            </div>
                        </div>
                        <div class="form-group mb-xs-0">
                                <div class="col-md-6">
                                        <input type="password" id="password" name="password" placeholder="Password"
                                        class="form-password form-control required" id="form-password">
                                </div>
                                <div class="col-md-6">
                                        <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password"
                                        class="form-password form-control required" id="form-repassword">
                                </div>
                        </div>
                        <div class="empty-space col-xs-b30"></div>
                        <h5 class="h5 text-center">Shop or pickup location</h5>
                        <div class="empty-space col-xs-b30"></div>
                        <div class="form-group mb-xs-0">
                                <div class="col-md-8">
                                        <input type="text" name="store_name" class="required form-control" placeholder="Business Name">
                                </div>
                                <div class="col-md-4">
                                        <select class="form-control required sumo" name="store_type" id="bustype">
                                                <option>Businness Type</option>
                                                <option>Retail</option>
                                                <option>Whole sale</option>
                                                <option>Both</option>

                                            </select>
                                </div>
                                
                        </div>
                        <div class="form-group mb-xs-0">
                            <div class="col-md-4">
                                
                                    <select class="form-control required sumo" name="district_id" id="district">
                                            <option>Select your district</option>
                                            @foreach($districts as $district)
                                                <option value={{ $district->district_id }}>{{ $district->name }}</option>
                                            @endforeach
                                        </select>
                                
                                        <script>
                                                $('#district').on('change', function (e) {
                                                    //console.log(e);
                                                    var district_id = e.target.value;
            
                                                    //ajax
                                                    $('#city').empty();
                                                    $('#city').append('<option >Select your city</option>');
                                                    $("#form-street").val("");
                                                    $("#form-no").val("");
                                                    $('#area').empty();
                                                    $('#area').append('<option >Select your area</option>');

                                                    $.get('/auth/register/area?district_id=' + district_id, function (data) {
                                                        //success data
                                                        
                                                        $('#area').empty();
                                                        
                                                        $('#area').append('<option >Select your area</option>');

                                                        $.each(data, function (register, area) {
                                                            $('#area').append('<option value="' + area.area_id + '">' + area.name + '</option>');
                                                        });
                                                    });
            
                                                    geocode();

                                                });
            
            
                                            </script>
                            </div>
                            <div class="col-md-4">
                                
                                    <select class="form-control required" name="area_id" id="area">
                                            <option>Select your area</option>
                                        </select>
                                        <script>
                                            $('#area').on('change', function (e) {
                                                var area_id = e.target.value;
                                                
                                                $("#form-street").val("");
                                                $("#form-no").val("");

                                                //ajax
                                                $.get('/auth/register/city?area_id=' + area_id, function (data) {
        
                                                    $('#city').empty();
        
                                                    $.each(data, function (register, city) {
        
                                                        $('#city').append('<option value="' + city.city_id + '">' + city.name + '</option>')
                                                    });
                                                geocode();
                                                });

                                                
                                               
                                            });
                                        </script>

                            </div>
                            <div class="col-md-4">
                                    <select class="form-control " name="city_id" id="city">
                                            <option>Select your city</option>
                                    </select>
                                    <script>
                                        
                                        $("#city").change(function(){

                                            geocode();

                                        })

                                    </script>
                            </div>
                        </div>
                        <div class="form-group mb-xs-0">
                            
                            <div class="col-md-8">
                                    <input type="text" name="street" placeholder="Street" class="required form-phone form-control"
                                    id="form-street" value="{{ old('street') }}">

                                    <script>
                                    
                                       

                                    </script>

                            </div>
                            <div class="col-md-4">
                                <input type="text" name="no" placeholder="No" class="required form-phone form-control"
                                id="form-no" value="{{ old('no') }}">
                        </div>
                        </div>
                        
                        
                        
                        <div class="form-group mb-xs-0">
                            <div class="col-md-8">
                                    {{-- <div class="empty-space col-xs-b30"></div> --}}
                                    <h5 class="h5 text-center">If the  shop or pickup location  is shown differently on the map, please pin the correct location</h5>
                                    <div class="empty-space col-xs-b30"></div>
                            </div>
                            <div class="col-md-4">
                                <button class="button size-2 style-3 pull-right" href="#">
                                    <span class="button-wrapper">
                                        <span class="icon"><img src="img/icon-4.png" alt=""></span>
                                        <span class="text">Register Now</span>
                                    </span>
                                </button>  
                            </div>
                        </div>
                        {{-- <a id="verify_address">Verify</a> --}}
                        <input type="text" name="store_lat" id="store_lat" hidden>
                        <input type="text" name="store_lng" id="store_lng" hidden>
                        {!! Form::hidden('latitude', $value = old('latitude'), $attributes = array('id'=>'latitude')) !!}
                        {!! Form::hidden('longitude', $value = old('longitude'), $attributes = array('id'=>'longitude')) !!}
                        {!! Form::hidden('status', $value = 'pending', $attributes = array('id'=>'status')) !!}
                        {!! Form::hidden('user_type', $value = 'seller', $attributes = array('id'=>'user_type')) !!}
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
                <div id="map"></div>
                <style>

                    #map {
                        width: 100%;
                        height: 650px;

                    }

                </style>


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

<div class="empty-space col-xs-b35 col-md-b30"></div>

@section('scripts')

<script>
    

$('.header-bottom').show();
$('.header-top').show();

var mappin=false;

// $('.sumo').SumoSelect();



</script>

<script>

        $(document).ready(function(){
    
    $('form[id="sellerreg"]').validate({
      rules: {
        name: 'required',
        store_name: 'required',
        no: 'required',
        street: 'required',
        email: {
          required: true,
          email: true,
        },
        password: {
          required: true,
          minlength: 6,
        },
        password_confirmation: {
          equalTo: "#password"
        },
    
        phone: {
          required: true,
          minlength: 10,
          maxlength: 10,
        }
      },
      messages: {
        name: 'This field is required',
        store_name : 'This field is required',
        email: 'Enter a valid email',
        password: {
          minlength: 'Password must be at least 6 characters long'
        },
        password_confirmation: {
          equalTo: 'Password not matched'
        },
        
        // phone: {
        // //   minlength: 'Phone must be at max 10 characters long'
        // }
      },
      submitHandler: function(form) {
       if (mappin) {
        


        $.ajax({
  url: "{{url('/auth/mail/verify')}}",

method:"POST",
data:{email:$('.registermail').val()}


})
  .done(function( html ) {
  if(html=='yes'){
    //   swal('email already taken');
    alert('email already taken')
      $('.emailerror').html('email already taken');
  }
  else{
    form.submit();
  }
  });

       }else{
           alert('please Pin pickup location in map');
       }
       
       
      }
    });
    
        })

        var marker;
        var map;
        function initMap() {
            
            // The location of Uluru
            var uluru = {lat: 6.9271, lng: 79.8612};
            // The map, centered at Uluru
            map  = new google.maps.Map(
                document.getElementById('map'), {zoom: 11, center: uluru,streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false,gestureHandling: 'greedy',
      draggable: true});
            // The marker, positioned at Uluru
             marker = new google.maps.Marker({position: uluru, map: map, mapTypeId: 'satellite',
                icon:'https://img.icons8.com/material/48/000000/map-pin.png'
            });

                // map.setMapTypeId('satellite');
                // map.setOptions({ draggableCursor : "url(http://s3.amazonaws.com/besport.com_images/status-pin.png), auto" })


    
    
            google.maps.event.addListener(map, 'click', function(event) {
                console.log( event);
                var geocoder = new google.maps.Geocoder();


                var myLatLng = event.latLng;
                var lat = myLatLng.lat(); ///clicked latitude
                var lng = myLatLng.lng();/// clicked logtitue
                var latlng = new google.maps.LatLng(lat, lng);

updatePosition(lat, lng)
                    // geocoder.geocode({
                    //      'latLng': latlng
                    // }, function(results, status) {
                    //      if (status == google.maps.GeocoderStatus.OK) {
                    //         if (results[0]) {
                    //             marker.setMap(null);
        
                    //             marker = new google.maps.Marker({position: event.latLng, map: map});
                    //                 $('#formatted_address').val(results[0].formatted_address);
                                
                    //             //set laditude and logtude here to hiddne text

                    //             var lat = myLatLng.lat(); ///clicked latitude
                    //             var lng = myLatLng.lng();/// clicked logtitue

                    //             document.getElementById('store_lat').value = lat;
                    //             document.getElementById('store_lng').value = lng;

                    //             console.log(results[0].formatted_address);
                    //         }
                    //     }
                    // });
            });
            google.maps.event.addListener(marker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'drag', function () {
    marker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    marker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});
        }




    
    
        $('#verify_address').click(function () {
    
            // alert("OK")
            
            var district = $('#district :selected').index();
            var area = $('#area :selected').index();
            var city = $('#city :selected').index();
            var street = $('#form-street').val().length;
            var no = $('#form-no').val().length;
    
            // if(district>0 && area>0 && city>0){
                
                // alert("OKKKK")

            geocode();
    
    
            // }
    
    // if ($('#formatted_address').val().length>0) {
    
    //  $('.dis').removeAttr('disabled');
    // }
    
        });
    

         $("#form-street").keyup(function(){

    // alert("Street")
         geocode();


})

$('#form-no').keyup(function () {
        geocode();
    });
    

    
        function geocode() {

            // alert("GEO")

            // var no=$
            var district = $('#district :selected').text();
            // alert(district)
            var area = $('#area :selected').text();
            // alert(area)
            var city = $('#city :selected').text();
            // alert(city)
            var street = $('#form-street').val();
            // alert(street)
            var no = $('#form-no').val();
            // alert(no)
            var location = no + " "+ street + " " + city + " " + area + " " + district + " " + "srilanka";
            
            console.log(location)


        
            axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
    
                params: {
                    address: location,
                    key: 'AIzaSyCdEGdmfelt8-kMGHcgxaZt_kS6UeSTF5k'
    
                }
    
    
            }).then(function (response) {
    
    
                console.log(response);
    
                var lat = response.data.results[0].geometry.location.lat;
                var long = response.data.results[0].geometry.location.lng;
                console.log(lat + " " + long);
                // var myLatlng = {lat:  lat, lng: long};
    
    
                // var map = new google.maps.Map(document.getElementById('map'), {
                //     zoom: 14,
                //     center: {lat: lat, lng: long}
                // });

                map.setCenter({lat: lat, lng: long});
                map.setZoom(15);
                // map.setMapTypeId('satellite');
                marker.setMap(null);
    
                 marker = new google.maps.Marker({
                    position: {lat: lat, lng: long},
                    map: map,
                    title: 'Hello World!',
                    content: response.data.results[0].formatted_address,
    
                    // icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
                    animation: google.maps.Animation.DROP
    
                });
    
    
                document.getElementById('store_lat').value = lat;
                document.getElementById('store_lng').value = long;
    // document.getElementById('long').innerHTML=response.data.results[0].formatted_address;
               
    
            }).catch(function (error) {
                console.log(error);
            });
        }
  
       

function updatePosition(lat, lng) {
   
                var geocoder = new google.maps.Geocoder();
 var myLatlng = new google.maps.LatLng(lat, lng);
                    geocoder.geocode({
                         'latLng': myLatlng
                    }, function(results, status) {
                         if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                // marker.setMap(null);
        marker.setPosition(myLatlng);
                                // marker = new google.maps.Marker({position: myLatlng, map: map});
                                // marker ({position:latLng, map: map});
                                    $('#formatted_address').val(results[0].formatted_address);
                                
                                //set laditude and logtude here to hiddne text

                                // var lat = myLatLng.lat(); ///clicked latitude
                                // var lng = myLatLng.lng();/// clicked logtitue

                                // document.getElementById('longitude').value = lng;
                                document.getElementById('latitude').value = lat;
                                document.getElementById('longitude').value = lng;
$('#pindrop').val('dropped');
mappin=true;

                                console.log(results[0].formatted_address);
                            }
                        }
                    });
}


    // $('#form-no').keyup(function () {
    //     geocode();
    // });
    
    </script>
    
    
    <script type="text/javascript">
        function setCoords(location) {
    
            var lat = location.coords.latitude;
            var lng = location.coords.longitude;
    
            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;
    
            // alert(document.getElementById('latitude').value);
            // alert(document.getElementById('longitude').value);
    
    
        }
    
        $(document).ready(function () {
    
            navigator.geolocation.getCurrentPosition(setCoords);
        });
    
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdEGdmfelt8-kMGHcgxaZt_kS6UeSTF5k&callback=initMap">
    </script>

@endsection


@endsection