Gecko [ 35.178.45.201 ]

Name	Size	Permission
add.blade.php	2.73 KB	-rw-rw-r--
add_picture.blade.php	11.82 KB	-rw-rw-r--
apinearby.blade.php	4.94 KB	-rw-rw-r--
feed.blade.php	8.06 KB	-rw-rw-r--
index.blade.php	3.18 KB	-rw-rw-r--
nearby.blade.php	5.82 KB	-rw-rw-r--
nearby.blade.save.php	3.41 KB	-rw-rw-r--
rate.blade.php	4.29 KB	-rw-rw-r--
reactfeed.blade.php	600 B	-rw-rw-r--
reviews.blade.php	3.15 KB	-rw-rw-r--
reviews.save.php	1.04 KB	-rw-rw-r--
reviewsfeed.blade.php	4.43 KB	-rw-rw-r--

Code Editor : add_picture.blade.php

@extends('layouts.plain')

@section('nav')

@endsection

@section('title')
    <title>Cravvings - Add Food Picture</title>
@show
@section('google')
@endsection

@section('stylesheets')
  @parent

.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;
        }
      }

.tags-container {
        margin-top: 25px;
      }

.food-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding: 10px 0;
        margin-top: 10px;
      }

.form-check {
        display: flex;
        align-items: center;
        gap: 3px;
      }

.form-check input[type="checkbox"]{
        margin-bottom: 2.5px;
      }

.tag-button {
        background-color: #fff;
        color: var(--red);
        border: 1px solid var(--red);
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
      }

.tag-button.active {
        background-color: var(--red);
        color: #fff;
      }

.tag-inputs {
        display: none;
      }
  </style>
@endsection

@section('content')

<section class="hero d-flex" id="hero" style="height: 1000px">
      <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" style="margin-top: 120px">
                  <div class="col-8">
                      <h1 class="banner-text">Add place/food Picture.</h1>
                      <form action="{{ route('store_explore_food') }}" method="post" class="search-page-form">
                        @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="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 (optional)" />
                                {{-- <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 style="">
                            <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>
                          <div class="tags-container">
                            <h3 class="sub-heading">Select all that apply </h3>
                            <div class="food-tags">
                            
                              @foreach ($tags as $tag)
                                <button type="button" class="tag-button" data-value={{ $tag }}>
                                  + {{ $tag }}
                                </button>
                              @endforeach
                              <div class="tag-inputs">

</div>
                            </div>
                          </div>
                          <div class="submit-rating">
                              <button class="button button-primary btn-circle submit-review">Submit</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 defer src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script> 
  <script defer src="/js/cloudinary2.js"></script>
  <script src="/js/auth.js"></script>
  {{-- <script src="/js/review.js"></script> --}}
  <script>
    const foodSelectContainer = document.querySelector(".food-input");
    let ac;
    let busy = false;

// placeSearch.addEventListener('focus', selectInput);

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

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

placeSearch.addEventListener('keyup', function(e){
      console.log('hello')
      placeName = "";
      placeSlug = "";
      if(ac) ac.destroy();
      document.querySelector('.place-slug').value = "";
      document.querySelector('.food-id').value = "";
    });
    let tags = []
    const tag_checkbox = (tg) => `<input type="checkbox" name="foodtag[]" id="${tg}" value="${tg}">`

document.querySelectorAll('.tag-button').forEach(button => {
      button.addEventListener('click', function(e){
        const b = e.target
        const tg = b.dataset.value
        if (b.classList.contains('active')) {
          tags = tags.filter(t => t !== tg).slice()
          b.classList.remove('active')
        } else {
          b.classList.add('active')
          tags.push(tg)
        }

document.querySelector('.tag-inputs').innerHTML = tags.map(t => tag_checkbox(t)).join("")
      })
    })

// 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);
    //   })
    // })
    // document.querySelector('.submit-review').addEventListener('click', function(e) {
    //   e.target.setAttribute('disabled', 'disabled')
    // })
  </script>
@endsection

${this.title}

Code Editor : add_picture.blade.php