Elep

@extends('layouts.base')

@section('nav')

@endsection

@section('stylesheets')
  @parent
  <link rel="stylesheet" href="{{ asset('css2/vex.min.css') }}">
  <link rel="stylesheet" href="{{ asset('css2/vex-theme-plain.css') }}">
  <link href="/css/select2.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="/css/rate.css">
  <style>
    .select2-container .select2-selection--single {
      height: 38px;
      display: flex;
      align-items: center;
    }

.spinner-border {
      display: none;
    }

.inner-width {
      width: 60%;
    }

.page-header {
      padding-bottom: 20px;
      font-weight: 400;
      /*line-height: 1.6rem;*/
    }

#slider {
      position: relative; 
      padding-top: 200px; 
      background-image: url('/images/back_new.jpg');
      text-align: left;
    }

.select2.select2-container {
      width: 220px !important;
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
        width: 100%;
    }

.select2-container--default .select2-selection--single .select2-selection__clear {
        font-size: 22px;
        padding-right: 10px;
    }

.select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 4px;
    }

.clear-food {
      display: none;
    }

.place-name-highlight {
      /*color: #d6954a;*/
      font-weight: 600;
    }

@media (max-width: 767px){
      .inner-width {
        width: 100%;
      }

#slider {
        padding-top: 100px;
      }
    }

.food-select-review {
      align-items: center; 
      justify-content: space-between; 
      width: 250px; 
      margin-left: 0
    }
  </style>
@endsection

@section('content')
<script>
  UPLOADCARE_LOCALE_TRANSLATIONS = {
    buttons: {
      choose: {
        files: {
          one: 'Upload image'
        }
      }
    }
  }
</script>
      
    <section class="slider d-flex" id="slider">
        <nav class="navbar navbar-expand-lg navbar-dark" style="position: absolute; top: 0; left: 0; right: 0; padding: 0; padding-left: 15px;">
            <div class="container">
                <a class="navbar-brand" href="#"><img src="/images/logo.png" alt="logo" class="logo"></a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#slider">Home
                                <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/reviews/feed">Reviews</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#place-search-home">Places</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#fact">Suggest a place</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                    {{-- <a href="#0" class="btn-white">Free Try</a> --}}
                </div>
            </div>
        </nav>
          <div class="containers">
              <div class="row d-flex align-items-center inner-width">
                  <div class="col-xl-12">
                      <div class="content">
                          <h3 class="page-header">
                              What do you think about {{ $foo ? 'the ' . $foo->name . ' at ' : '' }}<span class="place-name-highlight">{{ $place->name }}</span></h3>
                          
                          <form action="/rate/{{ $foo ? 'food' : 'place' }}" class="ratings rating-form" method="POST">
                            {{-- <h3 class="rating-title">{{ $place->name }}</h3> --}}
                            {{-- <hr /> --}}
                            <input type="hidden" value="{{ $foo ? 'food' : 'place' }}" id="type" name="type">
                            <div class="form-details">
                              @if ($foo)
                                <input type="hidden" value="{{ $foo->_id }}" name="id">
                              @else
                                <input type="hidden" value="" name="id" id="foodid">
                                <div class="form-group">
                                  <label for="food-select">To review a particular food item from <span class="place-name-highlight">{{ $place->name }}</span>, select below</label>
                                  <div class="row food-select-review">
                                    <div class="col-xs-11">
                                      <select class="food-select" name="food">
                                        <option value="">Select food item</option>
                                        @foreach ($food as $f)
                                          <option value="{{ $f->_id }}-{{ $f->name }}">{{ $f->name }}</option>
                                        @endforeach
                                      </select>
                                    </div>
                                    <div class="col-xs-1 clear-food">
                                      <a href="#"><i class="fa fa-times"></i></a>
                                    </div>
                                  </div>
                                </div>
                              @endif
                              <input type="hidden" name="place" value="{{ $place->slug }}">
                            </div>
                            <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="rating-comment">
                                <textarea name="comment" rows="5" placeholder="How was {{ $foo ? 'the ' . $foo->name . ' at ' : '' }}{{ $place->name }}"></textarea>
                            </div>
                            
                            <span class="uploader-button">
                              <input 
                                type="hidden"
                                role="uploadcare-uploader"
                                name="image" 
                                data-crop="500x500"
                                data-tabs="file camera instagram" />
                            </span>
                            
                            <div class="submit-rating">
                                <button class="button button-primary">SUBMIT REVIEW</button>
                                <button type="button" class="button button-secondary close-modal">CANCEL</button>
                            </div>
                        </form>
                      </div>
                  </div>
                  
              </div>
          </div>
    </section>

@endsection

@section('maps')
@endsection

@section('javascript')
  <script src="/js/jquery.js"></script>
  <script src="/js/popper.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/select2.min.js"></script>
      
      
  <script src="/js/utility.js"></script>
  
  <script src="{{ asset('js/vex.min.js')}}"></script>
  
  <script>
    var state = deserialize(location.search)
    var place = "{{ $place->name }}";
    var urlTo = "/places/{{ $place->slug}}";
    function foodSelected(food) {
      $('.clear-food').show();
      let placeholder = `How was the ${food.split("-")[1]} at ${place}`;
      $('.rating-comment textarea').attr('placeholder', placeholder);
      document.getElementById('type').value = 'food';
      $('.rating-form').attr('action', `/rate/food`)
    }

function foodDeselected(e) {
      e.preventDefault();
      $('.clear-food').hide();
      let placeholder = `How was ${place}`;
      $('.rating-comment textarea').attr('placeholder', placeholder);
      // $('.food-select')[0].reset()
      const foodSel = $('.food-select');
      foodSel[0].selectedIndex = 0;
      foodSel.select2();
      document.getElementById('type').value = 'place';
      $('.rating-form').attr('action', `/rate/place`)
    }

$(document).ready(function() {
        
        $('.rating-form')[0].reset()
        $('.food-select').select2();
        $('.food-select').on('change', function(e){
          const $target = $(e.currentTarget);
          const val = $target.val()
          // console.log(val)
          if(val) foodSelected(val)
          else foodDeselected(e)
        })

var vexInstance;

$('.clear-food a').on('click', foodDeselected)

$(document).on('submit', 'form', function(e) {
          let food = $('.food-select').val();
          if(food) {
            document.getElementById('foodid').value = food.split("-")[0];
          }
          postForm(e)
          .then(response => {
            console.log()
            load.style.display = "none";
            if (response && response.status) {
                if (response.status === 'success') {
                    var list = `<h6 class="text-white">${response.message}</h6>`;
                    $('.flash-message').html(list).fadeIn(300, function() {
                        setTimeout(() => {
                            $(this).fadeOut();
                        }, 3000)
                        window.location.href = urlTo;
                    });

vex.close(vexInstance);
                }else if (response.status === 'failed') {
                    if (typeof response.message === 'string') {
                        $('.error-bag').html(response.message);
                    }else if(typeof response.message === 'object'){
                      $('.error').html('');
                        var msg = Object.keys(response.message).forEach(key => document.getElementById(key).innerHTML = response.message[key]);
                    }
                    $(this).find('button[type="submit"]').attr('disabled', false);
                }
            }
            else {
                if(!vexInstance){
                  vexInstance = vex.open({
                      unsafeContent: response,
                      showCloseButton: false
                  });
                }
                else vexInstance.contentEl.innerHTML = response;
            }
          })
        })
    });
  </script>
  <script>
    UPLOADCARE_PUBLIC_KEY = 'f13508658e9e237cb9ff';

</script>