@extends('layouts.app-game-navigation')

@section('style')
@endsection

@section('content')
    <main class="page-main" id="verify-user-page">
        <h1 class="visuallyhidden">Săn Quà Đón Tết cùng Sapporo với 100% cơ hội trúng quà</h1>

        <section class="verify-user-section">
            <div class="container">
                <div class="decor-bg">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/mini-game/bg-login.png') }}" alt="" width=""
                            height="">
                    </figure>
                </div>

                <div class="decor decor-1">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-2">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-red.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-3">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-red.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-4">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>

                {{-- Section Title --}}
                <div class="section-title">
                    {{-- Title 1 --}}
                    <div class="title-1">
                        <figure class="img-holder bg-mode">
                            <img src="{{ asset('assets/img/mini-game/tagline_pc.png') }}" alt="" width=""
                                height="" />
                        </figure>
                    </div>
                </div>

                {{-- Login Form --}}
                <div class="login-form">
                    <h3 class="gradient-title" data-text="Nhập số điện thoại để tham gia trò chơi">
                        <span>Nhập số điện thoại để tham gia trò chơi</span>
                    </h3>

                    <form action="" autocomplete="off" id="verify-user-form">
                        {{-- Form Group --}}
                        <div class="form-group">
                            {{-- Form Control --}}
                            <div class="form-control">
                                <input id="phone-input" type="tel" name="phone" placeholder="0123123123"
                                    maxlength="10" />
                                <label for="phone-input"><span>Số điện thoại</span></label>
                            </div>
                            {{-- Err Message --}}
                            <span class="phone-msg err-msg" role="alert"></span>
                        </div>

                        {{-- Confirm Submit --}}
                        <div class="confirm-submit">
                            <input type="checkbox" name="is_submit" id="is-submit-input" value="off" />
                            <label for="is-submit-input">Tôi đồng ý với các <a href="{{ route('rules') }}" target="_blank"
                                    rel="noopener">
                                    Điều kiện & Điều khoản</a> của chương trình "Tuyệt tác giao thoa - Săn quà đón Tết"
                            </label>
                        </div>

                        <div class="form-group">
                            {{-- Err Message --}}
                            <span class="policy-msg err-msg" role="alert"></span>
                        </div>
                    </form>

                    <!-- CTA Holder -->
                    <button type="submit" class="btn" form="verify-user-form" id="btn-login">
                        <span class="context">
                            Tham gia
                        </span>
                    </button>

                    {{-- Notice --}}
                    <div class="notice">
                        <a href="https://giaobianhanh.com/" target="_blank" rel="oppener" class="giao-bia-nhanh">
                            Mua Bia Tại Đây
                        </a>&nbsp;để nhận được lượt chơi!
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('script')
@endsection