@extends('layouts.app.game')

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

        <!-- Row 1 - LOGOTIPO - 3ª PAGINA -->
        <div class="container">
            <div class="row">
                <!-- Coluna 1 - Logotipo 3ª pagina -->
                <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="contact-form" class="contact-form" method="post" role="form"></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:0; margin-left:0;">
                        <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>APOSTA
                                                    <span id="current_trial_label">{{ $currentTrial }}</span>
                                                </b>
                                            </p>
                                            <p id="font1"><b>{{ $user->bet_code }}</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="apostPlay" src="{{ asset('assets/images/game/tombola/0_botao0.gif') }}"
                                             style="cursor: pointer;" class="float-left rounded" alt="...">
                                        <img id="apostBet" src="{{ asset('assets/images/game/tombola/0_botao1.gif') }}"
                                             style="cursor: pointer;display: none" class="float-left rounded" alt="...">
                                        <img id="apostSort" src="{{ asset('assets/images/game/tombola/0_botao3.gif') }}"
                                             style="cursor: pointer;display: none" 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);
        }

    </style>
@endsection