@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" 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" 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="stepForm" method="post">
            <!-- Step 1: Details -->
            <div class="step-content" id="step1">
              <h2 class="fw-400 text-center mt-3">{{__('Para Talep Et')}}</h2>
              <p class="lead text-center mb-4">{{__( config('app.name') . ' Kullanıcılarından Para İste')}}</p>
              <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-4 pb-sm-5 px-sm-5 mb-4">
                    <h3 class="text-5 fw-400 mb-3 mb-sm-4">{{__('Talep Detayları')}}</h3>
                    <hr class="mx-n3 mx-sm-n5 mb-4">
                    <div class="mb-3">
                      <label for="payerName" class="form-label">{{__('Gönderici İsim Soyisim')}}</label>
                      <input type="text" class="form-control" id="payerName" required placeholder="{{__('İsim Soyisim Giriniz')}}">
                    </div>
                    <div class="mb-3">
                      <label for="emailID" class="form-label">{{__('Gönderici E-Posta')}}</label>
                      <input type="email" class="form-control" id="emailID" required placeholder="{{__('E-posta Adresi Giriniz')}}">
                    </div>
                    <div class="mb-3">
                      <label for="merchantId" class="form-label">{{__('Müşteri Numarası')}}</label>
                      <input type="text" class="form-control" id="personalId" required placeholder="{{__('Müşteri Numarasını Giriniz')}}">
                    </div>
                    <!-- <div class="mb-3">
                      <label for="inputCountry" class="form-label">{{__('Ülke')}}</label>
                      <select class="form-select" id="inputCountry" name="country_id">
                        <option value="">{{__('Ülke Seçiniz')}}</option>
                        <option value="1">{{__('Afganistan')}}</option>
                        <option value="215">{{__('Türkiye')}}</option>
                        <option value="223">{{__('Amerika Birleşik Devletleri')}}</option>

                      </select>
                    </div> -->
                    <div class="mb-3">
                      <label for="amount" class="form-label">{{__('Talep Edilecek Miktar')}}</label>
                      <div class="input-group">
                        <span class="input-group-text">₺</span>
                        <input type="text" class="form-control" id="amount" required>
                      </div>
                    </div>
                    <div class="d-grid mt-4">
                      <button type="button" class="btn btn-primary" onclick="nextStep(1)">{{__('Devam Et')}}</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 2: Confirm -->
            <div class="step-content d-none" id="step2">
              <h2 class="fw-400 text-center mt-3">{{__('Para Talep Et')}}</h2>
              <p class="lead text-center mb-4">{{__('Para talep ettiğiniz kişi:')}} <span class="fw-500" id="confirmEmail"></span></p>
              <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-4 pb-sm-5 px-sm-5 mb-4">
                    <h3 class="text-5 fw-400 mb-3 mb-sm-4">{{__('Ödeme Açıklaması')}}</h3>
                    <hr class="mx-n3 mx-sm-n5 mb-4">
                    <div class="mb-4 mb-sm-5">
                      <label for="description" class="form-label">{{__('Açıklama')}}</label>
                      <textarea class="form-control" rows="4" id="description" required placeholder="{{__('Ödeme Açıklaması')}}"></textarea>
                    </div>
                    <div class="mb-3">
                      <label for="paymentDue" class="form-label">{{__('Son Ödeme Tarihi')}}</label>
                      <div class="position-relative">
                        <input id="paymentDue" type="date" class="form-control" required>
                      </div>
                    </div>
                    <hr class="mx-n3 mx-sm-n5 mb-3 mb-sm-4">
                    <h3 class="text-5 fw-400 mb-3 mb-sm-4">{{__('Detayları Onayla')}}</h3>
                    <hr class="mx-n3 mx-sm-n5 mb-4">
                    <p class="mb-1">{{__('Gönderim Tutarı')}} <span class="text-3 float-end" id="confirmAmount"></span></p>
                    <p class="mb-1">{{__('İşlem Ücreti')}} <span class="text-3 float-end">7.21 ₺</span></p>
                    <hr>
                    <p class="text-4 fw-500">{{__('Toplam')}}<span class="float-end" id="totalAmount"></span></p>
                    <div class="d-grid">
                      <button type="button" class="btn btn-secondary mb-2" onclick="previousStep(2)">{{__('Geri')}}</button>
                      <button type="button" class="btn btn-primary" onclick="nextStep(2)">{{__('Para Talep Et')}}</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 3: Success -->
            <div class="step-content d-none" id="step3">
              <h2 class="fw-400 text-center mt-3 mb-4">{{__('Para Talebi')}}</h2>
              <div class="row">
                <div class="col-md-9 col-lg-7 col-xl-12 mx-auto">
                  <div class="bg-white text-center shadow-sm rounded p-3 pt-sm-4 pb-sm-5 px-sm-5 mb-4">
                    <div class="my-4">
                      <p class="text-success text-20 lh-1"><i class="fas fa-check-circle"></i></p>
                      <p class="text-success text-8 fw-500 lh-1">{{__('Başarılı!')}}</p>
                      <p class="lead">{{__('Para Talebi Gönderildi')}}</p>
                    </div>
                    <p class="text-3 mb-4">{{__('Başarıyla')}} <span class="text-4 fw-500" id="successAmount"></span> {{__('tutarında para talebi')}} <span class="fw-500" id="successEmail"></span> {{__('adresine gönderildi,')}} <a class="btn-link" href="{{ route('transactions') }}">{{__('Aktivite')}}</a> {{__('kısmından talep detaylarını görebilirsiniz.')}}</p>
                    <div class="d-grid"><button type="button" class="btn btn-primary" onclick="resetForm()">{{__('Tekrar Para Talep Et')}}</button></div>
                    <a class="text-3 d-inline-block btn-link mt-4" href="#"><i class="fas fa-print"></i> {{__('Yazdır')}}</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script>
    function nextStep(currentStep) {
      if (currentStep === 1) {
        // Step 1 validation
        const payerName = document.getElementById('payerName');
        const emailID = document.getElementById('emailID');
        const personalId = document.getElementById('personalId');
        const amount = document.getElementById('amount');


        // Reset any existing error styles
        removeErrorStyles([payerName, emailID, amount]);

        // Validate each field
        let isValid = true;

        if (!payerName.value.trim()) {
          showError(payerName, '{{__("İsim alanı zorunludur")}}');
          isValid = false;
        }

        if (!personalId ||!personalId.value.trim()) {
          showError(personalId, '{{__("Müşteri Numarası Zorunludur!")}}');
          isValid = false;
        }

        if (!emailID.value.trim()) {
          showError(emailID, '{{__("E-posta alanı zorunludur")}}');
          isValid = false;
        } else if (!isValidEmail(emailID.value)) {
          showError(emailID, '{{__("Geçerli bir e-posta adresi giriniz")}}');
          isValid = false;
        }

        if (!amount.value.trim()) {
          showError(amount, '{{__("Miktar alanı zorunludur")}}');
          isValid = false;
        } else if (!isValidAmount(amount.value)) {
          showError(amount, '{{__("Geçerli bir miktar giriniz")}}');
          isValid = false;
        }

        if (!isValid) {
          return false;
        }

        // If validation passes, update confirmation screen
        document.getElementById('confirmEmail').textContent = emailID.value;
        document.getElementById('confirmAmount').textContent = amount.value + ' ₺';
        document.getElementById('totalAmount').textContent = (parseFloat(amount.value) + 7.21).toFixed(2) + ' ₺';
      }

      if (currentStep === 2) {
        // Step 2 validation
        const description = document.getElementById('description');
        const paymentDue = document.getElementById('paymentDue');

        removeErrorStyles([description]);

        if (!description.value.trim()) {
          showError(description, '{{__("Açıklama alanı zorunludur")}}');
          return false;
        }

        if (!paymentDue.value.trim()) {
          showError(paymentDue, '{{__("Son Ödeme alanı zorunludur")}}');
          return false;
        }

        // If validation passes, update success screen
        document.getElementById('successEmail').textContent = document.getElementById('emailID').value;
        document.getElementById('successAmount').textContent = document.getElementById('amount').value + ' ₺';
      }

      // Proceed to next step if validation passes
      document.getElementById('step' + currentStep).classList.add('d-none');
      document.getElementById('step' + currentStep + '-indicator').classList.remove('active');
      document.getElementById('step' + currentStep + '-indicator').classList.add('complete');

      document.getElementById('step' + (currentStep + 1)).classList.remove('d-none');
      document.getElementById('step' + (currentStep + 1) + '-indicator').classList.add('active');
    }

    // Yardımcı fonksiyonlar
    function showError(element, message) {
      element.classList.add('is-invalid');

      // Remove existing error message if any
      const existingError = element.parentElement.querySelector('.invalid-feedback');
      if (existingError) {
        existingError.remove();
      }

      // Add new error message
      const errorDiv = document.createElement('div');
      errorDiv.className = 'invalid-feedback';
      errorDiv.textContent = message;
      element.parentElement.appendChild(errorDiv);
    }

    function removeErrorStyles(elements) {
      elements.forEach(element => {
        element.classList.remove('is-invalid');
        const errorDiv = element.parentElement.querySelector('.invalid-feedback');
        if (errorDiv) {
          errorDiv.remove();
        }
      });
    }

    function isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    }

    function isValidAmount(amount) {
      const amountRegex = /^\d+(\.\d{1,2})?$/;
      return amountRegex.test(amount) && parseFloat(amount) > 0;
    }

    // Diğer fonksiyonlar aynı kalacak (previousStep ve resetForm)
    function previousStep(currentStep) {
      // Hide current step
      document.getElementById('step' + currentStep).classList.add('d-none');
      document.getElementById('step' + currentStep + '-indicator').classList.remove('active');

      // Show previous step
      document.getElementById('step' + (currentStep - 1)).classList.remove('d-none');
      document.getElementById('step' + (currentStep - 1) + '-indicator').classList.add('active');
      document.getElementById('step' + (currentStep - 1) + '-indicator').classList.remove('complete');
    }

    function resetForm() {
      // Reset form and go back to first step
      document.getElementById('stepForm').reset();

      // Remove any error styles
      const allInputs = document.querySelectorAll('.form-control');
      removeErrorStyles(Array.from(allInputs));

      // Hide success step
      document.getElementById('step3').classList.add('d-none');
      document.getElementById('step3-indicator').classList.remove('active', 'complete');

      // Reset step 2
      document.getElementById('step2').classList.add('d-none');
      document.getElementById('step2-indicator').classList.remove('active', 'complete');

      // Show step 1
      document.getElementById('step1').classList.remove('d-none');
      document.getElementById('step1-indicator').classList.add('active');
    }
  </script>
@endsection