@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 (min-width: 767px) {
          .close {
            top: 33%;
          }
        }

      @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">Add food Picture.</h1>
                      <form action="{{ route('store_explore_food') }}" 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="Place name" 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="Food name" />
                                {{-- <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="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">Save Picture</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/auth.js"></script>
  {{-- <script src="/js/review.js"></script> --}}
  <script>
    const foodSelectContainer = document.querySelector(".food-input");
    let ac;
    function foodComplete(element, list) {
      let listCopy = [...list]
      ac = autoComplete({
        input: element,
        fetch: function (text, update) {
          listCopy = list.filter(fd => fd.name.toLowerCase().includes(text.toLowerCase()))
          if (document.querySelector(".food-id").value)
              document.querySelector(".food-id").value = "";
          if(listCopy.length) {
              update(listCopy);
          }else{
              // update(noResult())
          }
              // this.input.classList.add('flat-input')
          this.input.addEventListener('blur', removeFlatInput)
        },
        onSelect: function (item) {
            console.log({item})
            document.querySelector(".food-id").value = item.key;
            element.value = item.name;
            this.input.classList.remove('flat-input')
            document.querySelector(".close").style.display = "block";
        },
        showOnFocus: true,
      });
    }
    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){
              update(suggestions);
            }
            // 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')
            var url = `/api/place/food/${placeSlug}`;
            const foods = await doGet(url).then(foods => foods);
            if(foods.length) {
              const foodSelectInput = foodSelectContainer.querySelector(
                ".food-select"
              );
              foodComplete(foodSelectInput, foods);
            }
          }
        }
      });

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

    placeSearch.addEventListener('keyup', function(e){
      placeName = "";
      placeSlug = "";
      if(ac) ac.destroy();
      document.querySelector('.place-slug').value = "";
      document.querySelector('.food-id').value = "";
    });

    document.querySelector('.search-page-form').addEventListener('submit', function(e) {
      e.preventDefault();
      let form = e.target;
      postForm(e)
      .then(res => {
        let msg;
        if (res.payload.status == 'success') {
          form.reset();
          document.getElementById("img-source").innerHTML = "";
          placeName = placeSlug = "";
          msg = "Successfully submitted";
        }else {
          msg = "Error submitting";
        }
        showFlash(msg, res.payload.status);
      })
    })
  </script>
@endsection