@extends('layouts.master')
@section('title') @lang('translation.withdrawal') @endsection

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

@section('css')
<style>
  [x-cloak] {
    display: none !important;
  }
</style>
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.withdrawal')</h3>
<div class="card mb-4 shadow-sm py-5" x-data="withdrawalForm({{ $capitalBalance }}, {{ $profitBalance }}, {{ $refBonusBalance }}, {{ $conversionRate }})">
  <div class="card-body">
    <form class="row justify-content-center" id="withdrawForm">
      @csrf
      <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_id" required x-model="paymentMethodId">
              <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>

        <!-- Withdrawal type -->
        <div class="mb-3">
          <label class="h5 fw-semibold">@lang('translation.withdrawal-type') <span class="text-danger">*</span></label>
          <select class="form-select form-select-lg mb-2" name="withdraw_type" required x-model="withdrawType">
            <option value="PROFIT_WITHDRAWAL">Profit</option>
            <option value="REFERRAL_WITHDRAWAL">Referral</option>
            <option value="CAPITAL_WITHDRAWAL">Capital</option>
          </select>
        </div>

        <!-- 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" class="form-control form-control-lg text-center" name="withdraw_amount" x-model.number="amount">
            <!-- Error message -->
            <span class="input-group-text">{{ substr($currency, 0, 3) }}</span>
          </div>
          <div class="text-danger small mt-1" x-show="amountExceeds" x-cloak>
            @lang('translation.amount-exceeds-balance')
          </div>
        </div>

        <!-- Conversion Info -->
        <p class="text-muted mb-3">@lang('translation.conversion-rate'): 1 {{ substr($currency, 0, 3) }} = {{ $conversionRate }} {{ substr($currency, 3, 3) }}</p>

        <!-- Available balance -->
        <p class="text-muted mb-3" x-show="withdrawType === 'CAPITAL_WITHDRAWAL'" x-cloak>
          @lang('translation.balance'): {{ number_format($capitalBalance, 2) }} USD
        </p>
        <p class="text-muted mb-3" x-show="withdrawType === 'PROFIT_WITHDRAWAL'" x-cloak>
          @lang('translation.balance'): {{ number_format($profitBalance, 2) }} USD
        </p>
        <p class="text-muted mb-3" x-show="withdrawType === 'REFERRAL_WITHDRAWAL'" x-cloak>
          @lang('translation.balance'): {{ number_format($refBonusBalance, 2) }} USD
        </p>

        <!-- USD Output -->
        <div class="border rounded p-3 mb-3 bg-light">
          <p class="text-muted mb-1 small">@lang('translation.to-be-withdrawn')</p>
          <p class="mb-0 fw-semibold fs-5"><span x-text="equivalentValue"></span> {{ substr($currency, 3, 3) }}</p>
        </div>

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

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

@endsection


@section('script')
<script>
  function withdrawalForm(capital, profit, referral, conversionRate) {
    return {
      withdrawType: 'PROFIT_WITHDRAWAL',
      paymentMethods: @json($paymentMethods),
      paymentMethodId: '',
      amount: null,
      equivalentValue: '0.00',
      isValid: false,
      isSubmitting: false,
      balances: {
        CAPITAL_WITHDRAWAL: capital,
        PROFIT_WITHDRAWAL: profit,
        REFERRAL_WITHDRAWAL: referral,
      },

      init() {
        // this.$watch('amount', () => this.validate());
        this.$watch('amount', value => {
          this.equivalentValue = (value * conversionRate).toFixed(2);
          this.validate();
        });
        this.$watch('paymentMethodId', () => this.validate());
        this.$watch('withdrawType', () => this.validate());
      },

      validate() {
        const amt = parseFloat(this.amount);
        const balance = this.balances[this.withdrawType];
        this.amountExceeds = !isNaN(amt) && amt > balance;
        this.isValid = this.paymentMethodId !== '' &&
          !isNaN(amt) &&
          amt > 0 &&
          amt <= balance;
      },


      async submit() {
        if (!this.isValid) {
          Swal.fire({
            icon: 'error',
            title: '@lang("translation.invalid-request")',
            text: '@lang("translation.invalid-withdrawal-amount")',
            allowOutsideClick: false,
            allowEscapeKey: false
          });
          return;
        }

        let title = '',
          note = '';
        switch (this.withdrawType) {
          case 'CAPITAL_WITHDRAWAL':
            title = '@lang("translation.request-capital-withdrawal")';
            note = `<p class="alert alert-warning fs-6 mt-3">@lang("translation.capital-withdrawal-caution")</p>`;
            break;
          case 'PROFIT_WITHDRAWAL':
            title = '@lang("translation.request-profit-withdrawal")';
            note = `<p class="mt-3 small">@lang("translation.profit-withdrawal-note")</p>`;
            break;
          case 'REFERRAL_WITHDRAWAL':
            title = '@lang("translation.request-bonus-withdrawal")';
            note = `<p class="mt-3 small">@lang("translation.bonus-withdrawal-note")</p>`;
            break;
        }

        const formattedAmount = new Intl.NumberFormat(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 5
          })
          .format(parseFloat(this.amount));
        const amountText = `${formattedAmount} {{ substr($currency, 0, 3) }}`;
        const confirm = await Swal.fire({
          icon: 'warning',
          title,
          html: `<h4 class="text-success fw-bold mt-3">${amountText}</h4>${note}`,
          showCancelButton: true,
          confirmButtonText: '@lang("translation.send-request")',
          cancelButtonText: '@lang("translation.cancel")',
          confirmButtonColor: "#636b2e",
          allowOutsideClick: false,
          allowEscapeKey: false,
          customClass: {
            confirmButton: 'btn btn-success',
            cancelButton: 'btn btn-outline-success ms-2'
          },
          buttonsStyling: false
        });

        if (!confirm.isConfirmed) {
          return;
        }

        this.isSubmitting = true;

        try {
          const res = await fetch("{{ route('withdraw.store') }}", {
            method: 'POST',
            headers: {
              'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              withdraw_type: this.withdrawType,
              payment_method_id: this.paymentMethodId,
              withdraw_amount: this.amount
            })
          });

          const data = await res.json();
          if (!data.success) {
            throw new Error(data.error || 'Unknown error');
          }

          await Swal.fire({
            icon: 'success',
            title: '@lang("translation.withdrawal-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>
          `,
            showConfirmButton: true,
            confirmButtonText: `@lang('translation.investment-log') <i class="ri-arrow-right-line"></i>`,
            confirmButtonColor: "#636b2e",
            allowOutsideClick: false,
            allowEscapeKey: false
          });

          window.location.href = "{{ route('investment.logs') }}";
        } catch (e) {
          Swal.fire({
            icon: 'error',
            title: '@lang("translation.withdrawal-failed")',
            text: e.message,
            allowOutsideClick: false,
            allowEscapeKey: false
          });
        } finally {
          this.isSubmitting = false;
        }
      }
    }
  }
</script>
@endsection