@extends('layouts.app.auth')

@section('content')
    <header class="intro6">

        <!-- Row 1 - LOGOTIPO - 2ª PAGINA -->
        <div class="container">
            <div class="row">
                <!-- Coluna 1 - Logotipo -->
                <div class="col-sm-3 text-center">
                    <img class="logo" alt=""
                         src="{{ asset($game->logo) }}"><br>
                    <marquee class="marquee-slogancode" scrolldelay=100">
                        {!! $game->description !!}
                    </marquee>

                    <div style="text-align: center;">
                        <div class="contact-form-wrapper">
                            <div class="title"></div>
                            <form id="login-form" class="contact-form" action="{{ route('two-factor.store') }}"
                                  method="post" role="form">
                                <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                                @csrf
                                <div class="form-group">
                                    <input type="text" placeholder="Código da Aposta" class="form-control"
                                           name="twofactor"
                                           id="twofactor" required>
                                </div>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <!-- Menu/Botões -->
                                <div id="" class="">
                                    <button class="btn btn-default" onclick="">
                                        VALIDAR »
                                    </button>
                                </div>
                                <div id="" class="mt-2">
                                    <a href="{{ route('logout') }}" class="btn btn-default bg-danger" onclick="">
                                        SAIR »
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Coluna 2 - Centro - NADA -->
                    <div class="col-md-6"></div>
                </div>

                <!-- Row 2 - TOMBOLA -->
                <div class="row">
                    <!-- Coluna 1 - Form -->
                    <div class="col-md-3 text-center"></div>
                </div>

                <!-- Coluna 2 NADA -->
                <div class="col-md-4"></div>
                <!-- Coluna 3 - TOMBOLA -->
                <div class="col-md-2">
                    <!-- Consola-->
                    <div class="col-sm-2" style="margin-top:0px; margin-left:0px;">
                        <div class="containerTombola text-center">
                            <div style="margin-top:0px;">
                                <div class="zoom">
                                    <div class="thumbnail">
                                        <img class="responsive" id="consola-tombola" alt=""
                                             src="{{ asset('assets/images/game/tombola/tombola-vermelha-16.png') }}">
                                        <!-- Shape do Marquee - Efeito redondo -->
                                        <img class="marquee" alt="" id="Shape3"
                                             src="{{ asset('assets/images/game/tombola/bv10177.png') }}"><br>
                                        <!-- Marquee da Tombola-->
                                        <marquee direction="up" id="marquee-tombola" scrolldelay="150" scrollamount="2"
                                                 behavior="scroll" loop="0">
                                            <p id="font1"><b>PROMOÇÃO</b></p>
                                            <!-- <p id="font3">Saídas: Cinco<br> Probabilidades: 4.368/1<br></p>-->
                                            <p id="font4"><b><i>Boa Sorte!..</i></b></p>
                                        </marquee>
                                        <br>
                                        <!-- Buttons RESET -->
                                        <a href="#"><img id="reset-green"
                                                         src="{{ asset('assets/images/game/tombola/button-green22.png') }}"
                                                         alt="..."></a>
                                        <!-- Botao APOSTAR E SORTEAR -->
                                        <img id="authApostPlay"
                                             src="{{ asset('assets/images/game/tombola/0_botao0.gif') }}"
                                             style="cursor: pointer;" class="float-left rounded" alt="">

                                    </div>
                                    <!-- Tombola Dinâmica e Slots de Saida -->
                                    <div id="d4w4"></div>
                                    <div id="d4w3"></div>
                                    <div id="d4w2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buttons Footer -->
                <div class="footer text-center">

                    <x-game-category-subcategory-component :game="$game" />
                    <button id="buton-chave1" data-action="stick-sort" class="btn btn-info btn-sm btn-menu btn-sort">
                        Home
                    </button>
                    <button id="buton-chave1" data-action="only-sort" class="btn btn-info btn-sm btn-menu btn-sort"
                            data-toggle="modal" data-target="#learnMore1">Sobre
                    </button>
                    <button id="buton-chave2" data-action="fix-sort" class="btn btn-info btn-sm btn-menu btn-sort"
                            data-toggle="modal" data-target="#learnMore2">Como jogar?
                    </button>
                    <button id="buton-chave3" data-action="random-sort" class="btn btn-info btn-sm btn-menu btn-sort"
                            data-toggle="modal" data-target="#learnMore3">Prémios
                    </button>
                </div>
            </div>
        </div>

        <x-modal-game-promo />
        <x-modal-game-how-to />
        <x-modal-game-award />
    </header>
@endsection

@section('css')
    <style>

        /* Largura da barra de rolagem */
        ::-webkit-scrollbar {
            width: 0;
        }

        /*Images ZOOM*/
        .zoom {
            transition:       transform .1s;
            background-color: transparent;
        }

        .zoom:hover {
            -ms-transform:     scale(1.5); /* IE 9 */
            -webkit-transform: scale(1.2); /* Safari 3-8 */
            transform:         scale(1.2);
        }


        #d4w2 {
            position: relative;
            left:     -40.5px;
            top:      -217px;
            width:    270px;
            height:   0px;
            z-index:  100;
        }

        #d4w2 .slot {
            display:     inline-block;
            display:     yes;
            width:       34px;
            height:      34px;
            text-align:  center;
            font-size:   14px;
            color:       #000000;
            font-weight: bold;
            font-family: Arial;
            line-height: 2.56;
            z-index:     1000;
        }
    </style>
@endsection

@section('js')
    <script>
    </script>
@endsection