@extends('layouts.customer')
@section('content')
<style type="text/css">
/* Example CSS for autocomplete dropdown */
.autocomplete-dropdown {
  z-index: 9999; /* Adjust the value as needed */
}

.border_botm_1px{border-bottom: 1px dotted #ddd !important;}
  #success_tic .page-body{
  max-width:300px;
  background-color:#FFFFFF;
  margin:10% auto;
}
 #success_tic .page-body .head{
  text-align:center;
}
/* #success_tic .tic{
  font-size:186px;
} */
#success_tic .close{
  opacity: 1;
  position: absolute;
  right: 0px;
  font-size: 30px;
  padding: 3px 15px;
  margin-bottom: 10px;
}
#success_tic .checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #1ab394;
  position: absolute;
}
#success_tic .checkmark-circle .checkmark {
  border-radius: 5px;
}
#success_tic .checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
#success_tic .checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid #fff;
  border-top: 15px solid #fff;
  border-radius: 2.5px !important;
  content: '';
  left: 35px;
  top: 80px;
  position: absolute;
}
/**/
@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
/*.pac-container{
   top: 480px!important;
}*/
/*.class480{
    top: 480px !important;
}
.class250{
   top: 250px !important;
}*/
/*.pac-container {
    z-index: 10000 !important;
}*/

/*.pac-container.pac-logo.class250{
  top: 950px !important;
}
.pac-container.pac-logo.class480{
  top: 480px !important;
}*/
.pac-container.pac-logo{
    top: 250px !important;
}
</style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1>Restaurants</h1>
                <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                    <ol class="breadcrumb pt-0">
                        <li class="breadcrumb-item">
                            <a href="{{url('/')}}/dashboard">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Restaurant</li>
                    </ol>
                </nav>
                <div class="separator mb-5"></div>
          </div>
        </div>

        <div class="row">
            <div class="col-12">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
        <div class="row mb-2">
            @if ($message = Session::get('success'))
                <div class="w-100 alert alert-success">
                    <p>{{ $message }}</p>
                </div>
            @endif
        </div>

        <div class="row">
            {{--<div class="col-12 col-lg-4">
                <div class="card mb-4">
                    <div class="card-body">
                       <div class="row justify-content-between mb-4 align-items-center">
                            <h5>All Locations</h5>
                            @can('restaurant_location_create')
                            <!--  <button type="button" class="btn" style="font-size: 1.5rem;" data-toggle="modal"
                                data-target="#addLocationModal">
                                <span class="simple-icon-plus"></span>
                              </button> -->
                               
                                    <button class="btn btn-header-light icon-button sync-location" type="button" title="Sync Location" data-url="https://eaterli.com/api/sync-locations" data-id="{{ $business->id }}">
                                        <i class="simple-icon-refresh"></i>
                                    </button>
                               
                                    <button type="button" class="btn" style="font-size: 1.5rem;" data-toggle="modal" data-target="#addLocationModal">
                                        <span class="simple-icon-plus"></span>
                                    </button> 
                               
                            @endcan
                        </div>
                        
                        @if($locations)
                            <ul class="nav flex-column">
                                @foreach( $locations as $key => $location )
                                    <li class="nav-item border_botm_1px @if($key > 12) __paginationMore d-none @endif">
                                        <span class="nav-link active" >
                                            {{ $location->name }} 
                                            <span style="float: right;"><a href="{{ route('restaurant-location.show', ['account' => $account, 'restaurant_location' => $location->id ]) }}"><i class="simple-icon-pencil"></i></a> </span>
                                            @if( '1' == $location->is_primary )
                                                <span style="color: #fff;background-color: green;padding: 2px 4px;border-radius: 2px;float: right; margin-right: 3%;">master</span>
                                            @endif

                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                            @if(isset($locations) && count($locations) > 10)
                              <div style="text-align: center; margin-top: 11px;">
                                <b class="__loadMorePagination" style="cursor: pointer; color: #00ab82;">show more results ({{ count($locations) -10}}) <i class="fa fa-caret-down"></i></b>
                                 <b class="__loadMorePagination1" style="cursor: pointer; color: #00ab82; display: none;">show less results <i class="fa fa-caret-up"></i></b>
                               </div> 
                            @endif
                        @endif
                    </div>
                </div>
            </div>--}}

            <div class="col-12 col-lg-12">
                {{-- <div class="card mb-4">
				       	@can('restaurant_location_edit')
                    <div class="card-body">
                        <form action="{{ route('restaurants.update',['account'=>$account,'restaurant'=>$business->id]) }}" method="POST" id="restaurant_update_form">
                                @csrf
                                @method('PUT')
                            <h5 class="mb-4">Restaurant Name</h5>
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label for="name">Business Name</label>
                                    <input type="text" class="form-control" name="name" value="{{ $business->name }}" id="name" placeholder="Business name">
                                </div>
                            </div>

                            <hr />
                            <h5 class="mb-4 mt-4">Business Location</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" name="email" value="{{ $business->email ?: '' }}" id="email" placeholder="Email">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="phone">Phone</label>
                                    <input type="text" class="form-control" name="phone" value="{{ $business->phone ?: '' }}" id="phone" placeholder="Phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addressv1">Address</label>
                                <input type="text" class="form-control" name="address" value="{{ $business->address ?: '' }}" id="addressv1" placeholder="1234 Main St">
                                <div id="addressv1err"></div>
                            </div>
                            <!-- <div class="form-group">
                                <label for="inputAddress2">Address 2</label>
                                <input type="text" class="form-control" name="" id="" placeholder="Apartment, studio, or floor">
                            </div> -->
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="city">City</label>
                                    <input type="text" class="form-control" name="city" value="{{ $business->city ?: '' }}" id="locality">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="state">State</label>
                                    <input type="text" class="form-control" name="state" value="{{ $business->state ?: '' }}" id="administrative_area_level_1">
                                    <!-- <label for="inputState">State</label>
                                    <select name="" id="" class="form-control">
                                        <option selected="">Choose...</option>
                                        <option>...</option>
                                    </select> -->
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="zipcode">Zip</label>
                                    <input type="text" class="form-control" name="zip_code" value="{{ $business->zip_code ?: '' }}" id="postal_code">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="latitude">Latitude</label>
                                    <input class="form-control" placeholder="Latitude" type="text" name="lat" id="latitude" value="{{ $business->lat ?: '' }}" readonly="">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="zipcode">Longitude</label>
                                    <input class="form-control" placeholder="Longitude" type="text" name="lng" id="longitude" value="{{ $business->lng ?: '' }}" readonly="">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="radius">Radius (in meter)</label>
                                    <input type="text" class="form-control" name="radius" value="{{ $business->radius ?: '' }}" id="radius" placeholder="Radius In Miles">
                                </div>
                                
                                
                            </div>

                            <button type="submit" class="btn btn-primary d-block mt-3">Save</button>
                        </form>
                    </div>
                    @endcan
                </div> --}}

                <div class="card mb-4">
					
                    <div class="card-body">
						@can('restaurant_location_list')
                        <div class="row justify-content-between mb-4">
                            <h5>Restaurant Locations</h5>
                            @can('restaurant_location_create')
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#addLocationModal">
                                    <span class="simple-icon-plus"></span> Add location
                                </button> 
                            @endcan
                        </div>
                         <div id="DataTables_Table_0_wrapper">  
                        <table class="data-table" id="DataTables_Table_0">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Address</th>
                                    <th scope="col">State</th>
                                    <th scope="col">City</th>
                                    <!-- <th scope="col">Country</th> -->
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if( !empty( $locations ) )
                                    @php $i=0; @endphp
                                    @foreach( $locations as $location ) 
                                        <tr>
                                            <th scope="row">{{ ++$i }}</th>
                                            <td>{{ $location->name }} @if($location->is_primary) <span class="badge badge-success">Master</span> @endif</td>
                                            <td>{{ $location->address }}</td>
                                            <td>{{ $location->state }}</td>
                                            <td>{{ $location->city }}</td>
                                            <!-- <td>{{ $location->country }}</td> -->
                                            <td>
                                                <div class="dropdown">
                                                    <div style="cursor: pointer;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="glyph-icon simple-icon-options-vertical"></div>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                        @if(!$location->is_primary )      
                                                            <a class="dropdown-item set-primary" href="javascript:void(0)" data-url="{{ route('setPrimary', ['account'=>$account,'id'=> $location->id ]) }}">Set Master</a>
                                                        @endif  
                                                    <a href="{{ route('restaurant-location.show', ['account' => $account, 'restaurant_location' => $location->id ]) }}" class="dropdown-item"> Edit</a> 
                                                    @if (!$location->is_primary)
                                                        <a href="javascript:void(0)" class="dropdown-item"data-toggle="modal" data-target="#exampleModal-{{$location->id}}"> Delete</a>
                                                    @endif                                                   
                                                    </div>
                                                </div>
                                                                         <!-- Modal -->
                        <div class="modal fade" id="exampleModal-{{ $location->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel-{{ $location->id }}">Delete Location</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to delete this location?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">Close</button>
                                        <form action="{{ route('restaurant-location.destroy', ['account' => $account, 'restaurant_location' => $location->id]) }}" method="POST">
                                            @csrf
                                            @method('DELETE')                                       
                                            <button type="submit" class="btn btn-danger">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                      </div>
                        @endcan

                        <div class="modal fade" id="addLocationModal" tabindex="-1" role="dialog"
                                aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    {{--<form id="res-location-form" action="{{ route('restaurant-location.store',['account'=>$account]) }}" method="POST">--}}
                                    <form id="res-location-form" action="{{ secure_url('restaurant-location') }}" method="POST">
                                        @csrf
                                        <div class="modal-header">
                                            <h5 class="modal-title">Add Business Location</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">

                                            <div class="form-group">
                                                <label for="name">Location Name</label>
                                                <input type="text" class="form-control" name="name" id="name" placeholder="Location name">
                                            </div>

                                            @if($business->pos_type == '2')
                                                <div class="form-group">
                                                    <label for="pos_location_id">Clover Location ID</label>
                                                    <input type="text" class="form-control" name="pos_location_id" id="pos_location_id" placeholder="LZVJ3MV4F8W4Z">
                                                </div>
                                            @endif
                                          <div class="form-group">
                                                <label for="phone">Phone Number</label>
                                                <input type="text" class="form-control" name="phone" id="phone" placeholder="Phone Number">
                                            </div>
                                            <div class="form-group">
                                                <label for="address">Address</label>
                                                <input type="text" class="form-control" name="address" id="address" placeholder="1234 Main St">
                                            </div>

                                            <div class="form-group">
                                                <label for="country">Country</label>
                                                <input type="text" class="form-control" name="country" value="US" id="country" disabled>
                                            </div>

                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="state">State</label>
                                                    <input type="text" class="form-control states order-alpha" name="state" id="state" readonly="">
                                                </div>

                                                <div class="form-group col-md-4">
                                                    <label for="city">City</label>
                                                    <input type="text" class="form-control cities order-alpha" name="city" id="city" readonly="">
                                                </div>
                                                
                                                <div class="form-group col-md-2">
                                                    <label for="zip_code">Zip</label>
                                                    <input type="text" class="form-control" name="zip_code" id="zip_code">
                                                </div>
                                            </div>

                                            
                                            <input type="hidden" name="lat" id="lat">
                                            <input type="hidden" name="long" id="long">

                                            <input type="hidden" name="restaurant_id" value="{{ $business->id }}" />
                                            
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary submit-data">Save</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
<div id="success_tic" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <a class="close" href="#" data-dismiss="modal">&times;</a>
      <div class="page-body" style="text-align: center;">
    <div class="head">  
      <!-- <h3 style="margin-top:5px;">Restaurant locations updated successfully.</h3> -->
      <h4>Restaurant locations updated successfully.</h4>
    </div>

  <h3 style="text-align:center;"><div class="checkmark-circle">
  <div class="background"></div>
  <div class="checkmark draw"></div>
</div><h3>

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

  </div>

@endsection

@section('script')  
<script>
    $(document).ready(function(){
       $(document).on('click','.__loadMorePagination',function(){
              $('.__paginationMore').removeClass('d-none');
           
            $(this).hide();  
            $('.__loadMorePagination1').show();
       });
       $(document).on('click','.__loadMorePagination1',function(){
              $('.__paginationMore').addClass('d-none');
              $(this).hide();
              $('.__loadMorePagination').show();
       });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

$(document).on('submit',"#restaurant_update_form",function(e){
    
    if($("#latitude").val() == '' || $("#longitude").val() == ''){
         $("#addressv1err").html('<spn class="text-danger">Please Choose address from dropdown</span>');
         e.preventDefault();
          return false;
    }
    else{
        $("#restaurant_update_form").submit();
    }
});
$(document).on('keyup',"#addressv1",function(){
  $("#latitude").val('');
  $("#longitude").val('');
    $("#addressv1err").html('');
    // $('.pac-container').removeClass('class250');
    // $('.pac-container').addClass('class480');
})
$(document).on("keyup","#address",function(){
      $("city").val('');
      $("#state").val('');
      $("#country").val();
      $("#lat").val('');
      $("#long").val('');
      $("#zip_code").val();
    // $('.pac-container').removeClass('class480');
    //  $('.pac-container').addClass('class250');
})
//new code
var placeSearch, autocomplete ,autocompletev1;
      var componentForm = {
        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        postal_code: 'long_name'
      };


      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('addressv1')),
            {});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }
      function initAutocompletev1() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocompletev1 = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('address')),
            {});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocompletev1.addListener('place_changed', fillInAddressv1);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();
         if(autocomplete.getPlace().geometry.location.lat()){
              $("#latitude").val(autocomplete.getPlace().geometry.location.lat());
              $("#longitude").val(autocomplete.getPlace().geometry.location.lng());
         }
        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }
      function fillInAddressv1() {
        // Get the place details from the autocomplete object.
        var place = autocompletev1.getPlace();
         if(autocompletev1.getPlace().geometry.location.lat()){
              $("#lat").val(autocompletev1.getPlace().geometry.location.lat());
              $("#long").val(autocompletev1.getPlace().geometry.location.lng());
         }
         console.log(place.address_components);
          for (var i = 0; i < place.address_components.length; i++) {
            for (var j = 0; j < place.address_components[i].types.length; j++) {
              if (place.address_components[i].types[j] == "postal_code") {
                document.getElementById('zip_code').value = place.address_components[i].long_name;
              }else if(place.address_components[i].types[j] == "locality" || place.address_components[i].types[j] == "postal_town") {
                document.getElementById('city').value = place.address_components[i].long_name;
              }
              else if(place.address_components[i].types[j] == "administrative_area_level_1") {
                document.getElementById('state').value = place.address_components[i].long_name;
              }
              else if(place.address_components[i].types[j] == "country") {
                document.getElementById('country').value = place.address_components[i].long_name;
              }
            }
          }
      }
      initAutocomplete();
      initAutocompletev1();


//end code
    function getCoordinatesAndformSubmit(address){
        	 $("#long").val('');
			      	  $("#lat").val('');
			  console.log('https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&key=AIzaSyCL6zp79W047VPyb-sReTtHsklzYP767ac');
		  fetch("https://maps.googleapis.com/maps/api/geocode/json?address="+address+'&key=AIzaSyCL6zp79W047VPyb-sReTtHsklzYP767ac')
		    .then(response => response.json())
		    .then(data => {
		      const latitude = data.results[0].geometry.location.lat;
              const longitude = data.results[0].geometry.location.lng;
		      console.log({latitude, longitude});
			      if(!latitude || !longitude){
                      altert('You location latitude and longitude not found try again');
			      }
			      else{
			      	  $("#long").val(longitude);
			      	  $("#lat").val(latitude);
			      	   LocaionFormSubmit();
			      }

		    })
		}
        function LocaionFormSubmit(){
        	 var form = $("#res-location-form");
	            $.ajax({
	               url: form.attr('action'),
	               method: 'POST',
	               data: form.serialize(),
	               success: function(response){
	                  if( response.status ) {
	                   
	                      alert(response.message);
                        window.location.reload();
	                  } else {
	                      alert("Error")
	                  }
	               },
	               error: function(error){
	                  console.log(error)
	               }
	            });
        }

        $(".submit-data").click(function(e) {
	         var address = $("#res-location-form #address").val() +' '+$("#res-location-form #city").val()+' '+$("#res-location-form #state").val();
             getCoordinatesAndformSubmit(address);
            e.preventDefault();
        });

        $(".sync-location").click(function(e) {
            var id = $(this).data('id'), 
                target_url = $(this).data('url');

            $.ajax({
               url: target_url,
               method: 'POST',
               data: {"restaurant_id":id},
               success: function(response){
                  if( response.status ) {
                      alert(response.message);
                      location.reload();
                  } else {
                      alert("Error");
                  }
               },
               error: function(error){
                  console.log(error)
               }
            });

            e.preventDefault();
        });

        // Set Primary
        $(".set-primary").click(function(e) {
            var target_url = $(this).data('url');

            $.ajax({
               url: target_url,
               method: 'POST',
               data: {"is_primary":"1"},
               success: function(response){
                  if( response.status ) {
                      $("#success_tic").modal('show');
                      
                      setTimeout(function(){location.reload();},1500)
                  } else {
                      alert("Error");
                  }
               },
               error: function(error){
                  console.log(error)
               }
            });

            e.preventDefault();
        });
    });
</script>
  @include('partials.js._statecity')
@endsection