@extends('layouts.auth')

@section('content')
    <header class="intro6">
        <!-- Row 1 - LOGOTIPO -->
        <div class="container">
            <div class="row" style="margin-bottom: 165px;">
                <!-- Coluna 1 - Logotipo -->
                <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" style="color:#00BFFF">
                        .:: Sorteio de NATAL ::.  <!--
                        <b style="color:#32CD32;">.:: INFORGREEN ::. -->
                            <b style="color:#FFF5EE;font-weight: normal;"> Crie um BetCode, indique um email e clique <b>ENVIAR»</b> para receber o <b style="background-color:#B22222;border-radius: 50px;">   * Código das Apostas *</b>   </b><b style="color:#32CD32;;font-weight: bold;"> Divirta-se e BoaSORTE!..
                                 </marquee>
                   <div style="text-align: center;">
                        <div class="contact-form-wrapper">
                            <div class="title">
                            </div>

                            <form id="login-form" class="contact-form" action="{{ route('game.auth.authenticate') }}"
                                  method="post" role="form">
                                @csrf
                                <div class="form-group">
                                    <input type="text" placeholder="Criar BetCode" class="form-control" name="bet_code"
                                           id="name" value="{{ old('bet_code') }}" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" placeholder="O seu email" class="form-control" name="email"
                                           id="email" value="{{ old('email') }}" required>
                                </div>
                                @if($errors->has('ip'))
                                    <input type="hidden" name="force_ip" value="1"/>
                                @endif
                                @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="">
                                        ENVIAR »
                                    </button>
                                </div>
                        </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: 0;">
                                <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> MiniLotto</b></p>
                                            <p id="font3">Patrocinio<b style="color:#32CD32;"><br>INFORGREEN</b><br><b>JOGUE 3 APOSTAS</b><br></p>
                                            <p id="font4" style="font-style: normal;"><b>🎅 Boa Sorte!..</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">

                    <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>
                </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:      -220px;
            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, serif;
            line-height: 2.56;
            z-index:     1000;
        }
        
        .footer {
    background-color: #000;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 25px;
    bottom: 0;
    color: #fff;
    height: 130px;
    left: 0;
    opacity: .5;
    position: fixed;
    text-align: center;
    width: 100%;
}
        
    </style>
@endsection

@section('js')
@endsection