@extends('layouts.master')

@section('title', 'StarSpin 2023')

@section('content')
    <!-- MAIN -->
    <main class="page-main" id="main-home-page">
        <!-- SECTION - List Of Winner - START -->
        <section class="section section-list-of-winner" id="starspin-list-winner">
            <!-- Decor - 1 -->
            <figure class="img-holder decor decor-1">
                <img src="{{ asset('starspin_front/app/img/decor-1.png') }}" alt="decor-1">
            </figure>
            <!-- Decor - 2 -->
            <figure class="img-holder decor decor-2">
                <img src="{{ asset('starspin_front/app/img/decor-2.png') }}" alt="decor-2">
            </figure>
            <!-- Decor - 3 -->
            <figure class="img-holder decor decor-3">
                <img src="{{ asset('starspin_front/app/img/decor-9.png') }}" alt="decor-3">
            </figure>
            <div class="container">
                <!-- Section Head -->
                <div class="section-head">
                    <!-- Title Image -->
                    <figure class="title-image img-holder bg-mode">
                        <img src="{{ asset('starspin_front/app/img/title/danh-sach-trung-giai.png') }}"
                             alt="sapporo-spin">
                    </figure>
                    <!-- Desc -->
                    <div class="desc">
                        <p>
                            Chúc mừng các khách hàng có tên bên dưới <br class="mb-show"> đã tham gia và nhận được các giải thưởng của<br/>
                            chương trình "Nâng bia huyền thoại mở lối đến Sapporo"
                        </p>
                    </div>
                </div>
                <!-- Section Body -->
                <div class="section-body">
                    <!-- Search Holder -->
                    <div class="search-holder">
                        <!-- Search Holder Label -->
                        <span class="search-holder-label">tìm kiếm theo</span>
                        <!-- List Filter -->
                        <div class="list-filter">
                            @if (!$filter_name && !$filter_code)
                                <span class="filter-item active" data-filter="name">Họ và tên</span>
                                <span class="filter-item" data-filter="code">Mã dự thưởng</span>
                            @else
                                <span class="filter-item {{ $filter_name ? 'active' : '' }}" data-filter="name">Họ và
                                    tên</span>
                                <span class="filter-item {{ $filter_code ? 'active' : '' }}" data-filter="code">Mã dự
                                    thưởng</span>
                            @endif
                        </div>
                        <!-- Form Search -->
                        <div class="form-search">
                            <form action="{{ route('list-result') }}">
                                <!-- Form Group -->
                                <div class="form-group">
                                    <div class="form-row">
                                        <div class="form-col">
                                            <div>
                                                @if(!$filter_name && !$filter_code)
                                                    <input type="text" id="search-client-name-input" placeholder=""
                                                           name="filters[name]"
                                                           value=""/>
                                                @else
                                                    <input type="text" id="search-client-name-input" placeholder=""
                                                           name="{{ $filter_name ? 'filters[name]' : 'filters[code]' }}"
                                                           value="{{ $filter_name ?? $filter_code }}"/>
                                                @endif
                                                <label for="search-client-name-input"></label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- CTA Holder -->
                                    <div class="cta-holder">
                                        <button type="submit" class="btn close-modal btn-default">
                                            <span class="icon">
                                                <figure class="img-holder bg-mode">
                                                    <img
                                                        src="{{ asset('starspin_front/app/img/icon/magnify-glass-ico.svg') }}"
                                                        alt="magnify-glass-icon">
                                                </figure>
                                            </span>
                                            <span class="context">
                                                Tìm kiếm
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- Search Result -->
                    @if($win_list)
                        <div class="search-result">
                            <!-- Search Result Table -->
                            <div class="search-result-table">
                                <!-- Table -->
                                <table id="table-list-result">
                                    <tr>
                                        <th class="thead-data-name">Họ và tên</th>
                                        <th class="thead-code">mã quay thưởng</th>
                                        <th class="thead-phone-number">số điện thoại</th>
                                        <th class="thead-prize">giải thưởng</th>
                                    </tr>
                                    @foreach ($win_list as $code)
                                        <tr>
                                            <td class="data-name">{{ optional(optional($code)->starSpinBill)->customer_name }}</td>
                                            <td class="data-code">{{ $code->code }}</td>
                                            <td class="data-phone-number">{{ optional(optional($code)->starSpinBill)->phone }}</td>
                                            <td class="data-prize">{{ \App\Enums\GiftTypeEnum::getName($code->starSpinGift->name) }}</td>
                                        </tr>
                                    @endforeach
                                </table>
                                <!-- Pagination -->
                                @if ($win_list->count() !== 0)
                                    <ul class="pagination">
                                        @if ($win_list->previousPageUrl())
                                            <li class="page-item prev-page">
                                                <a class="page-link" href="{{ $win_list->previousPageUrl() }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                         viewBox="0 0 20 20" fill="none">
                                                        <path d="M11.6665 5L6.6665 10L11.6665 15" stroke="#4D4D4D"
                                                              stroke-width="1.6" stroke-linecap="round"
                                                              stroke-linejoin="round"/>
                                                    </svg>
                                                </a>
                                            </li>
                                        @endif

                                        @if($win_list->lastPage() > 1)
                                            <li class="page-item {{ $win_list->currentPage() == 1 ? 'active' : '' }}"><a
                                                    class="page-link" href="{{ $win_list->url(1) }}">1</a>

                                        @endif
                                        @if ($win_list->lastPage() <= 5)
                                            @for ($i = 2; $i <= $win_list->lastPage() - 1; $i++)
                                                <li class="page-item {{ $win_list->currentPage() == $i ? 'active' : '' }}">
                                                    <a class="page-link" href="{{ $win_list->url($i) }}">{{ $i }}</a>
                                                </li>
                                            @endfor
                                        @elseif($win_list->lastPage() - $win_list->currentPage() <= 5)
                                            <li class="page-item disabled"><a class="page-link" href="#">···</a></li>
                                            @for ($i = $win_list->lastPage() - 5; $i <= $win_list->lastPage() - 1; $i++)
                                                <li class="page-item {{ $win_list->currentPage() == $i ? 'active' : '' }}">
                                                    <a class="page-link" href="{{ $win_list->url($i) }}">{{ $i }}</a>
                                                </li>
                                            @endfor
                                        @else
                                            @php
                                                $currentPage = $win_list->currentPage() == 1 ? $win_list->currentPage() + 1 : $win_list->currentPage();
                                            @endphp
                                            @for ($i = $currentPage; $i <= $win_list->currentPage() + 4; $i++)
                                                <li class="page-item {{ $win_list->currentPage() == $i ? 'active' : '' }}">
                                                    <a class="page-link" href="{{ $win_list->url($i) }}">{{ $i }}</a>
                                                </li>
                                            @endfor
                                            <li class="page-item disabled"><a class="page-link" href="#">···</a></li>
                                        @endif
                                        @if($win_list->lastPage() > 1)
                                            <li class="page-item {{ $win_list->currentPage() == $win_list->lastPage() ? 'active' : '' }}">
                                                <a class="page-link"
                                                   href="{{ $win_list->url($win_list->lastPage()) }}">{{ $win_list->lastPage() }}</a>
                                            </li>
                                        @endif
                                        @if ($win_list->nextPageUrl())
                                            <li class="page-item next-page">
                                                <a class="page-link" href="{{ $win_list->nextPageUrl() }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                         viewBox="0 0 20 20" fill="none">
                                                        <path d="M8.3335 5L13.3335 10L8.3335 15" stroke="#4D4D4D"
                                                              stroke-width="1.6"
                                                              stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                @endif

                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
        <!-- SECTION - List Of Winner - END -->
    </main>
    <!-- MAIN - END -->
@stop

@section('scripts')
    <script src="{{ asset('starspin_front/app/js/scripts-bundled.js') }}"></script>
    {{-- quick defined --}}

@stop