@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

  <link rel="stylesheet" href="/css2/vex.min.css">
  <link rel="stylesheet" href="/css2/vex-theme-plain.css">
  <link rel="stylesheet" href="/css/login.css">
  <link rel="stylesheet" href="/css/rate.css">
  <style>
    .hide {
      display: none;
    }

    .food-input {
      display: none;
    }

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

      @media (max-width: 767px) {
        .place-load {
          top: 10px;
          right: 10px;
        }
      }
  </style>
@endsection

@section('content')
    <aside class="st-menu st-effect-1" id="menu-1">
        <a class="navbar-brand" href="#"><img src="/images/logo-large.png" alt="logo" data-effect="st-effect-1" class="logo"></a>
        <a href="#" class="close-side">
            <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>
        </a>
        <ul class="list-group">
          <li class="list-group-item"><i class="fa fa-search"></i> <a href="/">Search</a></li>
          <li class="list-group-item"><i class="fa fa-map-marker"></i> <a href="/places">Places</a></li>
          
          @auth
              <li class="list-group-item"><i class="fa fa-user"></i> <a href="/user/profile#/account">Profile</a></li>
              <li class="list-group-item"><i class="fa fa-sign-out"></i> <a href="/logout">Logout</a></li>
                @if (Auth::user()->super)
                    <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/place/new">New Place</a></li>
                    <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/place/franchise">Franchise</a></li>
                    <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/admin/places/food">Admin</a></li>
                @endif
            @else
                <li class="list-group-item"><i class="fa fa-lock"></i> <a href="/login">Login</a></li>
                <li class="list-group-item"><i class="fa fa-users"></i> <a href="/register">Register</a></li>
            @endauth
            <li class="list-group-item"><i class="fa fa-envelope"></i> <a href="/contact">Contact Us</a></li>
        </ul>
    </aside>

      <!-- ========================== [ 2-hero ] =========================== -->
    <section class="hero d-flex" id="hero">
      <nav class="navbar main-nav navbar-dark">
        <button
            class="navbar-toggler show-lg"
            type="button"
            data-effect="st-effect-1" 
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">
            <img src="/images/logo-large.png" alt="logo" class="logo">
        </a>
        <button
            class="navbar-toggler hide-lg"
            type="button"
            data-effect="st-effect-1" 
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
      </nav>
          <div class="containers">
              <div class="d-flex align-items-center">
                  <div class="col-8">
                      <h1 class="banner-text">Write a review.</h1>
                      <form action="{{ route('post_review') }}" method="post" class="search-page-form">
                          <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? BlackBell, Chicken Republic" 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="text">5 stars</label>
                                <input type="radio" id="star4" name="rate" value="4" required />
                                <label for="star4" title="text">4 stars</label>
                                <input type="radio" id="star3" name="rate" value="3" required />
                                <label for="star3" title="text">3 stars</label>
                                <input type="radio" id="star2" name="rate" value="2" required />
                                <label for="star2" title="text">2 stars</label>
                                <input type="radio" id="star1" name="rate" value="1" required />
                                <label for="star1" title="text">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 class="col-md-7 text-lg-right"><img src="/images/hero-img.png" alt="hero-img" class="img-fluid .sd-img"></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="/js/side.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 {
              update(noResult())
            }

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

          
        },
        onSelect: async function(item) {
          if(item.slug){
            document.querySelector('.place-slug').value = item.slug;
            placeName = item.name;
            placeSlug = item.slug;
            placeSearch.value = placeName;
            this.input.classList.remove('flat-input')
            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