@extends('user.layouts.app')

@section('content')
<div class="bg-white pxy-62 shadow" id="crypto-send-create">
    <p class="mb-0 f-26 gilroy-Semibold text-uppercase text-center">{{ __('Send :x', ['x' => $walletCurrencyCode]) }}</p>
    <p class="mb-0 text-center f-13 gilroy-medium text-gray mt-4 dark-A0">{{ __('Step: 1 of 3') }}</p>
    <p class="mb-0 text-center f-18 gilroy-medium text-dark dark-5B mt-2">{{ __('Send :x', ['x' => $walletCurrencyCode]) }}</p>
    <div class="text-center">{!! svgIcons('stepper_create') !!}</div>

    <p class="mb-0 text-center f-14 gilroy-medium text-gray dark-p mt-20">{{ __('Enter recipient address and amount.') }}</p>

    @include('user.common.alert')

    <form method="post" action="{{ route('tatumio.user.token_send.confirm') }}" id="crypto-send-form">
        <input name="_token" type="hidden" value="{{ csrf_token() }}" id="token"/>
        <input name="walletCurrencyCode" type="hidden" data-type="{{ $currencyType }}" value="{{ encrypt($walletCurrencyCode) }}" id="network"/>
        <input name="walletId" type="hidden" value="{{ encrypt($walletId) }}"/>
        <input name="network" type="hidden" value="{{ encrypt($network) }}"/>
        <input name="senderAddress" type="hidden" value="{{ $senderAddress }}"/>
        <input name="tokenAddress" type="hidden" value="{{ $cryptoToken->address }}"/>

        <!-- Recipient Address -->
        <div class="mt-20 label-top">
            <label class="gilroy-medium text-gray-100 mb-2 f-15" for="receiverAddress">{{ __('Recipient Address') }}</label>
            <input type="text" class="form-control input-form-control apply-bg l-s2 receiverAddress" name="receiverAddress" id="receiverAddress" placeholder="{{ __('Enter valid recipient :x address', ['x' => $network]) }}" value="{{ session('transInfo')['receiverAddress'] ?? old('receiverAddress') }}" required data-value-missing="{{ __("Please provide a :x address.", ['x' => $walletCurrencyCode]) }}">
            <span class="receiver-address-validation-error custom-error"></span>
        </div>

        <div class="mt-20 label-top">
            <p class="mb-0 text-gray-100 dark-B87 gilroy-regular f-12 mt-2">*{{ __('Crypto transactions might take few moments to complete.') }}</p>
            <p class="mb-0 text-gray-100 dark-B87 gilroy-regular f-12 mt-2">*{{ __('Only send :x token to this address, receiving any other coin will result in permanent loss.', ['x' => $walletCurrencyCode]) }}</p>
        </div>
        <!-- End Recipient Address -->


        <!-- Amount -->
        <div class="mt-20 label-top">
            <label class="gilroy-medium text-gray-100 mb-2 f-15" for="amount">{{ __('Amount') }}</label>
            <input type="text" class="form-control input-form-control apply-bg l-s2 amount" name="amount" id="amount" placeholder="{{ __('Enter amount') }}" onkeypress="return isNumberOrDecimalPointKey(this, event);" oninput="restrictNumberToPrefdecimalOnInput(this)" value="{{ session('transInfo')['amount'] ?? old('amount') }}" required data-value-missing="{{ __('This field is required.') }}">
            <span class="amount-validation-error custom-error"></span>
        </div>

        <div class="mt-20 label-top">
            <p class="mb-0 text-gray-100 dark-B87 gilroy-regular f-12 mt-2">*{{ __('The amount withdrawn/sent must at least be :x', ['x' => $minTatumIoLimit . ' ' .$walletCurrencyCode]) }}</p>
            <p class="mb-0 text-gray-100 dark-B87 gilroy-regular f-12 mt-2">*{{ __('Please keep at least :x for network fees', ['x' => 10 . ' ' . $network]) }}</p>
            <p class="mb-0 text-gray-100 dark-B87 gilroy-regular f-12 mt-2">*{{ __('Network Fee will be deducted from your native :x wallet', ['x' => $network]) }}</p>
        </div>
        <!-- End Amount -->

        <!-- Submit -->
        <div class="d-grid">
            <button type="submit" class="btn btn-lg btn-primary mt-4" id="crypto-send-submit-btn">
                <div class="spinner spinner-border text-white spinner-border-sm mx-2 d-none">
                    <span class="visually-hidden"></span>
                </div>
                <span class="px-1" id="crypto-send-submit-btn-txt">{{ __('Proceed') }}</span>
                <span id="rightAngleSvgIcon">{!! svgIcons('right_angle') !!}</span>
            </button>
        </div>
    </form>
</div>
@endsection

@push('js')
    <script src="{{ asset('public/dist/plugins/debounce/jquery.ba-throttle-debounce.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('public/dist/libraries/sweetalert/sweetalert-unpkg.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('public/dist/plugins/html5-validation/validation.min.js') }}"  type="text/javascript" ></script>

    @include('common.restrict_number_to_pref_decimal')
    @include('common.restrict_character_decimal_point')

    <script type="text/javascript">
        'use strict';
        var walletCurrencyCode = '{{ $walletCurrencyCode }}';
        var network = '{{ $network }}';
        var userId = '{{ auth()->id() }}';
        var walletId = '{{ encrypt($walletId) }}';
        var senderAddress = '{{ $senderAddress }}';
        var tokenAddress = '{{ $cryptoToken->address }}';
        var tokenDecimals = '{{ $cryptoToken->decimals }}';
        var validateAddressUrl = '{{ route("tatumio.user.token_send.validate_address") }}';
        var validateBalanceUrl = '{{ route("tatumio.user.token_send.validate_balance") }}';
        var cryptoSendConfirmUrl = '{{ route("tatumio.user.token_send.confirm") }}';
        var pleaseWait = '{{ __("Please Wait") }}';
        var loading = '{{ __("Loading...") }}';
        var minCryptoAmount = '{{ __("The minimum amount must be :x.") }}';
        var sendBtn = '{{ __("Send") }}';
        var sending = '{{ __("Sending...") }}';
        var submitBtnText = '{{ __("Processing...") }}';
    </script>

    <script src="{{ asset('Modules/TatumIo/Resources/assets/user/js/token_send_receive.min.js') }}" type="text/javascript"></script>
@endpush