@extends('layouts.plain')

@section('nav')

@endsection

@section('stylesheets')

  @parent
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/css/sidenav.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/actual-result.css">
    <link rel="stylesheet" href="/css/slick.css">
    <link rel="stylesheet" href="/css/slick-theme.css"/>

    <style>
        .hero-header {
            backdrop-filter: blur(7px);
        }

        .food-input, .address-input {
            display: flex;
        }

        .input-prepend {
            display: flex;
        }

        .prepend-text {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            padding: 0.5rem 0.9rem;
            line-height: 1.25;
            display: flex;
            align-items: center;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .15);
            border-right: 0;
            font-family: 'Gilroy Bold';
        }

        .prepend-text span {
            font-family: 'Gilroy Semi Bold', sans-serif;
            display: none;
        }

        .prepend-text img {
            display: flex !important;
            width: 20px;
        }

        @media (max-width: 900px) {
			.prepend-text {
                padding: 0.5rem 0.5rem;
            }

            .prepend-text span {
                display: none !important;
            }

            .prepend-text img {
                
            }
		}

        input#food, input#address {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0;
            padding-left: 0;
            background-clip: inherit;
        }

        @media (max-width: 520px){
            input#food {
                padding-left: 0px;
            }
        }

        .nav-wrapper {
            justify-content: space-between;
        }

        .nav-items {
            display: flex;
            
        }

        .nav-item {
            margin-right: 8px;
        }

        .nav-links .nav-item:first-of-type {
            margin-right: 0;
        }

        .nav-link {
            font-family: 'Gilroy Medium', Arial, Helvetica, sans-serif;
            background: none;
            padding: 8px 16px;
            outline: none;
            border-radius: 4px;
            cursor: pointer;
            /* display: inline-block; */
            text-decoration: none;
            border: none;
            color: #4b5260;
        }

        .nav-link.login, .nav-link.signup {
            padding: 8px 16px;
        }

        .nav-link.login {
            background-color: transparent;
            border: 1px solid #4b5260;
        }

        .nav-link.signup {
            background-color: var(--red);
        }

        .nav-link:hover {
            background-color: #ebebeb;
        }

        .slick-next, .slick-prev {
            top: -25px;
        }

        .slick-prev:before, .slick-next:before {
            border-radius: 6px;
            box-shadow: none;
            border: 1px solid #ccc;
        }

        .slick-prev {
            right: 75px;
            left: unset;
        }

        .slick-next {
            right: 25px;
        }

        .popular-places {
            width: 80%;
            max-width: 1300px;
            margin: 0 auto;
            margin-top: 50px;
        }

        .slide-title {
            padding-left: 0.5rem;
            max-width: 70%;
            /* margin-bottom:  */
        }

        @media (max-width: 700px) {
            .slide-title {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 500px) {
            .popular-places {
                width: 90%;
            }

            .slide-title {
                font-size: 1.2rem;
            }
        }

        .card-list {
            padding-top: 20px;
        }

        .card-single {
            padding: 0.25rem 0.5rem 1rem;
        }

        .actual-result {
            height: 320px;
        }

        button .fa.fa-heart, button .fa.fa-heart-o {
            cursor: pointer;
        }

        .fa.fa-heart {
            color: var(--red);
            font-size: 20px;
        }
    </style>
@endsection
@section('content')
    <section class="hero align-items-center" id="hero" style="position: relative;">
        <div class="hero-header">
            <header class="nav-wrapper list-padding">
                <div class="brand-logo">
                    <a href="/">
                        <img src="/images/brand/cravvings-white-cropped.png" alt="logo" class="logo">
                    </a>
                    <div class="dropdown">
                        <button class="button button-primary dropdown-toggle" type="button">
                            <img src="/images/icons/hamburger.png" alt="Open Navigation">
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('places.index') }}">Find a Place</a></li>
                            <li><a class="dropdown-item" href="{{ route('explore') }}">Explore</a></li>
                            <li><a class="dropdown-item" href="{{ route('newReview') }}">Write a Review</a></li>
                            @if (Auth::check())
                                <li><a class="dropdown-item" href="{{ route('logout') }}">Logout</a></li>
                            @else
                                <li><a class="dropdown-item" href="{{ route('login') }}">Login</a></li>
                            @endif
                        </ul>
                    </div>
                </div>
                
                <div class="nav-links">
                    <nav class="nav-home">
                        <div class="nav-items">
                            
                            @if (!Auth::check())
                                <div class="nav-item">
                                    <a href="{{ route('places.index') }}" class="nav-link">
                                        Find a Place
                                    </a>
                                </div>
                                <div class="nav-item">
                                    <a href="{{ route('explore') }}" class="nav-link">
                                        Explore
                                    </a>
                                </div>
                                <div class="nav-item">
                                    <a href="{{ route('register') }}" class="nav-link signup">
                                        Sign Up
                                    </a>
                                </div>
                            @else
                                <div class="nav-item">
                                    <a href="{{ route('places.index') }}" class="nav-link">
                                        Find a Place
                                    </a>
                                </div>
                                <div class="nav-item">
                                    <a href="{{ route('newReview') }}" class="nav-link">
                                        Write a Review
                                    </a>
                                </div>
                                <div class="nav-item">
                                    <a href="{{ route('explore') }}" class="nav-link login">
                                        Explore
                                    </a>
                                </div>
                            @endif
                        </div>
                    </nav>
                </div>
            </header>
        </div>
        <div class="containers banner-content">
            <div class="d-flex align-items-center">
                <div class="col-7">
                    <h1 class="banner-text">
                        Discover the best places to eat in Lagos.</h1>
                    <form action="/search" class="location-form search-input search-page-form search-form">
                        <div class="food-input">
                            <div class="input-prepend">
                                <span class="prepend-text">
                                    <span>Food</span>
					                <img src="/images/icons/search-food.png" alt="search food">
                                </span>
                            </div>
                            <input type="text" name="food" class="form-control" id="food" placeholder="What are you cravving?" autofocus autocorrect="off" />
                        </div>
                        <div class="address-input">
                            <div class="input-prepend">
                                <span class="prepend-text">
                                    <span>Where</span>
                                    <img src="/images/icons/search-location.png" alt="search location">
                                </span>
                            </div>
                            <input type="text" name="address" class="form-control" id="address" placeholder="Where are you?" />
                            
                        </div>
                        <input type="hidden" id="longitude" name="longitude"><input type="hidden" id="latitude" name="latitude">
                        <button class="button button-primary inline-button submit-button btn-circle">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section class="">
        @foreach ($places as $name => $area)
            <div class="popular-places">
                <h3 class="slide-title">Popular Places in {{ $name }}</h3>
                <div class="card-list">
                    @foreach ($area as $place)
                        @php
                            $image_exists = isset($place['image']) && count($place['image']);
                            $bg_size = $image_exists ? 'cover' : 'contain';
                            $bg_image = $image_exists ? $place['image'][0] : '/images/resized/default.png';
                        @endphp
                        <div class="card-single">
                            <div class="actual-result">
                                <a href="/places/{{ $place['slug'] }}" data-slug="{{ $place['slug'] }}">
                                    <div class="search-place-image" style="background-size: {{ $bg_size }}; background-image: url({{ $bg_image }})">
                                    </div>
                                </a>
                                <div class="search-place-details">
                                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                                        <a href="/places/{{ $place['slug'] }}" class="place-title" data-slug="{{$place['slug']}}" style="max-width: 90%;">{{$place->name}}</a>
                                        <button type="button" data-slug="{{ $place['slug'] }}" class="like-place"><i class="fa fa-heart{{ $place['liked'] ? '' : '-o'}}"></i></button>
                                    </div>
                                    <p class="place-address">{{$place['address']}}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
        {{-- <h3 class="description-title">Are you a Food Lover?</h3>
        <div class="d-flex justify-content-center description-foodie">
            <div class="foodie">
                <h4>Find your favourite food</h4>
                <hr>
                <p class="description-text">Find any food, anywhere in Lagos in 1 easy step.</p>
            </div>
            <div class="foodie">
                <h4>Browse restaurant menus</h4>
                <hr>
                <p class="description-text">Go prepared! Check out restaurant menus to make sure you're getting exactly what you want.</p>
            </div>
            <div class="foodie">
                <h4>Share your experience</h4>
                <hr>
                <p class="description-text">Find out what fellow foodies have to say about your favourite restaurants and their food.</p>
            </div>
        </div>
        <div class="section-cta">
            <a href="/places" class="button button-primary">Explore</a>
        </div> --}}
        
    </section>

    <section class="easy description howto">
        <h3 class="description-title">Are you a Restaurant or a Food Vendor?</h3>
        <div class="d-flex justify-content-center description-restaurant">
            <div class="restaurant">
                {{-- <h4>Find Your Favourite Food</h4>
                <hr> --}}
                <p class="description-text">Reach new customers easier by letting them find you on Cravvings.</p>
            </div>
        </div>
        <div class="section-cta">
            <a href="/business/register" class="button button-primary">Register</a>
        </div>
    </section>
     @endsection

    @section('javascript')
    @parent
    <script src="/js/cravvings.js"></script>
    <script src="/js/home.js"></script>
    <script defer src="/js/mainsearch.js"></script>
    <script defertype="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script defertype="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script defer src="/js/slick.min.js"></script>
    <script src="/js/auth.js"></script>
    <script>
        $(document).ready(function() {
            $('.card-list').slick({
                slidesToShow: 4,
                responsive: [
                    {
                        breakpoint: 1000,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true
                        }
                    },
                    {
                        breakpoint: 800,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2,
                            infinite: true
                        }
                    },
                    {
                    breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: true
                        }
                    }
                ]
            });
        });
        document.querySelectorAll('.dropdown-toggle').forEach(dropdown => {
            dropdown.addEventListener('click', function(e) {
                toggleShowMenu(e.currentTarget.nextElementSibling)
            })
        });;
    
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.dropdown-menu') && !e.target.closest('.dropdown-toggle')) {
                document.querySelectorAll('.dropdown-menu').forEach(menu => {
                    menu.classList.remove('show')
                })
            }
        });
    
        function toggleShowMenu(dropdown) {
            setTimeout(() => {
                if (!dropdown.matches(':hover')) {
                    dropdown.classList.toggle('show');
                }
            }, 0);
        }

        document.querySelectorAll('.actual-result .like-place').forEach(likeButton => {
			likeButton.addEventListener('click', likePlace)
		});
    </script>
    <!-- Start of HubSpot Embed Code -->

    <!-- End of HubSpot Embed Code -->
@endsection