@extends('layouts.base') @section('stylesheets') @parent <link rel="stylesheet" href="{{ asset('css2/vex.min.css') }}"> <link rel="stylesheet" href="{{ asset('css2/vex-theme-plain.css') }}"> <style> .vex { z-index: 99; } .vex-overlay { z-index: 98; } .form-control { display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: 0; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .btn-primary, .btn-primary:hover, .btn-primary:focus { font-weight: 700; color: white; border-color: #fed136; background-color: #fed136; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; cursor: pointer; border-radius: 0; } .input-group .input-group-prepend, .place-find, .search-form .input-group-addon, .search-form button { height: 50px; } #optional-address { background: #fff; padding: 7px; } a { color: #fed136; } .badge-warning { cursor:pointer; white-space: normal; text-align: left; } .toggle-show { display: none; } .show { display: inline-block; } </style> @endsection @section('content') <div class="row place-list"> <div class="col-sm-12 col-md-5 places-list-side"> <form action="#" class="search-form search-form" id="nearby"> <div class="input-group"> {{-- <div class="input-group-prepend"> <select name="type" class="custom-select" style="width: 100%; border-radius: 0; margin: 0;"> <option value="food">Food</option> <option value="place">Place</option> </select> </div> --}} <input type="text" id="food" name="food" data-type="food" class="form-control place-find query" placeholder="Find food..." value="{{ isset($current) ? $current : ''}}"> <input type="hidden" name="longitude" id="longitude" value="{{ $longitude }}"> <input type="hidden" name="latitude" id="latitude" value="{{ $latitude }}"> <input type="hidden" name="address" id="address" value="{{ $add }}"> <div class="input-group-addon" style="padding: 0;"> <button class="btn btn-primary" style="border-radius: 0;">Find</button> </div> </div> <div id="optional-address"> <div class="option toggle-show {{ $add ? 'show' : ''}}"> <div class="form-check" style="margin-left: 25px; margin-top: 6px;"> <input class="form-check-input location" id="option-location" type="checkbox" checked="true" value="{{ $add }}"> <label class="form-check-label" id="option-label" for="location" style="padding-left: 10px;"> {{ $add }} </label> <a href="#" class="enter-location">Change location</a> </div> </div> <a href="#" class="enter-location toggle-show {{ $add ? '' : 'show'}}">Enter location</a> </div> <div class="row detail-checkbox-wrap"> <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3"> <label class="custom-control custom-checkbox"> <input type="checkbox" data-type="parking" name="parking" class="custom-control-input filter-checkbox"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Parking</span> </label> </div> <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3"> <label class="custom-control custom-checkbox"> <input type="checkbox" data-type="seating" name="seating" class="custom-control-input filter-checkbox"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Seating </span> </label> </div> <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3"> <label class="custom-control custom-checkbox"> <input type="checkbox" data-type="delivery" name="delivery" class="custom-control-input filter-checkbox"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery </span> </label> </div> </div> </form> <div class="row light-bg detail-options-wrap"> @foreach ($places as $place) @isset($current) @php $name = e($current); if($name){ $matches = array_filter($place['food']->toArray(), function($food) use ($name){ return strpos(strtolower($food['name']), strtolower($name)) !== false; }); $matchvalues = array_values($matches); }else { $matchvalues = []; } // var_dump($place->rating); @endphp @endisset <div class="col-sm-12 col-lg-12 col-xl-6 featured-responsive"> <div class="featured-place-wrap"> <a href="{{ route('places.show', ['id' => $place->slug]) }}" data-slug="{{ $place->slug }}"> @if ($place->stars) <span class="featured-rating-orange ">{{ $place->stars }}</span> @endif <div class="featured-title-box"> <h6>{{ $place->name }}</h6> <p>{{ $place->type }} </p> <p>{{ $place->address }}</p> <div> @isset ($current) @foreach ($matchvalues as $fooditem) <span class="badge badge-warning" title="N{{ $fooditem['price'] }}">{{ $fooditem['name'] }}</span> @endforeach @endisset </div> {{-- <p>{{ $place->rating ? count($place->rating) : "" }}</p> --}} <ul> <li><span class="icon-location-pin"></span> <p>{{ $place->address }}</p> </li> <li><span class="icon-screen-smartphone"></span> <p>{{ $place->telephone }}</p> </li> </ul> {{-- <div class="bottom-icons"> <div class="closed-now">CLOSED NOW</div> <span class="ti-heart"></span> <span class="ti-bookmark"></span> </div> --}} </div> </a> </div> </div> @endforeach </div> {{ $places->appends($_GET)->links() }} </div> <div class="col-sm-12 col-md-7 places-map"> <div id="map"></div> </div> </div> @endsection @section('javascript') @parent <script src="{{ asset('js/vex.min.js') }}"></script> <script>vex.defaultOptions.className = 'vex-theme-plain';</script> <script src="{{ asset('js/search.js') }}"></script> <script src="{{ asset('js/initMap.js') }}"></script> <script> var places = JSON.parse("{{ json_encode($places->items()) }}".replace(/&quot;/g, '"')); </script> <script> $(document).ready(function(){ initMap(places); var vexInstance; var add = "{{ $add }}" console.log(location.search) $(window).on('scroll', function(e){ var win = $(this).scrollTop(), elemTop = $('#nearby').offset().top, elem = $('#nearby'); // console.log({win, elemTop, elem}) if(win>elemTop && win > 48){ if(!elem.hasClass('stick-top')){ elem.addClass('stick-top') }else return; }else if(win < 48) { if(elem.hasClass('stick-top')){ elem.removeClass('stick-top') }else { return; } } }) $(document).on('change', '#option-location', function(e){ $('.toggle-show').toggleClass('show') }) $('#food').on('keyup', function(e){ search(e, result => { setTimeout(function(){ $('.search-form').submit(); }, 0) }) }) var optionTemplate = (add) => ` <div class="option"> <div class="form-check" style="margin-left: 25px; margin-top: 6px;"> <input class="form-check-input location" id="option-location" type="checkbox" name="location" checked="true"> <label class="form-check-label" for="location" style="padding-left: 10px;"> ${add} </label> <a href="#" class="enter-location">Change</a> </div> </div> `; var locationTemplate = () => ` <h6>Enter location </h6> <form action="#" class="location-form"> <div class="form-group"> <input type="text" name="location" id="search" class="form-control" placeholder=""/> <a href="#" class="use-location">Use current location</a> </div> <button type="submit" class="btn btn-primary">Use location</button> </form> ` $(document).on('click', '.enter-location', function(e){ e.preventDefault(); vexInstance = vex.open({ unsafeContent: locationTemplate(name), showCloseButton: false, className: 'customVex', overlayClassName: 'customVexOverlay' }); var search = document.getElementById('search') search.value = address.value || ""; search.focus(); search.select(); autocomplete(search).then(loc => { populate(loc) $('.location-form').submit(); }) $('.use-location').on('click', function(e){ e.preventDefault(); startMap().then(loc => { populate(loc) search.value = loc.address || search.value }) }) }) $(document).on('submit', '.location-form', function(e){ e.preventDefault(); var $target = $(e.currentTarget); var optionLocation = document.getElementById('option-label'); var searchInput = $target.find('#search').val(); if(optionLocation){ optionLocation.innerHTML = searchInput; }else { document.getElementById('optional-address').innerHTML = optionTemplate(searchInput); } address.value = searchInput; vex.close(vexInstance) setTimeout(function(){ $('.search-form').submit(); }, 0) }) }) </script> @endsection