@extends('user.layouts.master')
@section('title', 'واریز ' . $currency)

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">واریز {{ $currency }}</h4>
                <div>
                    <a href="{{ route('hd-wallet.addresses') }}" class="btn btn-sm btn-success">
                        <i class="mdi mdi-plus-circle"></i> ساخت ولت جدید
                    </a>
                    <a href="{{ route('hd-wallet.addresses') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="mdi mdi-arrow-right"></i> بازگشت
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h4 class="card-title mb-3">آدرس واریز</h4>

                    @if($depositAddress)
                        <p class="mb-3">لطفاً فقط <strong>{{ $currency }}</strong> به این آدرس ارسال کنید.</p>

                        <div class="mb-3">
                            @if(isset($qrCodeSvg) && $qrCodeSvg)
                                {!! $qrCodeSvg !!}
                            @else
                                {{-- Fallback به JavaScript در صورت خطا --}}
                                <div id="qrcode" style="display: inline-block;"></div>
                            @endif
                        </div>

                        <div class="input-group mb-3">
                            <input type="text" class="form-control text-center font-monospace" readonly value="{{ $depositAddress->address }}" id="deposit-address">
                            <button class="btn btn-outline-primary" type="button" onclick="copyAddress(this)" id="copy-btn">
                                <i class="mdi mdi-content-copy"></i> کپی
                            </button>
                        </div>

                        @if($depositAddress->tag)
                            <div class="alert alert-warning">
                                برای تکمیل واریز، حتماً <strong>Tag / Memo</strong> زیر را نیز وارد کنید:
                                <br>
                                <strong>{{ $depositAddress->tag }}</strong>
                            </div>
                        @endif

                        <p class="text-muted mt-3">
                            پس از ثبت تراکنش در شبکه و رسیدن به تعداد کانفرم موردنیاز، موجودی داخلی شما به‌صورت خودکار به‌روزرسانی می‌شود.
                        </p>
                    @else
                        <div class="alert alert-warning mb-0">
                            آدرس واریز برای این ارز هنوز فعال‌سازی نشده است. لطفاً بعداً دوباره تلاش کنید یا با پشتیبانی تماس بگیرید.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
        <script>
            function copyAddress(buttonElement) {
                const input = document.getElementById('deposit-address');
                if (!input) return;
                
                const address = input.value;
                
                // Try modern clipboard API first
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(address).then(function() {
                        showCopySuccess(buttonElement);
                    }).catch(function(err) {
                        // Fallback to old method
                        fallbackCopyAddress(address, buttonElement);
                    });
                } else {
                    // Fallback for older browsers
                    fallbackCopyAddress(address, buttonElement);
                }
            }

            function fallbackCopyAddress(text, buttonElement) {
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                document.body.appendChild(textarea);
                textarea.select();
                
                try {
                    document.execCommand('copy');
                    showCopySuccess(buttonElement);
                } catch (err) {
                    showCopyError(buttonElement);
                }
                
                document.body.removeChild(textarea);
            }

            function showCopySuccess(buttonElement) {
                if (!buttonElement) return;
                
                const originalHTML = buttonElement.innerHTML;
                const originalClass = buttonElement.className;
                
                buttonElement.innerHTML = '<i class="mdi mdi-check"></i> کپی شد!';
                buttonElement.className = 'btn btn-success';
                buttonElement.disabled = true;
                
                // Show toast notification
                showToast('success', 'آدرس با موفقیت کپی شد');
                
                setTimeout(function() {
                    buttonElement.innerHTML = originalHTML;
                    buttonElement.className = originalClass;
                    buttonElement.disabled = false;
                }, 2000);
            }

            function showCopyError(buttonElement) {
                if (!buttonElement) return;
                
                const originalHTML = buttonElement.innerHTML;
                const originalClass = buttonElement.className;
                
                buttonElement.innerHTML = '<i class="mdi mdi-alert"></i> خطا!';
                buttonElement.className = 'btn btn-danger';
                
                showToast('error', 'خطا در کپی کردن آدرس');
                
                setTimeout(function() {
                    buttonElement.innerHTML = originalHTML;
                    buttonElement.className = originalClass;
                }, 2000);
            }

            function showToast(type, message) {
                // Create toast element
                const toast = document.createElement('div');
                toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
                toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
                toast.innerHTML = `
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                
                document.body.appendChild(toast);
                
                // Auto remove after 3 seconds
                setTimeout(function() {
                    toast.remove();
                }, 3000);
            }

            // تولید QR Code
            @if($depositAddress)
            document.addEventListener('DOMContentLoaded', function() {
                const qrCodeElement = document.getElementById('qrcode');
                if (qrCodeElement && typeof QRCode !== 'undefined') {
                    new QRCode(qrCodeElement, {
                        text: '{{ $depositAddress->address }}',
                        width: 180,
                        height: 180,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }
            });
            @endif
        </script>
    @endpush
@endsection