@extends('layouts.main-layout')

<!-- MAIN -->
@section('main')
    <!-- SECTION Banner -->
    <section class="section section-result-layout" id="result-section" data-scroll>
        <figure class="img-holder round-decor round-decor-1">
            <img src="{{asset('assets/images/decor/round-decor.png')}}" alt="">
        </figure>

        <figure class="img-holder round-decor round-decor-2">
            <img src="{{asset('assets/images/decor/round-decor-2.png')}}" alt="">
        </figure>

        <figure class="img-holder round-decor round-decor-3">
            <img src="{{asset('assets/images/decor/round-decor.png')}}" alt="">
        </figure>

        <figure class="img-holder gold-decor">
            <img src="{{asset('assets/images/decor/result-gold-decor.png')}}" alt="">
        </figure>

        <figure class="img-holder flair-decor">
            <img src="{{asset('assets/images/decor/flair-decor.png')}}" alt="decor img">
        </figure>

        <div class="container">
            <!-- Section layout -->
            <div class="section-layout">
                <!-- Section title -->
                <h1 class="section-title">
                    tra cứu <br>
                    danh sách trúng thưởng
                </h1>

                <!-- Search form -->
                <form action="" class="search-info-form" id="search-form">
                    @csrf
                    <label for="">Nhập họ và tên khách hàng</label>

                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Ví dụ: Nguyễn Văn Sơn" name="filters[name]"
                               id="result-client-name" value="{{$filters ?? ''}}">

                        <p class="err-msg">Họ và tên không hợp lệ</p>

                        <!-- CTA - Close modal -->
                        <button type="submit" class="btn btn-submit" id="search-result-btn">
                            <span class="context">TRA CỨU</span>
                            <span class="loader"></span>
                        </button>
                    </div>
                </form>

                <div class="result-layout {{count($users) > 0 ? 'active' : ''}}
                {{ (count($users) == 0 && !empty($filters)) ? 'active result-empty' : ''}}"
                     id="search-result">
                    <!-- Layout for desktop -->
                    <div class="table-layout mb-hide">
                        <!-- Table head -->
                        <ul class="table-head table-row">
                            <li class="table-item">
                                Họ và tên
                            </li>

                            <li class="table-item">
                                Mã số hợp đồng/ Mã số tài khoản thẻ tín dụng
                            </li>

                            <li class="table-item">
                                CMND / CCCD
                            </li>

                            <li class="table-item">
                                Số điện thoại
                            </li>

                            <li class="table-item">
                                Giải thưởng
                            </li>
                        </ul>

                        <!-- Table Row -->
                        <ul class="table-row">
                            @foreach($users as $user)
                                <li class="table-item">
                                    {{$user->username}}
                                </li>

                                <li class="table-item">
                                {{\Illuminate\Support\Str::mask($user->contact_number,
                                    '*',-12,8)}}

                                <li class="table-item">
                                    {{\Illuminate\Support\Str::mask($user->national_id,
                                        '*',
                                         0,
                                          (strlen($user->national_id) - 4))}}
                                </li>

                                <li class="table-item">
                                    {{\Illuminate\Support\Str::mask($user->phone,
                                        '*',
                                         0,
                                          (strlen($user->phone) - 4))}}
                                </li>

                                <li class="table-item">
                                    {{$user->gift()->first()->name}}
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- Layout for Mobile -->
                    <div class="result-list-layout mb-show">
                        <!-- Result Label -->
                        @if(count($users))
                            <p class="result-label desc">
                                Có {{count($users)}} kết quả cho <b>"{{$filters}}
                                    "</b>
                            </p>
                        @endif

                        <!-- Result list -->
                        <ul class="result-list">
                            <!-- Result item -->
                            @foreach($users as $user)
                                <li class="result-item">
                                    <!-- Info group -->
                                    <div class="info-group">
                                        <!-- Label -->
                                        <span class="label">
                                    Họ và tên
                                </span>

                                        <!-- Content -->
                                        <p class="content-value">
                                            {{$user->username}}
                                        </p>
                                    </div>

                                    <!-- Info group -->
                                    <div class="info-group">
                                        <!-- Label -->
                                        <span class="label">
                                    Số điện thoại
                                </span>

                                        <!-- Content -->
                                        <p class="content-value">
                                            {{\Illuminate\Support\Str::mask($user->phone,
                                            '*',-12, 8)}}
                                        </p>
                                    </div>

                                    <!-- Info group -->
                                    <div class="info-group">
                                        <!-- Label -->
                                        <span class="label">
                                    CMND / CCCD
                                </span>

                                        <!-- Content -->
                                        <p class="content-value">
                                            {{\Illuminate\Support\Str::mask($user->national_id,
                                        '*',
                                         0,
                                          (strlen($user->national_id) - 4))}}
                                        </p>
                                    </div>

                                    <!-- Info group -->
                                    <div class="info-group">
                                        <!-- Label -->
                                        <span class="label">
                                    Mã số hợp đồng/ Mã số tài khoản thẻ tín dụng
                                </span>

                                        <!-- Content -->
                                        <p class="content-value">
                                            {{\Illuminate\Support\Str::mask($user->contact_number,
                                        '*',
                                         0,
                                          (strlen($user->contact_number) - 4))}}
                                        </p>
                                    </div>

                                    <!-- Info group -->
                                    <div class="info-group prize-item">
                                        <!-- Label -->
                                        <span class="label">
                                    Giải thưởng
                                </span>

                                        <!-- Content -->
                                        <p class="content-value">
                                            {{$user->gift()->first()->name}}
                                        </p>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    @if(count($users) == 0 && !empty($filters))
                        <p class="empty-message desc">
                            Rất tiếc, chúng tôi không tìm thấy kết quả nào cho <b>"{{$filters}}"</b>
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- SECTION Banner - END -->
@endsection

@section('script')
    <script src="{{asset(mix('assets/js/jquery-3.3.1.min.js'))}}"></script>
    <script src="{{asset(mix('js/scripts.js'))}}"></script>
@endsection
<!-- MAIN - END -->