@extends('layouts.user_type.guest')
@section('header_title', __('کیف پول'))

@push('extra_css')
    <style>
        .wallet-page {
            padding: 92px 0 56px;
            color: var(--text);
        }

        .wallet-hero,
        .wallet-panel,
        .wallet-stat,
        .wallet-plan {
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 8px;
            background: var(--bg2);
        }

        .wallet-hero {
            display: grid;
            grid-template-columns: 1.35fr .65fr;
            gap: 18px;
            align-items: stretch;
            padding: 18px;
            margin-bottom: 18px;
        }

        .wallet-hero__main {
            display: grid;
            gap: 14px;
            align-content: center;
        }

        .wallet-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: max-content;
            padding: 6px 10px;
            border-radius: 8px;
            background: rgba(73, 88, 165, .18);
            color: #dbe4ff;
            font-size: 12px;
            font-weight: 800;
        }

        .wallet-balance {
            margin: 0;
            color: #fff;
            font-size: 36px;
            font-weight: 900;
            line-height: 1.5;
        }

        .wallet-muted {
            color: #9fb0cc;
            line-height: 1.9;
        }

        .wallet-current-plan {
            display: grid;
            gap: 10px;
            padding: 16px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .04);
        }

        .wallet-current-plan strong {
            color: #fff;
            font-size: 19px;
        }

        .wallet-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 18px;
        }

        .wallet-stat {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding: 16px;
        }

        .wallet-stat strong {
            display: block;
            color: #fff;
            font-size: 22px;
            line-height: 1.7;
        }

        .wallet-stat span {
            color: #9fb0cc;
            font-size: 13px;
        }

        .wallet-stat i {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(73, 88, 165, .18);
            color: #fff;
        }

        .wallet-usage {
            display: grid;
            gap: 12px;
            margin-top: 16px;
        }

        .wallet-usage__item {
            display: grid;
            gap: 8px;
            padding: 12px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .035);
        }

        .wallet-usage__head {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            color: #fff;
            font-weight: 800;
        }

        .wallet-usage__bar {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
        }

        .wallet-usage__fill {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #55d98b, #dbe4ff);
        }

        .wallet-usage__meta {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: #9fb0cc;
            font-size: 12px;
        }

        .wallet-panel {
            padding: 18px;
            height: 100%;
        }

        .wallet-panel__head {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            margin-bottom: 16px;
        }

        .wallet-panel__head h2 {
            margin: 0;
            color: #fff;
            font-size: 18px;
            font-weight: 900;
        }

        .wallet-top-up {
            display: grid;
            gap: 12px;
        }

        .wallet-quick-amounts {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .wallet-quick-amounts button,
        .wallet-action {
            min-height: 42px;
            border-radius: 8px;
            font-weight: 800;
        }

        .wallet-methods {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .wallet-method {
            display: grid;
            grid-template-columns: 22px 1fr;
            gap: 8px;
            align-items: start;
            padding: 11px;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 8px;
            background: rgba(255, 255, 255, .035);
            cursor: pointer;
        }

        .wallet-method strong {
            display: block;
            color: #fff;
            font-size: 14px;
        }

        .wallet-method span {
            display: block;
            margin-top: 4px;
            color: #9fb0cc;
            font-size: 12px;
            line-height: 1.8;
        }

        .wallet-method:has(input:checked) {
            border-color: rgba(73, 88, 165, .55);
            background: rgba(73, 88, 165, .18);
        }

        .wallet-card-info {
            display: grid;
            gap: 10px;
            padding: 12px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .04);
            color: #dbe4ff;
        }

        .wallet-bank-card {
            display: grid;
            gap: 18px;
            min-height: 210px;
            padding: 18px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, .16);
            background:
                linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 34%),
                linear-gradient(145deg, #172033 0%, #252a35 48%, #17342d 100%);
            color: #fff;
            box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
        }

        .wallet-bank-card__top,
        .wallet-bank-card__footer {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
        }

        .wallet-bank-card__top strong {
            font-size: 15px;
            font-weight: 900;
        }

        .wallet-bank-card__top i {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(255, 255, 255, .12);
            font-size: 18px;
        }

        .wallet-bank-card__chip {
            width: 48px;
            height: 36px;
            border-radius: 7px;
            background:
                linear-gradient(90deg, transparent 31%, rgba(96, 70, 25, .28) 31%, rgba(96, 70, 25, .28) 36%, transparent 36%, transparent 64%, rgba(96, 70, 25, .28) 64%, rgba(96, 70, 25, .28) 69%, transparent 69%),
                linear-gradient(180deg, #f4d87a 0%, #c99f39 100%);
            border: 1px solid rgba(88, 63, 18, .38);
        }

        .wallet-bank-card__number {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            direction: ltr;
            text-align: center;
            color: #fff;
            font-size: 23px;
            font-weight: 900;
            white-space: nowrap;
            overflow-wrap: anywhere;
            unicode-bidi: plaintext;
            cursor: pointer;
        }

        .wallet-bank-card__sheba {
            display: grid;
            gap: 4px;
        }

        .wallet-bank-card__sheba small {
            color: rgba(255, 255, 255, .66);
            font-size: 11px;
        }

        .wallet-bank-card__sheba button {
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            direction: ltr;
            text-align: left;
            color: #fff;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.8;
            overflow-wrap: anywhere;
            unicode-bidi: plaintext;
            cursor: pointer;
        }

        .wallet-bank-card__footer small {
            display: block;
            margin-bottom: 4px;
            color: rgba(255, 255, 255, .66);
            font-size: 11px;
        }

        .wallet-bank-card__footer strong {
            color: #fff;
            font-size: 13px;
            font-weight: 900;
        }

        .wallet-card-meta {
            display: grid;
            gap: 7px;
            color: #cbd3df;
        }

        .wallet-card-meta code {
            direction: ltr;
            color: #fff;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .wallet-copy-toast {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            color: #55d98b;
            font-size: 12px;
            font-weight: 800;
        }

        .wallet-method-panel[hidden] {
            display: none;
        }

        .wallet-plans {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .wallet-plan {
            display: grid;
            gap: 14px;
            padding: 18px;
            position: relative;
        }

        .wallet-plan.current {
            border-color: rgba(85, 217, 139, .45);
            background: linear-gradient(180deg, rgba(85, 217, 139, .10), var(--bg2));
        }

        .wallet-plan__top {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
        }

        .wallet-plan h3 {
            margin: 0;
            color: #fff;
            font-size: 18px;
            font-weight: 900;
        }

        .wallet-plan__price {
            color: #fff;
            font-size: 24px;
            font-weight: 900;
        }

        .wallet-plan ul {
            display: grid;
            gap: 8px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wallet-plan__features {
            display: grid;
            gap: 8px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wallet-plan li {
            display: flex;
            gap: 8px;
            color: #cbd3df;
            line-height: 1.8;
        }

        .wallet-plan__features li {
            display: flex;
            gap: 8px;
            color: #cbd3df;
            line-height: 1.8;
        }

        .wallet-plan li i {
            color: #55d98b;
            margin-top: 6px;
        }

        .wallet-plan__features li i {
            color: #55d98b;
            margin-top: 6px;
        }

        .wallet-table {
            width: 100%;
            color: var(--text);
        }

        .wallet-table th,
        .wallet-table td {
            padding: 13px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            vertical-align: middle;
        }

        .wallet-table th {
            color: #9fb0cc;
            font-weight: 800;
            white-space: nowrap;
        }

        .wallet-table strong {
            color: #fff;
        }

        .wallet-amount-credit {
            color: #55d98b;
            font-weight: 900;
        }

        .wallet-amount-debit {
            color: #ff8b8b;
            font-weight: 900;
        }

        .wallet-empty {
            color: #9fb0cc;
            padding: 24px 0;
            text-align: center;
        }

        @media (max-width: 991px) {
            .wallet-hero,
            .wallet-stats,
            .wallet-plans {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .wallet-balance {
                font-size: 28px;
            }

            .wallet-quick-amounts {
                grid-template-columns: 1fr;
            }

            .wallet-methods {
                grid-template-columns: 1fr;
            }

            .wallet-table th:nth-child(3),
            .wallet-table td:nth-child(3) {
                display: none;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $currentPlan = $wallet->currentPlan;
        $planExpiresAt = $wallet->plan_expires_at
            ? \App\Helpers\xDate::jdate('j F Y', $wallet->plan_expires_at->timestamp)
            : __('بدون انقضا');
        $oldPaymentMethod = old('payment_method');
        $paymentMethods = $payment['methods'] ?? [];
        $paymentMethodKeys = array_column($paymentMethods, 'key');
        $defaultPaymentMethod = in_array($oldPaymentMethod, $paymentMethodKeys, true)
            ? $oldPaymentMethod
            : ($paymentMethodKeys[0] ?? '');
        $cardToCardActive = in_array('card_to_card', $paymentMethodKeys, true);
        $cardNumberRaw = trim((string) ($payment['card']['number'] ?? ''));
        $cardNumberDigits = preg_replace('/\D+/', '', $cardNumberRaw);
        $cardNumberDisplay = $cardNumberDigits !== ''
            ? trim(chunk_split($cardNumberDigits, 4, ' '))
            : $cardNumberRaw;
        $cardShebaRaw = strtoupper(trim((string) ($payment['card']['sheba'] ?? '')));
        $cardShebaCompact = preg_replace('/\s+/', '', $cardShebaRaw);
        $cardShebaDisplay = $cardShebaCompact !== ''
            ? trim(chunk_split($cardShebaCompact, 4, ' '))
            : '';
    @endphp

    <main class="wallet-page" dir="rtl">
        <div class="container">
            @include('user.user_menu')

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger">
                    @foreach($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                </div>
            @endif

            <section class="wallet-hero">
                <div class="wallet-hero__main">
                    <span class="wallet-eyebrow"><i class="far fa-wallet"></i> {{ __('کیف پول کاربری') }}</span>
                    <h1 class="wallet-balance">{{ $wallet->balance_formatted }}</h1>
                    <p class="wallet-muted mb-0">
                        {{ __('موجودی کیف پول برای خرید پلن ها و سرویس های حساب کاربری استفاده می شود.') }}
                    </p>
                </div>

                <div class="wallet-current-plan">
                    <span class="wallet-eyebrow"><i class="far fa-crown"></i> {{ __('پلن فعلی') }}</span>
                    <strong>{{ $currentPlan?->name ?? __('بدون پلن فعال') }}</strong>
                    <span class="wallet-muted">
                        {{ __('وضعیت') }}: {{ $wallet->plan_status_label }}
                        @if($currentPlan)
                            <br>{{ __('پایان اعتبار') }}: {{ $planExpiresAt }}
                        @endif
                    </span>
                </div>
            </section>

            <section class="wallet-stats">
                <div class="wallet-stat">
                    <div>
                        <strong>{{ number_format($summary['paid_credit']) }} {{ __('تومان') }}</strong>
                        <span>{{ __('کل شارژهای تایید شده') }}</span>
                    </div>
                    <i class="far fa-arrow-down"></i>
                </div>
                <div class="wallet-stat">
                    <div>
                        <strong>{{ number_format($summary['paid_debit']) }} {{ __('تومان') }}</strong>
                        <span>{{ __('هزینه خرید پلن ها') }}</span>
                    </div>
                    <i class="far fa-arrow-up"></i>
                </div>
                <div class="wallet-stat">
                    <div>
                        <strong>{{ $summary['pending_count'] }}</strong>
                        <span>{{ __('تراکنش در انتظار') }}</span>
                    </div>
                    <i class="far fa-clock"></i>
                </div>
            </section>

            <div class="row g-4 mb-4">
                <div class="col-lg-5">
                    <section class="wallet-panel">
                        <div class="wallet-panel__head">
                            <h2>{{ __('شارژ کیف پول') }}</h2>
                            <span class="badge bg-secondary">{{ __('درخواست پرداخت') }}</span>
                        </div>
                        <form class="wallet-top-up" action="{{ localized_route('user.wallet.top_up') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group mb-0">
                                <label for="wallet-amount">{{ __('مبلغ تومان') }}</label>
                                <input id="wallet-amount" type="number" name="amount" min="10000" step="1000" value="{{ old('amount') }}" class="form-control" placeholder="{{ __('مثلا 150000') }}" required>
                            </div>

                            @if($paymentMethods)
                                <div class="wallet-methods">
                                    @foreach($paymentMethods as $method)
                                        <label class="wallet-method">
                                            <input type="radio" name="payment_method" value="{{ $method['key'] }}" @checked($defaultPaymentMethod === $method['key'])>
                                            <span>
                                                <strong>{{ $method['title'] }}</strong>
                                                <span>{{ $method['description'] }}</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-warning mb-0">{{ __('هیچ روش شارژی توسط مدیریت فعال نشده است.') }}</div>
                            @endif

                            @if($cardToCardActive)
                                <div id="wallet-card-panel" class="wallet-method-panel" @if($defaultPaymentMethod !== 'card_to_card') hidden @endif>
                                    <div class="wallet-card-info">
                                        <div class="wallet-bank-card">
                                            <div class="wallet-bank-card__top">
                                                <strong>{{ $payment['card']['bank'] ?: __('کارت بانکی') }}</strong>
                                                <i class="far fa-credit-card"></i>
                                            </div>
                                            <div class="wallet-bank-card__chip" aria-hidden="true"></div>
                                            <button
                                                type="button"
                                                class="wallet-bank-card__number wallet-copy-value"
                                                data-copy="{{ $cardNumberDigits ?: $cardNumberRaw }}"
                                                aria-label="{{ __('کپی شماره کارت') }}"
                                            >{{ $cardNumberDisplay }}</button>
                                            @if($cardShebaDisplay)
                                                <div class="wallet-bank-card__sheba">
                                                    <small>{{ __('شبا') }}</small>
                                                    <button
                                                        type="button"
                                                        class="wallet-copy-value"
                                                        data-copy="{{ $cardShebaCompact }}"
                                                        aria-label="{{ __('کپی شماره شبا') }}"
                                                    >{{ $cardShebaDisplay }}</button>
                                                </div>
                                            @endif
                                            <div class="wallet-bank-card__footer">
                                                <div>
                                                    <small>{{ __('صاحب کارت') }}</small>
                                                    <strong>{{ $payment['card']['owner'] ?: '-' }}</strong>
                                                </div>
                                                <div>
                                                    <small>{{ __('نوع پرداخت') }}</small>
                                                    <strong>{{ __('کارت به کارت') }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="wallet-card-meta">
                                        @if($payment['card']['note'])
                                            <div class="wallet-muted">{{ $payment['card']['note'] }}</div>
                                        @endif
                                            <span id="wallet-copy-toast" class="wallet-copy-toast" aria-live="polite"></span>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label for="wallet-receipt">{{ __('رسید پرداخت') }}</label>
                                        <input id="wallet-receipt" type="file" name="receipt" class="form-control" accept=".jpg,.jpeg,.png,.webp,.pdf">
                                        <small class="wallet-muted">{{ __('برای کارت به کارت، بارگذاری رسید الزامی است. فرمت های مجاز: JPG, PNG, WEBP, PDF') }}</small>
                                    </div>
                                </div>
                            @endif

                            <div class="wallet-quick-amounts">
                                <button type="button" class="btn btn-outline-primary" data-amount="100000">{{ __('Û±Û°Û°,Û°Û°Û°') }}</button>
                                <button type="button" class="btn btn-outline-primary" data-amount="250000">{{ __('Û²ÛµÛ°,Û°Û°Û°') }}</button>
                                <button type="button" class="btn btn-outline-primary" data-amount="500000">{{ __('ÛµÛ°Û°,Û°Û°Û°') }}</button>
                            </div>
                            <button class="btn btn-primary wallet-action" type="submit" @disabled(!$paymentMethods)>
                                <i class="far fa-plus"></i>
                                {{ __('ادامه شارژ کیف پول') }}
                            </button>
                            <small class="wallet-muted">
                                {{ __('پرداخت آنلاین پس از تایید درگاه به صورت خودکار کیف پول را شارژ می کند.') }}
                                @if($cardToCardActive)
                                    {{ __('کارت به کارت پس از تایید رسید توسط مدیریت شارژ می شود.') }}
                                @endif
                            </small>
                        </form>
                    </section>
                </div>

                <div class="col-lg-7">
                    <section class="wallet-panel">
                        <div class="wallet-panel__head">
                            <h2>{{ __('جزئیات پلن فعلی') }}</h2>
                            <span class="badge {{ $wallet->isPlanActive() ? 'bg-success' : 'bg-secondary' }}">{{ $wallet->plan_status_label }}</span>
                        </div>
                        @if($currentPlan)
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="wallet-stat">
                                        <div>
                                            <strong>{{ $currentPlan->price_formatted }}</strong>
                                            <span>{{ __('قیمت پلن') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="wallet-stat">
                                        <div>
                                            <strong>{{ $currentPlan->duration_label }}</strong>
                                            <span>{{ __('مدت اعتبار') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="wallet-stat">
                                        <div>
                                            <strong>{{ $planExpiresAt }}</strong>
                                            <span>{{ __('پایان اعتبار') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wallet-usage">
                                <div class="wallet-usage__head">
                                    <span>{{ __('میزان استفاده از پلن در ماه جاری') }}</span>
                                    <span class="badge {{ $planUsage['can_watch_lives'] ? 'bg-success' : 'bg-secondary' }}">
                                        {{ __('دیدن لایو') }}: {{ $planUsage['can_watch_lives'] ? __('دارد') : __('ندارد') }}
                                    </span>
                                </div>
                                @foreach($planUsage['items'] as $usage)
                                    @php
                                        $limit = $usage['limit'];
                                        $used = $usage['used'];
                                        $isUnlimited = $limit === null;
                                        $percent = $isUnlimited
                                            ? 100
                                            : ($limit > 0 ? min(100, round(($used / $limit) * 100)) : ($used > 0 ? 100 : 0));
                                        $limitLabel = $isUnlimited ? __('نامحدود') : number_format($limit);
                                        $remainingLabel = $isUnlimited ? __('نامحدود') : number_format(max($limit - $used, 0));
                                    @endphp
                                    <div class="wallet-usage__item">
                                        <div class="wallet-usage__head">
                                            <span>{{ $usage['title'] }}</span>
                                            <span>{{ number_format($used) }} / {{ $limitLabel }}</span>
                                        </div>
                                        <div class="wallet-usage__bar" aria-label="{{ $usage['title'] }}">
                                            <span class="wallet-usage__fill" style="width: {{ $percent }}%"></span>
                                        </div>
                                        <div class="wallet-usage__meta">
                                            <span>{{ __('استفاده شده') }}: {{ number_format($used) }}</span>
                                            <span>{{ __('باقی مانده') }}: {{ $remainingLabel }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if($currentPlan->features)
                                <ul class="wallet-plan__features mt-3">
                                    @foreach($currentPlan->features as $feature)
                                        <li><i class="fa fa-check"></i><span>{{ $feature }}</span></li>
                                    @endforeach
                                </ul>
                            @endif
                        @else
                            <div class="wallet-empty">{{ __('هنوز هیچ پلنی برای حساب شما فعال نشده است.') }}</div>
                        @endif
                    </section>
                </div>
            </div>

            <section class="wallet-panel mb-4">
                <div class="wallet-panel__head">
                    <h2>{{ __('پلن های قابل خرید') }}</h2>
                    <span class="wallet-muted">{{ __('خرید از موجودی کیف پول انجام می شود.') }}</span>
                </div>

                <div class="wallet-plans">
                    @forelse($plans as $plan)
                        @php
                            $isCurrent = $wallet->isPlanActive() && $wallet->current_plan_id === $plan->id;
                            $canBuy = $wallet->balance >= $plan->price;
                        @endphp
                        <article class="wallet-plan {{ $isCurrent ? 'current' : '' }}">
                            <div class="wallet-plan__top">
                                <div>
                                    <h3>{{ $plan->name }}</h3>
                                    <small class="wallet-muted">{{ $plan->duration_label }}</small>
                                </div>
                                @if($isCurrent)
                                    <span class="badge bg-success">{{ __('فعال') }}</span>
                                @endif
                            </div>
                            <p class="wallet-muted mb-0">{{ $plan->description ?: __('پلن قابل خرید برای حساب کاربری') }}</p>
                            <div class="wallet-plan__price">{{ $plan->price_formatted }}</div>
                            <ul>                                <li><i class="fa fa-check"></i><span>{{ __('دیدن لایو') }}: {{ $plan->can_watch_lives ? __('دارد') : __('ندارد') }}</span></li>
                                <li><i class="fa fa-check"></i><span>{{ __('ساخت لایو در ماه') }}: {{ $plan->monthly_live_create_limit_label }}</span></li>
                                <li><i class="fa fa-check"></i><span>{{ __('لایو فروشی در ماه') }}: {{ $plan->monthly_paid_live_create_limit_label }}</span></li>
                                @forelse($plan->features ?? [] as $feature)
                                    <li><i class="fa fa-check"></i><span>{{ $feature }}</span></li>
                                @empty
                                    <li><i class="fa fa-check"></i><span>{{ __('دسترسی طبق تنظیمات پلن') }}</span></li>
                                @endforelse
                            </ul>
                            <form action="{{ localized_route('user.wallet.plans.buy', $plan->id) }}" method="POST">
                                @csrf
                                <button class="btn {{ $isCurrent ? 'btn-success' : 'btn-primary' }} wallet-action w-100" type="submit" @disabled($isCurrent || !$canBuy)>
                                    @if($isCurrent)
                                        {{ __('پلن فعلی شما') }}
                                    @elseif(!$canBuy)
                                        {{ __('موجودی کافی نیست') }}
                                    @else
                                        {{ __('خرید پلن') }}
                                    @endif
                                </button>
                            </form>
                        </article>
                    @empty
                        <div class="wallet-empty">{{ __('هنوز پلنی توسط مدیریت تعریف نشده است.') }}</div>
                    @endforelse
                </div>
            </section>

            <section class="wallet-panel">
                <div class="wallet-panel__head">
                    <h2>{{ __('تاریخچه تراکنش ها') }}</h2>
                    <span class="wallet-muted">{{ __(':count تراکنش', ['count' => $transactions->total()]) }}</span>
                </div>

                <div class="table-responsive">
                    <table class="wallet-table">
                        <thead>
                        <tr>
                            <th>{{ __('تراکنش') }}</th>
                            <th>{{ __('مبلغ') }}</th>
                            <th>{{ __('پلن') }}</th>
                            <th>{{ __('روش') }}</th>
                            <th>{{ __('وضعیت') }}</th>
                            <th>{{ __('تاریخ') }}</th>
                            <th>{{ __('مانده') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($transactions as $transaction)
                            @php
                                $isDebit = in_array($transaction->type, [
                                    \App\Models\WalletTransaction::TYPE_PLAN_PURCHASE,
                                    \App\Models\WalletTransaction::TYPE_LIVE_ENTRY,
                                ], true);
                                $statusClass = match($transaction->status) {
                                    \App\Models\WalletTransaction::STATUS_PAID => 'bg-success',
                                    \App\Models\WalletTransaction::STATUS_FAILED => 'bg-danger',
                                    \App\Models\WalletTransaction::STATUS_CANCELED => 'bg-secondary',
                                    default => 'bg-warning',
                                };
                            @endphp
                            <tr>
                                <td>
                                    <strong class="d-block">{{ $transaction->title }}</strong>
                                    <small class="wallet-muted">{{ $transaction->type_label }} - {{ $transaction->reference }}</small>
                                </td>
                                <td class="{{ $isDebit ? 'wallet-amount-debit' : 'wallet-amount-credit' }}">
                                    {{ $isDebit ? '-' : '+' }}{{ $transaction->amount_formatted }}
                                </td>
                                <td>{{ $transaction->plan?->name ?? '-' }}</td>
                                <td>{{ $transaction->payment_method_label }}</td>
                                <td><span class="badge {{ $statusClass }}">{{ $transaction->status_label }}</span></td>
                                <td>{{ \App\Helpers\xDate::jdate('j F Y H:i', $transaction->created_at->timestamp) }}</td>
                                <td>{{ number_format($transaction->balance_after) }} {{ __('تومان') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="wallet-empty">{{ __('هنوز تراکنشی برای کیف پول شما ثبت نشده است.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                @if($transactions->hasPages())
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <a class="btn btn-sm btn-outline-primary {{ $transactions->onFirstPage() ? 'disabled' : '' }}" href="{{ $transactions->previousPageUrl() ?: '#' }}">{{ __('قبلی') }}</a>
                        <span class="wallet-muted">{{ __('صفحه :current از :last', ['current' => $transactions->currentPage(), 'last' => $transactions->lastPage()]) }}</span>
                        <a class="btn btn-sm btn-outline-primary {{ $transactions->hasMorePages() ? '' : 'disabled' }}" href="{{ $transactions->nextPageUrl() ?: '#' }}">{{ __('بعدی') }}</a>
                    </div>
                @endif
            </section>
        </div>
    </main>

    @push('extra_js')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const amountInput = document.getElementById('wallet-amount');
                const cardPanel = document.getElementById('wallet-card-panel');
                const receiptInput = document.getElementById('wallet-receipt');
                const methodInputs = document.querySelectorAll('input[name="payment_method"]');
                const copyToast = document.getElementById('wallet-copy-toast');

                document.querySelectorAll('[data-amount]').forEach(button => {
                    button.addEventListener('click', function () {
                        amountInput.value = this.dataset.amount;
                        amountInput.focus();
                    });
                });

                function syncPaymentMethod() {
                    const selected = document.querySelector('input[name="payment_method"]:checked')?.value || '';
                    const isCard = selected === 'card_to_card';

                    if (cardPanel) {
                        cardPanel.hidden = !isCard;
                    }
                    if (receiptInput) {
                        receiptInput.required = isCard;
                    }
                }

                methodInputs.forEach(input => input.addEventListener('change', syncPaymentMethod));
                syncPaymentMethod();

                function showCopyToast(message) {
                    if (!copyToast) {
                        return;
                    }

                    copyToast.textContent = message;
                    window.clearTimeout(copyToast.dataset.timer);
                    copyToast.dataset.timer = window.setTimeout(() => {
                        copyToast.textContent = '';
                    }, 1800);
                }

                function copyText(value) {
                    if (!value) {
                        return;
                    }

                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(value).then(() => showCopyToast(@json(__('کپی شد'))));
                        return;
                    }

                    const input = document.createElement('textarea');
                    input.value = value;
                    input.style.position = 'fixed';
                    input.style.opacity = '0';
                    document.body.appendChild(input);
                    input.focus();
                    input.select();
                    document.execCommand('copy');
                    input.remove();
                    showCopyToast(@json(__('کپی شد')));
                }

                document.querySelectorAll('.wallet-copy-value').forEach(button => {
                    button.addEventListener('click', function () {
                        copyText(this.dataset.copy || this.textContent.trim());
                    });
                });
            });
        </script>
    @endpush
@endsection