@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.deposit.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-success btn-sm waves-effect"
                                        @click="depositManual(
                                        '{{ $value->id }}',
                                        '{{ $value->f_name . ' ' . $value->l_name }}',
                                        '{{ $value->game_username }}',
                                        '{{ $value->promotion_id }}',
                                        '{{ $value->amount }}',
                                        '{{ $value->bonus }}',
                                        )">
                                        เติมปกติ
                                    </button>
                                    <a href="{{ route('manage.deposit.chooseTransactionSms', $value->id) }}"
                                        class="btn btn-success btn-sm waves-effect">
                                        เติม Sms
                                    </a>
                                    <a href="{{ route('manage.deposit.chooseTransaction', $value->id) }}"
                                        class="btn btn-success btn-sm waves-effect">
                                        เติมตามยอด
                                    </a>
                                </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.deposit.storeManualNoTrans') }}" method="POST">
                                @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">
                                        <select name="promotion_id" class="form-select form-control" v-model="promotion_id"
                                            :disabled="!topup_ready" @change="calculatePromotion">
                                            @foreach ($promotions as $value)
                                                <option value="{{ $value->id }}">{{ $value->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <label>ยอดเงิน: </label>
                                    <div class="mb-1">
                                        <input type="text" v-model="amount" name="amount" class="form-control"
                                            :disabled="!topup_ready" @keyup="calculatePromotion" />
                                    </div>
                                    <label>โบนัส: </label>
                                    <div class="mb-1">
                                        <input type="text" v-model="bonus" class="form-control" disabled />
                                    </div>
                                    <label>รวม: </label>
                                    <div class="mb-1">
                                        <input type="text" :value="(amount * 1) + (bonus * 1)" class="form-control"
                                            readonly />
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                        v-if="topup_ready">ปิด</button>
                                    <button type="submit" 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>
    <div class="col-md-12 col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">รายการรอตรวจสอบ</h4>
            </div>
            <div class="card-body">
                <span style="color: deepskyblue">* ปุ่มสำเร็จคือปรับให้รายงานนี้ขึ้นสำเร็จ โดยไม่ทำอะไร</span>
                <span style="color: red">* ปุ่มยกเลิกคือปรับรายงานเป็นสถานะยกเลิกโดยไม่ทำอะไร</span>
                {{-- <span style="color: f5b320">* ปุ่มเติมใหม่ พยายามเติมเครดิตใหม่อีกรอบ</span> --}}
                <hr />
                <div class="table-responsive">
                    <table class="table table-bordered" style="font-size: 12px">
                        <thead>
                            <tr>
                                <th style="white-space:nowrap">วันที่/เวลา</th>
                                <th>สถานะ</th>
                                <th>ประเภท</th>
                                <th>ลูกค้า</th>
                                <th>ธนาคาร</th>
                                <th>ยอดเงิน</th>
                                <th>โปร</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="value in reports" :key="value._id">
                                <td style="white-space: nowrap">
                                    @{{ value.date.split(' ')[0] }} <br />
                                    @{{ value.date.split(' ')[1] }}
                                </td>
                                <td>
                                    <span class="badge rounded-pill badge-light-primary me-1">@{{ reportStatusText(value.status_id) }}</span>
                                </td>
                                <td>
                                    <span class="badge rounded-pill me-1" :class="reportType(value.type_id)">
                                        @{{ reportTypeText(value.type_id) }}
                                    </span>
                                </td>
                                <td>
                                    <small>
                                        @{{ value.customer.f_name + ' ' + value.customer.l_name }} <br />
                                        @{{ value.customer.game_username }}
                                    </small>
                                </td>
                                <td style="white-space: nowrap">
                                    <div v-if="value.bank_sys">
                                        <img :src="'{{ asset('assets/css/th') }}/' + value.bank_sys.bank_list.bank_abbrev_en
                                            .toLowerCase() + '.png'"
                                            width="20px" class="rounded mx-auto d-block" />
                                        <small>
                                            <p class="text-center">
                                                @{{ value.bank_sys.bank_list.bank_abbrev_en + ' : ' + value.bank_sys.bank_list.bank_abbrev_th }}
                                                <br />
                                                @{{ value.bank_sys.account_number + ' - ' + value.bank_sys.name }}
                                            </p>
                                        </small>
                                    </div>
                                </td>
                                <td>
                                    @{{ value.amount }} (@{{ value.bonus }})
                                </td>
                                <td>@{{ value.promotion ? value.promotion.name : 'ไม่รับโปร (-)' }}</td>
                                <td style="white-space: nowrap">
                                    <button class="btn btn-success btn-sm"
                                        @click="unknownAction(1,value.id)">สำเร็จ</button>
                                    <button class="btn btn-danger btn-sm"
                                        @click="unknownAction(2, value.id)">ยกเลิก</button>
                                    {{-- <button class="btn btn-primary btn-sm"
                                        @click="unknownAction(3, value.id)">เติมใหม่</button> --}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

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

@section('page.js')
    <script src="{{ asset('app-assets/js/scripts/extensions/ext-component-sweet-alerts.js') }}"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                topup_btn: true,
                name: '',
                username: '',
                promotion_id: '',
                amount: '',
                bonus: '',
                customer_id: '',
                url_update: '',
                topup_ready: true,
                url_promotion: '{{ route('manage.deposit.promotionCalculator') }}',
                timer: null,
                action: 1,
                reports: []
            },
            mounted() {
                this.getReports();
            },
            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.promotion_id = promotion_id;
                    this.amount = amount;
                    this.bonus = bonus;
                },
                calculatePromotion() {
                    let vm = this;
                    clearTimeout(this.timer)
                    if (this.amount == '') {
                        this.bonus = 0;
                        return;
                    }
                    this.timer = setTimeout(async () => {
                        axios.post(this.url_promotion, {
                            promotion_id: this.promotion_id,
                            customer_id: this.customer_id,
                            amount: this.amount
                        }, {
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'content-type': 'application/json'
                            }
                        }).then((response) => {
                            console.log(response.data)
                            vm.bonus = response.data.data.bonus;
                        }).catch((error) => {
                            console.log(error)
                        });
                    }, 500)

                },
                depositLoading() {
                    if (confirm('แน่ใจหรือไม่?')) {
                        this.topup_ready = false;
                        this.topup_btn = false;
                        this.$refs.form.submit();
                    }
                },
                async getReports() {
                    const resp = await axios.get(`{{ url('manage/deposit/get5Report') }}`, {
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'content-type': 'application/json'
                        }
                    });
                    console.log(resp.data)
                    this.reports = resp.data.data;
                },
                unknownAction(action, id) {
                    switch (action) {
                        case 1:
                            this.postAction(action, id, 'ปรับรายงานเป็นสำเร็จ');
                            break;
                        case 2:
                            this.postAction(action, id, 'ปรับรายงานเป็นยกเลิก');
                            break;

                        default:
                            break;
                    }
                },
                async postAction(action, id, text) {
                    const alert = await Swal.fire({
                        title: 'แน่ใจหรือไม่?',
                        text: `ต้องการ${text} ใช่หรือไม่?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'ใช่',
                        cancelButtonText: 'ยกเลิก'
                    })
                    if (alert.isConfirmed) {
                        try {
                            await axios.post(`{{ url('manage/deposit/action') }}`, {
                                report_id: id,
                                action: action
                            }, {
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                    'content-type': 'application/json'
                                }
                            });
                            Swal.fire({
                                icon: 'success',
                                title: 'สำเร็จ...',
                                text: 'ปรับรายงานสำเร็จ'
                            })
                            this.getReports();

                        } catch (error) {
                            console.log(error)
                            Swal.fire({
                                icon: 'error',
                                title: 'ผิดพลาด...',
                                text: 'กรุณากรอกข้อมูลให้ครบ'
                            })
                        }
                    }

                },
                reportType(type) {
                    switch (type) {
                        case 1:
                            return 'badge-light-success';
                            break;
                        case 2:
                            return 'badge-light-danger';
                            break;
                        case 3:
                            return 'badge-light-warning';
                            break;
                        case 4:
                            return 'badge-light-success';
                            break;
                        case 5:
                            return 'badge-light-danger';
                            break;
                        default:
                            return 'unknown';
                            break;
                    }
                },
                reportTypeText(type) {
                    switch (type) {
                        case 1:
                            return 'ฝาก';
                            break;
                        case 2:
                            return 'ถอน';
                            break;
                        case 3:
                            return 'ค่าใช้จ่าย';
                            break;
                        case 4:
                            return 'ฝาก(m)';
                            break;
                        case 5:
                            return 'ถอน(m)';
                            break;
                        default:
                            return 'unknown';
                            break;
                    }
                },
                reportStatus(status) {
                    switch (status) {
                        case 1:
                            return 'badge-light-success';
                            break;
                        case 2:
                            return 'badge-light-warning';
                            break;
                        case 3:
                            return 'badge-light-danger';
                            break;
                        case 4:
                            return 'badge-light-danger';
                            break;
                        case 5:
                            return 'badge-light-primary';
                            break;
                        case 6:
                            return 'badge-light-secondary';
                            break;
                        case 7:
                            return 'badge-light-warning';
                            break;
                        case 8:
                            return 'badge-light-danger';
                            break;
                        case 9:
                            return 'badge-light-danger';
                            break;
                        default:
                            return 'unknown';
                            break;
                    }
                },
                reportStatusText(status) {
                    // 7.ตัดเครดิต 8.เล่นเกมผิดเงื่อนไข 9.ตัดเครดิตตามเงื่อนไข
                    switch (status) {
                        case 1:
                            return 'สำเร็จ';
                            break;
                        case 2:
                            return 'รอดำเนินการ';
                            break;
                        case 3:
                            return 'คืนเครดิต';
                            break;
                        case 4:
                            return 'ไม่คืนเครดิต';
                            break;
                        case 5:
                            return 'รอตรวจสอบ';
                            break;
                        case 6:
                            return 'ฝากค้าง';
                            break;
                        case 7:
                            return 'ตัดเครดิต';
                            break;
                        case 8:
                            return 'เล่นเกมผิดเงื่อนไข';
                            break;
                        case 9:
                            return 'ตัดเครดิตตามเงื่อนไข';
                            break;
                        default:
                            return 'unknown';
                            break;
                    }
                },
            },
        });
    </script>
@endsection