@extends('frontend.partials.layout')
@section('content')
    <style>
        #room {
            background-image: url({{env('APP_URL').str_replace(' ', '%20', $game->background_picture)}}) !important;
        }
        @if(!is_null($game->mobile_background_picture))
            @media(max-width: 768px) {
                #room {
                    background-image: url({{env('APP_URL').str_replace(' ', '%20', $game->mobile_background_picture)}}) !important;
                    background-attachment: scroll;
                    background-size: length;
                    -moz-background-size: length;
                    -webkit-background-size: length;
                    -o-background-size: length;
                }
            }
        @endif
    </style>
<section id="room" class="content" style="">
    <div class="col-lg-12" id="rooms-page">
        <div class="row text-center game-nav d-none d-md-flex d-lg-flex d-xl-flex">
            @foreach($games as $game_nav)
                @if($game_nav->status_web == 1)
            <div class="game-nav-btn">
                <h1 class="rooms-button">
                    <a @if($game->id == $game_nav->id) style="color: #fff;" @endif href="{{route('frontend_game', [$game_nav->url])}}" class="rooms-button-text">{{$game_nav->name}}</a>
                </h1>
            </div>
                @endif
            @endforeach
        </div>
        <div class="row text-center">
            <div class="col-lg-12">
                <p class="main-page"><a href="{{env('APP_URL')}}">Live escape room in Hollywood</a></p>
            </div>
            <div class="col-lg-12">
                <p class="room-welcome">WELCOME TO {{$game->name}}</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-lg-6">
                <div class="room-video-wrapper">
                    <iframe src="{{$game->video_url}}?autoplay=true&background=true&muted=1" frameborder="0"
                            webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="autoplay;fullscreen"></iframe>
                </div>

                <div class="container d-sm-block d-xs-block d-lg-none d-xl-none mb60 detail-cont">
                    <h1 class="reservation-button">
                        <a href="{{$game->reservation_url}}" class="reservation-button-text">Book Now</a>
                    </h1>
                    <div class="row text-center">
                        <div class="room-col">
                            <p class="rs-normal">guest amount</p>
                            <p class="rs-normal">1-{{$game->ticket_amount}}</p>
                        </div>
                        @if($game->disable_difficulty_level && $game->disable_escape_rate_level)
                        <div class="room-col">
                            <p class="rs-normal">game time:</p>
                            <p class="rs-normal">{{$game->game_length}} minutes</p>
                        </div>
                        @endif

                        @if(!$game->disable_difficulty_level)
                        <div class="room-col">
                            <p class="rs-normal">Difficulty level:</p>
                            <p class="rs-normal">
                                @for($i = 1; $i<=$game->difficulty; $i++)
                                    <i class="fas fa-star on"></i>
                                @endfor
                            </p>

                        </div>
                        @endif
                        @if(!$game->disable_escape_rate_level)
                        <div class="room-col">
                            <p class="rs-normal">Escape rate:<br />{{$game->escape_rate}} %</p>
                        </div>
                        @endif
                        @if(!$game->disable_difficulty_level && !$game->disable_escape_rate_level)
                        <div class="room-col">
                            <p class="rs-normal">game time:</p>
                            <p class="rs-normal">{{$game->game_length}} minutes</p>
                        </div>
                        @endif
                        <div class="room-col">
                            <p class="rs-normal">Genre: <br />{{$game->genre}}</p>
                        </div>
                    </div>
                </div>


                <div class="container d-none d-md-none d-lg-block d-xl-block">
                    <h1 class="reservation-button">
                        <a href="{{$game->reservation_url}}" class="reservation-button-text">Book Now</a>
                    </h1>
                    <div class="row text-center">
                        <div class="col-lg-4">
                            <p class="rs-header">guest amount</p>
                            <p class="rs-normal">1-{{$game->ticket_amount}}</p>
                            @if(!$game->disable_difficulty_level && !$game->disable_escape_rate_level)
                            <p class="rs-normal">game time: {{$game->game_length}} minutes</p>
                            @endif
                        </div>
                        <div class="col-lg-4">
                            <p class="rs-header">Genre</p>
                            <p class="rs-normal">{!! $game->genre !!}</p>
                            <br>
                            <p class="rs-header">tickets</p>
                            <p class="rs-normal">{!! $game->price_text_for_web !!}</p>
                        </div>
                        <div class="col-lg-4">
                            @if($game->disable_difficulty_level && $game->disable_escape_rate_level)
                            <p class="rs-normal">game time: {{$game->game_length}} minutes</p>
                            @endif
                            @if(!$game->disable_difficulty_level)
                            <p class="rs-header">Difficulty level:</p>
                            <p class="rs-normal">
                                @for($i = 1; $i<=$game->difficulty; $i++)
                                    <i class="fas fa-star on"></i>
                                @endfor
                            </p>
                            @endif
                            @if(!$game->disable_escape_rate_level)
                            <p class="rs-normal">Escape rate:<br />{{$game->escape_rate}} %</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 d-sm-block d-xs-block d-lg-none d-xl-none padding-20">
                    <p class="rs-normal">tickets</p>
                    <p class="rs-normal">{!! $game->price_text_for_web !!}</p>
                </div>



            </div>
            <div class="col-lg-6 spotlight-group ">