Elep

@extends('layouts.topnav')

@section('meta')
    <title>Cravvings - {{ $placename }}</title>
    <meta content="Cravvings - {{ $placename }}" property="og:title">
    <meta content="{{ route('places.show', ['place' => $slug]) }}" property="og:url">
    <meta content="Discover restaurants and food vendors serving the food you want close to you." property="og:description">
    <meta name="search_token" value="{{ $token ?? '' }}">
    @isset ($image[0])
        <meta name="twitter:title" content="Cravvings - {{ $placename }}">
        <meta name="twitter:description" content="Discover restaurants and other food vendors serving the food you want close to you.">
        <meta name="twitter:image:width" content="500">
        <meta name="twitter:image:height" content="300">
        <meta name="twitter:image" content="{{ $image[0] }}">
        <meta content="{{ $image[0] }}" property="og:image">
    @else
        <meta name="twitter:title" content="Cravvings - {{ $placename }}">
        <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/card_1.jpg">
        <meta name="twitter:image:width" content="1250">
        <meta name="twitter:image:height" content="750">
        <meta content="https://www.cravvings.com/images/brand/card_1.jpg" property="og:image">
        <meta content="1200" property="og:image:width">
        <meta content="630" property="og:image:height">
    @endisset
@endsection
    
    
@section('extracss')
    <link rel="stylesheet" href="/css/place.css">
    <link rel="stylesheet" href="/css/rate.css">
    <link rel="stylesheet" href="/css/actual-result.css">
    <style>
        /* .place-header.place-image--background {
            height: 200px;
            background-image: url({{ $image[0] ?? 'https://www.cravvings.com/images/brand/card_1.jpg' }});
            background-size: cover;
        } */

@media (min-width: 601px) {
            .place-image-top {
                display: none;
            }

.place-header {
                text-align: center;
            }

.img-cover {
                display: none;
            }

/* #desktop-menu {
                display: block;
            } */

.search-page-form {
                margin-top: 0;
            }

.search-food-menu {
                display: none;
            }

#mobile-menu {
                display: block;
            }

.place-details {
                display: block;
            }

.about-tab, .details-tab {
                display: none;
            }

.place-address, .share-url {
                justify-content: center;
            }

.tabs_slider {
                justify-content: center;
                gap: 50px;
            }

.card-list {
                width: 300px;
            }

.card-single {
                width: 300px;
            }
        }

@media (max-width: 601px) {
            header.nav-wrapper {
                display: none;
            }

.back-button {
                position: absolute;
                top: 10px;
                left: 20px;
            }

.back-button a {
                color: #fff;
                font-size: 1rem;
            }

.img-cover > .img-cover--placename {
                font-size: 1.3em;
            }

.place-header {
                text-align: left;
            }

.place-details {
                display: none;
            }

.about-tab, .details-tab {
                display: block;
            }

.place-header {
                padding: 0;
                position: relative;
            }

.place-image-top {
                height: 220px;
                width: 100%;
            }

.img-cover {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(2,2,2,0.5);
            }

.img-cover--placename {
                position: absolute;
                bottom: 20px;
                left: 20px;
                /* transform: translate(-50%, -50%); */
                color: #fff;
                font-size: 1.5em;
                font-weight: bold;
            }

.tabs_slider {
                justify-content: space-around;
            }

.share-url {
                justify-content: flex-start;
            }
        }

#mobile-menu {
            display: block;
        }
        .tabs_slider {
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            font-size: 16px;
            font-weight: bold;
            width: 100%;
        }

.tab-link {
            cursor: pointer;
        }

.tab-link:hover {
            font-size: 18px;
            border-bottom: solid 2px #000;
        }

.active {
            font-family: 'Gilroy Bold';
            font-size: 18px;
            border-bottom: solid 2px #000;
        }

.search-food-menu {
            border-top: 0;
        }

.reviews-tab {
            padding: 0 15px;
        }

.title-header > .placename {
            font-size: 1.4rem;
        }
            
        .type-rating {
            display: flex;
            align-items: center;
        }
        .rating-section {
            padding-top: 0;
        }
        .rating-stars.rate {
            align-items: center;
            margin-left: 15px;
        }

.place-type {
            font-size: 0.9rem;
            padding: 4px;
            color: #fff;
            background-color: #ccc;
            border-radius: 3px;
        }

.place-address {
            display: flex;
            margin-top: 10px;
            /* align-items: center; */
        }

.place-address img, .place-phone img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
        .rate:not(:checked) > label {
            font-size: 1.2rem;
        }

.share-url {
            font-size: 1.1rem;
            margin-top: 15px;
        }

.write-review {
            font-size: 1.1rem;
            color: var(--red);
        }

.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label {
            color: #ccc !important;
            cursor: initial;
        }

.rate > input:checked ~ label {
            color: #ffc700;
        }

.no-reviews h4 {
            font-family: 'Gilroy Medium', Helvetica, sans-serif;
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

.review-main {
            padding-top: 20px;
        }

.review-main:not(:last-of-type) {
            border-bottom: 1px solid #ccc;
            border-radius: 0;
        }

.review-images > img {
            width: 100%;
            /* height: 100%; */
            object-fit: cover;
        }

.review-text {
            margin-bottom: 10px;
        }
        .fa-star {
            color: #ffc700;
        }

.place-reviews {
            max-width: 800px;
            margin: 0 auto;
        }

.lay-center{text-align:center!important}
        .lay-display-container{position:relative}
        .lay-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
        .lay-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
        .lay-black {color:#fff!important;background-color:#000!important}
        .lay-button{border:none;display:inline-block;padding:4px 8px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
        .lay-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
        .lay-button:disabled{cursor:not-allowed;opacity:0.3}
        .lay-button:hover{color:#000!important;background-color:#ccc!important}

.review-main {
            padding-bottom: 20px;
        }

.review-main .review-image {
            height: 250px;
            border-radius: 8px;
        }

.admin-footer {
            position: fixed; 
            bottom: 50; 
            right: 0; 
            left: 0;
            display: flex; 
            justify-content: center; 
            align-items: center; 
            background-color: #fff; 
            height: 50px;
            border-top: 1px solid #ccc;
        }

@media (min-width: 767px) {
            .admin-footer {
                bottom: 0;
            }
        }
    </style>
@endsection

@section('searchbar')
    @include('places.place_search_input')
@endsection
@section('content')
    <div class="place-wrapper">
        <header class="place-header">
            <div class="place-details"></div>
            <img src="{{ $image[0] ?? 'https://www.cravvings.com/images/brand/card_1.jpg' }}" class="place-image-top" alt="{{ $placename }} image">
            <div class="img-cover">
                @if ($q)
                    <div class="back-button">
                        <a class="navbar-brand go-back" href="#"><i class="fa fa-arrow-left"></i> Back to search</a>
                    </div>
                @endif
                <span class="img-cover--placename">{{ $placename }}</span>
            </div>
        </header>
        {{-- <section class="place-menu" id="desktop-menu">
            <div class="place-menu-items">
                @for ($i=0; $i<15; $i++)
                    <div class="food-item review-wrapper">
                        <span class="title">
                            <span class="food-name-rating">
                                <span class="food-name"><div class="skeleton-background"></div></span>
                            </span>
                            <span class="price">
                                <div class="skeleton-background"></div>
                            </span>
                        </span> 
                        <span class="tags"> 
                            <div class="comments">
                                <span class="food-description">
                                    <div class="skeleton-background"></div>
                                </span>
                            </div>
                        </span>
                    </div>
                @endfor
            </div>
        </section> --}}
        <div class="tabs" id="mobile-menu">
            <div class="tabs_slider">
                <a class="tab-link">Menu</a>
                <a class="tab-link about-tab">About</a>
                <a class="tab-link">Reviews</a>
            </div>
            <div class="tab">
                <div class="search-food-menu" id="menu">
                    <input type="text" class="form-control filter-food" placeholder="Search menu">
                    <span class="clear-text"><i class="fa fa-times"></i></span>
                </div>
                <section class="place-menu">
                    <div class="place-menu-items" id="food-container">
                        @foreach ($food as $f)
                            <div class="place-menu-item-container">
                                {{-- {{place.image && place.image[0]}} --}}
                                <div class="place-menu-item food-item review-wrapper" data-id="{{$f['_id']}}" data-index="{{$loop->index}}">
                                    <div class="place-menu-name food-name">
                                        <a data-name="{{$f['name']}}" data-type="food" class="rate-food review"  href="/review/{{$slug}}/{{$f['_id']}}">
                                            {{$f['name']}}
                                        </a>
                                        <span style="display: block;color: #ffc700;">{{$f['rate'] ?? ''}}</span>
                                    </div>
                                    <div class="place-menu-price">&#x20A6;{{$f['price']}}</div>
                                    <div class="place-menu-description">
                                        {{$f['description'] ?? ''}}
                                    </div>
                                    <div class="food-category">
                                        {{$f['category'] ??''}}
                                    </div>
                                    <div class="rate-link"><a data-name="{{$f['name']}}" data-type="food" class="rate-food review" href="/review/{{$slug}}/{{$f['_id']}}">Rate it</a></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            </div>
            <div class="tab details-tab">
                <div class="place-header-content">
                    <div class="title-header">
                        <h1 class="placename">{{$placename}}</h1>
                        <div class="type-rating">
                            <span class="place-type">{{ $type }}</span>
                            @php
                                $rate = $avg_rate ?? 0;
                                $rate = floor($rate);
                            @endphp
                            <div class="rating-section">
                                <div class="rating-stars rate can-error">
                                    <input type="radio" id="star5" name="rate" value="5" required {{ $rate == 5 ? 'checked' : ''}} />
                                    <label for="star5" title="5 stars">5 stars</label>
                                    <input type="radio" id="star4" name="rate" value="4" required {{ $rate == 4 ? 'checked' : ''}} />
                                    <label for="star4" title="4 stars">4 stars</label>
                                    <input type="radio" id="star3" name="rate" value="3" required {{ $rate == 3 ? 'checked' : ''}} />
                                    <label for="star3" title="3 stars">3 stars</label>
                                    <input type="radio" id="star2" name="rate" value="2" required {{ $rate == 2 ? 'checked' : ''}} />
                                    <label for="star2" title="2 stars">2 stars</label>
                                    <input type="radio" id="star1" name="rate" value="1" required {{ $rate == 1 ? 'checked' : ''}} />
                                    <label for="star1" title="1 star">1 star</label>
                                </div>
                            </div>
                        </div>
                        <div class="place-address">
                            <img src="/images/icons/location-icon.png" alt="location icon">
                            <span>{{ $address }}</span>
                        </div>
                        <div class="place-phone">
                            <img src="/images/icons/phone-icon2.png" alt="phone icon">
                            <span>{{ $phones }}</span>
                        </div>
                        
                        <div class="share-url">
                            <span>Share: </span> 
                            <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                            <a target="_blank" href="#"><i class="fa fa-facebook-square"></i></a> 
                            <a target="_blank" href="#"><i class="fa fa-whatsapp"></i></a>
                        </div>
                        <div class="new-review">
                            <a href="{{ route('preNewReview', ['place' => $slug]) }}" class="write-review">Write a Review</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab reviews-tab">
                @include('places.place_reviews')
            </div>
        </div>
        
    </div>
</div>
@if (Auth::user() && Auth::user()->role === 'admin')
    <div class="admin-footer">
        <div class="footers-link">
            <a style="width: 100%; height: 100%;" href="{{ route('admin_edit_place', ['slug' => $slug]) }}">
                <span class="plus">Edit</span>
            </a>
        </div>
    </div>
@endif
@endsection

<nav class="foot-navbar">
    <ul class="navbarList">
        <li class="{{ $page == 'Home' ? 'active' : ''}}">
            <a href="/">
                <svg id="spoon" style="enable-background:new 0 0 32 32;" version="1.1" height="1em" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28.4,3.6c-1.1-1.1-2.6-1.7-4.1-1.6c-2.3,0.2-4.5,1.2-6.2,2.8c-2.4,2.4-3.4,5.9-2.6,9.2L2.9,24.9C2.3,25.4,2,26.2,2,27  s0.3,1.6,0.9,2.1C3.4,29.7,4.2,30,5,30s1.6-0.3,2.2-0.9L18,16.5c0.8,0.2,1.5,0.3,2.3,0.3c2.5,0,5-1,6.9-2.9c1.7-1.7,2.7-3.9,2.8-6.2  C30.1,6.2,29.5,4.7,28.4,3.6z M5.7,27.7c-0.4,0.4-1,0.4-1.4,0C4.1,27.5,4,27.3,4,27s0.1-0.5,0.2-0.7l10.1-8.7L5.7,27.7z M25.7,12.5  c-2.1,2.1-5.1,2.8-7.9,1.9l-0.2-0.1l-0.1-0.2c-0.9-2.8-0.2-5.8,1.9-7.9c1.3-1.3,3.1-2.1,4.9-2.3c0.9-0.1,1.9,0.3,2.6,1  c0.7,0.7,1,1.6,1,2.6C27.9,9.4,27.1,11.2,25.7,12.5z"/></svg>
                <span>Food</span>
            </a>
        </li>
        <li class="{{ $page == 'Places' ? 'active' : ''}}">
            <a href="/places">
                <svg viewBox="0 0 16 30" height="1em" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="Layer 2" id="Layer_2"><g id="Interface-Solid"><g id="interface-solid-pin"><circle cx="8" cy="6" fill="none" r="1.5"/><path d="M8,0A7.99643,7.99643,0,0,0,7,15.93054V29a1,1,0,0,0,2,0V15.93054A7.99643,7.99643,0,0,0,8,0ZM8,7.5A1.5,1.5,0,1,1,9.5,6,1.5,1.5,0,0,1,8,7.5Z"/></g></g></g></svg>
                <span>Places</span>
            </a>
        </li>
        <li class="{{ $page == 'Explore' ? 'active' : ''}}">
            <a href="/explore">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12,14c2.206,0,4-1.794,4-4s-1.794-4-4-4s-4,1.794-4,4S9.794,14,12,14z M12,8c1.103,0,2,0.897,2,2s-0.897,2-2,2 s-2-0.897-2-2S10.897,8,12,8z"></path><path d="M11.42,21.814C11.594,21.938,11.797,22,12,22s0.406-0.062,0.58-0.186C12.884,21.599,20.029,16.44,20,10 c0-4.411-3.589-8-8-8S4,5.589,4,9.995C3.971,16.44,11.116,21.599,11.42,21.814z M12,4c3.309,0,6,2.691,6,6.005 c0.021,4.438-4.388,8.423-6,9.73C10.389,18.427,5.979,14.441,6,10C6,6.691,8.691,4,12,4z"></path></svg>
                <span>Explore</span>
            </a>
        </li>
        <li class="{{ $page == 'Review' ? 'active' : ''}}">
            <a href="/review">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M7,17.013l4.413-0.015l9.632-9.54c0.378-0.378,0.586-0.88,0.586-1.414s-0.208-1.036-0.586-1.414l-1.586-1.586	c-0.756-0.756-2.075-0.752-2.825-0.003L7,12.583V17.013z M18.045,4.458l1.589,1.583l-1.597,1.582l-1.586-1.585L18.045,4.458z M9,13.417l6.03-5.973l1.586,1.586l-6.029,5.971L9,15.006V13.417z"></path><path d="M5,21h14c1.103,0,2-0.897,2-2v-8.668l-2,2V19H8.158c-0.026,0-0.053,0.01-0.079,0.01c-0.033,0-0.066-0.009-0.1-0.01H5V5	h6.847l2-2H5C3.897,3,3,3.897,3,5v14C3,20.103,3.897,21,5,21z"></path></svg>
                <span>Review</span>
            </a>
        </li>
        <li class="{{ $page == 'User' ? 'active' : ''}}">
            <a href="/user/profile#/reviews">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="7" r="3"></circle><path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z"></path></svg>
                <span>Account</span>
            </a>
        </li>
    </ul>
</nav>

@section('javascript')
    <script src="{{ asset('js/utility.js') }}"></script>
    <script src="/js/place.js"></script>
    
    <script>
            const content = document.querySelectorAll('.tab');
            const tab = document.querySelectorAll('.tab-link');
            const slider = document.querySelector('.tabs_slider');

function showTabContent(i = 0) {
                content[i].style.display = 'block';
                tab[i].classList.add('active');
            }

hideTabContent();
            showTabContent();

slider.addEventListener("click", (e) => {
                const target = e.target
                if (target) {
                    tab.forEach((item, i) => {
                        if (target == item) {
                            hideTabContent();
                            showTabContent(i);
                        }
                    })
                }
            })

document.querySelectorAll(".rating-stars input").forEach((radio) => {
                radio.addEventListener("change", function (e) {
                    // enableForm();
                });
            });

const reviews_length = document.querySelectorAll('.review-main').length;
            var slideIndex = 1;
            
            for (let i = 0; i < reviews_length; i++) {
                // document.querySelectorAll('.review-main')[i].style.display = 'none';
                let selector = `review-${i}`;
                showDivs(slideIndex, selector);
            }

function plusDivs(n, $container) {
                showDivs(slideIndex += n, $container);
            }

// $(document).ready(function() {
            //     $('.card-list').slick();
            // });
    </script>
@endsection

</body>
</html>