@extends('frontend.partials.layout')
@section('content')
    <section id="hero" class="hero content">
        <div class="vid-wrapper">
            <div class="enter-wrapper">
                <a class="enter-button" href="{{ env('APP_URL') }}#rooms">
                    <span>Escape Rooms</span>
                </a>
            </div>
            <div class="enter-wrapper restaurant">
                <a class="enter-button" href="https://www.roomnumber13.com/">
                    <span>Restaurant & Bar</span>
                </a>
            </div>
            <iframe src="{{$company_data->getValue('video_url')}}?autoplay=true&background=true" frameborder="0"
                    title="Check in to the world's largest escape venue | Live escape games in Los Angeles"
                    webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>
        <!--<div class="hero-inner">
            <a href="#" class="btn"><i class="fas fa-play"></i></a>
        </div>-->
    </section>
    <section id="rooms" style="background-image: url('{{$company_data->getValue('main_page_escape_background')}}');padding-top: 20px;background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center center;background-repeat: no-repeat;/* background-attachment: fixed;">
        <div class="container-fluid d-none d-md-none d-sm-none d-lg-block d-xl-block">
            <div class="row text-center rooms-list">

                <h1 class="text-center">ESCAPE ROOMS</h1>
                <div class="row card-wrapper room-wrap">


                    @foreach($games as $game)
                        @if($game->show_web_type == 1)
                </div>
                <div class="row card-wrapper room-wrap">

                    @else

                    @endif
                    <div class="card @if($game->show_web_type == 0) card-m  col-lg-6 @else card-l col-xl-10 col-lg-10 @endif col-md-12 col-sm-12 col-xs-12">
                        <img @if($game->status_web == 2) style="-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);" @endif src="@if($game->show_web_type == 1) {{$game->banner_picture}} @else {{$game->little_picture}} @endif"
                             class="card-img" alt="{{$game->name}}">
                        @if($game->status_web == 1)
                            @if($game["id"] == 2)
                                <a href="https://www.escapehotelhideandseek.com/hide-seek">
                            @else
                                <a href="{{route('frontend_game', [$game->url])}}">
                            @endif
                        @else
                            <a href="javascript:void(0);" style="cursor:default;">
                        @endif
                            <div class="card-img-overlay">
                                <h5 class="game-name">{{$game->name}}</h5>
                                @if($game->status_web == 1)
                                <div class="bottom-section-wrapper">
                                    <!--<p class="difficulty-lvl">DIFFICULTY LEVEL</p>-->
                                    <div class="star-wrapper">
                                        @for($i = 1; $i<=$game->difficulty; $i++)
                                            <img class="c-lore img-fluid starimg"
                                                 src="{{env('APP_URL')}}/images/stars.png"
                                                 alt="* difficulty">
                                        @endfor
                                    </div>
                                    <p class="escape-rate">ESCAPE RATE: {{$game->escape_rate}}%</p>
                                </div>
                                @else
                                    <div class="bottom-section-wrapper">
                                        <p class="difficulty-lvl"><span style="color: #c4a352;font-family: 'WaverlyCF-Light' !important;font-size: 20px;">COMING SOON</span></p>
                                    </div>
                                @endif
                            </div>
                        </a>
                    </div>
                    @if($game->show_web_type == 1)
                </div>
                <div class="row card-wrapper room-wrap">
                    @else

                    @endif
                    @endforeach


                </div>


            </div>
        </div>

        <div class="container-fluid d-md-block d-sm-block d-xs-block d-lg-none d-xl-none">
            <div class="row text-center rooms-list">

                <h1 class="text-center">ESCAPE ROOMS</h1>
                <div class="row card-wrapper room-wrap">