@extends('frontend.partials.layout')
@section('content')
<section id="table" class="reservations content" style="background-image: url({{env('APP_URL').$game->background_picture}}) !important;">
    <div class="row">
        <div class="col-lg-12 text-center">
            <div class="d-none d-md-block d-lg-block d-xl-block text-center">
                <div class="row">
                    <div class="col-lg-1">
                        <div class="game-selector text-left">
                            <div class="game-number-space"></div>
                            @foreach($games as $gm)
                            <div class="game-number">
                                <a href="{{route('frontend_reservations', [$gm->url])}}">{{$gm->name}}</a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-lg-11">
                    <div class="text-left" id="table_heading">

                    </div>
                    <div class="text-center" id="table2">

                    </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-left">
                                <a class="week-nav disabled" id="prev-week">Previous Week</a>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
                                <a class="week-nav" id="next-week">Next Week</a>
                            </div>
                        </div>
                    </div>

            <div class="d-block d-sm-block d-md-none">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <p class="mobile-game-name">GAME NAME</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 col-xs-2">
                        <h1 class="m-button-header">
                            <a href="#" class="m-button">7</a>
                        </h1>
                    </div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-2 col-xs-2">a</div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-1 col-xs-1">a</div>
                    <div class="col-sm-2 col-xs-2">a</div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="process">
    <div class="container">
        <div class="row">
            <div class="d-none d-md-block d-lg-block d-xl-block col-lg-12">
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-2">
                        <h1 class="t-button-header">
                            <a href="#" class="t-button">FIND A DATE</a>
                        </h1>
                    </div>
                    <div class="col-lg-2">
                        <h1 class="t-button-header">
                            <a href="#" class="t-button">SHOPPING CART</a>
                        </h1>
                    </div>
                    <div class="col-lg-2">
                        <h1 class="t-button-header">
                            <a href="#" class="t-button">PAYMENT INFO</a>
                        </h1>
                    </div>
                    <div class="col-lg-2">
                        <h1 class="t-button-header">
                            <a href="#" class="t-button">CONFIMATION</a>
                        </h1>
                    </div>
                    <div class="col-lg-2">
                        <h1 class="t-button-header">
                            <a href="#" class="t-button">THANK YOU</a>
                        </h1>
                    </div>
                    <div class="col-lg-1"></div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection