@extends('layouts.default')
@section('content')
  <div class="container">
    <div class="row">
      <x-sidebar />
      <div class="col-lg-9">
        <div class="container">
          <!-- Steps Progress bar -->
          <div class="row mt-4 mb-5">
            <div class="col-lg-11 mx-auto">
              <div class="row widget-steps">
                <div class="col-4 step active" id="step1-indicator">
                  <div class="step-name">{{__('Detaylar')}}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a>
                </div>
                <div class="col-4 step disabled" id="step2-indicator">
                  <div class="step-name">{{__('Onayla')}}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a>
                </div>
                <div class="col-4 step disabled" id="step3-indicator">
                  <div class="step-name">{{__('Tamamla')}}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a>
                </div>
              </div>
            </div>
          </div>

          <form id="withdrawForm" method="post">
            <!-- Step 1: Detaylar -->
            <div class="form-step" id="step1">
              <h2 class="fw-400 text-center mt-3 mb-4">{{__('Para Çek')}}</h2>
              <div class="row">
                <div class="col-md-9 col-lg-7 col-xl-12 mx-auto">
                  <div class="bg-white shadow-sm rounded p-3 pt-sm-5 pb-sm-5 px-sm-5 mb-4">
                    <div class="text-center bg-primary p-4 rounded mb-4">
                      <h3 id="available-balance" class="text-10 text-white fw-400">{{$wallet->available_balance }}<span>{{$wallet->Currency->symbol}}</span></h3>
                      <p class="text-white">{{__('Kullanılabilir Bakiye')}}</p>
                      <button id="set-full-amount" type="button" class="btn btn-outline-light btn-sm shadow-none text-uppercase rounded-pill text-1">{{__('Tüm Tutarı Çek')}}</button>
                    </div>

                    <!-- Banka Hesabı / IBAN Seçimi -->
                    <div class="mb-3">
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="withdrawType" id="bankAccount" value="bank" checked>
                        <label class="form-check-label" for="bankAccount">{{__('Kayıtlı Hesap')}}</label>
                      </div>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="withdrawType" id="newIban" value="iban">
                        <label class="form-check-label" for="newIban">{{__('Yeni IBAN')}}</label>
                      </div>
                    </div>

                    <!-- Kayıtlı Banka Hesapları -->
                    <div class="mb-3" id="bankAccountSelect">
                      <label for="withdrawto" class="form-label">{{__('Para Çekilecek Hesap')}}</label>
                      <select id="withdrawto" class="form-select" required>
                        <option value="">{{__('Banka Hesabı Seçin')}}</option>
                      </select>
                    </div>

                    <!-- Yeni IBAN Girişi -->
                    <div class="mb-3 d-none" id="ibanInput">
                      <label for="iban" class="form-label">{{__('IBAN')}}</label>
                      <input type="text" class="form-control" id="iban" placeholder="TR00 0000 0000 0000 0000 0000 00">
                    </div>

                    <div class="mb-3">
                      <label for="amount" class="form-label">{{__('Tutar')}}</label>
                      <div class="input-group">
                        <span class="input-group-text">₺</span>
                        <input type="text" class="form-control" id="amount" required>
                      </div>
                    </div>
                    <p class="text-muted mt-4">{{__('İşlem Ücreti')}} <span class="float-end d-flex align-items-center" id="fee">0,00 ₺</span></p>
                    <hr>
                    <p class="text-3 fw-500">{{__('Çekilecek Tutar')}} <span class="float-end" id="totalAmount">0,00 ₺</span></p>
                    <div class="d-grid">
                      <button type="button" class="btn btn-primary next-step">{{__('Devam Et')}}</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 2: Onaylama -->
            <div class="form-step d-none" id="step2">
              <div class="text-center mb-4">
                <h2 class="fw-400">{{__('İşlem Doğrulama')}}</h2>
                <p class="lead">{{__('Güvenliğiniz için doğrulama kodu gönderilmiştir')}}</p>
              </div>
              <p class="lead text-center mb-4"></p>
              <div class="col-lg-12">
                <div class="bg-white shadow-sm rounded p-4">
                  @if ($errors->any())
                    <div class="alert alert-danger">
                      @foreach ($errors->all() as $error)
                        {{ $error }}
                      @endforeach
                    </div>
                  @endif

                  <form id="otpVerifyForm" action="{{ route('otp.verify') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                      <label for="otp_code"
                             class="form-label">{{__('Doğrulama Kodu')}}</label>
                      <input type="text"
                             class="form-control form-control-lg text-center"
                             id="otp_code"
                             name="otp_code"
                             required
                             maxlength="6"
                             autocomplete="off"
                             placeholder="000000">
                      <div class="form-text text-center">
                        {{__('Telefonunuza gönderilen 6 haneli kodu giriniz')}}
                      </div>
                    </div>

                    <div class="d-grid gap-2">
                      <button id="verifyOtpButton" type="submit" class="btn btn-primary btn-lg">
                        {{__('Doğrula')}}
                      </button>
                      <button type="button" class="btn btn-outline-secondary"
                              onclick="window.history.back();">
                        {{__('İptal')}}
                      </button>
                    </div>
                  </form>
                    <div class="mt-4 text-center">
                      <p class="mb-0">{{__('Kod gelmedi mi?')}}</p>
                      <form action="{{ route('otp.resend') }}" method="POST" class="d-inline"
                            id="otp-resend">
                        @csrf
                        <button type="button" class="btn btn-link"
                                id="resendButton">{{__('Tekrar Gönder')}}</button>
                      </form>
                    </div>
                </div>

                <div class="text-center mt-4">
                  <p class="text-muted small">
                    {{__('Doğrulama kodu 5 dakika boyunca geçerlidir')}}
                  </p>
                </div>
              </div>
            </div>
            <!-- Step 3: Success -->
            <div class="form-step d-none" id="step3">
              <div class="bg-white shadow-sm rounded p-4">
                <div class="text-center">
                  <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                  <h4>{{__('Transfer Başarılı')}}</h4>
                  <p class="mb-0">{{__('Çekilen Tutar')}}: <span id="final-amount"></span></p>
                  <p>{{__('İşlem Numarası')}}: <span id="transaction-id"></span></p>
                </div>
                <div class="d-grid gap-2 mt-4">
                  <a href="{{ route('transactions') }}" class="btn btn-primary">
                    {{__('İşlemlerim')}}
                  </a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      let currentStep = 1;
      const form = document.getElementById('withdrawForm');

      loadBankAccounts();

      // IBAN/Banka hesabı seçimi
      document.querySelectorAll('input[name="withdrawType"]').forEach(radio => {
        radio.addEventListener('change', function() {
          const bankAccountSelect = document.getElementById('bankAccountSelect');
          const ibanInput = document.getElementById('ibanInput');

          if (this.value === 'bank') {
            bankAccountSelect.classList.remove('d-none');
            ibanInput.classList.add('d-none');
            document.getElementById('withdrawto').required = true;
            document.getElementById('iban').required = false;
          } else {
            bankAccountSelect.classList.add('d-none');
            ibanInput.classList.remove('d-none');
            document.getElementById('withdrawto').required = false;
            document.getElementById('iban').required = true;
          }
        });
      });

      // IBAN formatı
      document.getElementById('iban').addEventListener('input', function(e) {
        let value = e.target.value.replace(/[^\dA-Z]/g, '');
        if (value.length > 26) value = value.substr(0, 26);

        // TR ile başlamıyorsa ekle
        if (!value.startsWith('TR')) value = 'TR' + value;

        // 4'er grup halinde boşluk ekle
        value = value.replace(/(.{4})/g, '$1 ').trim();

        e.target.value = value;
      });


      async function loadBankAccounts() {
        try {
          const response = await fetch('{{ route("bank.accounts") }}');
          const data = await response.json();

          if (data.success) {
            const select = document.getElementById('withdrawto');
            console.log(data.data);
            data.data.forEach(account => {
              const option = new Option(account.account_name + ' - ' + account.iban, account.id);
              option.dataset.iban = account.iban;
              select.add(option);
            });
          }
        } catch (error) {
          console.error('Banka hesapları yüklenemedi:', error);
        }
      }

      function validateAmount(amount) {
        return parseFloat(amount.replace(/[.,]/g, '')) > 0;
      }

      // Hata gösterme/gizleme fonksiyonları
      function showError(element, message) {
        removeError(element);
        element.classList.add('is-invalid');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'invalid-feedback';
        errorDiv.textContent = message;
        element.parentElement.appendChild(errorDiv);
      }

      function removeError(element) {
        element.classList.remove('is-invalid');
        const errorMessage = element.parentElement.querySelector('.invalid-feedback');
        if (errorMessage) {
          errorMessage.remove();
        }
      }

      // Adım kontrolü
      function showStep(step) {
        // Önce elementlerin varlığını kontrol et
        const targetStep = document.getElementById(`step${step}`);
        if (!targetStep) {
          console.error(`Step ${step} element not found`);
          return;
        }

        // Form steps visibility
        document.querySelectorAll('.form-step').forEach(el => {
          if (el) {
            el.classList.add('d-none');
          }
        });
        targetStep.classList.remove('d-none');

        // Indicators update
        const indicators = document.querySelectorAll('.widget-steps .step');
        if (indicators && indicators.length > 0) {
          indicators.forEach((el, index) => {
            if (el) {
              el.classList.remove('active', 'complete', 'disabled');
              if (index + 1 < step) {
                el.classList.add('complete');
              } else if (index + 1 === step) {
                el.classList.add('active');
              } else {
                el.classList.add('disabled');
              }
            }
          });
        }

        // Update current step
        currentStep = step;

        if (step === 2) {
          // OTP gönderimi için AJAX çağrısı
          fetch('{{ route("otp.send") }}', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
              email: '{{ auth()->user()->email }}'
            })
          })
                  .then(response => response.json())
                  .then(data => {
                    if (!data.success) {
                      showNotification(data.message, 'error');
                      return;
                    }
                  });
        }
      }


      // Para formatı
      function formatMoney(input) {
        // Sadece sayıları al ve baştaki 0'ları kaldır
        let value = input.value.replace(/[^\d]/g, '').replace(/^0+/, '');

        // Eğer değer boşsa veya sadece 0 ise
        if (!value || value === '0') {
          input.value = '0,00';
          return '0,00';
        }

        // Son iki rakamı kuruş olarak ayır
        const length = value.length;
        const decimalPart = value.substring(length - 2);
        const wholePart = value.substring(0, length - 2) || "0";

        // Binlik ayırıcı ekle
        const formattedWholePart = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

        // Formatlanmış değeri oluştur
        const formattedValue = `${formattedWholePart},${decimalPart}`;
        input.value = formattedValue;
        return formattedValue;
      }

      document.querySelectorAll('#totalAmount').forEach(input => {
        input.addEventListener('input', function () {
          if (this.id === 'youSend') {
            // Gönderilen para değiştiğinde
            const formattedValue = formatMoney(this);
            updateTotalAmount();
          }
        });
      });

      const fullAmountButton = document.getElementById('set-full-amount');
      if (fullAmountButton) {
        fullAmountButton.addEventListener('click', function() {
          // Bakiyeyi al ve temizle
          const balanceElement = document.getElementById('available-balance');
          let balance = balanceElement.textContent.replace('₺', '').trim();
          balance = balance.replace(/\./g, '').replace(',', '.');

          // Amount input elementini al
          const amountInput = document.getElementById('amount');

          // Dummy input oluştur ve formatMoney fonksiyonunu kullan
          const dummyInput = { value: balance.replace('.', '') };
          formatMoney(dummyInput);

          // Formatlanmış değeri amount input'una aktar
          amountInput.value = dummyInput.value;

          // Toplam tutarı güncelle
          updateTotalAmount();
        });
      }

      // İşlem ücreti ve toplam hesaplama
      function updateTotalAmount() {
        const amountInput = document.getElementById('amount');
        // Önce girilen değeri düzgün bir sayıya çevirelim
        const rawAmount = parseFloat(amountInput.value.replace(/\./g, '').replace(',', '.'));
        // Fee hesaplaması
        const fee = rawAmount * 0.01;
        // Toplam hesaplaması
        const total = rawAmount + fee;

        // Fee için dummy input oluştur
        const feeDummy = {value: fee.toFixed(2).replace('.', '')};
        const formattedFee = formatMoney(feeDummy);

        // Total için dummy input oluştur
        const totalDummy = {value: total.toFixed(2).replace('.', '')};
        const formattedTotal = formatMoney(totalDummy);

        document.querySelector('p span.float-end').textContent = `${formattedFee} `;
        document.querySelector('#totalAmount').textContent = `${formattedTotal} `;
      }


      document.querySelectorAll('.next-step').forEach(button => {
        button.addEventListener('click', function () {
          if (currentStep === 1) {
            const amountInput = document.getElementById('amount');

            removeError(amountInput);

            let isValid = true;

            if (!amountInput.value.trim()) {
              showError(amountInput, '{{__("Tutar zorunludur")}}');
              isValid = false;
            } else if (!validateAmount(amountInput.value)) {
              showError(amountInput, '{{__("Geçerli bir tutar giriniz")}}');
              isValid = false;
            }

            if (isValid) {
              showStep(2);
            }
          }
        });


        // Tutar inputları
        document.querySelectorAll('#amount').forEach(input => {
          input.addEventListener('input', function () {
            formatMoney(this);
            updateTotalAmount();
          });
        });
      });

      document.getElementById('verifyOtpButton').addEventListener('click', function() {
        const submitBtn = this;
        const originalText = submitBtn.innerHTML;

        submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Doğrulanıyor`;
        submitBtn.disabled = true;

        const otpCode = document.getElementById('otp_code').value;

        fetch('{{ route("otp.verify") }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
          body: JSON.stringify({
            otp_code: otpCode
          })
        }).then(response => response.json())
          .then(data => {
            if (data.success) {
              submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>İşlem Tamamlanıyor`;
              submitTransferForm();
            } else {
              submitBtn.innerHTML = originalText;
              submitBtn.disabled = false;
              showError(document.getElementById('otp_code'), data.message);
            }
          })
          .catch(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
          });
      });

      function submitTransferForm() {
        const form = document.getElementById('withdrawForm');
        const formData = new FormData();

        // Amount değerini düzenle
        const amountInput = document.getElementById('amount');
        const amount = amountInput.value.replace(/\./g, '').replace(',', '.');
        formData.append('amount', amount);

        // Seçilen withdraw type'ı al
        const withdrawType = document.querySelector('input[name="withdrawType"]:checked');

        if (withdrawType.value === 'bank') {
          const selectElement = document.getElementById('withdrawto');
          const selectedOption = selectElement.options[selectElement.selectedIndex];

          formData.append('iban', selectedOption.dataset.iban); // data-iban değerini al
        } else {
          // Yeni IBAN girişi yapılmışsa
          const ibanInput = document.getElementById('iban');
          formData.append('iban', ibanInput.value.replace(/\s/g, ''));
        }

        // CSRF token ekle
        formData.append('_token', '{{ csrf_token() }}');

        fetch('{{ route("withdraw.store") }}', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
          body: formData
        })
                .then(response => response.json())
                .then(data => {
                  if (data.success) {
                    showStep(3);
                    updateSuccessStep(data.data);
                  } else {
                    showNotification(data.message, 'error');
                    setTimeout(() => {
                      window.location.href = '{{ route("withdraw-money") }}';
                    }, 3000);
                  }
                })
                .catch(error => {
                  showNotification('İşlem sırasında bir hata oluştu', 'error');
                  setTimeout(() => {
                    window.location.href = '{{ route("withdraw-money") }}';
                  }, 3000);
                });
      }

      function updateSuccessStep(data) {

        document.getElementById('final-amount').textContent = `${data.amount}`+' ₺';
        document.getElementById('transaction-id').textContent = `${data.tracking_id}`;
      }

      const resendButton = document.querySelector('#resendButton');
      if (resendButton) {
        resendButton.addEventListener('click', function (e) {
          e.preventDefault();

          // Butonu devre dışı bırak ve loading göster
          this.disabled = true;
          const originalText = this.innerHTML;
          this.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Gönderiliyor...`;

          fetch('{{ route("otp.resend") }}', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
          })
                  .then(response => response.json())
                  .then(data => {
                    // Başarılı mesajı göster
                    if (data.success) {
                      showNotification(data.message, 'success');
                    } else {
                      showNotification(data.message, 'error');
                    }

                    // 60 saniyelik sayaç başlat
                    let countdown = 60;
                    this.innerHTML = `${countdown} saniye bekleyin`;

                    const timer = setInterval(() => {
                      countdown--;
                      if (countdown <= 0) {
                        clearInterval(timer);
                        this.disabled = false;
                        this.innerHTML = originalText;
                      } else {
                        this.innerHTML = `${countdown} saniye bekleyin`;
                      }
                    }, 1000);
                  })
                  .catch(error => {
                    showNotification(__('Kod gönderme işlemi başarısız oldu'), 'error');
                    this.disabled = false;
                    this.innerHTML = originalText;
                  });
        });
      }

      function showNotification(message, type = 'success') {
        const notificationEl = document.querySelector('.toast');
        const toast = new bootstrap.Toast(notificationEl);
        const toastBody = notificationEl.querySelector('.toast-body');

        // Eski sınıfları kaldır
        notificationEl.classList.remove('bg-success', 'bg-danger', 'text-white');

        // Tip'e göre stil uygula
        if (type === 'success') {
          notificationEl.classList.add('bg-success', 'text-white');
        } else if (type === 'error') {
          notificationEl.classList.add('bg-danger', 'text-white');
        }

        toastBody.textContent = message;
        toast.show();
      }

    });


  </script>
@endsection