@extends('layouts.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('assets/images/game/logo_inforgreen1.png') }}">
                    <br>
                    <marquee class="marquee-slogancode" scrolldelay=100">
                        <b style="color:#F8F8FF;font-weight: normal;">
                        
                            Clique em <b style="color:#000000;background-color:#FFD700;border-radius: 50px;">   * JOGAR *</b> e depois escolha 
                            a chave a sortear. Clique em <b>APOSTAR</b> e quando quiser <b>SORTEAR</b>, tantas vezes até ao aviso de "JOGO FECHADO". 
                            Divirta-se e </b><b style="color:#32CD32;">boa-sorte!.. </b>
                        <b style="color:#32CD32;">
                        <!--     .:: INFORGREEN ::. -->
                        </b>
                    </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">

                    <img class="logo-clubesorte" src="/assets/images/uploads/logo_clubesorte1.png" alt="Italian Trulli">

                    <h3 style="font-size: 13px;">Promocoes> Epocas festivas </h3>
                
                    <button style="font-size: 13px;" id="buton-chave1" data-action="stick-sort" class="btn btn-info btn-sm btn-menu btn-sort">
                        Home
                    </button>
                    <button style="font-size: 13px;" 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 style="font-size: 13px;" 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 style="font-size: 13px;" id="buton-chave3" data-action="random-sort" class="btn btn-info btn-sm btn-menu btn-sort"
                            data-toggle="modal" data-target="#learnMore3">Premios
                    </button>
                </div>
                
                      <audio autoplay="autoplay" controls="controls" style="display:none">
<source src="https://experimentar-no-cafe.clubesorte.org/assets/sounds/game/musica-country1.mp3" type="audio/mp3" />
seu navegador não suporta HTML5
</audio>
            </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