@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">
  <link rel="stylesheet" href="/css/header.css">
  <style>
    .hero-header {
        background: linear-gradient(180deg,#000000b3,#0000004d 72.92%,#0000);
    }

    .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">
                                        Explore
                                    </a>
                                </div>
                                <div class="nav-item">
                                    <a href="{{ route('login') }}" class="nav-link login">
                                        Login
                                    </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('places.index') }}" 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 review</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 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>
                            @if (!$food)
                                <div class="pre-input">
                                    @foreach ($foods as $f)
                                        <input type="hidden" class="pre-food-input" data-id="{{ $f['_id'] }}" value="{{ $f['name'] }}">
                                    @endforeach
                                </div>
                            @endif
                            <div class="food-input" style="position: relative;display: block">
                                {{-- <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)
                                  <small>Leave blank to review {{ $place->name }}</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="{{ 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>

    let foods = Array.from(document.querySelectorAll('.pre-food-input')).map(f => {
        return {key: f.dataset.id, name: f.value}
    })
    toggleShowFood(foods)
  </script>
@endsection