@extends('layouts.app')

@section('head.vendor.css')
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/animate/animate.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/extensions/sweetalert2.min.css') }}">
@endsection

@section('head.page.css')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/css/plugins/extensions/ext-component-sweet-alerts.css') }}">
@endsection

@section('contents')
    <div class="col-md-12 col-8">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">ค้นหายูสเซอร์ลูกค้า</h4>
            </div>
            <div class="card-body">
                {{ MyNotify::get() }}
                <form class="form form-horizontal" autocomplete="off" @submit.prevent="searchCustomer">
                    @csrf
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-1 row">
                                <div class="col-sm-1">
                                    <label class="col-form-label" for="fname-icon">ค้นหา</label>
                                </div>
                                <div class="col-sm-9">
                                    <div class="input-group input-group-merge">
                                        <input type="text" class="form-control"
                                            placeholder="ค้นหาตามชื่อ-สกุล เบอร์โทร ยูสเซอร์เนม" v-model="name" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-11 offset-sm-1">
                            <template>
                                <button class="btn btn-primary me-1" type="submit" v-if="btn">ค้นหา</button>
                                <button class="btn btn-primary me-1" disabled v-else>กำลังโหลด...</button>
                            </template>
                        </div>
                    </div>
                </form>
                <hr>
                <template v-if="customers.length > 0">
                    <table class="table table-bordered">
                        <tr>
                            <th>ชื่อ-สกุล</th>
                            <th>เบอร์โทร</th>
                            <th>โปรโมชั่น ปัจจุบัน</th>
                            <th>ยูสเซอร์</th>
                            <th></th>
                        </tr>
                        <tr v-for="value in customers">
                            <td>@{{ value.f_name + ' ' + value.l_name }}</td>
                            <td>@{{ value.phone }}</td>
                            <td>@{{ value.promotion.name }}</td>
                            <td>@{{ value.game_username }}</td>
                            <td style="white-space: nowrap;">
                                <a :href="'{{ url('manage/wbonus/') }}/' + value.id + '/tbonus'"
                                    class="btn btn-warning btn-sm waves-effect">เลือก</a>
                            </td>
                        </tr>
                    </table>
                </template>
            </div>
        </div>
    </div>
@endsection

@section('page.vendor.js')
    <script src="{{ asset('app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/extensions/polyfill.min.js') }}"></script>
@endsection

@section('page.js')
    <script src="{{ asset('app-assets/js/scripts/extensions/ext-component-sweet-alerts.js') }}"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: null,
                customers: [],
                url_search: '{{ route('manage.withdrawbonus.search') }}',
                btn: true
            },
            methods: {
                searchCustomer() {
                    if (this.name === null || this.name === '') {
                        Swal.fire({
                            icon: 'error',
                            title: 'ผิดพลาด...',
                            text: 'กรุณากรอกข้อมูลให้ครบ'
                        })
                    } else {
                        this.btn = false;
                        let vm = this;
                        axios.get(this.url_search + '?search=' + this.name, {
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            })
                            .then(function(response) {
                                vm.customers = response.data.customers;
                            })
                            .catch(function(error) {
                                // handle error
                                console.log(error);
                            })
                            .then(function() {
                                vm.btn = true;
                            });
                    }
                },
            }
        })
    </script>
@endsection