Elep

@extends('layouts.plains')

@section('stylesheets')
    @parent
    <style>

.uploader-button .uploadcare--widget__button_type_open {
        background-color: #373737;
      }

#loading,
      .load-map {
          background: rgba(2, 2, 2, 0.4);
          height: 100vh;
          margin: 0 !important;
          position: fixed;
          width: 100%;
          display: none;
          z-index: 9999;
          top: 0;
      }

.loader,
      .loading {
          border: 8px solid #eee;
          border-radius: 50%;
          border-top: 8px solid #222;
          width: 60px;
          height: 60px;
          margin: auto;
          /*animation: spin 1s linear infinite;*/
          animation-name: spin;
          animation-duration: 800ms;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
      }

main form {
        width: 60%;
        margin: 0 auto;
      }

button {
        border: 1px solid;
      }

.abs-input {
        position: relative;
      }

.abs-input input {
        padding-right: 20px;
      }

.abs-input .clear-text {
        position: absolute;
        right: 10px;
        top: 20%;
        display: none;
        cursor: pointer;
        font-size: 18px;
      }

.form-group > label {
        font-size: 17px;
        font-family: 'Gilroy Bold', sans-serif;
      }

@media (max-width: 767px) {
        main form {
          width: 100%;
          margin: 0 auto;
        }
      }
    </style>

@endsection

@section('content')
<script>
  UPLOADCARE_LOCALE_TRANSLATIONS = {
    buttons: {
      choose: {
        files: {
          one: 'Add image'
        }
      }
    }
  }
</script>
    <main>

<form action="/place/{{ $suggest ? 'suggest' : 'register' }}" class="suggest-form" method="POST">
        @csrf
        <h3 class="rating-title">{{ $title }}</h3>
        <hr />
        <div class="form-group">
            <label for="place-suggest">Name of Place</label>
            <div class="abs-input">
                <input type="text" name="name" id="place-search" class="form-control place-search" placeholder="Type name of place to search or add new" data-type="place" autocomplete="off" required>
                <span href="#" class="clear-text"><i class="fa fa-times"></i></span>
            </div>
        </div>
        <input type="hidden" name="claimed" id="claimed">
        <div class="form-group">
            <label for="address">Address</label>
            <input type="text" name="address" id="address" class="form-control ds" placeholder="Address" required>
        </div>
        <input type="hidden" name="longitude" id="longitude">
        <input type="hidden" name="latitude" id="latitude">
        <div class="form-group" style="margin-bottom: 0.3rem">
            <label for="phone">Phone Number</label>

<input type="tel" name="phone" id="phone" class="form-control" placeholder="08010001000" autocomplete="off" {{ $suggest ? '' : 'required'}}>
        </div>
        <div class="form-group">
          <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
            <input id="whatsapp" name="type" type="checkbox" value="whatsapp" style="height: inherit;">
            <i class="fa fa-whatsapp" style="padding-left: 10px; padding-right: 3px; color: #2DAD9A"></i>
            <label style="padding-left: 0; margin-bottom: 0;" for="whatsapp">WhatsApp?</label>
          </div>
        </div>
        @if (!$suggest)
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" name="email" id="email" class="form-control" placeholder="info@business.com" {{ $suggest ? '' : 'required'}}>
            </div>
        @endif
        @php
					$types = [
						'restaurant' => 'Restaurant',
						'eatery' => 'Eatery',
						'fastfood' => 'Fast Food',
						'cafe' => 'Cafe',
						'mamaput' => 'Mama Put',
						'hotel' => 'Hotel',
						'bar' => 'Bar',
						'streetfood' => 'Street Food',
						'online' => 'Delivery Only'
					]
				@endphp
				<div class="form-group">
          <label for="">Type of Place</label>
          <div class="place-types" style="display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px;">
            @foreach($types as $key => $type)
              <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                <input id="{{ $key }}" name="type" type="radio" value="{{ $key }}" style="height: inherit;">
                <label style="padding-left: 10px; margin-bottom: 0;" for="{{ $key }}">{{ $type }}</label>
              </div>
            @endforeach
          </div>
        </div>

{{-- <div class="form-group">
            <label for="place-search">Have a picture? upload it here or take one now. (optional)</label>
            <div class="upload-images"></div>
            <div id="img-source">
            </div>
            <a href="#" class="add-new button button-secondary btn-circle" id="upload_widget" type="button">
              Add Image
            </a>
        </div> --}}

<button class="button button-primary btn-circle">Submit</button>
      </form>
    </main>

@endsection

@section('javascript')
@parent
  <script src="/js/utility.js"></script>
  <script src="/js/js-autocomplete.js"></script>
  <script src="/js/autocomplete.js"></script>
  <script src="/js/side.js"></script>

const populate = (location) => {
          address.value = location.address || address.value;
          longitude.value = location.longitude || longitude.value
          latitude.value = location.latitude || latitude.value
      }

autocomplete(address).then(loc => {
          populate(loc)
      });

const getDetails = async (placename) => {
          var link = `/api/place/${placename}/details`;

place = await doGet(link);
          if(place) {
              document.getElementById('address').value = place[0].address;
              document.getElementById('phone').value = place[0].phone || '';
              document.getElementById('claimed').value = true;
          }

}

function selectInput(e){
        e.target.select();
      }

document.querySelector('#place-search').addEventListener('focus', selectInput);

getDetails(placeName)
          }
        });
      });

if(load) {
                      load.style.display = "none";
                  }
              }
          })
          .catch(error => console.log(error))

});
  </script>
@endsection