@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 --}}
                    <h2 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>
                    </h2>
                    {{-- 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 = [
                                'Card điện thoại <br/> 20K',
                                'Voucher Mua Bia <br/>  tại Star Shop',
                                'Voucher Urbox<br/> Siêu thị 80K',
                                'Voucher Mua Bia<br/>  tại Star Shop',
                                'Voucher Urbox<br/>  Mega Market 150K',
                                'Voucher Urbox<br/>  Nhà hàng 200K',
                                'Lốc 6 lon<br/>  Sapporo 330ML',
                            ];
                        @endphp
                        @for ($i = 0; $i < count($arr); $i++)
                            <li class="prize-item">
                                <div class="prize-img">
                                    <figure class="img-holder bg-mode">
                                        <img src="{{ asset('assets/img/landing-page/prizes/prize-' . ($i + 1) . '.png') }}"
                                            alt="prize-{{ $i + 1 }}" width="" height="" />
                                    </figure>
                                </div>
                                <p class="prize-name">{!! $arr[$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 CAO ĐIỂM 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' => 'Xếp hạng 6-10'],
                                    (object) [
                                        'title' => 'Apple Watch <br/>Series 9 4 1MM',
                                        'sub_title' => 'Xếp hạng 2',
                                    ],
                                    (object) ['title' => 'Iphone 16 Pro', 'sub_title' => 'Xếp hạng 1'],
                                    (object) [
                                        'title' => 'Voucher du lịch <br/>trị giá 5 triệu',
                                        'sub_title' => 'Xếp hạng 3-5',
                                    ],
                                    (object) [
                                        'title' => 'Thùng bia Sapporo <br/>330ML',
                                        'sub_title' => 'Xếp 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 đặt biệt</div>
                                <h4 class="gradient-title" data-text="Ipad Air 6 M2 11Inch 128GB">
                                    <span>Ipad Air 6 M2 11Inch 128GB</span>
                                </h4>
                                <p>Dành cho người chơi năng suất nhất tham gia...</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>
            </div>
        </section>
        <!-- SECTION Prize Structure - END -->
    </main>
@endsection

@section('script')
@endsection