@extends('layouts.app')

@section('contents')
    <div>
        <div class="card">
            <div class="card-body border-bottom">
                <h4 class="card-title">ตรวจสอบรายการครั้งสุดท้ายก่อนเติม</h4>
            </div>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>วันที่/เวลา</th>
                        <th>ธนาคาร</th>
                        <th>ยอดเงิน</th>
                        <th>รายละเอียด</th>
                        <th>ช่องทาง</th>
                        <th>สถานะ</th>
                    </tr>
                </thead>
                <tbody style="font-size: 12px">
                    <tr>
                        <td>{{ $transaction->date }}</td>
                        <td>
                            <img src="{{ asset('assets/css/th/' . strtolower($transaction->bankSys->bankList->bank_abbrev_en) . '.png') }}"
                                width="20px" />
                            <small>
                                {{ $transaction->bankSys->bankList->bank_abbrev_en . ' : ' . $transaction->bankSys->bankList->bank_abbrev_th }}
                                - {{ $transaction->bankSys->account_number }} - {{ $transaction->bankSys->name }}
                            </small>
                        </td>
                        <td>
                            {{ number_format($transaction->amount, 2) }}
                        </td>
                        <td>{{ $transaction->remark }}</td>
                        <td>{{ $transaction->channel }}</td>
                        <td>
                            @if ($transaction->status_id === 1)
                                <span class="badge rounded-pill badge-light-success me-1">ทำรายการแล้ว</span>
                            @else
                                <span class="badge rounded-pill badge-light-danger me-1">ยังไม่ทำรายการ</span>
                            @endif
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="mb-4"></div>
        </div>

        <div class="col-md-8 col-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">ข้อมูลลูกค้า</h4>
                </div>
                {{ MyNotify::get() }}
                <form ref="form" action="{{ route('manage.deposit.depositFromTransaction.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                    <input type="hidden" name="transaction_id" value="{{ $transaction->id }}">
                    <div class="card-body">
                        @if ($current_total > 5)
                            <div class="alert alert-warning" role="alert">
                                <h4 class="alert-heading">สำคัญ!</h4>
                                <div class="alert-body">
                                    เนื่องจากยอดเงินปัจจุบันของลูกค้ามีมากกว่า 5 บาท การเติมในครั้งนี้อาจจะเข้า
                                    "กระเป๋าค้าง"
                                </div>
                            </div>
                        @endif
                        <form class="form form-horizontal">
                            <div class="row">
                                <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">
                                            <small>
                                                <strong>
                                                    @foreach ($customer->bankcust as $value)
                                                        <img src="{{ asset('assets/css/th/' . strtolower($value->bankList->bank_abbrev_en) . '.png') }}"
                                                            width="20px" />
                                                        {{ $value->bankList->bank_abbrev_en . ' : ' . $value->bankList->bank_abbrev_th . ' - ' . $value->number }}
                                                        <br>
                                                    @endforeach
                                                </strong>
                                            </small>
                                        </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" readonly
                                                    value="{{ $current_balance }}" />
                                            </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">outstanding</label>
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="input-group input-group-merge">
                                                <input type="text" class="form-control" readonly
                                                    value="{{ $current_outstanding }}" />
                                            </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" readonly
                                                    value="{{ $customer->f_name . ' ' . $customer->l_name . ' - ' . $customer->game_username }}" />
                                            </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" readonly
                                                    value="{{ $customer->promotion_id === 1 ? 'ไม่รับโบนัส' : $customer->promotion->name }}" />
                                            </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">
                                            @if ($transaction->bankSys->bank_list_id === 24)
                                                <input type="text" class="form-control" readonly value="ไม่รับโบนัส" />
                                            @else
                                                <select name="" class="form-select form-control" disabled>
                                                    @foreach ($promotions as $value)
                                                        <option value="{{ $value->id }}"
                                                            {{ $customer->promotion_id === $value->id ? 'selected' : '' }}>
                                                            {{ $value->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </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="ยอดเงิน" value="{{ $transaction->amount }}" disabled />
                                            </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="bonus"
                                                    placeholder="โบนัส" value="{{ $calPromotion['bonus'] }}" readonly />
                                            </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"
                                                    value="{{ (float) $calPromotion['amount'] + (float) $calPromotion['bonus'] }} "
                                                    readonly />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-9 offset-sm-3">
                                    <template>
                                        <button type="button" class="btn btn-primary" @click="depositLoading"
                                            v-if="topup_btn">เติม</button>
                                        <button type="button" class="btn btn-primary" disabled
                                            v-else>กำลังโหลด...</button>
                                    </template>
                                </div>
                            </div>
                        </form>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page.js')
    <script>
        new Vue({
            el: '#app',
            data: {
                topup_btn: true,
            },
            mounted() {
                // this.calculatePromotion();
            },
            methods: {
                depositLoading() {
                    if (confirm('แน่ใจหรือไม่?')) {
                        this.topup_btn = false;
                        this.$refs.form.submit();
                    }
                }
            },
        });
    </script>
@endsection