@extends('admin.layouts.index')

@push('style')
<style>

.btn:not(.btn-link):not(.btn-circle) i {
    font-size: 20px;
    position: relative;
    top: 0;
}
</style>
@endpush

@section('content')
<section class="content home">
     <div class="block-header">
          <!-- Start Content-->
          <div class="container-fluid">
               <div class="body">

                    <div class="row">
                         <div class="col-lg-12 mt-3 mb-3">
                              <h2 class="text-center">{{!empty($cafeDetails) ? 'EDIT' : 'ADD'}} CAFE</h2>
                         </div>
                    </div>

                    <div class="row">
                         <div class="col-12">
                              <div class="card">
                                   <div class="header mb-3">
                                        <a class="btn btn-white float-left ml-2 mt-2" onclick="history.go(-1)">
                                             <i class="material-icons text-muted">arrow_back</i>
                                        </a>
                                   </div>
                                   <div class="card-body">

                                        @if(empty($cafeDetails))
                                        <form class="form" name="addCafe" id="addCafe" method="post" action="{{route('admin.add_cafe_post')}}" enctype="multipart/form-data">
                                             @else
                                             <form class="form" name="updateCafe" id="updateCafe" method="post" action="{{route('admin.update_cafe',$cafeDetails->id)}}" enctype="multipart/form-data">
                                                  @method('PUT')
                                                  @endif
                                                  @csrf

                                                  <input type="hidden" name="cafe_id" id="cafe_id" value="{{ $cafeDetails->id ?? ''}}">

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="name" name="name" class="form-control" value="{{ $cafeDetails->name ?? ''}}">
                                                            <label class="form-label">Name</label>
                                                       </div>
                                                  </div>

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="location" name="location" class="form-control" value="{{ $cafeDetails->location ?? ''}}">
                                                            <label class="form-label">Location</label>
                                                       </div>
                                                  </div>
                                                  <input type="hidden" id="latitude" name="latitude" class="form-control" value="{{ $cafeDetails->latitude ?? ''}}">
                                                  <input type="hidden" id="longitude" name="longitude" class="form-control" value="{{ $cafeDetails->longitude ?? ''}}">


                                                  <div>
                                                       @if(empty($cafeDetails))
                                                       <input type="submit" class="btn btn-success" class="add_cafe" value="Add">
                                                       @else
                                                       <input type="submit" class="btn btn-success" class="update_cafe" value="Update">
                                                       @endif

                                                  </div>
                                             </form>

                                   </div>
                              </div> <!-- end card-->
                         </div> <!-- end col-->
                    </div>

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

@endsection

@push('script')
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script>
     $('#addCafe, #updateCafe').validate({
          rules: {
               'name': {
                    'required': true
               },

               'location': {
                    'required': true
               },
          },
          messages: {
               'name': {
                    'required': 'Please enter name.'
               },

               'location': {
                    'required': 'Please enter location.'
               },
          },

          highlight: function(input) {
               $(input).parents('.form-line').addClass('error');
          },
          unhighlight: function(input) {
               $(input).parents('.form-line').removeClass('error');
          },
          errorPlacement: function(error, element) {
               $(element).parents('.form-group').append(error);
          }
     });
</script>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB8zvdzwc1kNgvhKuhGoyFawHotcyDXNqQ&libraries=places,drawing&sensor=false"></script>

<script>
     $(document).ready(function() {
          $("#latitudeArea").hide();
          $("#longitudeArea").hide();
     });

     function initialize() {
          var input = document.getElementById('location');
          var autocomplete = new google.maps.places.Autocomplete(input);
          input.setAttribute('placeholder', '');
          autocomplete.addListener('place_changed', function() {
               var place = autocomplete.getPlace();
               $('#latitude').val(place.geometry['location'].lat());
               $('#longitude').val(place.geometry['location'].lng());

               $("#latitudeArea").toggle(!!place.geometry && !!place.geometry.location);
               $("#longitudeArea").toggle(!!place.geometry && !!place.geometry.location);
          });
     }

     google.maps.event.addDomListener(window, 'load', initialize);
</script>



<script>
     //WHEN EDIT FORM WILL OPEN

     document.addEventListener('DOMContentLoaded', function() {
          // Get all the form inputs
          const formInputs = document.querySelectorAll('.form-control');

          // Iterate over each input
          formInputs.forEach(function(input) {
               // Check if the input has a predefined value
               if (input.value !== '') {
                    // Add a class to the parent form-group to show the label
                    input.parentElement.classList.add('focused');
               }

               // Add event listener for input focus
               input.addEventListener('focus', function() {
                    // Add a class to the parent form-group to show the label
                    this.parentElement.classList.add('focused');
               });

               // Add event listener for input blur
               input.addEventListener('blur', function() {
                    // Check if the input value is empty
                    if (this.value === '') {
                         // Remove the class from the parent form-group to hide the label
                         this.parentElement.classList.remove('focused');
                    }
               });
          });
     });
</script>
@endpush