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

@section('content')
    <main class="page-main" id="choose-game-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="choose-game-section">
            <div class="container">
                <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>

                {{-- Game Info --}}
                <div class="game-info">
                    <div class="user-info">
                        <div class="user">&nbsp;</div>
                        <div class="logout" id="btn-logout"><span>Đăng xuất</span></div>
                    </div>

                    {{-- Game Point --}}
                    <div class="game-point">
                        <div class="number-of-turns">
                            <span>&nbsp;</span>
                        </div>
                        <div class="total-point">
                            <span>&nbsp;</span>
                        </div>
                    </div>
                </div>

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

                {{-- instructions --}}
                <div class="instructions">
                    {{-- Title --}}
                    <div class="title">hướng dẫn cách chơi</div>
                    <p class="desc">Vui lòng đọc thật kĩ cách chơi để tranh quà thật cool nhé!</p>

                    <!-- Swiper -->
                    @php
                        $arr = [
                            'Trò chơi: Tìm điểm khác biệt.<br/> Mỗi lượt chơi có tổng cộng <b>60 giây cho 6 cặp hình</b>.',
                            '<b>Mỗi cặp hình có 5 điểm khác biệt</b>. Hãy tìm ra điểm khác biệt nhanh nhất và chơi nhiều cặp hình nhất để tích điểm.',
                            'Mỗi điểm khác biệt, nhận ngay 1 điểm. <b>Mỗi 10s còn dư</b> sau mỗi cặp hình, bạn <b>nhận thêm 1 điểm</b>.',
                            '<b>Điểm càng cao nhận quà càng lớn</b>. Tích điểm qua các lượt chơi trong tháng để nhận quà càng lớn.',
                            'Tham khảo chi tiết luật chơi và cách tính điểm <a href="' .
                            route('rules') .
                            '" target="_blank" rel="noopener">tại đây</a>',
                        ];
                    @endphp
                    <div class="swiper instructions-swiper">
                        <div class="swiper-wrapper">
                            @for ($i = 0; $i < count($arr); $i++)
                                <div class="swiper-slide">
                                    {{-- Image --}}
                                    <div class="image">
                                        <figure class="img-holder bg-mode">
                                            <img src="{{ asset('assets/img/mini-game/instruction-' . ($i + 1) . '.png') }}"
                                                alt="" width="" height="" />
                                        </figure>
                                    </div>
                                    {{-- Desc --}}
                                    <p class="desc">{!! $arr[$i] !!}</p>
                                </div>
                            @endfor
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

                {{-- CTA --}}
                <div class="cta-holder"></div>
            </div>
        </section>
    </main>
@endsection