@extends('adminlte::page')

@section('title', 'Reef | Map')

@section('css')
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div>{{$error}}</div>
                    @endforeach
                 @endif
                <div class="card-header">
                    <h3 class="card-title">Space Map</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.venue_map.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">

                            <input type="hidden" name="is_edit" id="is_edit" value="1">
                            <input type="hidden" name="venue_id" id="venue_id" value="{{ $venue->id }}"> 

                            <div class="col-md-4">
                                <div class="p-3 py-5">
                                    <div class="row mt-2">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="venue_name">Space Name</label>
                                                <input name="venue_name" type="text" class="form-control" value="@if(old('venue_name')) {{ old('venue_name') }} @else {{ $venue->venue_name }} @endif" placeholder="Space Name" required autocomplete="off">
                                                @if ($errors->has('venue_name'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('venue_name') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="type">Type</label>
                                                <select name="type" class="form-control" required>
                                                    <option disabled>-Select Type-</option>
                                                    @foreach($types as $type)
                                                        <option value="{{ $type->id }}" @if(old('type')) @if(old('type') == $type->id) selected @endif @else @if($venue->type == $type->id) selected @endif @endif>{{ $type->name }}</option>
                                                    @endforeach
                                                </select>
                                                @if ($errors->has('type'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('type') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="p-3 py-5">
                                    <div class="row mt-2">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="address">Address</label>
                                                <input name="address" id="address_field" type="text" class="form-control" value="@if(old('address')) {{ old('address') }} @else {{ $venue->address }} @endif" placeholder="Address" required autocomplete="off">
                                                @if ($errors->has('address'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('address') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="address2">Address 2</label>
                                                <input name="address2" type="text" class="form-control" value="@if(old('address2')) {{ old('address2') }} @else {{ $venue->address2 }} @endif" placeholder="Address 2" autocomplete="off">
                                                @if ($errors->has('address2'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('address2') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="p-3 py-5">
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="city">City</label>
                                                <input name="city" id="city_field" type="text" class="form-control" value="@if(old('city')) {{ old('city') }} @else {{ $venue->city }} @endif" placeholder="City" required autocomplete="off">
                                                @if ($errors->has('city'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('city') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="zip">Zip</label>
                                                <input name="zip" type="text" id="zip_field" class="form-control" value="@if(old('zip')) {{ old('zip') }} @else {{ $venue->zip }} @endif" placeholder="Zip" autocomplete="off">
                                                @if ($errors->has('zip'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('zip') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="region">Region</label>
                                                <input name="region" id="region_field" type="text" class="form-control" value="@if(old('region')) {{ old('region') }} @else {{ $venue->region }} @endif" placeholder="Region" required autocomplete="off">
                                                @if ($errors->has('region'))
                                                <span class="help-block error">
                                                <strong>{{ $errors->first('region') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="col-md-12">
                                <hr>
                                <div class="p-3 py-5">
                                 
                                    <!-- -->
                                    <div class="form-group">
                                        <label for="phone">Choose map location</label>
                                        <div id="googleMap" style="width:auto;height:400px;"></div>
                                        @if ($errors->has('la'))
                                            <span class="help-block error" style="color: red;">
                                                <strong>Langitude required</strong>
                                            </span>
                                        @endif

                                        @if ($errors->has('lo'))
                                            <span class="help-block error" style="color: red;">
                                                <strong>Longitude required</strong>
                                            </span>
                                        @endif
                                      </div>

                                    <input type="hidden" id="la" name="la" value="{{ $venue->la }}">
                                    <input type="hidden" id="lo" name="lo" value="{{ $venue->lo }}">
                                    <!-- -->
                               
                                 
                                    <div class="mt-5 text-right">
                                        <button type="submit" name="button_publish" class="btn text-white bg-green mr-3 blog_submit_btn">Save</button>
                                        <a href="{{ route('admin.venue_map') }}" type="button" class="btn text-white bg-blue" style="color:white;">Cancel</a>
                                    </div>
                                </div> 
                            </div> 

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script src="https://cdn.tiny.cloud/1/fxigyjlqfebpl6jpi1ano41mmmsxa9qiz794yp51i7f609uh/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
{{-- <script type="text/javascript" src="{{ mix('js/blog-text-editor.js') }}"></script> --}}



<script type="text/javascript">
 
    $(document).ready( function () {
       
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#thumbnail_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imgInp").change(function(){
            readURL(this);
        });
        $('#thumbnail_image').click(function(){ $('#imgInp').trigger('click'); });

        @if(session()->has('error'))
          $(document).Toasts('create', {
            class: 'bg-danger',
            title: 'Error',
            body: '{!! session()->get('error') !!}',
            autohide: true,
            delay: 2000
          })
        @elseif(session()->has('success'))
          $(document).Toasts('create', {
            class: 'bg-success',
            title: 'Success',
            body: '{!! session()->get('success') !!}',
            autohide: true,
            delay: 2000
          });
        @endif

       
    } );
</script>

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}" type="text/javascript"></script>
<script>
      // function initialize() {
      //     var latitude = "{{ $venue->la }}";
      //     var longitude = "{{ $venue->lo }}";
      //     var zoom = 7;

      //     var LatLng = new google.maps.LatLng(latitude, longitude);

      //     var mapProp = {
      //       center: LatLng,
      //       zoom:7,
      //       mapTypeId:google.maps.MapTypeId.ROADMAP
      //     };
      //     var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
      //     var marker = new google.maps.Marker({
      //         position: LatLng,
      //         map: map,
      //         title: 'Drag Me!',
      //         draggable: true
      //       });
      //     google.maps.event.addListener(marker, 'dragend', function(event) {
      //         document.getElementById('la').value = event.latLng.lat();
      //         document.getElementById('lo').value = event.latLng.lng();
      //     });
      // }
      // $(document).ready(function(){
      //   initialize();
      // });
    
</script>

<script>
      function initialize(lat, long) {

          if(lat == null) {
            var latitude = "{{ $venue->la }}";
            var longitude = "{{ $venue->lo }}";
          } else {
            var latitude = lat;
            var longitude = long;

            $("#la").val(lat);
            $("#lo").val(long);

          }

          
          var zoom = 7;

          var LatLng = new google.maps.LatLng(latitude, longitude);

          var mapProp = {
            center: LatLng,
            zoom:7,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
          var marker = new google.maps.Marker({
              position: LatLng,
              map: map,
              title: 'Drag Me!',
              draggable: true
            });
          google.maps.event.addListener(marker, 'dragend', function(event) {
              document.getElementById('la').value = event.latLng.lat();
              document.getElementById('lo').value = event.latLng.lng();
          });
      }
      $(document).ready(function(){
        initialize(null, null);
      });
    

    //Function to covert address to Latitude and Longitude
var getLocation =  function(address) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': address}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude, longitude);

      $("#la").val(latitude);
      $("#lo").val(longitude);

      initialize(latitude, longitude);
      } 
  }); 

  // console.log(address);
}


// getLocation('New York');

$(document).on('keyup', '#address_field', function(e){
    e.preventDefault();
    var address_field = $("#address_field").val();
    var city_field = $("#city_field").val();
    var zip_field = $("#zip_field").val();
    var region_field = $("#region_field").val();

    var addr_string = address_field + ' ' + city_field + ' ' + zip_field + ' ' + region_field;

    getLocation(addr_string);

});

$(document).on('keyup', '#city_field', function(e){
    e.preventDefault();
    var address_field = $("#address_field").val();
    var city_field = $("#city_field").val();
    var zip_field = $("#zip_field").val();
    var region_field = $("#region_field").val();

    var addr_string = address_field + ' ' + city_field + ' ' + zip_field + ' ' + region_field;

    getLocation(addr_string);

});

$(document).on('keyup', '#zip_field', function(e){
    e.preventDefault();
    var address_field = $("#address_field").val();
    var city_field = $("#city_field").val();
    var zip_field = $("#zip_field").val();
    var region_field = $("#region_field").val();

    var addr_string = address_field + ' ' + city_field + ' ' + zip_field + ' ' + region_field;

    getLocation(addr_string);

});

$(document).on('keyup', '#region_field', function(e){
    e.preventDefault();
    var address_field = $("#address_field").val();
    var city_field = $("#city_field").val();
    var zip_field = $("#zip_field").val();
    var region_field = $("#region_field").val();

    var addr_string = address_field + ' ' + city_field + ' ' + zip_field + ' ' + region_field;

    getLocation(addr_string);

});

</script>

<script type="text/javascript">
    $(document).ready(function(){
    var address_field = $("#address_field").val();
    var city_field = $("#city_field").val();
    var zip_field = $("#zip_field").val();
    var region_field = $("#region_field").val();

    var addr_string = address_field + ' ' + city_field + ' ' + zip_field + ' ' + region_field;

    if(addr_string != '' && addr_string != ' ') {
        getLocation(addr_string);
    }
    
});
</script>

<script>
    $(document).ready( function () {

    //publish unpublish blog
  $(document).on('change', ".published_unpublished_post_btn", function(){
  var post_id = $(this).attr('id');
  var post_type = $(this).val();
  $.ajax({
        type: "GET",
        data: {post_id:post_id, post_type:post_type},
        url: "/dashboard/posts/blog_publish_unpublish_post",
        success: function(data) {
            //  $("#blog_posts_for_ajax").html(data['html']);
          },
    });
});
//

});
</script>

@stop