@extends('layouts.app-disclaimer-footer')

@section('style')
@endsection

@section('content')
    <main class="page-main" id="prize-structure-page">
        <!-- SECTION Prize Structure -->
        <section class="prize-structure" id="section-prize-structure">
            <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-yellow.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-red.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                {{-- Other Prize --}}
                <div class="other-prize">
                    {{-- Section Title --}}
                    <h1 class="section-title gradient-title is-animated" data-text="Cơ cấu giải thưởng">
                        <span>Cơ cấu giải thưởng</span>
                    </h1>
                    {{-- Sub Title --}}
                    <h3 class="sub-title is-animated">HÀNG NGÀN giải thưởng - Tham gia LÀ TRÚNG!</h3>
                    {{-- Prize List --}}
                    <ul class="prize-list is-animated">
                        @php
                            $arr = [
                                'Lốc 6 lon bia Sapporo Premium 330ml',
                                'Voucher ăn uống tại các Nhà hàng trị giá 200.000đ',
                                'Voucher mua hàng tại siêu thị Mega Market trị giá 150.000đ',
                                'Voucher mua hàng tại Star Shop trị giá 100.000đ',
                                'Voucher mua hàng tại Siêu thị trị giá 80.000đ',
                                'Voucher mua hàng tại Star Shop trị giá 50.000đ',
                                'Thẻ điện thoại 20.000đ',
                            ];
                        @endphp
                        @for ($i = 7; $i > 0; $i--)
                            <li class="prize-item">
                                <div class="prize-img">
                                    <figure class="img-holder">
                                        <img src="{{ asset('assets/img/landing-page/prizes/prize-' . $i . '.png') }}"
                                             alt="prize-{{ $i }}" width="110" height="100" />
                                    </figure>
                                </div>
                                <p class="prize-name">{!! $arr[7 -$i] !!}</p>
                            </li>
                        @endfor
                    </ul>
                </div>

                {{-- Top Prize --}}
                <div class="top-prize">
                    {{-- Sub Title --}}
                    <h3 class="sub-title dark-red-color is-animated">Tham gia CÀNG NHIỀU, TRÚNG QUÀ CÀNG LỚN</h3>
                    <h3 class="sub-title is-animated">
                        GIẢI THƯỞNG DÀNH CHO TOP NGƯỜI CHƠI
                        CÓ ĐIỂM TÍCH LŨY CAO NHẤT MỖI THÁNG
                    </h3>

                    {{-- Wrapper --}}
                    <div class="wrapper is-animated">
                        {{-- Prize List --}}
                        <ul class="prize-list">
                            @php
                                $arr = [
                                    (object) ['title' => 'Bếp nướng <br/> Nhật Bản*', 'sub_title' => 'Hạng 6-10'],
                                    (object) [
                                        'title' => 'Apple Watch <br/>Series 9 41MM*',
                                        'sub_title' => 'Hạng 2',
                                    ],
                                    (object) ['title' => 'Iphone 16 Pro*', 'sub_title' => 'Hạng 1'],
                                    (object) [
                                        'title' => 'Voucher du lịch <br/>trị giá 5 triệu*',
                                        'sub_title' => 'Hạng 3-5',
                                    ],
                                    (object) [
                                        'title' => 'Thùng bia Sapporo <br/>Premium 330MLx24 Lon*',
                                        'sub_title' => 'Hạng 11-25',
                                    ],
                                ];
                            @endphp
                            @for ($i = 0; $i < count($arr); $i++)
                                <li class="prize-item {{ $i === 2 ? 'top-1' : '' }}">
                                    <p class="sub-title">{!! $arr[$i]->sub_title !!}</p>

                                    <div class="prize-img">
                                        <figure class="img-holder bg-mode">
                                            <img src="{{ asset('assets/img/landing-page/prizes/top-prize-' . ($i + 1) . '.png') }}"
                                                alt="prize-{{ $i + 1 }}" width="" height="" />
                                        </figure>
                                    </div>
                                    <p class="prize-name">{!! $arr[$i]->title !!}</p>
                                </li>
                            @endfor
                        </ul>

                        {{-- Special Prize --}}
                        <div class="special-prize">
                            {{-- Info --}}
                            <div class="special-prize-info">
                                <div class="badge">Giải thưởng đặc biệt</div>
                                <h4 class="prize-info-title">Ipad Air 6 M2 11Inch 128GB</h4>
                                <p>Dành cho người chơi năng suất nhất trong chương trình</p>
                            </div>
                            <div class="special-prize-img">
                                <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-yellow.png') }}"
                                            alt="" width="" height="">
                                    </figure>
                                </div>
                                <figure class="img-holder bg-mode ">
                                    <img src="{{ asset('assets/img/landing-page/prizes/special-prize.png') }}"
                                        alt="special-prize" width="" height="" />
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CTA Holder --}}
                <div class="cta-holder is-animated">
                    <p>(*) Vui lòng đọc thể lệ để biết thêm chi tiết</p>
                    <a class="btn join-game-now" href="{{ route('mini-game') }}" target="_blank" rel="noopener" data-zoom-in-out>
                        Tham gia ngay
                    </a>
                </div>
            </div>
        </section>
        <!-- SECTION Prize Structure - END -->
    </main>
@endsection

@section('script')
@endsection