@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">{{__('Cüzdana Para Gönder')}}</h2>
                                <p class="lead text-center mb-4">{{__( config('app.name') . ' Kullanıcılarına 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 action="{{ route('wallet.send-money') }}" id="transfer-form" method="post">
                                        @csrf
                                        <!-- Cüzdan Input -->
                                        <div class="mb-3" id="walletInput">
                                            <label for="walletField" class="form-label">Cüzdan Numarası</label>
                                            <input type="text" class="form-control" name="wallet" id="walletField"
                                                   placeholder="Cüzdan numaranızı giriniz">
                                        </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" name="amount" id="youSend"
                                                       placeholder="0.00" required>
                                                <span class="input-group-text p-0">
                                               <select id="youSendCurrency" name="currency"
                                                       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>
                                        <div class="mb-4 mb-sm-5">
                                            <label for="description" class="form-label">{{__('Açıklama')}}</label>
                                            <textarea class="form-control" rows="4" name="description" id="description"
                                                      required placeholder="{{__('Açıklama giriniz')}}"></textarea>
                                        </div>
                                        <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">
                                <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 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">
                                                    {{__('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"
                                                        onclick="window.history.back();">
                                                    {{__('İptal')}}
                                                </button>
                                            </div>
                                            <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>
                                        </form>
                                    </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="text-center mb-4">
                                    <h2 class="fw-400">{{__('İşlem Başarılı')}}</h2>
                                    <p class="lead">{{__('Para transferi başarıyla gerçekleşti')}}</p>
                                </div>
                                <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 Detayları')}}</h4>
                                        <p class="mb-0">{{__('Gönderilen 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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="notification" class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
        <div class="toast align-items-center border-0" role="alert" aria-live="polite" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </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': '€'
            };

            // Validasyon fonksiyonları
            function validateEmail(email) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
            }

            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('#youSend, #recipientGets').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;

                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}`;
            }


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

                        removeError(amountInput);
                        removeError(walletField);

                        let isValid = true;

                        if (!document.getElementById('description').value.trim()) {
                            showError(document.getElementById('description'), '{{__("Açıklama zorunludur")}}');
                            isValid = false;
                        }

                        if (!walletField.value.trim()) {
                            showError(walletField, '{{__("Cüzdan numarası zorunludur")}}');
                            isValid = 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);
                        }
                    }
                });


                // 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();
                });

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

            document.querySelector('#step2 form').addEventListener('submit', function (e) {
                e.preventDefault();

                const submitBtn = this.querySelector('button[type="submit"]');
                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('transfer-form');
                const formData = new FormData(form);

                // Amount değerini düzenleme
                let amount = formData.get('amount');
                amount = amount.replace(/\./g, '').replace(',', '.');
                formData.set('amount', amount);

                fetch('{{ route("wallet.send-money") }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    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("send-money") }}';
                            }, 3000);
                        }
                    })
                    .catch(error => {
                        showNotification('İşlem sırasında bir hata oluştu', 'error');
                        setTimeout(() => {
                            window.location.href = '{{ route("send-money") }}';
                        }, 3000);
                    });
            }

            function updateSuccessStep(data) {
                document.getElementById('final-amount').textContent = `${data.amount} ${data.currency}`;
                document.getElementById('transaction-id').textContent = data.reference;
            }

            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