@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 }} ({{ $network }})</h4>
                <div>
                    <a href="{{ route('hd-wallet.index') }}" class="btn btn-sm btn-secondary">
                        <i class="mdi mdi-arrow-right"></i> بازگشت
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if(session('deposit_address'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            آدرس واریز: <strong>{{ session('deposit_address') }}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

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

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

                        <div class="mb-3">
                            <div id="qrcode" style="display: inline-block;"></div>
                        </div>

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

                        <div class="alert alert-warning">
                            <strong>هشدار:</strong>
                            <ul class="mb-0 text-start">
                                <li>فقط {{ $currency }} از شبکه {{ $network }} ارسال کنید</li>
                                <li>ارسال ارز دیگر به این آدرس باعث از دست رفتن آن می‌شود</li>
                                <li>حداقل مبلغ واریز را بررسی کنید</li>
                            </ul>
                        </div>

                        <div class="alert alert-info">
                            <p class="mb-0">
                                پس از ثبت تراکنش در شبکه و رسیدن به تعداد کانفرم موردنیاز، موجودی شما به‌صورت خودکار به‌روزرسانی می‌شود.
                                <br>
                                <small>
                                    @if($network === 'BTC')
                                        نیاز به 1 تایید
                                    @elseif($network === 'ETH' || $network === 'ERC20')
                                        نیاز به 12 تایید
                                    @elseif($network === 'TRON' || $network === 'TRC20')
                                        نیاز به 19 تایید
                                    @endif
                                </small>
                            </p>
                        </div>

                        <div class="mt-4">
                            <h5>تاریخچه واریزهای اخیر</h5>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                    <tr>
                                        <th>TX Hash</th>
                                        <th>مقدار</th>
                                        <th>وضعیت</th>
                                        <th>تاییدات</th>
                                        <th>تاریخ</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($deposits as $deposit)
                                        <tr>
                                            <td>
                                                <code class="small">{{ Str::limit($deposit->tx_hash, 16) }}</code>
                                                @if($network === 'BTC')
                                                    <a href="https://blockchain.info/tx/{{ $deposit->tx_hash }}" target="_blank" class="btn btn-sm btn-link p-0">
                                                        <i class="mdi mdi-open-in-new"></i>
                                                    </a>
                                                @elseif($network === 'ETH' || $network === 'ERC20')
                                                    <a href="https://etherscan.io/tx/{{ $deposit->tx_hash }}" target="_blank" class="btn btn-sm btn-link p-0">
                                                        <i class="mdi mdi-open-in-new"></i>
                                                    </a>
                                                @elseif($network === 'TRON' || $network === 'TRC20')
                                                    <a href="https://tronscan.org/#/transaction/{{ $deposit->tx_hash }}" target="_blank" class="btn btn-sm btn-link p-0">
                                                        <i class="mdi mdi-open-in-new"></i>
                                                    </a>
                                                @endif
                                            </td>
                                            <td><strong>{{ rtrim(rtrim(number_format($deposit->amount, 8, '.', ''), '0'), '.') }}</strong></td>
                                            <td>
                                                @if($deposit->status === 'confirmed')
                                                    <span class="badge bg-success">تایید شده</span>
                                                @elseif($deposit->status === 'confirming')
                                                    <span class="badge bg-warning">در حال تایید</span>
                                                @else
                                                    <span class="badge bg-secondary">در انتظار</span>
                                                @endif
                                            </td>
                                            <td>{{ $deposit->confirmations }} / {{ $deposit->required_confirmations }}</td>
                                            <td>{{ jdate($deposit->created_at)->format('Y/m/d H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">هیچ واریزی ثبت نشده است</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @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);
            }

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