@extends('layouts.app')

@section('contents')
    <div class="col-md-8 col-8">
        <div class="card " id="card-block">
            <div class="card-header">
                <h4 class="card-title">โอนเงิน</h4>
            </div>
            <div class="card-body">
                {{ MyNotify::get() }}

                <div class="row">
                    <form action="{{ url('transfer/getVerify') }}" method="post" autocomplete="off">
                        @csrf
                        <div class="col-12">
                            <div class="mb-1 row">
                                <div class="col-sm-3">
                                    <label class="col-form-label" for="fname-icon">ธนาคารระบบ</label>
                                </div>
                                <div class="col-sm-9">
                                    <div class="input-group input-group-merge">
                                        <select name="bank_sys_id" class="form-control" v-model="transfers.bank_sys_id"
                                            :disabled="!lo">
                                            <option :value="null">กรุณาเลือก...</option>
                                            @foreach ($banksys as $value)
                                                <option value="{{ $value->id }}">
                                                    <small>
                                                        {{ $value->bankList->bank_abbrev_en .
                                                            ' : ' .
                                                            $value->bankList->bank_abbrev_th .
                                                            ' - ' .
                                                            $value->account_number .
                                                            ' - ' .
                                                            $value->name }}
                                                    </small>
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1 row">
                                <div class="col-sm-3">
                                    <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" name="amount"
                                            placeholder="จำนวนเงินที่โอน" :disabled="!lo" v-model="transfers.amount"
                                            value="{{ old('amount') }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1 row">
                                <div class="col-sm-3">
                                    <label class="col-form-label" for="fname-icon">ธนาคารที่จะโอนไป</label>
                                </div>
                                <div class="col-sm-9">
                                    <div class="input-group input-group-merge">
                                        <select name="bank_to" class="form-control" v-model="transfers.bank_to"
                                            :disabled="!lo">
                                            <option :value="null">กรุณาเลือก...</option>
                                            @foreach ($banksys as $value)
                                                <option value="{{ $value->id }}">
                                                    <small>
                                                        {{ $value->bankList->bank_abbrev_en .
                                                            ' : ' .
                                                            $value->bankList->bank_abbrev_th .
                                                            ' - ' .
                                                            $value->account_number .
                                                            ' - ' .
                                                            $value->name }}
                                                    </small>
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="col-sm-9 offset-sm-3">
                        <button type="submit" class="btn btn-primary me-1" v-if="btn"
                            @click.prevent="verify">โอน</button>
                        <button type="reset" class="btn btn-outline-secondary" v-if="btn">รีเซ็ต</button>
                        <button type="button" class="btn btn-primary me-1" disabled v-else>กำลังโหลด...</button>
                    </div>
                </div>
            </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>
        new Vue({
            el: '#app',
            data: {
                transfers: {
                    bank_sys_id: null,
                    amount: null,
                    bank_to: null
                },
                btn: true,
                lo: true
            },
            methods: {
                async verify() {
                    let vm = this;
                    this.btn = false;
                    this.lo = false;
                    let url_api = `{{ url('transfer/internal/getVerify') }}`;
                    try {
                        const resp1 = await axios.post(url_api, vm.transfers, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        });

                        if (resp1.data.status.code === 1000) {
                            this.transfers.remark = resp1.data.data;
                            const titleHtml = 'โอนจาก: ' + resp1.data.data.accountFromName +
                                ' <br /> ถึง: ' +
                                resp1.data.data.accountToName + '(' + resp1.data
                                .data
                                .accountTo + ')' + '<br /> จำนวน: ' + vm.transfers.amount +
                                ' บาท';

                            const sconfirm = await Swal.fire({
                                title: 'กรุณาตรวจสอบข้อมูลก่อนโอน?',
                                html: titleHtml,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'โอนเลย!',
                                cancelButtonText: 'ยกเลิก',
                            });

                            if (sconfirm.isConfirmed) {
                                const resp2 = await axios.post(`{{ url('transfer/internal/getTransfer') }}`, vm
                                    .transfers, {
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        }
                                    });

                                if (resp2.data.status.code === 1000) {
                                    console.log(resp2)
                                    Swal.fire({
                                        title: 'เสร็จสิ้น!',
                                        text: 'โอนเงินจำนวน ' + vm.transfers.amount + ' บาทสำเร็จ',
                                        imageUrl: '{{ asset('assets/images') }}/' + resp2.data.data
                                            .transactionId + 'qc.png',
                                        imageWidth: 250,
                                        imageHeight: 250,
                                        imageAlt: 'Custom image',
                                        icon: 'success',
                                    })
                                } else {
                                    Swal.fire(
                                        'เกิดข้อผิดพลาด!',
                                        response.data.status.description,
                                        'error'
                                    )
                                }
                            }
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: resp1.data.status.header,
                                text: resp1.data.status.description
                            })
                        }
                    } catch (error) {
                        console.log(error)
                        Swal.fire({
                            icon: 'error',
                            title: error.code,
                            text: error.response.data.message
                        })
                    } finally {
                        this.btn = true;
                        this.lo = true;
                        this.transfers.amount = null;
                    }
                }
            }
        })
    </script>
@endsection