@extends('layouts.default')
@section('content')
    <style>
        .bank-logo {
            transition: all 0.3s ease;
            border-radius: 4px;
        }

        .input-group-prepend {
            display: flex;
            align-items: center;
        }
    </style>
    <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-9">
                        <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">{{__('Tamamlandı')}}</div>
                                    <div class="progress">
                                        <div class="progress-bar"></div>
                                    </div>
                                    <a href="#" class="step-dot"></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-9 col-lg-7 col-xl-12 mx-auto">
                            <!-- Step 1: Transfer Details -->
                            <div class="form-step" id="step1">
                                <h2 class="fw-400 text-center mt-3">{{__('IBAN\'A Para Gönder')}}</h2>
                                <p class="lead text-center mb-4">{{__( config('app.name') . ' İle IBAN\'a Para Gönder')}}</p>
                                <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">{{__('Kişi Bilgileri')}}</h3>
                                    <hr class="mx-n3 mx-sm-n5 mb-4">
                                    <form id="transfer-form" method="post">
                                        <!-- İban Input -->
                                        <div class="mb-3" id="ibanInput">
                                            <label for="ibanField" class="form-label">IBAN</label>
                                            <div class="input-group">
                                                <span class="input-group-text">TR</span>
                                                <input type="text"
                                                       class="form-control"
                                                       id="ibanField"
                                                       placeholder="IBAN numaranızı giriniz">
                                            </div>
                                        </div>
                                        <div id="bankNameInput" class="mt-2 mb-3" style="display: none;">
                                            <label for="bankNameField" class="form-label">Banka</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <img id="bankLogo" src="" alt="Banka Logo" class="bank-logo me-2" style="height: 100%; width: 100px; object-fit: contain; display: none;">
                                                </div>
                                                <input type="text" class="form-control" id="bankNameField" readonly placeholder="Bankanız belirlenecek">
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="youSend" class="form-label">{{__('Gönderilecek Para')}}</label>
                                            <div class="input-group">
                                                <span class="input-group-text">₺</span>
                                                <input type="text" class="form-control" id="youSend" placeholder="0.00" required>
                                                <span class="input-group-text p-0">
                                               <select id="youSendCurrency" class="form-select bg-transparent border-0">
                                                  <option selected value="TRY">TRY</option>
                                                  <option value="USD">USD</option>
                                                   <option value="EUR">EUR</option>
                                                </select>
                                            </span>
                                            </div>
                                        </div>

                                        <hr>
                                        <p>{{__('Gönderim Ücreti ( %1 )')}}<span class="float-end">0,00 TRY</span></p>
                                        <hr>
                                        <p class="text-4 fw-500">{{__('Toplam Ödeme')}}<span class="float-end">0,00 TRY</span></p>
                                        <div class="d-grid">
                                            <button type="button" class="btn btn-primary next-step">{{__('Devam Et')}}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- Step 2: Confirmation -->
                            <div class="form-step d-none" id="step2">
                                <h2 class="fw-400 text-center mt-3">{{__('Para Gönder')}}</h2>
                                <p class="lead text-center mb-4"></p>
                                <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 Bilgileri')}}</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="{{__('Açıklama giriniz')}}"></textarea>
                                    </div>
                                    <hr class="mx-n3 mx-sm-n5 mb-3 mb-sm-4">
                                    <h3 class="text-5 fw-400 mb-3 mb-sm-4">{{__('Ödemeyi Onayla')}}</h3>
                                    <hr class="mx-n3 mx-sm-n5 mb-4">
                                    <p class="mb-1">{{__('Gönderilen Tutar')}} <span class="text-3 float-end" id="summary-amount">0,00 TRY</span></p>
                                    <p class="mb-1">{{__('Gönderim Ücreti')}} <span class="text-3 float-end">0,0 TRY</span></p>
                                    <hr>
                                    <p class="text-4 fw-500">{{__('Toplam')}}<span class="float-end">0,0 TRY</span></p>
                                    <div class="d-grid">
                                        <button type="button" class="btn btn-secondary prev-step mb-2">{{__('Geri')}}</button>
                                        <button type="button" class="btn btn-primary next-step">{{__('Gönder')}}</button>
                                    </div>
                                </div>
                            </div>

                            <!-- Step 3: Success -->
                            <div class="form-step d-none" id="step3">
                                <h2 class="fw-400 text-center mt-3">{{__('Para Gönder')}}</h2>
                                <p class="lead text-center mb-4"></p>
                                <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">{{__('Gönderildi')}}!</p>
                                        <p class="lead">{{__('İşlem Tamamlandı')}}</p>
                                    </div>
                                    <p class="text-3 mb-4">{{__('Başarılı bir şekilde ')}} <span class="text-4 fw-500" id="success-amount">₺1000</span> {{__('gönderildi ')}}<a class="btn-link" href="{{ route('transactions') }}">{{__('Aktivite')}}</a> {{__('kısmından işlem detaylarını görebilirsiniz.')}}</p>
                                    <div class="d-grid">
                                        <button type="button" class="btn btn-primary" onclick="resetForm()">{{__('Tekrar Para Gönder')}}</button>
                                    </div>
                                    <a class="text-3 d-inline-block btn-link mt-4" href="#"><i class="fas fa-print"></i> {{__('Dekont')}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentStep = 1;
            const form = document.getElementById('transfer-form');

            // Para birimi sembolleri
            const currencySymbols = {
                'TRY': '₺',
                'USD': '$',
                'EUR': '€'
            };

            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;

                // Update headers if the function exists
                if (typeof updateStepHeaders === 'function') {
                    updateStepHeaders(step);
                }
            }

            // 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('#youSend').forEach(input => {
                input.addEventListener('input', function() {
                    if (this.id === 'youSend') {
                        // Gönderilen para değiştiğinde
                        const formattedValue = formatMoney(this);
                        updateTotalAmount();

                    }
                });
            });

            // İşlem ücreti ve toplam hesaplama
            function updateTotalAmount() {
                const amountInput = document.getElementById('youSend');
                // Ö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;

                const currency = document.getElementById('youSendCurrency').value;

                // 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} ${currency}`;
                document.querySelector('p.text-4 span.float-end').textContent = `${formattedTotal} ${currency}`;
            }

            // Başlık güncelleme - Düzeltilmiş versiyon
            function updateStepHeaders(step) {
                const mainTitle = document.querySelector(`#step${step} h2.fw-400`);
                const subTitle = document.querySelector(`#step${step} p.lead`);

                const ibanField = document.getElementById('ibanField');

                if (!mainTitle || !subTitle) return;

                if (step === 1) {
                    subTitle.textContent = '{{__("IBAN ile Kullanıcılarına Para Gönder")}}';
                } else if (step === 2) {
                    subTitle.textContent = '{{__("Gönderilen ")}}' + 'IBAN No : TR'+ibanField.value;

                    // Step 2'deki özet tutarları güncelle
                    const amountInput = document.getElementById('youSend');
                    const amount = amountInput.value;
                    const currency = document.getElementById('youSendCurrency').value;

                    // Düzgün sayı hesaplaması
                    const rawAmount = parseFloat(amount.replace(/\./g, '').replace(',', '.'));
                    const fee = rawAmount * 0.01;
                    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.getElementById('summary-amount').textContent = `${amount} ${currency}`;
                    document.querySelector('#step2 p:nth-of-type(2) .text-3.float-end').textContent = `${formattedFee} ${currency}`;
                    document.querySelector('#step2 p.text-4.fw-500 .float-end').textContent = `${formattedTotal} ${currency}`;
                } else if (step === 3) {
                    const amount = document.getElementById('youSend').value;
                    const currency = document.getElementById('youSendCurrency').value;
                    subTitle.textContent = '{{__("Gönderilen Tutar: ")}}' + amount + ' ' + currency;
                    document.getElementById('success-amount').textContent =
                        currencySymbols[currency] + amount;
                }
            }

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

                        const amountInput = document.getElementById('youSend');
                        const ibanField = document.getElementById('ibanField');


                        removeError(amountInput);
                        removeError(ibanField);

                        let isValid = true;


                        const isValidIban = validateIbanInput(ibanField);
                        if (!isValidIban) {
                            showError(ibanField, 'Lütfen geçerli bir IBAN giriniz');
                            return false;
                        }


                        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);
                            updateStepHeaders(2); // Step 2'ye geçerken başlıkları güncelle
                        }
                    } else if (currentStep === 2) {
                        const descInput = document.getElementById('description');
                        removeError(descInput);

                        if (!descInput.value.trim()) {
                            showError(descInput, '{{__("Açıklama zorunludur")}}');
                            return;
                        }
                        showStep(3);
                        updateStepHeaders(3); // Step 3'e geçerken başlıkları güncelle
                    }
                });

                // Previous step handler
                document.querySelectorAll('.prev-step').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        if (currentStep > 1) {
                            const previousStep = currentStep - 1;
                            showStep(previousStep);
                        }
                    });
                });

                // Para birimi değişimi
                document.getElementById('youSendCurrency').addEventListener('change', function() {
                    const symbol = currencySymbols[this.value];
                    this.closest('.input-group').querySelector('.input-group-text').textContent = symbol;
                    updateTotalAmount();
                    if (currentStep === 3) {
                        updateStepHeaders(3);
                    }
                });

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

                // Form reset
                window.resetForm = function() {
                    form.reset();
                    document.querySelectorAll('.is-invalid').forEach(element => {
                        removeError(element);
                    });
                    showStep(1);
                };
            });
        });

        function getBankFromIban(bankCode) {

            switch (bankCode) {
                case "0100":
                    return "ADABANK A.Ş.";
                case "0046":
                    return "AKBANK T.A.Ş.";
                case "0143":
                    return "AKTİF YATIRIM BANKASI A.Ş.";
                case "0203":
                    return "ALBARAKA TÜRK KATILIM BANKASI A.Ş.";
                case "0124":
                    return "ALTERNATİFBANK A.Ş.";
                case "0135":
                    return "ANADOLUBANK A.Ş.";
                case "0091":
                    return "ARAP TÜRK BANKASI";
                case "0129":
                    return "BANK OF AMERICA YATIRIM BANK A.Ş.";
                case "0149":
                    return "BANK OF CHINA TURKEY A.Ş.";
                case "0142":
                    return "BANKPOZİTİF KREDİ VE KALKINMA BANKASI A.Ş.";
                case "0029":
                    return "BİRLEŞİK FON BANKASI A.Ş.";
                case "0125":
                    return "BURGAN BANK A.Ş.";
                case "0092":
                    return "CITIBANK A.Ş.";
                case "0151":
                    return "D YATIRIM BANKASI A.Ş.";
                case "0134":
                    return "DENİZBANK A.Ş.";
                case "0152":
                    return "DESTEK YATIRIM BANKASI A.Ş.";
                case "0115":
                    return "DEUTSCHE BANK A.Ş.";
                case "0138":
                    return "DİLER YATIRIM BANKASI A.Ş.";
                case "0103":
                    return "FİBABANKA A.Ş.";
                case "0150":
                    return "GOLDEN GLOBAL YATIRIM BANKASI A.Ş.";
                case "0139":
                    return "GSD YATIRIM BANKASI A.Ş.";
                case "0123":
                    return "HSBC BANK A.Ş.";
                case "0212":
                    return "HAYAT FİNANS KATILIM BANKASI A.Ş.";
                case "0109":
                    return "ICBC TURKEY BANK A.Ş.";
                case "0099":
                    return "ING BANK A.Ş.";
                case "0148":
                    return "INTESA SANPAOLO S.P.A.";
                case "0004":
                    return "İLLER BANKASI A.Ş.";
                case "0132":
                    return "İSTANBUL TAKAS VE SAKLAMA BANKASI A.Ş.";
                case "0098":
                    return "JPMORGAN CHASE BANK N.A.";
                case "0205":
                    return "KUVEYT TÜRK KATILIM BANKASI A.Ş.";
                case "0806":
                    return "MERKEZİ KAYIT KURULUŞU A.Ş.";
                case "0153":
                    return "MİSYON YATIRIM BANKASI A.Ş.";
                case "0147":
                    return "MUFG BANK TURKEY A.Ş.";
                case "0141":
                    return "NUROL YATIRIM BANKASI A.Ş.";
                case "0146":
                    return "ODEA BANK A.Ş.";
                case "0116":
                    return "PASHA YATIRIM BANKASI A.Ş.";
                case "0807":
                    return "POSTA VE TELGRAF TEŞKİLATI A.Ş.";
                case "0137":
                    return "RABOBANK A.Ş.";
                case "0122":
                    return "SOCIETE GENERALE (SA)";
                case "0121":
                    return "STANDARD CHARTERED YATIRIM BANKASI TÜRK A.Ş.";
                case "0059":
                    return "ŞEKERBANK T.A.Ş.";
                case "0032":
                    return "TÜRK EKONOMİ BANKASI A.Ş.";
                case "0016":
                    return "TÜRKİYE İHRACAT KREDİ BANKASI A.Ş. (T. EXİMBANK)";
                case "0062":
                    return "TÜRKİYE GARANTİ BANKASI A.Ş.";
                case "0012":
                    return "TÜRKİYE HALK BANKASI A.Ş.";
                case "0064":
                    return "TÜRKİYE İŞ BANKASI A.Ş.";
                case "0017":
                    return "TÜRKİYE KALKINMA VE YATIRIM BANKASI A.Ş.";
                case "0014":
                    return "TÜRKİYE SINAİ KALKINMA BANKASI A.Ş.";
                case "0015":
                    return "TÜRKİYE VAKIFLAR BANKASI T.A.O.";
                case "0001":
                    return "TÜRKİYE CUMHURİYET MERKEZ BANKASI";
                case "0010":
                    return "TÜRKİYE CUMHURİYETİ ZİRAAT BANKASI A.Ş.";
                case "0154":
                    return "TERA YATIRIM BANKASI A.Ş.";
                case "0213":
                    return "T.O.M. KATILIM BANKASI A.Ş.";
                case "0096":
                    return "TURKISH BANK A.Ş.";
                case "0108":
                    return "TURKLAND BANK A.Ş.";
                case "0211":
                    return "TÜRKİYE EMLAK KATILIM BANKASI A.Ş.";
                case "0206":
                    return "TÜRKİYE FİNANS KATILIM BANKASI A.Ş.";
                case "0210":
                    return "VAKIF KATILIM BANKASI A.Ş.";
                case "0067":
                    return "YAPI VE KREDİ BANKASI A.Ş.";
                case "0209":
                    return "ZİRAAT KATILIM BANKASI A.Ş.";
                case "0155":
                    return "Q YATIRIM BANKASI A.Ş.";
                case "0111":
                    return "QNB FİNANSBANK A.Ş.";
                default:
                    return "Bilinmeyen Banka Kodu";
            }
        }

        function checkBank() {
            const ibanField = 'TR'+document.getElementById("ibanField").value;
            const bankNameInput = document.getElementById("bankNameInput");
            const bankNameField = document.getElementById("bankNameField");
            const bankLogo = document.getElementById("bankLogo");

            if (ibanField.length >= 5) {
                var bankCode = ibanField.substring(5,10);
                // Tüm boşlukları temizle
                bankCode = bankCode.replace(/\s+/g, '');

                // Banka adını göster
                bankNameField.value = getBankFromIban(bankCode);

                // Logo yolunu ayarla ve göster
                if (bankCode !== "" && getBankFromIban(bankCode) !== "Bilinmeyen Banka Kodu") {
                    bankLogo.src = `asset/images/banks/${bankCode}.png`;
                    bankLogo.style.display = "block";
                }else{
                    bankLogo.src = `asset/images/banks/none.png`;
                    bankLogo.style.display = "block";
                }

                bankNameInput.style.display = "block";
            } else {
                // Alanları temizle
                bankNameField.value = "";
                bankLogo.src = "";
                bankLogo.style.display = "none";
                bankNameInput.style.display = "none";
            }
        }

        function validateIbanInput(inputElement) {
            const MAX_IBAN_LENGTH = 24; // TR prefixi hariç

            // Input değerini al ve TR prefix'ini kontrol et
            let value = inputElement.value.toUpperCase();

            // TR prefix'ini kaldır (başta, ortada veya sonda olabilir)
            value = value.replace(/TR/g, '');

            // Sadece rakamları al
            let sanitizedValue = value.replace(/[^0-9]/g, '');

            // Maksimum uzunluk kontrolü
            if (sanitizedValue.length > MAX_IBAN_LENGTH) {
                sanitizedValue = sanitizedValue.slice(0, MAX_IBAN_LENGTH);
            }

            // IBAN validation feedback
            const ibanField = document.getElementById('ibanField');
            const feedbackDiv = ibanField.parentElement.querySelector('.invalid-feedback') ||
                document.createElement('div');
            feedbackDiv.className = 'invalid-feedback';

            // IBAN uzunluk kontrolü ve feedback
            if (sanitizedValue.length > 0 && sanitizedValue.length < MAX_IBAN_LENGTH) {
                ibanField.classList.add('is-invalid');
                ibanField.classList.remove('is-valid');
                feedbackDiv.textContent = `IBAN ${MAX_IBAN_LENGTH} karakter olmalıdır. (${sanitizedValue.length}/${MAX_IBAN_LENGTH})`;
                if (!ibanField.parentElement.querySelector('.invalid-feedback')) {
                    ibanField.parentElement.appendChild(feedbackDiv);
                }
            } else if (sanitizedValue.length === MAX_IBAN_LENGTH) {
                ibanField.classList.remove('is-invalid');
                ibanField.classList.add('is-valid');
                if (feedbackDiv) {
                    feedbackDiv.remove();
                }
            } else {
                ibanField.classList.remove('is-invalid', 'is-valid');
                if (feedbackDiv) {
                    feedbackDiv.remove();
                }
            }

            // IBAN'ı formatla ve göster
            if (sanitizedValue.length > 0) {
                // 4'lü gruplar halinde formatlama
                const formattedIban = sanitizedValue.match(/.{1,4}/g).join(' ');
                inputElement.value = formattedIban;
            } else {
                inputElement.value = '';
            }

            // Banka kontrolünü çağır
            checkBank();

            return sanitizedValue.length === MAX_IBAN_LENGTH;
        }

        // Kopyala-yapıştır işlemi için event listener'lar
        document.getElementById('ibanField').addEventListener('paste', function(e) {
            // Varsayılan yapıştırma davranışını engelle
            e.preventDefault();

            // Yapıştırılan metni al
            let pastedText = (e.clipboardData || window.clipboardData).getData('text');

            // TR prefix'ini ve boşlukları temizle
            pastedText = pastedText.toUpperCase().replace(/TR/g, '').replace(/\s/g, '');

            // Sadece rakamları al
            let sanitizedValue = pastedText.replace(/[^0-9]/g, '');

            // Maksimum uzunluğu kontrol et
            if (sanitizedValue.length > 24) {
                sanitizedValue = sanitizedValue.slice(0, 24);
            }

            // 4'lü gruplar halinde formatlama
            if (sanitizedValue.length > 0) {
                const formattedIban = sanitizedValue.match(/.{1,4}/g).join(' ');
                this.value = formattedIban;
            }

            // Validasyonu çağır
            validateIbanInput(this);
        });

        // Input alanına direkt yazma için event listener
        document.getElementById('ibanField').addEventListener('input', function(e) {
            if (!e.inputType || e.inputType !== 'insertFromPaste') {
                validateIbanInput(this);
            }
        });

        // Blur (focus kaybı) olduğunda son bir kontrol
        document.getElementById('ibanField').addEventListener('blur', function() {
            validateIbanInput(this);
        });


    </script>
@endsection