@extends('layouts.plain')

@section('nav')

@endsection

@section('title')
    <meta content="Cravvings - Review {{ $place->name }}" 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">
    @if (isset($place['image']) && isset($place['image'][0]))
      <meta name="twitter:title" content="Cravvings - {{ $place->name }}">
      <meta name="twitter:description" content="Discover restaurants and other food vendors serving the food you want close to you.">
      <meta name="twitter:image:width" content="500">
      <meta name="twitter:image:height" content="300">
      <meta name="twitter:image" content="{{ $place['image'][0] }}">
      <meta content="{{ $place['image'][0] }}" property="og:image">
    @else
      <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">
    @endif
    <title>Cravvings - Review {{ $place->name }}</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">
@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-home"></i> <a href="#">Home</a></li> --}}
            <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>

    <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 {{ $food ? 'food-ready' : '' }}">
                          <div class="review-select">
                            <div class="address-input place-search-con">
                                {{-- <label for="place-search">{{ $food ? '' : 'Name of Place' }}</label> --}}
                                <input type="text" data-type="place" class="form-control place-search" value="{{ $place->name }}" disabled />
                                <input type="hidden" name="place" class="place-slug" value="{{ $place->slug }}" />
                                <input type="hidden" name="placename" class="place-name" value="{{ $place->name }}" />
                                @if (!$food)
                                    <button type="button" class="add-food-button" onclick="showFood();">Review Food</button>
                                @endif
                            </div>
                            <div class="food-input" style="position: relative;display: {{ $food ? 'block' : 'none' }}">
                                {{-- <label for="food">{{ $food ? '' : 'Food' }}</label> --}}
                                {{-- <select name="foodname" id="select-beast">
                                    @foreach ($food as $item)
                                        <option value="{{ $item->id }}">{{ $food->name }}</option>
                                    @endforeach
                                </select> --}}
                                <input type="text" name="foodname" data-type="food" class="form-control food-select" id="food" autocomplete="off" value="{{ $food ? $food->name : ''}}" {{ $food ? 'disabled' : ''}} />
                                
                                @if ($food)
                                  <input type="hidden" name="foodname" value="{{ $food->name }}" />
                                @else
                                  <small>Leave blank to review place</small>
                                @endif
                                <input type="hidden" name="id" class="food-id" value="{{ $food ? $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">
                                <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: relative;">
                                <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/js-autocomplete.js"></script>
  {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/selectize.min.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>
    var placeName = document.querySelector('.place-name').value;
    var placeSlug = document.querySelector('.place-slug').value;
  </script>
  <script src="/js/auth.js"></script>
  <script src="/js/review.js"></script>
  <script>
    async function showFood() {
        const foods = await getFood(placeSlug)
        console.log(foods)
        toggleShowFood(foods)
    }
  </script>
@endsection