@if ($errors->count())
<div class="alert alert-danger">
    <div>ERRORS: </div>
    <ol class="mb-0">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ol>
</div>
@endif

<div class="row mb-3">
    <div class="col-md-6">
        @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="mb-3">
            <label class="form-label">Account Name <i class="text-danger">*</i></label>
            <input required type="text" name="account_name" class="form-control @error('account_name') is-invalid @enderror"
              placeholder="My Account"
              value="{{ old('account_name', $withdrawAccount->account_name) }}">
            @error('account_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <div class="form-label d-flex justify-content-between">
                <div>Account Network <i class="text-danger">*</i></div>
            </div>
            <select required name="account_network" class="form-control @error('account_network') is-invalid @enderror">
              <option value="TRC20" {{ old('account_network', $withdrawAccount->account_network) === 'TRC20' ? 'selected' : '' }}>USDT - TRC20</option>
              <option value="ERC20" {{ old('account_network', $withdrawAccount->account_network) === 'ERC20' ? 'selected' : '' }}>USDT - ERC20</option>
              <option value="SWIFT" {{ old('account_network', $withdrawAccount->account_network) === 'SWIFT' ? 'selected' : '' }}>USD - SWIFT</option>
            </select>
            @error('account_network')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label class="form-label">Account Address <i class="text-danger">*</i></label>
            <input required type="text" name="account_address" class="form-control @error('account_address') is-invalid @enderror"
              placeholder="like: TLDFbfMRjFQQvvodCYAxxxxxxxxxxxxxxx"
              value="{{ old('account_address', $withdrawAccount->account_address) }}">
            @error('account_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="col-md-6">
        <div class="mb-3"> 
            <label class="form-label">Remark</label>
            <textarea name="remark" class="form-control @error('remark') is-invalid @enderror" rows="5" placeholder="Optional">{{ old('remark', $withdrawAccount->remark) }}</textarea>
            @error('remark')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
    </div>
</div>

<hr>

<div class="row mb-3">
    <div class="col-md-6">
      <div class="mb-3">
        <div class="form-label d-flex justify-content-between">
          <div>Email Verification Code <i class="text-danger">*</i></div>
          <div class="text-muted"></div>
        </div>
        <div class="input-group">
          <input required type="number" name="verification_code" class="form-control @error('verification_code') is-invalid @enderror"
                placeholder="Enter the 6-digit code sent to email {{ Auth::user()->email }}">
          <button id="send-code-btn" class="btn btn-outline-secondary" type="button" onclick="sendVerificationCode()">Send Code</button>
          @error('verification_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
</div>

@section('PageScript')
  <script>
    function sendVerificationCode() {
      $('#send-code-btn').prop('disabled', true);
      $.ajax({
        type: 'POST',
        url: '/verification-code/make',
        data: { action: 'withdraw-account', _token: '{{ csrf_token() }}' },
        success: function(response) {
          console.log('[sendVerificationCode] success', response);
          alert(`Get verification code success: ${response.message}`);
        },
        error: function(xhr, status, error) {
          console.error('[sendVerificationCode] error', xhr, status, error);
          alert(`Failed to get verification code: ${xhr.responseJSON.message}`);
        },
        complete: function() {
          $('#send-code-btn').prop('disabled', false);
        },
      });
    }
  </script>

  <script src="{{ asset('assets/swyftx-api-crypto-address-validator/wallet-address-validator.min.js') }}"></script>
  <script>
    $('input[name="account_address"], select[name="account_network"]').change(function() {
      validateAccountAddress();
    });

    $('form').submit(function(event) {
      event.preventDefault();

      if (validateAccountAddress()) {
        this.submit();
      }
    });

    function validateAccountAddress() {
      let isValid = false;
      let accountNetwork = $('select[name="account_network"]').val();
      let accountAddress = $('input[name="account_address"]').val();

      console.log('[validateAccountAddress] accountNetwork', accountNetwork);
      console.log('[validateAccountAddress] accountAddress', accountAddress);

      if (accountNetwork === 'TRC20') isValid = WAValidator.validate(accountAddress, 'Tron');
      if (accountNetwork === 'ERC20') isValid = WAValidator.validate(accountAddress, 'Ethereum');
      if (accountNetwork === 'SWIFT') isValid = true;

      if (! isValid) alert('Account Address INVALID');
      return isValid;
    }
  </script>
@endsection