@extends('user.layouts.master')
@section('title', 'مدیریت آدرس‌های کیف پول')

@section('content')
<style>
    /* ===========================
       سایدبار استاتیک و تنظیم عرض محتوا
    =========================== */
    :root {
        --sidebar-width: 250px; /* عرض ثابت سایدبار */
    }
    
    /* سایدبار همیشه باز و استاتیک */
    .vertical-menu {
        position: fixed;
        width: var(--sidebar-width);
        right: 0;
        top: 70px;
        bottom: 0;
        z-index: 1001;
        transition: none; /* حذف transition برای استاتیک بودن */
    }
    
    /* تنظیم عرض محتوا بر اساس سایدبار استاتیک */
    .main-content {
        margin-right: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        transition: none;
        box-sizing: border-box;
    }
    
    /* بهبود container-fluid با فاصله از سایدبار */
    .main-content .container-fluid {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 2.5rem; /* فاصله بیشتر از سایدبار */
    }
    
    /* فاصله بیشتر در دسکتاپ */
    @media (min-width: 1200px) {
        .main-content .container-fluid {
            padding-right: 3rem; /* فاصله بیشتر در دسکتاپ بزرگ */
        }
    }
    
    @media (min-width: 992px) and (max-width: 1199px) {
        .main-content .container-fluid {
            padding-right: 2.5rem; /* فاصله متوسط */
        }
    }
    
    /* در موبایل padding کمتر */
    @media (max-width: 768px) {
        .main-content .container-fluid {
            padding-right: 1rem;
            padding-left: 1rem;
        }
    }
    
    /* فاصله‌گذاری از سایدبار برای ردیف‌ها */
    .main-content .container-fluid > .row:first-child {
        margin-right: 0;
        margin-left: 0;
    }
    
    /* فاصله اضافی برای کارت‌ها از سایدبار */
    .main-content .container-fluid .card {
        margin-right: 0;
    }
    
    /* در موبایل: سایدبار مخفی و محتوا عرض کامل */
    @media (max-width: 991px) {
        .vertical-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        
        body.sidebar-enable .vertical-menu {
            transform: translateX(0);
        }
        
        .main-content {
            margin-right: 0 !important;
            width: 100% !important;
        }
    }
    
    /* بهبود spacing و padding */
    .page-content {
        padding: 1.5rem 0;
    }
    
    @media (max-width: 768px) {
        .page-content {
            padding: 1rem 0;
        }
    }
    
    /* ===========================
       بهبود UI/UX بر اساس سایدبار استاتیک
    =========================== */
    
    /* بهبود spacing کلی */
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    
    /* بهبود کارت‌ها */
    .wallet-card {
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .wallet-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: #007bff;
    }
    .wallet-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.75rem 1rem;
        border-radius: 8px 8px 0 0;
    }
    .wallet-body {
        padding: 1rem;
    }
    .address-display {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        font-family: 'Courier New', monospace;
        font-size: 0.75rem;
        word-break: break-all;
        border: 1px solid #e9ecef;
        line-height: 1.4;
    }
    .balance-display {
        font-size: 1rem;
        font-weight: 600;
        color: #28a745;
    }
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    .action-buttons .btn {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
    }
    .btn-action {
        min-width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.2s;
        font-size: 0.875rem;
    }
    .btn-action:hover {
        transform: scale(1.05);
    }
    .btn-action i {
        font-size: 0.875rem;
    }
    .create-form-card {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .network-badge {
        padding: 0.25rem 0.625rem;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.75rem;
    }
    .empty-state {
        text-align: center;
        padding: 2.5rem 1.5rem;
        color: #6c757d;
    }
    .empty-state-icon {
        font-size: 3rem;
        color: #dee2e6;
        margin-bottom: 0.75rem;
    }
    .stats-card {
        background: white;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        margin-bottom: 1rem;
    }
    .stat-item {
        text-align: center;
    }
    .stat-value {
        font-size: 1.25rem;
        font-weight: 600;
        color: #667eea;
    }
    .stat-label {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.375rem;
    }
    .page-title-box h4 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }
    .page-title-box p {
        font-size: 0.875rem;
    }
    .card-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    .table th {
        font-size: 0.8125rem;
        font-weight: 600;
        padding: 0.625rem 0.5rem;
    }
    .table td {
        font-size: 0.8125rem;
        padding: 0.625rem 0.5rem;
        vertical-align: middle;
    }
    .table code {
        font-size: 0.75rem;
    }
    @media (max-width: 768px) {
        .wallet-card {
            margin-bottom: 1rem;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }
        .wallet-header {
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
        }
        .wallet-body {
            padding: 0.75rem;
        }
        .address-display {
            font-size: 0.6875rem;
            padding: 0.5rem;
        }
        .balance-display {
            font-size: 0.875rem;
        }
        .action-buttons {
            justify-content: stretch;
            gap: 0.5rem;
            width: 100%;
        }
        .action-buttons .btn {
            font-size: 0.6875rem;
            padding: 0.375rem 0.5rem;
            min-height: 32px;
            line-height: 1.2;
        }
        .action-buttons .btn i {
            font-size: 0.75rem;
            margin-right: 0.25rem;
        }
        .table-responsive {
            display: flex;
        }
        .mobile-wallets {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0;
            position: relative;
            z-index: 10;
        }
        .mobile-wallets .row {
            margin-left: 0;
            margin-right: 0;
        }
        .mobile-wallets > .col-12 {
            display: flex;
            flex-direction: column;
        }
        .stats-card {
            padding: 0.875rem;
            margin-bottom: 0.75rem;
        }
        .stat-value {
            font-size: 1.125rem;
        }
        .page-title-box {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
    @media (min-width: 769px) {
        .mobile-wallets {
            display: none !important;
            display: flex;              /* کنار هم قرار گرفتن */
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0;
            position: relative;
            width: 20%;
            max-width: 20%;
            padding: 10px 15px;
            margin: 0;
            gap: 10px 15px;
            position: relative;
            box-sizing: border-box;
        }
    }
    /* بهبود layout برای تمام حالت‌ها */
    .row.mobile-wallets.g-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0;
        position: relative;
        z-index: 10;
    }
    .row.mobile-wallets.g-2 > * {
        flex-shrink: 0;
    }
    
    /* ===========================
       بهبودهای UI/UX کلی
    =========================== */
    
    /* بهبود spacing کلی */
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    
    /* بهبود کارت‌ها */
    .card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
        transition: box-shadow 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    
    /* بهبود جداول */
    .table-responsive {
        border-radius: 8px;
    }
    
    .table thead {
        background: #f8f9fa;
    }
    
    .table tbody tr {
        transition: background-color 0.2s ease;
    }
    
    .table tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    /* بهبود دکمه‌ها */
    .btn {
        transition: all 0.2s ease;
        font-weight: 500;
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .btn:active {
        transform: translateY(0);
    }
    
    /* بهبود فرم‌ها */
    .form-control,
    .form-select {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    /* بهبود badge ها */
    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
    }
    
    /* بهبود input group */
    .input-group {
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border-radius: 6px;
        overflow: hidden;
    }
    
    /* بهبود alert ها */
    .alert {
        border-radius: 8px;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* بهبود page title */
    .page-title-box {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    
    @media (max-width: 768px) {
        .page-title-box {
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
        }
    }
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between mb-3">
            <div>
                <h4 class="mb-1">
                    <i class="mdi mdi-wallet text-primary me-1"></i> مدیریت آدرس‌های کیف پول
                </h4>
                <p class="text-muted mb-0 small">مدیریت و مشاهده تمام آدرس‌های کیف پول بلاک چین شما</p>
            </div>
            <div class="d-flex gap-2 flex-wrap mt-2 mt-sm-0">
                <a href="{{ route('hd-wallet.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="mdi mdi-arrow-right me-1"></i> بازگشت
                </a>
            </div>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="mdi mdi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
        <i class="mdi mdi-alert-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<!-- آمار کلی -->
@if(isset($walletsWithBalance) && count($walletsWithBalance) > 0)
<div class="row mb-3">
    <div class="col-md-4 col-sm-6 mb-2">
        <div class="stats-card">
            <div class="stat-item">
                <div class="stat-value">{{ count($walletsWithBalance) }}</div>
                <div class="stat-label">تعداد آدرس‌ها</div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-2">
        <div class="stats-card">
            <div class="stat-item">
                <div class="stat-value">{{ array_sum(array_column($walletsWithBalance, 'transactions_count')) }}</div>
                <div class="stat-label">کل تراکنش‌ها</div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-2">
        <div class="stats-card">
            <div class="stat-item">
                <div class="stat-value">{{ count(array_unique(array_column($walletsWithBalance, 'network'))) }}</div>
                <div class="stat-label">شبکه‌های فعال</div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- فرم ایجاد آدرس جدید -->
<div class="row mb-3">
    <div class="col-12">
        <div class="card create-form-card">
            <div class="card-body p-3">
                <div class="d-flex align-items-center mb-2">
                    <i class="mdi mdi-plus-circle-outline me-2" style="font-size: 1.125rem; color: #667eea;"></i>
                    <h6 class="mb-0 fw-semibold">ایجاد آدرس جدید</h6>
                </div>
                <form action="{{ route('hd-wallet.create-address') }}" method="POST">
                    @csrf
                    <div class="row g-2">
                        <div class="col-lg-4 col-md-6">
                            <label class="form-label small fw-semibold mb-1">
                                <i class="mdi mdi-network me-1"></i> شبکه
                            </label>
                            <select name="network" class="form-select form-select-sm" required>
                                <option value="">انتخاب شبکه</option>
                                <option value="BTC" {{ old('network') == 'BTC' ? 'selected' : '' }}>Bitcoin (BTC)</option>
                                <option value="ETH" {{ old('network') == 'ETH' ? 'selected' : '' }}>Ethereum (ETH)</option>
                                <option value="ERC20" {{ old('network') == 'ERC20' ? 'selected' : '' }}>ERC20 (USDT, USDC, ...)</option>
                                <option value="TRON" {{ old('network') == 'TRON' ? 'selected' : '' }}>Tron (TRX)</option>
                                <option value="TRC20" {{ old('network') == 'TRC20' ? 'selected' : '' }}>TRC20 (USDT, ...)</option>
                            </select>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label class="form-label small fw-semibold mb-1">
                                <i class="mdi mdi-currency-usd me-1"></i> ارز
                            </label>
                            <input type="text" name="currency" class="form-control form-control-sm" 
                                   value="{{ old('currency') }}" 
                                   placeholder="BTC, ETH, USDT, TRX" required>
                        </div>
                        <div class="col-lg-4 col-md-12">
                            <label class="form-label small fw-semibold mb-1">&nbsp;</label>
                            <button type="submit" class="btn btn-primary btn-sm w-100">
                                <i class="mdi mdi-plus-circle me-1"></i> ایجاد آدرس جدید
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- لیست آدرس‌ها - دسکتاپ -->
@if(isset($walletsWithBalance) && count($walletsWithBalance) > 0)
<div class="row d-none d-md-block">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-body">
                <h6 class="card-title mb-3 fw-semibold">
                    <i class="mdi mdi-wallet-multiple me-1"></i> لیست آدرس‌های کیف پول
                </h6>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>شبکه</th>
                                <th>ارز</th>
                                <th>آدرس</th>
                                <th>Index</th>
                                <th>موجودی</th>
                                <th>در انتظار</th>
                                <th>قفل شده</th>
                                <th>تراکنش‌ها</th>
                                <th>تاریخ ایجاد</th>
                                <th class="text-center">اقدامات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($walletsWithBalance as $wallet)
                                <tr>
                                    <td>
                                        <span class="badge network-badge bg-info">{{ $wallet['network'] }}</span>
                                    </td>
                                    <td>
                                        <strong>{{ $wallet['currency'] }}</strong>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                            <div class="d-flex align-items-center gap-1">
                                                <code class="small mb-0" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis;">{{ $wallet['address'] }}</code>
                                                <span class="badge bg-primary" style="font-size: 0.625rem; padding: 0.125rem 0.375rem;">{{ $wallet['currency'] }}</span>
                                            </div>
                                            <div class="d-flex gap-1">
                                                <button class="btn btn-sm btn-outline-primary btn-action" 
                                                        onclick="copyToClipboard('{{ $wallet['address'] }}', this)" 
                                                        title="کپی آدرس">
                                                    <i class="mdi mdi-content-copy"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-info btn-action" 
                                                        data-address="{{ $wallet['address'] }}"
                                                        data-network="{{ $wallet['network'] }}"
                                                        data-currency="{{ $wallet['currency'] }}"
                                                        onclick="showQRCodeFromButton(this)" 
                                                        title="QR Code">
                                                    <i class="mdi mdi-qrcode"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ $wallet['derivation_index'] }}</span>
                                    </td>
                                    <td>
                                        <span class="balance-display" data-wallet-id="{{ $wallet['id'] }}" data-balance-type="balance">{{ rtrim(rtrim(number_format($wallet['balance'], 8, '.', ''), '0'), '.') }}</span>
                                    </td>
                                    <td>
                                        <span data-wallet-id="{{ $wallet['id'] }}" data-balance-type="pending">
                                            @if((float)$wallet['pending_deposits'] > 0)
                                                <span class="text-warning fw-semibold">{{ rtrim(rtrim(number_format($wallet['pending_deposits'], 8, '.', ''), '0'), '.') }}</span>
                                            @else
                                                <span class="text-muted">0</span>
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        <span data-wallet-id="{{ $wallet['id'] }}" data-balance-type="locked">
                                            @if((float)$wallet['locked_balance'] > 0)
                                                <span class="text-danger fw-semibold">{{ rtrim(rtrim(number_format($wallet['locked_balance'], 8, '.', ''), '0'), '.') }}</span>
                                            @else
                                                <span class="text-muted">0</span>
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $wallet['transactions_count'] }}</span>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $wallet['created_at']->format('Y/m/d H:i') }}</small>
                                    </td>
                                    <td>
                                        <div class="action-buttons justify-content-center">
                                            <a href="{{ route('hd-wallet.deposit', ['network' => $wallet['network'], 'currency' => $wallet['currency']]) }}"
                                               class="btn btn-sm btn-outline-success btn-action" title="واریز">
                                                <i class="mdi mdi-arrow-down"></i>
                                            </a>
                                            <a href="{{ route('hd-wallet.withdraw', ['network' => $wallet['network'], 'currency' => $wallet['currency']]) }}"
                                               class="btn btn-sm btn-outline-danger btn-action" title="برداشت">
                                                <i class="mdi mdi-arrow-up"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- لیست آدرس‌ها - موبایل -->
<div class="row mobile-wallets g-2">
    @foreach($walletsWithBalance as $wallet)
        <div class="col-12 mb-2">
            <div class="wallet-card">
                <div class="wallet-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-light text-dark me-2">{{ $wallet['network'] }}</span>
                            <strong>{{ $wallet['currency'] }}</strong>
                        </div>
                        <span class="badge bg-secondary">Index: {{ $wallet['derivation_index'] }}</span>
                    </div>
                </div>
                <div class="wallet-body">
                    <div class="mb-2">
                        <label class="form-label small text-muted mb-1">آدرس کیف پول</label>
                        <div class="address-display mb-2">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-1">
                                <code class="mb-0 flex-grow-1" style="font-size: 0.6875rem;">{{ $wallet['address'] }}</code>
                                <span class="badge bg-primary" style="font-size: 0.625rem; padding: 0.25rem 0.5rem;">{{ $wallet['currency'] }}</span>
                            </div>
                        </div>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-primary flex-fill" 
                                    onclick="copyToClipboard('{{ $wallet['address'] }}', this)"
                                    style="font-size: 0.625rem; padding: 0.25rem 0.375rem;">
                                <i class="mdi mdi-content-copy me-1" style="font-size: 0.75rem;"></i> کپی
                            </button>
                            <button class="btn btn-sm btn-outline-info flex-fill" 
                                    data-address="{{ $wallet['address'] }}"
                                    data-network="{{ $wallet['network'] }}"
                                    data-currency="{{ $wallet['currency'] }}"
                                    onclick="showQRCodeFromButton(this)"
                                    style="font-size: 0.625rem; padding: 0.25rem 0.375rem;">
                                <i class="mdi mdi-qrcode me-1" style="font-size: 0.75rem;"></i> QR
                            </button>
                        </div>
                    </div>
                    
                    <div class="row g-2 mb-2">
                        <div class="col-4">
                            <div class="text-center">
                                <div class="balance-display" data-wallet-id="{{ $wallet['id'] }}" data-balance-type="balance" style="font-size: 0.9375rem;">{{ rtrim(rtrim(number_format($wallet['balance'], 8, '.', ''), '0'), '.') }}</div>
                                <small class="text-muted d-block" style="font-size: 0.6875rem;">موجودی</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div data-wallet-id="{{ $wallet['id'] }}" data-balance-type="pending" class="text-warning fw-semibold" style="font-size: 0.9375rem;">{{ rtrim(rtrim(number_format($wallet['pending_deposits'], 8, '.', ''), '0'), '.') }}</div>
                                <small class="text-muted d-block" style="font-size: 0.6875rem;">در انتظار</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div data-wallet-id="{{ $wallet['id'] }}" data-balance-type="locked" class="text-danger fw-semibold" style="font-size: 0.9375rem;">{{ rtrim(rtrim(number_format($wallet['locked_balance'], 8, '.', ''), '0'), '.') }}</div>
                                <small class="text-muted d-block" style="font-size: 0.6875rem;">قفل شده</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <small class="text-muted" style="font-size: 0.6875rem;">تراکنش‌ها: </small>
                            <span class="badge bg-primary" style="font-size: 0.6875rem;">{{ $wallet['transactions_count'] }}</span>
                        </div>
                        <small class="text-muted" style="font-size: 0.6875rem;">{{ $wallet['created_at']->format('Y/m/d H:i') }}</small>
                    </div>
                    
                    <div class="action-buttons">
                        <a href="{{ route('hd-wallet.deposit', ['network' => $wallet['network'], 'currency' => $wallet['currency']]) }}"
                           class="btn btn-sm btn-success"
                           style="font-size: 0.6875rem; padding: 0.375rem 0.5rem; min-height: 32px;">
                            <i class="mdi mdi-arrow-down" style="font-size: 0.75rem;"></i> واریز
                        </a>
                        <a href="{{ route('hd-wallet.withdraw', ['network' => $wallet['network'], 'currency' => $wallet['currency']]) }}"
                           class="btn btn-sm btn-danger"
                           style="font-size: 0.6875rem; padding: 0.375rem 0.5rem; min-height: 32px;">
                            <i class="mdi mdi-arrow-up" style="font-size: 0.75rem;"></i> برداشت
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>
@else
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="mdi mdi-wallet-outline"></i>
                    </div>
                    <h6 class="mb-2">هیچ آدرسی یافت نشد</h6>
                    <p class="text-muted mb-3 small">برای شروع، یک آدرس جدید ایجاد کنید</p>
                    <a href="#create-form" class="btn btn-sm btn-primary">
                        <i class="mdi mdi-plus-circle me-1"></i> ایجاد آدرس جدید
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@section('script')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
    // نمایش QR Code در Modal
    function showQRCode(address, network, currency) {
        const qrCodeId = 'qrcode-' + address.replace(/[^a-zA-Z0-9]/g, '');
        
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.id = 'qrcodeModal';
        modal.setAttribute('tabindex', '-1');
        modal.innerHTML = `
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content shadow-lg">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="mdi mdi-qrcode me-2"></i>QR Code - ${network} / ${currency}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center p-3">
                        <div class="mb-3">
                            <div id="${qrCodeId}" style="display: inline-block; padding: 0.75rem; background: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);"></div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label small fw-semibold mb-1">آدرس کیف پول:</label>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control form-control-sm font-monospace text-center" 
                                       value="${address}" 
                                       id="qrcode-address-input" 
                                       readonly
                                       style="font-size: 0.75rem;">
                                <button class="btn btn-outline-primary btn-sm" 
                                        type="button" 
                                        onclick="copyQRCodeAddress('${address.replace(/'/g, "\\'").replace(/"/g, '&quot;')}', this)">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="alert alert-info mb-0 py-2" style="font-size: 0.8125rem;">
                            <i class="mdi mdi-information me-1"></i>
                            این QR Code را می‌توانید برای دریافت ${currency} از شبکه ${network} اسکن کنید.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        
        modal.addEventListener('shown.bs.modal', function () {
            const qrCodeElement = document.getElementById(qrCodeId);
            if (qrCodeElement && typeof QRCode !== 'undefined') {
                qrCodeElement.innerHTML = '';
                new QRCode(qrCodeElement, {
                    text: address,
                    width: 200,
                    height: 200,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                });
            } else {
                console.error('QRCode library not loaded or element not found');
            }
        });
        
        modal.addEventListener('hidden.bs.modal', function () {
            document.body.removeChild(modal);
        });
    }

    function showQRCodeFromButton(button) {
        const address = button.getAttribute('data-address');
        const network = button.getAttribute('data-network');
        const currency = button.getAttribute('data-currency');
        if (address && network && currency) {
            showQRCode(address, network, currency);
        } else {
            console.error('Missing data attributes:', {address, network, currency});
        }
    }

    function copyQRCodeAddress(address, buttonElement) {
        const input = document.getElementById('qrcode-address-input');
        if (input) {
            input.select();
            input.setSelectionRange(0, 99999);
            
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(address).then(function() {
                    showCopySuccess(buttonElement);
                }).catch(function(err) {
                    document.execCommand('copy');
                    showCopySuccess(buttonElement);
                });
            } else {
                document.execCommand('copy');
                showCopySuccess(buttonElement);
            }
        }
    }

    function copyToClipboard(text, buttonElement) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showCopySuccess(buttonElement);
            }).catch(function(err) {
                fallbackCopy(text, buttonElement);
            });
        } else {
            fallbackCopy(text, buttonElement);
        }
    }

    function fallbackCopy(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-sm btn-success';
        buttonElement.disabled = true;
        
        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-sm btn-danger';
        
        showToast('error', 'خطا در کپی کردن آدرس');
        
        setTimeout(function() {
            buttonElement.innerHTML = originalHTML;
            buttonElement.className = originalClass;
        }, 2000);
    }

    function showToast(type, message) {
        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; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
        toast.innerHTML = `
            <i class="mdi mdi-${type === 'success' ? 'check-circle' : 'alert-circle'} me-2"></i>${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(toast);
        
        setTimeout(function() {
            toast.remove();
        }, 3000);
    }
    </script>
    <script>
        // به‌روزرسانی خودکار موجودی‌ها هر 30 ثانیه
        function updateBalances() {
            const network = new URLSearchParams(window.location.search).get('network') || '';
            const currency = new URLSearchParams(window.location.search).get('currency') || '';
            
            $.ajax({
                url: '{{ route("hd-wallet.balances") }}',
                method: 'GET',
                data: {
                    network: network,
                    currency: currency
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status && response.balances) {
                        response.balances.forEach(function(wallet) {
                            // Update desktop table
                            updateBalanceElement(wallet.id, 'balance', wallet.balance);
                            updateBalanceElement(wallet.id, 'pending', wallet.pending_deposits);
                            updateBalanceElement(wallet.id, 'locked', wallet.locked_balance);
                        });
                        
                        // Show update indicator
                        showUpdateIndicator();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error updating balances:', error);
                }
            });
        }
        
        function updateBalanceElement(walletId, type, value) {
            const valueFloat = parseFloat(value) || 0;
            const formattedValue = rtrim(rtrim(valueFloat.toFixed(8).replace(/\B(?=(\d{3})+(?!\d))/g, ','), '0'), '.');
            
            // Find all elements with this wallet ID and balance type
            const elements = document.querySelectorAll(`[data-wallet-id="${walletId}"][data-balance-type="${type}"]`);
            
            elements.forEach(function(element) {
                if (type === 'balance') {
                    element.textContent = formattedValue;
                } else if (type === 'pending') {
                    if (valueFloat > 0) {
                        element.innerHTML = `<span class="text-warning fw-semibold">${formattedValue}</span>`;
                    } else {
                        element.innerHTML = `<span class="text-muted">0</span>`;
                    }
                } else if (type === 'locked') {
                    if (valueFloat > 0) {
                        element.innerHTML = `<span class="text-danger fw-semibold">${formattedValue}</span>`;
                    } else {
                        element.innerHTML = `<span class="text-muted">0</span>`;
                    }
                }
            });
        }
        
        function rtrim(str, char) {
            while (str.endsWith(char)) {
                str = str.slice(0, -1);
            }
            return str;
        }
        
        function showUpdateIndicator() {
            // Create or update update indicator
            let indicator = document.getElementById('balance-update-indicator');
            if (!indicator) {
                indicator = document.createElement('div');
                indicator.id = 'balance-update-indicator';
                indicator.className = 'position-fixed';
                indicator.style.cssText = 'bottom: 20px; left: 20px; z-index: 9999; background: #28a745; color: white; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2);';
                document.body.appendChild(indicator);
            }
            
            const now = new Date();
            indicator.innerHTML = `<i class="mdi mdi-sync"></i> به‌روزرسانی: ${now.toLocaleTimeString('fa-IR')}`;
            indicator.style.display = 'block';
            
            setTimeout(function() {
                indicator.style.display = 'none';
            }, 2000);
        }
        
        // تنظیم سایدبار به صورت استاتیک در دسکتاپ
        document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const windowWidth = window.innerWidth;
            
            // در دسکتاپ: سایدبار همیشه باز
            if (windowWidth > 991) {
                body.classList.add('sidebar-enable');
                body.classList.remove('vertical-collpsed');
            }
            
            // در resize: بررسی مجدد
            let resizeTimer;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function() {
                    const currentWidth = window.innerWidth;
                    if (currentWidth > 991) {
                        body.classList.add('sidebar-enable');
                        body.classList.remove('vertical-collpsed');
                    }
                }, 250);
            });
            
            // Start auto-update for balances every 30 seconds
            updateBalances(); // Initial update
            setInterval(updateBalances, 30000); // 30 seconds = 30000 milliseconds
        });
    </script>
    @endsection