Elep

@extends('layouts.plain')

@section('nav')

@endsection

@section('title')
    <meta content="Cravvings - Find Food Near You" property="og:title">
    <meta content="https://www.cravvings.com/" property="og:url">
    <meta content="Discover restaurants and food vendors serving the food you want close to you." property="og:description">
    <meta content="https://www.cravvings.com/images/brand/cravvings_logo_white_bg.jpg" property="og:image">
    <meta content="1250" property="og:image:width">
    <meta content="750" property="og:image:height">
    <meta name="twitter:title" content="Cravvings - Find Food Near You">
    <meta name="twitter:description" content="Discover restaurants and other food vendors serving the food you want close to you.">
    <meta name="twitter:image" content="https://www.cravvings.com/images/brand/cravvings_logo_white_bg.jpg">
    <meta name="twitter:image:width" content="1250">
    <meta name="twitter:image:height" content="750">
    <meta name="twitter:image:alt" content="An image of the Cravvings logo - spelt out as cravvings with the v's overlapping and a spoon shaped curve c">
    <title>Cravvings - Leave a Review</title>
@show

@section('stylesheets')
  @parent

.hero {
      height: 800px;
      justify-content: center;
    }

.hide {
      display: none;
    }

.nav-wrapper {
        justify-content: space-between;
    }
    .nav-items {
        display: flex;
        
    }
    .nav-item {
        margin-right: 8px;
        margin-left: 8px;
    }
    .nav-link {
        font-family: 'Gilroy Medium', Arial, Helvetica, sans-serif;
        background: none;
        padding: 8px 16px;
        outline: none;
        border-radius: 4px;
        cursor: pointer;
        /* display: inline-block; */
        text-decoration: none;
        border: none;
        color: #fff;
    }
    .nav-link.login, .nav-link.signup {
        padding: 8px 16px;
    }
    .nav-link.login {
        background-color: transparent;
        border: 1px solid #fff;
    }
    .nav-link.signup {
        background-color: var(--red);
    }
    .nav-link:hover {
        background-color: #ebebeb;
    }

.food-input {
      /* display: none; */
    }

.place-load {
      top: 15px;
      right: 15px;
    }

@media (max-width: 767px) {
      .place-load {
        top: 10px;
        right: 10px;
      }
    }

.cover-image {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

#img-source img {
      padding-bottom: 10px;
    }

.remove-image {
      color: var(--red);
      cursor: pointer;
      font-size: 1.2rem;
    }
  </style>
@endsection

@section('content')
    <section class="hero align-items-center" id="hero">
      <div class="hero-header">
        <header class="nav-wrapper list-padding">
            <div class="brand-logo">
                <a href="/">
                    <img src="/images/brand/cravvings-white-cropped.png" alt="logo" class="logo">
                </a>
                <div class="dropdown">
                    <button class="button button-primary dropdown-toggle" type="button">
                        <img src="/images/icons/hamburger.png" alt="Open Navigation">
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ route('places.index') }}">Explore</a></li>
                        <li><a class="dropdown-item" href="{{ route('newReview') }}">Write a Review</a></li>
                        @if (Auth::check())
                            <li><a class="dropdown-item" href="{{ route('logout') }}">Logout</a></li>
                        @else
                            <li><a class="dropdown-item" href="{{ route('login') }}">Login</a></li>
                        @endif
                    </ul>
                </div>
            </div>
            
            <div class="nav-links">
                <nav class="nav-home">
                    <div class="nav-items">
                        
                        @if (!Auth::check())
                            <div class="nav-item">
                                <a href="{{ route('places.index') }}" class="nav-link">
                                    Places
                                </a>
                            </div>
                            <div class="nav-item">
                                <a href="{{ route('explore') }}" class="nav-link">
                                    Explore
                                </a>
                            </div>
                            <div class="nav-item">
                                <a href="{{ route('register') }}" class="nav-link signup">
                                    Sign Up
                                </a>
                            </div>
                        @else
                            <div class="nav-item">
                                <a href="{{ route('places.index') }}" class="nav-link">
                                    Places
                                </a>
                            </div>
                            <div class="nav-item">
                                <a href="{{ route('explore') }}" class="nav-link  login">
                                    Explore
                                </a>
                            </div>
                        @endif
                    </div>
                </nav>
            </div>
        </header>
      </div>
      <div class="containers banner-content">
          <div class="d-flex align-items-center">
              <div class="col-8">
                  <h1 class="banner-text">Write a reviews.</h1>
                  <form action="{{ route('web_post_review') }}" method="post" class="food-ready" style="margin-top: 25px;">
                    @csrf
                      <div class="review-select">
                        <div class="address-input">
                            {{-- <label for="place-search">Enter name of place</label> --}}
                            <div class="place-search-con">
                              <input type="text" name="placename" data-type="place" class="form-control place-search can-error" id="place-search" autocomplete="off" placeholder="Where did you go?" required />
                              <a href="#" class="place-load">
                                <i class="fa fa-spinner fa-spin"></i>
                              </a>
                            </div>
                            <input type="hidden" name="place" class="place-slug" />
                            {{-- <button type="button" class="add-food-button hide" onclick="reviewFood();">Review Food</button> --}}
                        </div>
                        <div class="food-input">
                            <label for="food"></label>
                            <input type="text" name="foodname" data-type="food" class="form-control food-select" id="food" autocomplete="off" placeholder="What did you eat?" />
                            <small>Leave blank to review place</small>
                            <input type="hidden" name="id" class="food-id">
                            <button type="button" class="close">
          <svg stroke="currentColor" fill="#c32022" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"></path><path d="M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"></path></svg>
                              
                            </button>
                        </div>
                      </div>
                      <div class="rating-section">
                        <label>Select Rating</label>
                        <div class="rating-stars rate can-error">
                            <input type="radio" id="star5" name="rate" value="5" required />
                            <label for="star5" title="5 stars">5 stars</label>
                            <input type="radio" id="star4" name="rate" value="4" required />
                            <label for="star4" title="4 stars">4 stars</label>
                            <input type="radio" id="star3" name="rate" value="3" required />
                            <label for="star3" title="3 stars">3 stars</label>
                            <input type="radio" id="star2" name="rate" value="2" required />
                            <label for="star2" title="2 stars">2 stars</label>
                            <input type="radio" id="star1" name="rate" value="1" required />
                            <label for="star1" title="1 star">1 star</label>
                        </div>
                        <div class="submit-error"></div>
                        <div class="rating-comment">
                            <textarea name="comment" class="form-control" rows="5" placeholder="" disabled="disabled"></textarea>
                        </div>
                        <div class="upload-images"></div>
                        <div id="img-source">
                        </div>
                        <button class="add-new button button-secondary btn-circle" id="upload_widget" type="button">
                          Add Picture
                        </button>
                        <div class="submit-rating" style="position: absolute;">
                            <button class="button button-primary btn-circle submit-review" disabled="disabled">SUBMIT REVIEW</button>
                            <div class="submit-review-cover" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                        </div>
                      </div>
                  </form>
              </div>
              
          </div>
      </div>
    </section>

@endsection

@section('javascript')
  <script src="/js/utility.js"></script>
  <script src="/js/autocomplete.js"></script>
  <script src="/js/js-autocomplete.js"></script>
  <script src="{{ asset('js/vex.min.js')}}"></script>
  <script defer src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script> 
  <script defer src="/js/cloudinary.js"></script>
  <script src="/js/review.js"></script>
  <script src="/js/auth.js"></script>
  <script>
    var placeName, placeSlug, reviewData;
    const placeSearch = document.querySelector('.place-search');

placeSearch.addEventListener('focus', selectInput);

const reviewFood = async () => {
      const foods = await getFood(null, placeName);
      toggleShowFood(foods)
    }

document.addEventListener('DOMContentLoaded', function(){
      autoComplete({
        input: placeSearch,
        fetch: function(text, update) {
          document.querySelector('.place-load').style.display = 'block';
          searchQuery(text).then(suggestions => {
            
            if(suggestions.length){
              this.input.classList.add('flat-input')
              this.input.addEventListener('blur', removeFlatInput)
              update(suggestions);
              
            }else {
              this.input.classList.remove('flat-input')
              update(noResult(text))
            }

document.querySelector('.place-load').style.display = 'none';
          })

},
        onSelect: async function(item) {
          this.input.classList.remove('flat-input')
          if(item.slug){
            document.querySelector('.place-slug').value = item.slug;
            placeName = item.name;
            placeSlug = item.slug;
            placeSearch.value = placeName;
            commentBox.setAttribute('placeholder', `How was ${placeName}?`);
            commentBox.removeAttribute('disabled');
            document.querySelector('.submit-review').removeAttribute('disabled');
            const foods = await getFood(placeSlug);
            // console.log({foods, placeSlug})
            if(foods.length) toggleShowFood(foods)
          }
        }
      });

document.querySelector('#place-search').addEventListener('blur', function(e){
        if(e.target.value && !placeName){
          placeName = e.target.value;
        }

// if(placeName && document.querySelector('input[type="radio"]:checked')){
        //   enableForm();
        // }
      });
    });

// placeSearch.addEventListener('blur', function(){
    //   document.querySelector('.add-food-button').style.display = 'block';
    // })

placeSearch.addEventListener('keyup', function(e){
      placeName = "";
      // pageForm.classList.remove('food-ready');
      // document.querySelector('.food-input').style.display = 'none';
      if(ac) ac.destroy();
      document.querySelector('.place-slug').value = "";
      document.querySelector('.food-id').value = "";
      // getFood(e.target.value)
    });
  </script>
@endsection