@extends('layouts.app')

@section('contents')
    <div class="card">
        <div class="card-body border-bottom">
            <h4 class="card-title">จัดการยอดถอน</h4>
            <a href="{{ url('manage/withdraw/create') }}" type="button"
                class="btn btn-primary waves-effect waves-float waves-light">ถอนเงิน</a>
            <hr />
            <span style="color: #f5b320">* ปุ่มยกเลิก ยกเลิกการถอนแบบคืนเครดิต</span>
            <span style="color: red">* ปุ่มปฎิเสธ ยกเลิกการถอนแบบไม่คืนเครดิต</span>
            <span style="color: deepskyblue">* ปุ่มสำเร็จคือปรับให้รายงานนี้ขึ้นสำเร็จ โดยไม่ทำอะไร</span>
        </div>
        <div class="card-datatable table-responsive pt-0">
            <table class="table">
                <thead class="table-light">
                    <tr>
                        <th>วันที่/เวลา</th>
                        <th>ประเภท</th>
                        <th>ยูสเซอร์</th>
                        <th>โปรโมชั่น</th>
                        <th>ธนาคารลูกค้า</th>
                        <th>ยอดเงิน</th>
                        <th>ก่อนถอน</th>
                        <th>หลังถอน</th>
                        <th>สถานะ</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <template>
                        <tr v-for="value in reports">
                            <td>@{{ value.date }}</td>
                            <td>
                                <span class="badge rounded-pill me-1" :class="reportType(value.type_id)">
                                    @{{ reportTypeText(value.type_id) }}
                                </span>
                            </td>
                            <td>
                                @{{ value.game_username }}
                                <button @click="checkCredit(value.customer_id)" class="btn btn-warning btn-sm waves-effect"
                                    v-if="btn">
                                    ดู
                                </button>
                                <button class="btn btn-warning waves-effect btn-sm" type="button" disabled="" v-else>
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                </button>
                            </td>
                            <td class="text-nowrap">@{{ value.promotion ? value.promotion.name : 'ไม่รับโปรโมชั่น' }}</td>
                            <td class="text-nowrap">
                                <div v-for="v in value.customer.bankcust">
                                    <div v-if="v.deleted_at === null">
                                        <img :src="url_image + '/' + v.banklist.bank_abbrev_en.toLowerCase() + '.png'"
                                            width="20px" />
                                        <small>
                                            @{{ v.banklist.bank_abbrev_en + ' : ' + v.banklist.bank_abbrev_th + ' - ' + v.number + ' - ' + value.customer.f_name + ' ' + value.customer.l_name }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td>@{{ value.amount }}</td>
                            <td>@{{ value.before }}</td>
                            <td>@{{ value.after }}</td>
                            <td>
                                <div class="spinner-border text-warning spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <span class="badge rounded-pill me-1" :class="reportStatus(value.status_id)">
                                    @{{ reportStatusText(value.status_id) }}
                                </span>
                            </td>
                            <td class="text-nowrap">
                                <select v-model="value.action">
                                    <option :value="null">กรุณาเลือก...</option>
                                    <option value="1">โอนทันที</option>
                                    <option value="2">สำเร็จ</option>
                                    <option value="3">ยกเลิก</option>
                                    <option value="4">ปฎิเสธ</option>
                                </select>
                                <button v-if="btn" class="btn btn-success btn-sm"
                                    @click="listAction(value.action, value.id)">
                                    ยืนยัน
                                </button>
                                <button v-else disabled class="btn btn-success btn-sm">
                                    กำลังโหลด...
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
                <tfoot>
                    <th>วันที่/เวลา</th>
                    <th>ประเภท</th>
                    <th>ยูสเซอร์</th>
                    <th>โปรโมชั่น</th>
                    <th>ธนาคารลูกค้า</th>
                    <th>ยอดเงิน</th>
                    <th>ก่อนถอน</th>
                    <th>หลังถอน</th>
                    <th>สถานะ</th>
                    <th></th>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-body border-bottom">
            <h4 class="card-title">ยอดถอนล่าสุด 10 รายการ</h4>
        </div>
        <div class="card-datatable table-responsive pt-0">
            <table class="table">
                <thead class="table-light">
                    <tr>
                        <th>วันที่/เวลา</th>
                        <th>ประเภท</th>
                        <th>ยูสเซอร์</th>
                        <th>โปรโมชั่น</th>
                        <th>ธนาคารลูกค้า</th>
                        <th>ยอดเงิน</th>
                        <th>ก่อนถอน</th>
                        <th>หลังถอน</th>
                        <th>สถานะ</th>
                        <th>โดย</th>
                    </tr>
                </thead>
                <tbody>
                    <template>
                        <tr v-for="value in reports2">
                            <td>@{{ value.date }}</td>
                            <td>
                                <a :href="'{{ url('qrcode') }}' + '/' + value.id" v-if="value.qrCode">
                                    <span class="badge rounded-pill me-1" :class="reportType(value.type_id)">
                                        @{{ reportTypeText(value.type_id) }}
                                    </span>
                                    <br />
                                    <small>ดู qrcode</small>
                                </a>
                                <span class="badge rounded-pill me-1" :class="reportType(value.type_id)" v-else>
                                    @{{ reportTypeText(value.type_id) }}
                                </span>
                            </td>
                            <td>@{{ value.game_username }}</td>
                            <td class="text-nowrap">@{{ value.promotion ? value.promotion.name : 'ไม่รับโปรโมชั่น' }}</td>
                            <td class="text-nowrap">
                                <div v-for="v in value.customer.bankcust">
                                    <div v-if="v.deleted_at === null">
                                        <img :src="url_image + '/' + v.banklist.bank_abbrev_en.toLowerCase() + '.png'"
                                            width="20px" />
                                        <small>
                                            @{{ v.banklist.bank_abbrev_en + ' : ' + v.banklist.bank_abbrev_th + ' - ' + v.number + ' - ' + value.customer.f_name + ' ' + value.customer.l_name }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td>@{{ value.amount }}</td>
                            <td>@{{ value.before }}</td>
                            <td>@{{ value.after }}</td>
                            <td>
                                <span class="badge rounded-pill me-1" :class="reportStatus(value.status_id)">
                                    @{{ reportStatusText(value.status_id) }}
                                </span>
                            </td>
                            <td class="text-nowrap">
                                @{{ value.user.name }}
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    {{-- modal  --}}
    <div class="modal fade text-start" id="choosebankform" 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">เลือกธนาคารที่ต้องการโอน</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="#" method="post" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-1">
                            <select class="form-control" v-model="bank_sys_id" :disabled="verifyData.name !== ''">
                                <option value="">กรุณาเลือก...</option>
                                @foreach ($banksys as $value)
                                    <option value="{{ $value->id }}">
                                        {{ $value->bankList->bank_abbrev_en . ' - ' . $value->bankList->bank_abbrev_th . ' - ' . $value->account_number . ' - ' . $value->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <template v-if="verifyData.name !== ''">
                            <hr />
                            <h4>ธนาคารลูกค้าที่จะโอนไป</h4>
                            <table class="table">
                                <tr>
                                    <td>
                                        ชื่อบัญชี
                                    </td>
                                    <td>
                                        <input type="text" :value="verifyData.name" class="form-control" readonly>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        ธนาคาร
                                    </td>
                                    <td>
                                        <input type="text" :value="verifyData.bank" class="form-control" readonly>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        เลขที่บัญชี
                                    </td>
                                    <td>
                                        <input type="text" :value="verifyData.number" class="form-control" readonly>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        จำนวนเงิน
                                    </td>
                                    <td>
                                        <input type="text" :value="verifyData.amount" class="form-control" readonly>
                                    </td>
                                </tr>
                            </table>
                        </template>
                    </div>
                    <div class="modal-footer">
                        <div v-if="count === 1">
                            <button v-if="btn_verify" type="button" class="btn btn-primary"
                                @click.prevent="getVerify">ยืนยัน</button>
                            <button v-else type="button" class="btn btn-primary" disabled>กำลังโหลด...</button>
                        </div>
                        <div v-else>
                            <button v-if="btn_verify" type="button" class="btn btn-primary"
                                @click.prevent="transfer">โอนเลย</button>
                            <button v-else type="button" class="btn btn-primary" disabled>กำลังโหลด...</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade text-start" id="choosebankform2" 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">เลือกธนาคารที่ต้องการบันทึก</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="#" method="post" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-1">
                            <select v-model="report.bank_transfer" class="form-control">
                                <option value="">กรุณาเลือก...</option>
                                @foreach ($banksys as $value)
                                    <option value="{{ $value->id }}">
                                        {{ $value->bankList->bank_abbrev_en . ' - ' . $value->bankList->bank_abbrev_th . ' - ' . $value->account_number . ' - ' . $value->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button v-if="btn" type="button" class="btn btn-primary"
                            @click.prevent="success">ยืนยัน</button>
                        <button v-else type="button" class="btn btn-primary" disabled>กำลังโหลด...</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page.js')
    <script src="{{ asset('app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/scripts/extensions/ext-component-sweet-alerts.js') }}"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                reports: [],
                reports2: [],
                url_image: '{{ asset('assets/css/th/') }}',
                btn_verify: true,
                btn: true,
                bank_sys_id: '',
                report_id: '',
                verifyData: {
                    name: '',
                    bank: '',
                    number: '',
                    amount: '',
                },
                report: {
                    id: null,
                    bank_transfer: '',
                },
                count: 1,
                remark: null,
                timer: '',
            },
            mounted() {
                this.getReports();
                this.timer = setInterval(this.getAndUpdateReport, 5000);
            },
            methods: {
                listAction(action, id) {
                    console.log(action, id);
                    switch (action) {
                        case '1':
                            this.report_id = id;
                            $('#choosebankform').modal('show'); //เปิด modal
                            // this.chooseBank(id);
                            break;
                        case '2':
                            this.chooseBank2(id, 1);
                            $('#choosebankform2').modal('show');
                            // this.success(id);
                            break;
                        case '3':
                            this.cancel(id);
                            break;
                        case '4':
                            this.reject(id);
                            break;
                    }
                },
                chooseBank2(id, status) {
                    this.report.id = id;
                    this.report.status = status;
                    if (status === 1) {
                        $('#choosebankform2').modal('show');
                    }
                },
                getVerify() {
                    let vm = this;
                    this.btn_verify = false;
                    vm.verifyData.name = '';
                    vm.verifyData.bank = '';
                    vm.verifyData.amount = '';
                    vm.verifyData.number = '';
                    axios.post(`{{ url('manage/withdraw/getVerify') }}`, {
                            report_id: this.report_id,
                            bank_sys_id: this.bank_sys_id
                        }, {
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'content-type': 'application/json'
                            }
                        })
                        .then(function(response) {
                            if (response.data.scb.status.code === 1000) {
                                let displayName = response.data.scb.data.accountToDisplayName;
                                let accountToName = response.data.scb.data.accountToName;
                                vm.verifyData.name = displayName === null ? accountToName : displayName;
                                vm.verifyData.bank = response.data.bank;
                                vm.verifyData.amount = response.data.amount;
                                vm.verifyData.number = response.data.scb.data.accountTo;
                                vm.remark = response.data.scb.data;
                                vm.count = 2;
                            } else {
                                $('#choosebankform').modal('toggle');
                                Swal.fire({
                                    title: response.data.scb.status.header,
                                    text: response.data.scb.status.description,
                                    icon: 'error',
                                })
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                        .then(function() {
                            vm.btn_verify = true;
                        });
                },
                transfer() {
                    let vm = this;
                    this.btn_verify = false;
                    axios.post(`{{ url('manage/withdraw/transfer') }}`, {
                            report_id: this.report_id,
                            bank_sys_id: this.bank_sys_id,
                            remark: this.remark
                        }, {
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'content-type': 'application/json'
                            }
                        })
                        .then(function(response) {
                            if (response.data.scb.status.code === 1000) {
                                $('#choosebankform').modal('toggle');
                                Swal.fire({
                                    title: 'เสร็จสิ้น!',
                                    text: 'โอนเงินจำนวน ' + response.data.amount + ' บาทสำเร็จ',
                                    imageUrl: '{{ asset('assets/images') }}/' + response.data.scb.data
                                        .transactionId + 'qc.png',
                                    imageWidth: 250,
                                    imageHeight: 250,
                                    imageAlt: 'Custom image',
                                    icon: 'success',
                                })
                            } else {
                                Swal.fire(
                                    'เกิดข้อผิดพลาด!',
                                    response.data.scb.status.description,
                                    'error'
                                )
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                        .then(function() {
                            vm.btn_verify = true;
                            vm.count = 1;
                            vm.verifyData.name = '';
                            vm.verifyData.bank = '';
                            vm.verifyData.amount = '';
                            vm.verifyData.number = '';
                            vm.getReports();
                        });
                },
                success() {
                    let vm = this;
                    Swal.fire({
                        title: 'แน่ใจหรือไม่?',
                        text: "ต้องการปรับสถานะเป็นสำเร็จใช่หรือไม่!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'ยกเลิก',
                        confirmButtonText: 'ใช่!'
                    }).then((result) => {
                        vm.btn = false;
                        if (result.isConfirmed) {
                            axios.post(`{{ url('manage/withdraw/changeStatusToSuccess') }}`, {
                                    report_id: vm.report.id,
                                    bank_transfer: vm.report.bank_transfer
                                }, {
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                        'content-type': 'application/json'
                                    }
                                })
                                .then(function(response) {
                                    if (response.data.status) {
                                        Swal.fire({
                                            title: 'เสร็จสิ้น!',
                                            text: 'เปลี่ยนรายงานเป็นสำเร็จ',
                                            icon: 'success',
                                        })
                                    } else {
                                        Swal.fire({
                                            title: 'เกิดข้อผิดพลาด!',
                                            text: 'ไม่สามารถทำรายการได้',
                                            icon: 'error',
                                        })
                                    }
                                })
                                .catch(function(error) {
                                    console.log(error);
                                    Swal.fire({
                                        title: 'เกิดข้อผิดพลาด!',
                                        text: 'ไม่สามารถทำรายการได้',
                                        icon: 'error',
                                    })
                                })
                                .then(function() {
                                    $('#choosebankform2').modal('toggle');
                                    vm.btn = true;
                                    vm.getReports();
                                    vm.report = {
                                        id: null,
                                        bank_transfer: '',
                                    };
                                });
                        }
                    })

                },
                cancel(id) {
                    let vm = this;
                    Swal.fire({
                        title: 'แน่ใจหรือไม่?',
                        text: "ต้องการปฏิเสธรายการนี้แบบคืนเครดิตใช่หรือไม่?",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'ยกเลิก',
                        confirmButtonText: 'ใช่!'
                    }).then((result) => {
                        vm.btn = false;
                        if (result.isConfirmed) {
                            axios.post(`{{ url('manage/withdraw/cancel') }}`, {
                                    report_id: id,
                                }, {
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                        'content-type': 'application/json'
                                    }
                                })
                                .then(function(response) {
                                    if (response.data.status) {
                                        Swal.fire({
                                            title: 'เสร็จสิ้น!',
                                            text: 'ปฏิเสธรายงาน',
                                            icon: 'success',
                                        })
                                    } else {
                                        Swal.fire({
                                            title: 'เกิดข้อผิดพลาด!',
                                            text: 'ไม่สามารถทำรายการได้',
                                            icon: 'error',
                                        })
                                    }
                                })
                                .catch(function(error) {
                                    console.log(error);
                                })
                                .then(function() {
                                    vm.btn = true;
                                    vm.getReports();
                                });
                        }
                    })

                },
                reject(id) {
                    let vm = this;
                    Swal.fire({
                        title: 'แน่ใจหรือไม่?',
                        text: "ต้องการปฏิเสธรายการนี้แบบไม่คืนเครดิตใช่หรือไม่?",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'ยกเลิก',
                        confirmButtonText: 'ใช่!'
                    }).then((result) => {
                        vm.btn = false;
                        if (result.isConfirmed) {
                            axios.post(`{{ url('manage/withdraw/changeStatusToReject') }}`, {
                                    report_id: id,
                                }, {
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                        'content-type': 'application/json'
                                    }
                                })
                                .then(function(response) {
                                    if (response.data.status) {
                                        Swal.fire({
                                            title: 'เสร็จสิ้น!',
                                            text: 'ปฏิเสธรายงาน',
                                            icon: 'success',
                                        })
                                    } else {
                                        Swal.fire({
                                            title: 'เกิดข้อผิดพลาด!',
                                            text: 'ไม่สามารถทำรายการได้',
                                            icon: 'error',
                                        })
                                    }
                                })
                                .catch(function(error) {
                                    console.log(error);
                                })
                                .then(function() {
                                    vm.btn = true;
                                    vm.getReports();
                                });
                        }
                    })

                },
                getReports() {
                    let vm = this;
                    this.btn = false;
                    axios.get(`{{ url('manage/withdraw/getWithdrawList') }}`, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(function(response) {
                            vm.reports = response.data.reports;
                            vm.reports2 = response.data.reports2;
                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                        .then(function() {
                            vm.btn = true;
                        });
                },
                getAndUpdateReport() {
                    let vm = this;
                    axios.get(`{{ url('manage/withdraw/getWithdrawList') }}`, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(function(response) {
                            // add update new report
                            response.data.reports.forEach((newReport, newIndex) => {
                                let isReport = false;
                                vm.reports.forEach((report, index) => {
                                    if (report.id === newReport.id) {
                                        isReport = true;
                                    }
                                });
                                if (!isReport) {
                                    vm.reports.push(newReport);
                                }
                            });

                            // remove report
                            vm.reports.forEach((report, index) => {
                                let isReport = false;
                                response.data.reports.forEach((newReport, newIndex) => {
                                    if (report.id === newReport.id) {
                                        isReport = true;
                                    }
                                });
                                if (!isReport) {
                                    vm.reports.splice(index, 1);
                                }
                            });

                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                        .then(function() {
                            // vm.btn = true;
                        });
                },
                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;
                    }
                },
                checkCredit(id) {
                    let vm = this;
                    this.btn = false;
                    console.log(id)
                    axios.get(`{{ url('customers') }}/${id}/getCredit`, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(function(response) {
                            console.log(response.data)
                            Swal.fire({
                                icon: 'success',
                                title: response.data.game_username,
                                html: 'ยอดเงินปัจจุบัน: ' + response.data.data.balance + ' บาท' +
                                    '<br />' +
                                    'outstanding: ' + response.data.data.outstanding + ' บาท'
                            })
                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                        .then(function() {
                            vm.btn = true;
                        });
                }
            },
        });
    </script>
@endsection