@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-12">
        <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" method="GET"
                    action="{{ route('manage.withdraw.search') }}">
                    <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" value="{{ $search }}"
                                            placeholder="ค้นหาตามชื่อ-สกุล เบอร์โทร ยูสเซอร์เนม" name="search" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-11 offset-sm-1">
                            <button class="btn btn-primary me-1" type="submit">ค้นหา</button>
                        </div>
                    </div>
                </form>
                <hr />
                @if (count($customers))
                    <table class="table table-bordered">
                        <tr>
                            <th>ชื่อ-สกุล</th>
                            <th>เบอร์โทร</th>
                            <th>โปรโมชั่น ปัจจุบัน</th>
                            <th>ยูสเซอร์</th>
                            <th></th>
                        </tr>
                        @foreach ($customers as $value)
                            <tr>
                                <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;">
                                    <button type="button" data-bs-toggle="modal" data-bs-target="#ModelDeposit"
                                        class="btn btn-warning btn-sm waves-effect"
                                        @click="depositManual(
                                        '{{ $value->id }}',
                                        '{{ $value->f_name . ' ' . $value->l_name }}',
                                        '{{ $value->game_username }}',
                                        '{{ $value->promotion_id }}',
                                        '{{ $value->amount }}',
                                        )">
                                        ถอนเงิน
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                @endif
                {{-- Modal Deposit --}}
                <div class="modal fade text-start" id="ModelDeposit" tabindex="-1" aria-labelledby="myModalLabel33"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel33">ถอนเงินลูกค้า (Manual)</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <form ref="form" action="{{ route('manage.withdraw.storeManualWithdraw') }}" method="POST"
                                autocomplete="off">
                                @csrf
                                <input type="hidden" name="customer_id" v-model="customer_id">
                                <div class="modal-body">
                                    <label>ชื่อ-สกุล: </label>
                                    <div class="mb-1">
                                        <input type="text" :value="name" class="form-control" disabled />
                                    </div>
                                    <label>Username: </label>
                                    <div class="mb-1">
                                        <input type="text" :value="username" class="form-control" disabled />
                                    </div>
                                    <label>เครดิตปัจจุบัน: </label>
                                    <div class="mb-1">
                                        <input type="text" :value="current_credit" class="form-control" disabled />
                                    </div>
                                    <label>ยอดเงิน: </label>
                                    <div class="mb-1">
                                        <input type="text" v-model="amount" name="amount" class="form-control"
                                            :disabled="!topup_ready" />
                                    </div>
                                    <label for="type_id">ประเภท</label>
                                    <div class="mb-1">
                                        <div class="input-group input-group-merge">
                                            <select name="status_id" class="form-control">
                                                @foreach ($status_id as $key => $value)
                                                    <option value="{{ $key }}">
                                                        {{ $value }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="check_promotion"
                                                name="check_promotion" checked />
                                            <label class="form-check-label" for="check_promotion">
                                                เช็คเงื่อนไขโปรโมชั่น
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                        v-if="topup_ready">ปิด</button>
                                    <button type="button" class="btn btn-primary" @click="depositLoading"
                                        v-if="topup_ready">ถอน</button>
                                    <button disabled class="btn btn-primary" v-else>กำลังถอน...</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page.js')
    <script>
        new Vue({
            el: '#app',
            data: {
                topup_btn: true,
                name: '',
                username: '',
                amount: '',
                customer_id: '',
                current_credit: 'กำลังโหลด...',
                topup_ready: true,
            },
            mounted() {
                // this.calculatePromotion();
            },
            methods: {
                depositManual(id, name, username, promotion_id, amount, bonus) {
                    // this.url_update = '{{ url('/manage/deposit') }}' + '/' + id;
                    this.customer_id = id;
                    this.name = name;
                    this.username = username;
                    this.amount = amount;
                    this.getCurrentCredit(username);
                },
                depositLoading() {
                    if (confirm('แน่ใจหรือไม่?')) {
                        this.topup_ready = false;
                        this.topup_btn = false;
                        this.$refs.form.submit();
                    }
                },
                getCurrentCredit($username) {
                    axios.post('{{ url('manage/withdraw/getCurrentCredit') }}/' + $username, {}, {
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'content-type': 'application/json'
                            }
                        })
                        .then((response) => {
                            console.log(response.data);
                            this.current_credit = response.data.data.balance;
                        })
                        .catch((error) => {
                            console.log(error);
                        })
                },
            },
        });
    </script>
@endsection