@extends('layouts.plain')

@section('stylesheets')
    @parent
    <link rel="stylesheet" href="/css/home.css">
    <link rel="stylesheet" href="/css/sidenav.css">
@endsection

@section('content')
<aside class="st-menu st-effect-1" id="menu-1">
    <a class="navbar-brand" href="#"><img src="/images/logo-large.png" alt="logo" data-effect="st-effect-1" class="logo"></a>
    <a href="#" class="close-side">
        <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>
    </a>
    <ul class="list-group">
        <li class="list-group-item"><i class="fa fa-home"></i> <a href="#">Home</a></li>
        <li class="list-group-item"><i class="fa fa-search"></i> <a href="/search">Search</a></li>
        <li class="list-group-item"><i class="fa fa-map-marker"></i> <a href="/places">Places</a></li>
        <li class="list-group-item"><i class="fa fa-edit"></i> <a href="{{ route('newReview') }}">Review</a></li>
        
        @auth
            @if (Auth::user()->super)
                <li class="list-group-item"><i class="fa fa-sign-out"></i> <a href="/logout">Logout</a></li>
                <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/place/new">New Place</a></li>
                <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/place/franchise">Franchise</a></li>
                <li class="list-group-item"><i class="fa fa-plus-square-o"></i> <a href="/admin/places/food">Admin</a></li>
            @endif
        @else
            <li class="list-group-item"><i class="fa fa-lock"></i> <a href="/login">Login</a></li>
            <li class="list-group-item"><i class="fa fa-users"></i> <a href="/register">Register</a></li>
        @endauth
        <li class="list-group-item"><i class="fa fa-envelope"></i> <a href="/contact">Contact Us</a></li>
    </ul>
</aside>
<section class="hero d-flex align-items-center" id="hero" style="position: relative;">
    <nav class="navbar main-nav navbar-dark">
        <a class="navbar-brand" href="#">
            <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>
            <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 banner-content">
        <div class="d-flex align-items-center">
            <div class="col-7">
                <h1 class="banner-text">
                    Sorry, the page you're looking for wasn't found.</h1>
                <form action="/search" class="location-form search-input search-page-form search-form">
                    <div class="food-input">
                        <input type="text" name="food" class="form-control" id="food" placeholder="What are you looking for? Peppersoup? Asun? Ofada?" />
                    </div>
                    <div class="address-input">
                        <input type="text" name="address" class="form-control" id="address" placeholder="Where are you?" />
                        <a href="#" class="get-location">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 176c-44.004 0-80.001 36-80.001 80 0 44.004 35.997 80 80.001 80 44.005 0 79.999-35.996 79.999-80 0-44-35.994-80-79.999-80zm190.938 58.667c-9.605-88.531-81.074-160-169.605-169.599V32h-42.666v33.067c-88.531 9.599-160 81.068-169.604 169.599H32v42.667h33.062c9.604 88.531 81.072 160 169.604 169.604V480h42.666v-33.062c88.531-9.604 160-81.073 169.605-169.604H480v-42.667h-33.062zM256 405.333c-82.137 0-149.334-67.198-149.334-149.333 0-82.136 67.197-149.333 149.334-149.333 82.135 0 149.332 67.198 149.332 149.333S338.135 405.333 256 405.333z"></path></svg>
                        </a>
                    </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">Search</button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
@parent
<script src="/js/side.js"></script>
<script src="/js/home.js"></script>
    
@endsection