@extends('layouts.app')

@section('title')
    {{ __('create_withdraw_usdt') }}
@endsection

@section('withdraw')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('withdraw_usdt') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.withdraw.index') }}">{{ __('withdraw') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('withdraw_usdt') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div id="loading-overlay" class="overlay d-none">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="loading-text">{{ __('creating_withdrawal_please_wait') }}</div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('create_withdraw_usdt') }}</h3>
            </div>
            <div class="card-body">
                @if (Session::has('success'))
                    <div id="message-alert" class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div id="message-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <div class="col-lg-10 mx-auto">
                    <form id="withdraw-usdt-form" class="row" action="{{ route('app.withdraw.handleWithdrawUSDT') }}" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="col-lg-6">
                            <h2>{{ __('withdrawal_info') }}</h2>
                            <p><i>{{ __('please_check_withdrawal_info') }}</i></p>

                            <div class="form-group">
                                <label for="coin">{{ __('coin_type') }}</label>
                                <select class="form-control" id="coin" name="coin" required>
                                    <option value="USDT">USDT</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="chain-type">{{ __('network_chain') }}<span class="text-danger">*</span></label>
                                <select class="form-control" id="chain-type" name="chain_type" required>
                                    <option value="TRC20" @if (old('chain_type', 'TRC20') == 'TRC20') selected @endif>TRC20 (Tron)</option>
                                    <option value="ERC20" @if (old('chain_type') == 'ERC20') selected @endif>ERC20 (Ethereum)</option>
                                    <option value="BEP20" @if (old('chain_type') == 'BEP20') selected @endif>BEP20 (BSC)</option>
                                </select>
                                @error('chain_type')
                                    <span class="text-danger d-block">* {{ $message }}</span>
                                @enderror
                                <small class="text-danger d-block mt-1">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    {{ __('wallet_chain_match_warning') }}
                                </small>
                            </div>

                            <div class="form-group">
                                <label for="wallet-address">{{ __('wallet_address') }}<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="wallet-address" name="wallet_address"
                                    placeholder="{{ __('enter_wallet_address_usdt') }}" value="{{ old('wallet_address') }}" required>
                                <small class="text-muted d-block mt-1" id="wallet-hint"></small>
                                @error('wallet_address')
                                    <span class="text-danger d-block">* {{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="amount-vnd">{{ __('withdraw_amount_vnd') }}<span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="amount-vnd" name="amount_vnd"
                                    value="{{ old('amount_vnd') }}" placeholder="{{ __('enter_amount_vnd') }}" required>
                                <span class="amount-formatted text-muted d-block mt-1" id="amount-vnd-formatted"></span>
                                @error('amount_vnd')
                                    <span class="text-danger d-block">* {{ $message }}</span>
                                @enderror
                                <small class="text-muted d-block mt-1">
                                    {{ __('usdt_conversion_hint') }}
                                </small>
                            </div>

                            @if (auth()->user()->is_2fa_enabled)
                                <div class="form-group">
                                    <label for="one_time_password">{{ __('enter_the_2fa_authentication_code') }}<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="one_time_password" id="one_time_password"
                                        placeholder="{{ __('enter_2fa_code_6digit') }}" autocomplete="off">
                                    @error('one_time_password')
                                        <span class="text-danger d-block">* {{ $message }}</span>
                                    @enderror
                                </div>
                            @endif
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group important">
                                <h4>{{ __('important_note') }}:</h4>
                                <ul>
                                    @php
                                        $usdToVND = (int) config('config_app.usd_to_vnd');
                                        $minimumAmount = (int) config('config_app.minimum_withdraw');
                                        $discount = $partner->discount_withdraw['USDT'] ?? 0;
                                        $maxAmountVND = (int) $partner->balance - ($minimumAmount * $discount) / 100;
                                    @endphp
                                    <li>{{ __('usdt_supported_networks') }}: <b>TRC20</b>, <b>ERC20</b>, <b>BEP20</b>.</li>
                                    <li><b>{{ __('warning') }}:</b> {{ __('usdt_warning_wrong_network') }}</li>
                                    <li>{{ __('usdt_input_in_vnd') }}</li>
                                    @if ($usdToVND > 0)
                                        <li>{{ __('exchange_rate_reference') }}: 1 USD ≈ {{ number_format($usdToVND) }} VND.</li>
                                    @endif
                                    <li>{{ __('balance_must_exceed_amount_fee') }}</li>
                                    <li>{{ __('please_fill_complete_accurate') }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text-center">
                                <button id="btn-submit-usdt" class="btn btn-primary" type="submit">{{ __('submit_request') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script>
        var walletHints = {
            'TRC20': @json(__('wallet_hint_trc20')),
            'ERC20': @json(__('wallet_hint_erc20')),
            'BEP20': @json(__('wallet_hint_bep20'))
        };

        function updateWalletHint() {
            var chain = $('#chain-type').val();
            $('#wallet-hint').text(walletHints[chain] || '');
        }

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(number);
        }

        $(document).ready(function () {
            updateWalletHint();
            $('#chain-type').on('change', updateWalletHint);

            $('#amount-vnd').on('keyup change', function () {
                var amountVnd = parseFloat($(this).val());
                if (!isNaN(amountVnd)) {
                    $('#amount-vnd-formatted').text('(' + numberFormat(amountVnd) + ' VND)');
                } else {
                    $('#amount-vnd-formatted').text('');
                }
            }).trigger('change');

            var submitted = false;
            $('#withdraw-usdt-form').on('submit', function (e) {
                if (submitted) {
                    e.preventDefault();
                    return false;
                }
                e.preventDefault();
                Swal.fire({
                    title: @json(__('confirm_create_withdraw_title')),
                    html: @json(__('confirm_create_withdraw_body')),
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: @json(__('Agree')),
                    cancelButtonText: @json(__('Cancel')),
                    allowOutsideClick: false,
                }).then(function (result) {
                    if (result.isConfirmed) {
                        submitted = true;
                        $('#btn-submit-usdt').prop('disabled', true);
                        $('#loading-overlay').removeClass('d-none');
                        document.getElementById('withdraw-usdt-form').submit();
                    }
                });
                return false;
            });
        });
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <style>
        #loading-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            flex-direction: column;
        }

        #loading-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }
    </style>
@endsection