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

@section('style')
@endsection

@section('content')
    <main class="page-main" id="winner-list-page">
        <!-- SECTION List Of Winner - START -->
        <section class="ranking" id="section-ranking">
            <div class="container sm-container">
                <!-- Section Head -->
                <div class="section-head">
                    <h2 class="section-title gradient-title is-animated" data-text="BẢNG XẾP HẠNG">
                        <span>BẢNG XẾP HẠNG</span>
                    </h2>

                    {{-- Month List --}}
                    <ul class="month-list is-animated">
                        <li class="month" data-filter="09/2024">Tháng 09/2024</li>
                        <li class="month" data-filter="10/2024">Tháng 10/2024</li>
                        <li class="month" data-filter="01/2025">Tháng 01/2025</li>
                    </ul>
                </div>
                <!-- Section Body -->
                <div class="section-body">
                    <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>
                    <!-- Search Form -->
                    <div class="search is-animated">
                        <!-- Form Search -->
                        <form action="" class="search-form">
                            <div class="form-control">
                                <input type="text" name="name_phone" id="search-input" placeholder="" />
                                <label for="search-input"><span>Nhập tên hoặc số điện thoại</span></label>
                            </div>

                            <!-- CTA Holder -->
                            <button class="btn">
                                <span class="icon">
                                    <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M4.13539 4.63539C5.82327 2.94751 8.11253 1.99927 10.4995 1.99927C12.8866 1.99927 15.1758 2.94751 16.8637 4.63539C18.5516 6.32327 19.4998 8.61253 19.4998 10.9995C19.4998 12.8806 18.911 14.7009 17.8354 16.2141L22.0607 20.4394C22.6465 21.0252 22.6465 21.9749 22.0607 22.5607C21.4749 23.1465 20.5252 23.1465 19.9394 22.5607L15.7141 18.3354C14.2009 19.411 12.3806 19.9998 10.4995 19.9998C8.11253 19.9998 5.82327 19.0516 4.13539 17.3637C2.44751 15.6758 1.49927 13.3866 1.49927 10.9995C1.49927 8.61253 2.44751 6.32327 4.13539 4.63539ZM10.4995 4.99927C8.90818 4.99927 7.38198 5.63144 6.25671 6.75671C5.13144 7.88198 4.49927 9.40818 4.49927 10.9995C4.49927 12.5909 5.13144 14.1171 6.25671 15.2424C7.38198 16.3677 8.90818 16.9998 10.4995 16.9998C12.0909 16.9998 13.6171 16.3677 14.7424 15.2424C15.8677 14.1171 16.4998 12.5909 16.4998 10.9995C16.4998 9.40818 15.8677 7.88198 14.7424 6.75671C13.6171 5.63144 12.0909 4.99927 10.4995 4.99927Z"
                                            fill="#6E0106" />
                                    </svg>
                                </span>
                                <span class="context">
                                    Tìm kiếm
                                </span>
                            </button>
                        </form>
                    </div>

                    <!-- Search Result -->
                    <div class="search-result is-animated">
                        <!-- Table Wrapper-->
                        <div class="table-wrapper"></div>

                        {{-- Pagination --}}
                        <ul class="pagination"></ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- SECTION List Of Winner - END -->
    </main>
@endsection

@section('script')
@endsection