@extends('frontend.layouts.master')

@section('header')
    @include('frontend.layouts.header-layout.three')
@endsection
@section('contents') 
<!-- breadcrumb-area -->
<section id="hero" class="hero section dark-background">
  <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-item active"> <img src="{{ asset('frontend/img/IBAN-1.jpg') }}" alt="">
      <div class="carousel-container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb text-white">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active  text-white" aria-current="page">{{ __('IBAN') }}</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">{{ __('IBAN') }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="open-peronalacc" class="open-peronalacc pb-0">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class=" accounts-heading text-center pe-4 py-md-3 text-bold border-bottom">
          <h5 class="mb-1 text-justify">{{ getSessionLanguage() == 'en'?'The International Bank Account Number (IBAN) is an international standard for identifying bank accounts across national borders in a way that would minimize the risk of propagating transcription errors. IBAN is an expanded version of the Bank Account Number used internationally to uniquely identify the account of a customer at a financial institution.':'رقم الحساب المصرفي الدولي (IBAN) هو معيار دولي لتحديد الحسابات المصرفية عبر الحدود الوطنية بطريقة تقلل من مخاطر أخطاء النسخ أو الإدخال. الآيبان هو نسخة موسعة من رقم الحساب المصرفي تُستخدم دوليًا لتحديد حساب العميل في المؤسسة المالية بشكل فريد.'; }}</h5>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="" class="pb-0">
  <div class="container">
    <div class="row text-center">
      <h2>{{ getSessionLanguage() == 'en'?'Generate IBAN for Bank Saderat Iran UAE':'توليد رقم الآيبان لبنك صادرات إيران – الإمارات'; }}</h2>
    </div>
  </div>
</section>
<section id="contact-form" class="contact-form px-3 pt-10 px-md-0">
  <div class="container container-sm">
    <div class="row">
      <div class="col-md-6">
        <div class="cl-wrapper">
          <h4>{{ getSessionLanguage() == 'en'?'Enter Your Account Number':'أدخل رقم حسابك'; }}</h4>
          <input maxlength="13" id="account_number" class="form-control" placeholder="{{ getSessionLanguage() == 'en'?'Account number':'رقم الحساب'; }}" />
          <button id="generateBtn" class="btn btn-blue px-3 py-2 text-white me-2 mt-10" disabled>{{ getSessionLanguage() == 'en'?'Generate IBAN':'توليد رقم الآيبان'; }}</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="output-sec">
          <div class="rs-title" style="text-align:center;">
          <h2>{{ getSessionLanguage() == 'en'?'Your IBAN is:':'رقم الآيبان الخاص بك هو:'; }}</h2>
            <div id="result"></div>
			
              <script>
  const accountInput = document.getElementById('account_number');
  const btn = document.getElementById('generateBtn');
  const result = document.getElementById('result');

  const validBranches = ['1741', '2533', '2624', '2690', '2776', '2900', '4350', '2898', '3535'];

  accountInput.addEventListener('input', function () {
    const value = accountInput.value.replace(/\D/g, ''); // remove non-digits
    accountInput.value = value;
    result.textContent = '';
    btn.disabled = true;

    if (value.length !== 13) {
      result.textContent = "{{ getSessionLanguage() == 'en' ? 'Account number must be exactly 13 digits.' : 'رقم الحساب يجب أن يتكون من 13 رقمًا بالضبط.' }}";
      return;
    }

    const branch = value.slice(0, 4);
    const suffix = parseInt(value.slice(-3), 10);

    if (!validBranches.includes(branch)) {
      result.textContent = "{{ getSessionLanguage() == 'en' ? 'Invalid Account Number' : 'رقم الحساب غير صالح' }}";
      return;
    }

    if (isNaN(suffix) || suffix < 1 || suffix > 199) {
      result.textContent = "{{ getSessionLanguage() == 'en' ? 'Invalid Account Number' : 'رقم الحساب غير صالح' }}";
      return;
    }

    // All validations passed
    btn.disabled = false;
    result.textContent = '';
  });

  btn.addEventListener('click', async function () {
    const accountNumber = accountInput.value.trim();
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    btn.disabled = true;
    result.textContent = "{{ getSessionLanguage() == 'en' ? 'Generating IBAN...' : 'جاري توليد رقم الآيبان...' }}";

    try {
      const response = await fetch('{{ route('generate_iban') }}', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-TOKEN": csrfToken
        },
        body: JSON.stringify({ account_number: accountNumber })
      });

      const data = await response.json();

      if (response.ok && data.iban) {
        result.textContent = data.iban;
      } else {
        result.textContent = data.error || "{{ getSessionLanguage() == 'en' ? 'Something went wrong.' : 'حدث خطأ ما.' }}";
      }
    } catch (err) {
      result.textContent = "{{ getSessionLanguage() == 'en' ? 'Network error.' : 'خطأ في الشبكة.' }}";
    }

    btn.disabled = false;
  });
</script>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="" class="pt-0">
  <div class="container container-md">
    <div class="row">
      {!! replaceImageSources($iban?->description) !!}
    </div>
  </div>
</section>
<!--  Marquee Area --> 
@include('frontend.partials.marquee')
@endsection
@section('footer')
    @include('frontend.layouts.footer-layout.two')
@endsection