@extends('layouts.frontendProfile')

@section('profile-content')
    <div class="row">
        <div class="col-12">
            <div class="nav nav-tabs d-flex border-0 flex-sm-nowrap" id="nav-tabs" role="tablist">
                <a href="#deposit-tab" id="nav-deposit-tab" data-toggle="tab" role="tab" aria-controls="nav-deposit-tab"
                    aria-selected="true" class="btn btn-default icons-nav w-100 rounded-lg active"
                    data-onclick="openDeposit()">
                    <i class="fa fa-money-check-alt"></i>
                    ฝากเงิน
                </a>
                <a href="#withdraw-tab" id="nav-withdraw-tab" data-toggle="tab" role="tab" aria-controls="nav-withdraw-tab"
                    aria-selected="false" class="btn btn-default icons-nav w-100 rounded-lg" data-onclick="openWithDraw()">
                    <i class="fa fa-money-check-alt"></i>
                    ถอนเงิน
                </a>
            </div>
        </div>
        <div class="col-12 tab-content">
            <div id="deposit-tab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-deposit-tab">
                <p class="bg-white card-header mb-4 text-dark" style="margin: 0 -15px;"><i
                        class="fas fa-money-bill mr-2"></i>ฝากเงิน</p>
                <div class="bank-item py-1">
                    <div class="d-block p-2 shadow-sm border rounded-lg position-relative">
                                        <span class="checked"></span>
                        <div class="d-flex">
                            <img class="rounded-lg" src="{{ asset('bank-logo') }}/{{ $renderDepositAccount->bank_code }}.jpeg" style="height: 75px; width: 75px; object-fit: cover;">
                            <div class="mx-2 mx-sm-3 flex-fill">
                                <p class="mb-1 font-weight-bold">เลขที่บัญชี : <span class="bank-number">{{ $renderDepositAccount->bank_number }}</span></p>
                                <div class="lh-sm">
                                    <p class="mb-0 bank-name">{{ bankName($renderDepositAccount->bank_code) }}</p>
                                    <p class="mb-0 bank-owner-name">{{ $renderDepositAccount->bank_owner_name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form class="mt-4 row no-gutters mx-n2" id="formDeposit" action="{{ route('deposit-request.store') }}"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="p-2 col-lg-4 mb-3 mb-lg-0 text-center">
                        <img src onerror="this.src = `https://dummyimage.com/150x200/bdbdbd/7d7d7d&text=No+image`"
                            class="mb-2 billShow img-fluid">
                    </div>
                    <div class="p-2 col-lg-8">
                        <div class="form-row">
                            <div class="col-12 order-1 order-lg-0">
                                <div class="form-group">
                                    <label>กรอกจำนวนเงินที่ต้องการฝาก</label>
                                    <div class="input-group">
                                        <input type="number" min="50" step="1" name="amount" class="form-control"
                                            aria-describedby="NumberDHelp" required
                                            placeholder="ระบุยอดฝาก (ฝากเงินขั้นต่ำ 50 บาท)">
                                        <input type="hidden" name="info_bank_name" value="{{ bankName($renderDepositAccount->bank_code) }}">
                                        <input type="hidden" name="info_bank_code" value="{{ $renderDepositAccount->bank_code }}">
                                        <input type="hidden" name="info_bank_owner" value="{{ $renderDepositAccount->bank_owner_name }}">
                                        <input type="hidden" name="info_bank_number" value="{{ $renderDepositAccount->bank_number }}">
                                        <span class="input-group-append"><span class="input-group-text">บาท</span></span>
                                    </div>
                                    <small id="NumberDHelp" class="form-text text-muted">ฝากเงินขั้นต่ำ 50 บาท</small>
                                </div>
                            </div>
                            <div class="col-12 order-0 order-lg-1">
                                <div class="form-group">
                                    <label>หลักฐานการโอนเงิน</label>
                                    <input type="file" class="form-control m-auto" name="slip" id="billFile"
                                        onchange="readFile(this)" required accept="image/*">
                                </div>
                            </div>
                            <div class="col-12 order-2">
                                <div class="form-group">
                                    <label>วัน/เวลาที่โอนเงิน</label>
                                    <fieldset id="default-input">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                                            </div>
                                            <input type="date" class="form-control m-auto"
                                                value="{{ date('Y-m-d') }}"
                                                pattern="\d{4}-\d{2}-\d{4}"
                                                name="date" required>
                                            <div class="input-group-prepend">
                                                <div class="input-group-text border-left-0"><i class="fas fa-clock"></i></div>
                                            </div>
                                            <input type="time" class="form-control m-auto"
                                                pattern="\d{2}:\d{2}"
                                                placeholder="เช่น 18:30" maxlength="5" name="time" required>
                                        </div>
                                    </fieldset>
                                    <fieldset id="fallback-input" disabled hidden>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                                            </div>
                                            <input type="text" class="form-control m-auto"
                                                data-inputmask="'alias': 'datetime', 'inputFormat': 'yyyy-mm-dd', 'placeholder': 'ปปปป-ดด-วว'"
                                                value="{{ date('Y-m-d') }}" placeholder="เช่น {{ date('Y-m-d') }}"
                                                pattern="\d{4}-\d{2}-\d{4}"
                                                name="date" required>
                                            <div class="input-group-prepend">
                                                <div class="input-group-text border-left-0"><i class="fas fa-clock"></i></div>
                                            </div>
                                            <input type="text" class="form-control m-auto"
                                                data-inputmask="'regex': '^[0-2][0-3]:[0-5][0-9]$', 'clearIncomplete': true, 'placeholder': 'ชม:นน'"
                                                pattern="\d{2}:\d{2}"
                                                placeholder="เช่น 18:30" maxlength="5" name="time" required>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 col-12">
                        <button type="submit" class="btn btn-success w-100 mt-3">ยืนยันการฝากเงิน</button>
                    </div>
                </form>
            </div>
            <div id="withdraw-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-withdraw-tab">
                <p class="bg-white card-header mb-4 text-dark" style="margin: 0 -15px;"><i
                        class="fas fa-money-bill mr-2"></i>ถอนเงิน</p>
                @if (!$bankAccounts->count())
                    <p class="mb-0 text-center lead text-danger">โปรดเพิ่มบัญชีธนาคารของท่าน <a
                            href="{{ route('profile.bankAccount') }}">คลิกที่นี่</a></p>
                @else
                    <form class="mt-4" id="formWithdraw" action="{{ route('withdraw-request.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label>กรอกจำนวนเงินที่ต้องการถอน</label>
                            <div class="input-group">
                                <input type="number" name="amount" value="" min="100" class="form-control"
                                    aria-describedby="NumberDHelp" required
                                    placeholder="ระบุยอดถอน (ถอนเงินขั้นต่ำ 100 บาท)">
                                <span class="input-group-append"><span class="input-group-text">บาท</span></span>
                            </div>
                            <small id="NumberDHelp" class="form-text text-muted">ถอนเงินขั้นต่ำ 100 บาท</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">เลือกธนาคารของคุณ<strong
                                    class="text-danger ml-2">(ธนาคารที่รับโอน)</strong></label>
                            <select name="bank_account_id" class="form-control" id="exampleFormControlSelect1" required>
                                @foreach ($bankAccounts as $item)
                                    <option value="{{ $item->id }}">{{ bankName($item->bank_code) }} -
                                        {{ $item->bank_number }} </option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-success w-100 mt-3">ยืนยันการถอนเงิน</button>
                    </form>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const userAgent = navigator.userAgent.toLowerCase();
        const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
        const isMobile = userAgent.includes('iphone') || userAgent.includes('android');

        const defaultField = document.getElementById('default-input');
        const fallbackField = document.getElementById('fallback-input');

        if (isSafari && !isMobile) {
            defaultField.hidden = true;
            defaultField.disabled = true;
            fallbackField.hidden = false;
            fallbackField.disabled = false;
        }

        function readFile(input) {
            const img = document.querySelector('.billShow')
            const imgFile = input.files.length ? URL.createObjectURL(input.files[0]) : '';
            img.src = input.files.length ? imgFile : '';
            img.onload = e => URL.revokeObjectURL(imgFile);
        }
        document.addEventListener('DOMContentLoaded', () => {
            Inputmask().mask(document.querySelectorAll("input[data-inputmask]"));
        });

    </script>
@endsection