@extends('layouts.master')
@section('title') @lang('translation.deposit-payment') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.deposit-payment')
@endslot
@endcomponent
@endsection

@php
$recipientBank = $bankAccounts[0] ?? null;
@endphp

@section('content')

<h3 class="mb-4">@lang('translation.deposit-payment')</h3>

<div 
  x-data="depositForm('{{$userCurrencyPair}}', '{{$cryptoCurrencyPair}}', @json($currencyConversionRate), @json($cryptoCurrencyConversionRate))" 
  x-init="init()"
>
<template x-if="step === 1">
  <div class="card mb-4 shadow-sm py-5">
    <div class="card-body">
      <form class="row justify-content-center" @submit.prevent="goToNextStep">
        <div class="col-lg-6">

          <!-- Payment Method -->
          <div class="mb-3">
            <label class="h5 fw-semibold">@lang('translation.payment-method') <span class="text-danger">*</span></label>
            <div class="d-flex flex-column align-items-end">
              <select class="form-select form-select-lg mb-2" name="payment_method" x-model="paymentMethodId" required>
                <option disabled value="">@lang('translation.select-payment-method')</option>
                @foreach($paymentMethods as $pMethod)
                  <option value="{{ $pMethod->id }}">
                    @if($pMethod->type === 'bank')
                      {{ $pMethod->account_title ?? __('translation.bank-account') }} – {{ $pMethod->account_number_masked }}
                    @elseif($pMethod->type === 'card')
                      {{ $pMethod->card_holder ?? __('translation.card-holder') }} – {{ $pMethod->card_number_masked }}
                    @elseif($pMethod->type === 'crypto')
                      {{ "{$pMethod->wallet_type} ({$pMethod->crypto_network}) – " }}
                      {{ $pMethod->wallet_address_masked ?: ($pMethod->okx_uid ?: $pMethod->binance_pay_id) }}
                    @else
                      {{ $pMethod->label ?? __('translation.unknown') }}
                    @endif
                  </option>
                @endforeach
              </select>
              <a href="/payment-methods" class="text-decoration-none">
                @lang('translation.setup-payment-method')
              </a>
            </div>
          </div>

          <!-- Bank transaction alert -->
          <p class="alert alert-info small py-2 text-black" role="alert">
            @lang('translation.longer-transactions')
          </p>

          <!-- Amount -->
          <div class="mb-2">
            <label class="h5 fw-semibold">@lang('translation.amount') <span class="text-danger">*</span></label>
            <div class="input-group">
              <input type="number" min="10" class="form-control form-control-lg text-center" name="amount" x-model.number="amount" :disabled="paymentMethodId===''" required>
              <span class="input-group-text" x-text="amountCurrency"></span>
            </div>
          </div>

          <!-- Conversion Info -->
          <p class="text-muted mb-3">@lang('translation.conversion-rate'): <span x-text="conversionRateStr">...</span></p>

          <!-- Equivalent Amount -->
          <div class="border rounded p-3 mb-3 bg-light">
            <p class="text-muted mb-1 small">@lang('translation.to-be-deposited')</p>
            <p class="mb-0 fw-semibold fs-5"><span x-text="equivalentAmount"></span>&nbsp;<span x-text="equivalentAmountCurrency"></span></p>
          </div>

          <!-- Terms -->
          <p class="text-muted small mb-4">
            @lang('translation.by-processing')
            <a href="#">@lang('translation.term-conditions')</a> and
            <a href="#">@lang('translation.refund-policy')</a>.
          </p>

          <!-- Submit -->
          <div class="text-center">
            <button class="btn btn-success d-inline-block px-5" type="submit" :disabled="!isValid">@lang('translation.continue') <i class="ri-arrow-right-line"></i></button>
          </div>

        </div>
      </form>
    </div>
  </div>
</template>

<template x-if="step === 2">
  <div class="card mb-4 shadow-sm p-5" >
    <div class="card-body">
      <form class="row justify-content-center" @submit.prevent="submitDeposit">
        <template x-if="selectedPaymentMethod.type === 'bank'">
          <div class="col-md-5">
            <p class="mb-3">@lang('translation.send-exact-amount')</p>
            
            <div class="input-group mb-4">
              <input type="text" class="form-control form-control-lg text-center" :value="formattedAmount" readonly>
              <span class="input-group-text" x-text="amountCurrency"></span>
            </div>

            <div class="mb-3">
              <label for="bankName" class="form-label fw-bold mb-0">@lang('translation.bank-name')</label>
              <div class="input-group border-bottom">
                <input type="text" name="bankName" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $recipientBank['bank_name'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=bankName]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <div class="mb-3">
              <label for="accountTitle" class="form-label fw-bold mb-0">@lang('translation.account-title')</label>
              <div class="input-group border-bottom">
                <input type="text" name="accountTitle" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $recipientBank['account_title'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=accountTitle]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <div class="mb-3">
              <label for="ibanNumber" class="form-label fw-bold mb-0">@lang('translation.iban')</label>
              <div class="input-group border-bottom">
                <input type="text" name="ibanNumber" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $recipientBank['iban'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=ibanNumber]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <p class="mb-3">@lang('translation.add-ref-note')</p>

            <div class="mb-3">
              <label for="refNumber" class="form-label fw-bold mb-0">@lang('translation.ref-no')</label>
              <div class="input-group border-bottom">
                <input type="text" name="refNumber" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $recipientBank['ref_number'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=refNumber]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <p class="mb-3">@lang('translation.select-purpose')</p>
            <p class="mb-3">@lang('translation.upload-proof-instruction')</p>
          </div>
        </template>

        <template x-if="selectedPaymentMethod.type === 'crypto'">
          <div class="col-md-5">
            <p class="mb-3">@lang('translation.send-exact-amount-crypto')</p>
            
            <div class="input-group mb-4">
              <input type="text" class="form-control form-control-lg text-center" :value="formattedAmount" readonly>
              <span class="input-group-text" x-text="amountCurrency"></span>
            </div>

            <div class="mb-3">
              <label for="recipientWalletAddress" class="form-label fw-bold mb-0">@lang('translation.crypto-wallet')</label>
              <div class="input-group border-bottom">
                <input type="text" name="recipientWalletAddress" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $cryptoAccounts['TRC-20']['wallet_address'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=recipientWalletAddress]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <div class="mb-3">
              <label for="recipientOkxUid" class="form-label fw-bold mb-0">@lang('translation.okx-uid')</label>
              <div class="input-group border-bottom">
                <input type="text" name="recipientOkxUid" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $cryptoAccounts['okx']['uid'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=recipientOkxUid]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <div class="mb-3">
              <label for="recipientBinancePayId" class="form-label fw-bold mb-0">@lang('translation.binance-pay-id')</label>
              <div class="input-group border-bottom">
                <input type="text" name="recipientBinancePayId" class="form-control form-control-lg form-control-plaintext border-0" value="{{ $cryptoAccounts['binance_pay']['id'] ?? 'N/A' }}" readonly>
                <span class="input-group-text bg-transparent border-0 cursor-pointer" @click="copyToClipboard('input[name=recipientBinancePayId]')"><i class="ri-file-copy-line fs-4"></i></span>
              </div>
            </div>

            <!-- Alert -->
            <p class="alert alert-warning small py-2 text-black" role="alert">
              @lang('translation.ensure-wallet-address-correct')
            </p>

            <p class="mb-3">@lang('translation.upload-proof-instruction-crypto')</p>
          </div>
        </template>

        <div class="col-md-1 d-none d-md-block">
          <div class="d-flex align-items-center justify-content-center h-100">
            <div class="border-start border-1 border-dashed h-100" style="border-color: darkgray;"></div>
          </div>
        </div>

        <div class="col-md-5 d-flex flex-column justify-content-center">
          <div class="mb-4 border rounded p-4" @click="$refs.fileInput.click()" style="cursor: pointer;">
            <label for="paymentProof" class="form-label fw-bold d-block my-4">@lang('translation.upload-proof') <span class="text-danger">*</span></label>
            <div class="border rounded border-dashed py-5 text-center">
              <i class="ri-upload-2-line fs-1 text-muted"></i>
              <p class="small text-muted mt-2 mb-0">@lang('translation.click-to-upload')</p>
              <input name="paymentProof" type="file" class="form-control d-none" x-ref="fileInput" @change="handleFileSelected" accept=".jpg,.jpeg,.png,.pdf" required>
              <template x-if="fileSelected">
                <p class="mt-2 text-success" x-text="fileName"></p>
              </template>
            </div>
          </div>

          <template x-if="selectedPaymentMethod.type === 'crypto'">
            <div class="d-flex justify-content-center p-3">
              <div class="form-check text-center">
                <input class="form-check-input" type="checkbox" id="bareNetworkFee" x-model:boolean="bareNetworkFee">
                <label class="form-check-label" for="bareNetworkFee">
                  @lang('translation.bare-network-fee')
                </label>
              </div>
            </div>
          </template>

          <div class="text-center">
            <button class="btn btn-success px-5" type="submit" :disabled="isSubmitting || !fileSelected || (selectedPaymentMethod.type === 'crypto' && !bareNetworkFee) || !isValid"><i class="ri-skip-up-line"></i> @lang('translation.deposit')</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

@endsection

@section('script')
<script>
  function depositForm(userCurrencyPair, cryptoCurrencyPair, currencyConversionRate, cryptoCurrencyConversionRate) {
    const [userCurrency, defaultCurrency] = userCurrencyPair.split('/');
    const [defaultCryptoCurrency, defaultCurrencyForCrypto] = cryptoCurrencyPair.split('/');
    return {
      step: 1,
      paymentMethods: @json($paymentMethods),
      selectedPaymentMethod: {},
      paymentMethodId: '',
      amount: '',
      amountCurrency: userCurrency,
      conversionRate: currencyConversionRate,
      conversionRateStr: `1 ${userCurrency} = ${currencyConversionRate} ${defaultCurrency}`,
      equivalentAmount: '0.00',
      equivalentAmountCurrency: defaultCurrency,
      formattedAmount: '0.00',
      bareNetworkFee: false,
      isValid: false,
      fileSelected: false,
      fileName: '',
      isSubmitting: false,

      init() {
        this.$watch('amount', value => {
          if (!value || value < 10) {
            this.equivalentAmount = '0.00';
            this.isValid = false;
            return;
          }
          this.equivalentAmount = (value * this.conversionRate).toFixed(2);
          this.isValid = this.paymentMethodId !== '' && value >= 10;
        });
        this.$watch('paymentMethodId', value => {
          this.selectedPaymentMethod = this.paymentMethods.find(p => p.id == value) || {};
          this.isValid = false;
          const isCrypto = this.selectedPaymentMethod.type === 'crypto';
          this.amount = '';
          this.amountCurrency = isCrypto ? defaultCryptoCurrency : userCurrency;
          this.equivalentAmount = '0.00';
          this.equivalentAmountCurrency = isCrypto ? defaultCurrencyForCrypto : defaultCurrency;
          this.conversionRate = isCrypto ? cryptoCurrencyConversionRate : currencyConversionRate;
          this.conversionRateStr = `1 ${this.amountCurrency} = ${this.conversionRate} ${this.equivalentAmountCurrency}`;
        });
      },

      goToNextStep() {
        if (!this.isValid) { return; }
        this.step = 2;
        this.formattedAmount = new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 5 })
          .format(parseFloat(this.amount));
      },

      handleFileSelected(event) {
        const file = event.target.files[0];
        if (!file) {
          this.fileSelected = false;
          this.fileName = '';
          return;
        }

        const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
        const maxSize = 5 * 1024 * 1024; // 5 MB

        if (!validTypes.includes(file.type)) {
          Swal.fire({
            icon: 'error',
            title: "@lang('translation.invalid-file')",
            text: "@lang('translation.only-images-pdf')"
          });
          event.target.value = '';
          this.fileSelected = false;
          this.fileName = '';
          return;
        }

        if (file.size > maxSize) {
          Swal.fire({
            icon: 'error',
            title: "@lang('translation.file-too-large')",
            text: "@lang('translation.max-file-size-5mb')"
          });
          event.target.value = '';
          this.fileSelected = false;
          this.fileName = '';
          return;
        }

        this.fileSelected = true;
        this.fileName = file.name;
      },

      submitDeposit() {
        if (!this.fileSelected || this.isSubmitting) { return; }
        this.isSubmitting = true;

        const formData = new FormData();
        formData.append('payment_method_id', this.paymentMethodId);
        formData.append('amount', this.amount);
        formData.append('deposit_proof', this.$refs.fileInput.files[0]);

        fetch("{{ route('deposit-payment.store') }}", {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          },
          body: formData,
        })
          .then(async res => {
            this.isSubmitting = false;
            const data = await res.json();

            if (!res.ok || !data.success) {
              throw new Error(data.error || 'Unknown error');
            }
            
            Swal.fire({
              icon: 'success',
              title: '@lang("translation.deposit-request-sent")',
              html: `
                <h4 class="text-success fw-bold mt-3">${data.amount}</h4>
                <p class="text-muted small mb-2">@lang('translation.transaction-id'): ${data.transactionId}</p>
                <p class="text-muted small mb-2">@lang('translation.request-date'): ${data.requestDate}</p>
                <p class="alert alert-info fs-6 mt-4 mx-auto text-black">@lang('translation.deposit-received-info')</p>
              `,
              showConfirmButton: true,
              confirmButtonText: `@lang('translation.investment-log') <i class="ri-arrow-right-line"></i>`,
              confirmButtonColor: "#636b2e",
              allowOutsideClick: false,
              allowEscapeKey: false
            }).then(() => { window.location.href = "{{route('investment.logs')}}"; });
          })
          .catch(err => {
            this.isSubmitting = false;
            Swal.fire({
              icon: 'error',
              title: '@lang("translation.error")',
              text: err.message,
            });
          });
      },

      copyToClipboard(selector) {
        const el = document.querySelector(selector);
        if (!el) { return; }
        el.select();
        el.setSelectionRange(0, 99999);
        document.execCommand('copy');

        Swal.fire({
          toast: true,
          position: 'top-end',
          icon: 'success',
          title: "@lang('translation.copied')",
          showConfirmButton: false,
          timer: 1500,
          timerProgressBar: true
        });
      }
    };
  }
</script>


@endsection