@extends('layouts.default')
@section('content')
  <div class="container">
    <div class="row">

      <x-sidebar />

      <!-- Middle Panel
    ============================================= -->
      <div class="col-lg-9">

        <!-- Password
        ============================================= -->
        <div class="bg-white shadow-sm rounded p-4 mb-4">
          <h3 class="text-5 fw-400 d-flex align-items-center mb-4">{{ __('Şifre') }}</h3>
          <hr class="mx-n4 mb-4">
          <p class="text-3">{{ __('Şifrenizi oluşturun veya güncelleyin.') }} </p>
          <form id="changePassword" action="{{route('changePassword')}}" method="post">
            <div class="mb-3">
              <label for="current_password" class="form-label">{{ __('Mevcut Şifreyi Doğrula') }}</label>
              <input type="text" name="current_password" class="form-control" data-bv-field="current_password" id="current_password" required placeholder="{{ __('Mevcut Şifreyi Girin') }}">
            </div>
            <div class="mb-3">
              <label for="new_password" class="form-label">{{ __('Yeni Şifre') }}</label>
              <input type="text" name="new_password" class="form-control" data-bv-field="new_password" id="new_password" required placeholder="{{ __('Yeni Şifreyi Girin') }}">
            </div>
            <div class="mb-3">
              <label for="new_password_confirmation" class="form-label">{{ __('Yeni Şifreyi Doğrula') }}</label>
              <input type="text" name="new_password_confirmation" class="form-control" data-bv-field="new_password_confirmation" id="new_password_confirmation" required placeholder="{{ __('Yeni Şifreyi Tekrar Girin') }}">
            </div>
            <div class="d-grid mt-4"><button class="btn btn-primary" type="submit">{{ __('Şifreyi Güncelle') }}</button></div>
          </form>
        </div>


      </div>
      <!-- Middle Panel End -->
    </div>
  </div>
  <!-- OTP Modal -->
  <div style="z-index: 999999" class="modal fade" id="otpModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="otpModalLabel">Doğrulama Kodu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
        </div>
        <div class="modal-body">
          <form id="otpForm">
            <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">
                E-posta adresinize gönderilen 6 haneli kodu giriniz
              </div>
            </div>

            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary btn-lg">Doğrula</button>
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">İptal</button>
            </div>

            <div class="mt-4 text-center">
              <p class="mb-0">Kod gelmedi mi?</p>
              <button type="button" class="btn btn-link" id="resendOtp">Tekrar Gönder</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
  <script>
    $(document).ready(function() {
      let currentForm = null;
      let formData = null;
      const otpModal = new bootstrap.Modal(document.getElementById('otpModal'));

      // Merkezi hata yönetim fonksiyonu
      function handleAjaxError(xhr, currentForm, submitBtn, originalText) {
        if (submitBtn) {
          submitBtn.html(originalText);
          submitBtn.prop('disabled', false);
        }

        if (otpModal) {
          otpModal.hide();
        }

        if (xhr.responseJSON) {
          const response = xhr.responseJSON;

          // Controller'dan gelen errors nesnesini direkt olarak kullan
          if (response.errors) {
            Object.keys(response.errors).forEach(field => {
              const input = currentForm.find(`[name="${field}"]`);
              if (input.length) {
                const errorDiv = $('<div>')
                        .addClass('invalid-feedback d-block')
                        .text(response.errors[field][0]);

                input.addClass('is-invalid')
                        .after(errorDiv);
              }
            });
          }
        }
      }
      $('input').on('input', function() {
        $(this).removeClass('is-invalid')
                .siblings('.invalid-feedback').remove();
      });
      // Form hata yönetimi fonksiyonları
      function clearErrors(form) {
        form.find('.input-field').removeClass('error');
        form.find('.error-message').remove();
      }

      function showErrors(form, errors) {
        clearErrors(form);
        if (typeof errors === 'object') {
          Object.keys(errors).forEach(function(field) {
            const inputField = form.find(`[name="${field}"]`).closest('.input-field');
            if (inputField.length) {
              inputField.addClass('error');
              const errorMessage = Array.isArray(errors[field]) ? errors[field][0] : errors[field];
              inputField.append(`<div class="error-message text-red-500 text-sm mt-1">${errorMessage}</div>`);
            }
          });
        }
      }

      // Input değişikliğinde hata mesajlarını temizle
      $('.input-field input').on('input', function() {
        const inputField = $(this).closest('.input-field');
        inputField.removeClass('error');
        inputField.find('.error-message').remove();
      });

      // Şifre değiştirme formu gönderimi
      $('#changePassword').on('submit', function(e) {
        e.preventDefault();
        currentForm = $(this);
        formData = currentForm.serialize();
        const submitBtn = $(this).find('#login');
        const originalText = submitBtn.html();

        // Eski hataları temizle
        $(this).find('.is-invalid').removeClass('is-invalid');
        $(this).find('.invalid-feedback').remove();

        submitBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Lütfen bekleyiniz..');
        submitBtn.prop('disabled', true);

        $.ajax({
          url: '{{ route("otp.send") }}',
          method: 'POST',
          data: formData,
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            otpModal.show();
          },
          error: function(xhr) {
            handleAjaxError(xhr, currentForm, submitBtn, originalText);
          }
        });
      });

      // OTP formu gönderimi
      $('#otpForm').on('submit', function(e) {
        e.preventDefault();
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();

        submitBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Doğrulanıyor');
        submitBtn.prop('disabled', true);

        const verifyData = formData + '&otp_code=' + $('#otp_code').val();

        $.ajax({
          url: '{{ route("otp.verify") }}',
          method: 'POST',
          data: verifyData,
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            if (response.success) {
              submitBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Tamamlanıyor..');

              // Ana form gönderimi
              $.ajax({
                url: currentForm.attr('action'),
                method: 'POST',
                data: formData,
                headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                  if(response.redirect) {
                    window.location.href = response.redirect;
                  }
                },
                error: function(xhr) {
                  handleAjaxError(xhr, currentForm, submitBtn, originalText);
                }
              });
            } else {
              submitBtn.html(originalText);
              submitBtn.prop('disabled', false);
              $('#otp_code').closest('.input-field').addClass('error')
                      .append(`<div class="error-message text-red-500 text-sm mt-1">${response.message}</div>`);
            }
          },
          error: function(xhr) {
            handleAjaxError(xhr, currentForm, submitBtn, originalText);
          }
        });
      });

      // OTP yeniden gönderme
      $('#resendOtp').on('click', function() {
        const btn = $(this);
        const originalText = btn.html();

        btn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Gönderiliyor');
        btn.prop('disabled', true);

        $.ajax({
          url: '{{ route("otp.resend") }}',
          method: 'POST',
          data: formData,
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            alert('Yeni doğrulama kodu gönderildi');
          },
          error: function(xhr) {
            alert('Kod gönderirken bir hata oluştu');
          },
          complete: function() {
            btn.html(originalText);
            btn.prop('disabled', false);
          }
        });
      });

    });
  </script>
@endpush