@extends('layouts.app')

@section('content')
<div class="store-wrapper">
    <div class="store-container">

        @if(session('success'))
            <div class="alert-box success">
                <span class="icon">✅</span>
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if(session('error'))
            <div class="alert-box error">
                <span class="icon">⚠️</span>
                <p>{{ session('error') }}</p>
            </div>
        @endif

        {{-- Toast (Notification) --}}
        <div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true">
            <div class="toast-icon" id="toastIcon">✅</div>
            <div class="toast-content">
                <div class="toast-title" id="toastTitle"></div>
                <div class="toast-text" id="toastText"></div>
            </div>
            <button type="button" class="toast-close" aria-label="Close" onclick="hideToast()">×</button>
        </div>

        <div class="section-header">
            <h2>{{ __('store.my_subscription_status') }}</h2>
        </div>

        {{-- بخش وضعیت اشتراک --}}
        @if($subscription && $subscription->isActive())
            <div class="premium-sub-card">
                <div class="glow-effect"></div>

                <div class="card-header-row">
                    <div class="order-id-wrapper">
                        <span class="label">{{ __('store.order_id') }}:</span>
                        <span class="value">{{ $subscription->receipt ?? '-' }}</span>
                    </div>
                    <div class="status-badge">
                        <span>{{ __('store.active') }}</span>
                        <span class="tick-icon">✔</span>
                    </div>
                </div>

                <div class="main-counter">
                    <span class="days-count">{{ (int) $subscription->daysRemaining() }}</span>
                    <span class="days-label">{{ __('store.days_remaining') }}</span>
                </div>

                <div class="progress-wrapper">
                    <div class="progress-track">
                        <div class="progress-fill" style="width: {{ $subscription->timeProgress() }}%"></div>
                    </div>
                </div>

                <div class="details-grid">
                    <div class="detail-box right">
                        <span class="d-label">{{ __('store.expire_date') }}</span>
                        <span class="d-value">{{ $subscription->expire_date->format('Y/m/d') }}</span>
                    </div>
                    <div class="detail-box left">
                        <span class="d-label">{{ __('store.start_date') }}</span>
                        <span class="d-value">{{ $subscription->updated_at->format('Y/m/d') }}</span>
                    </div>

                    <div class="detail-box right">
                        <span class="d-label">{{ __('store.payment_method') }}</span>
                        <div class="payment-method-badge">
                            <span class="pm-dot {{ $subscription->payment_type == 'zarinpal' ? 'yellow' : 'teal' }}"></span>
                            <span class="d-value">
                                @if($subscription->payment_type == 'card_to_card')
                                    {{ __('store.card_to_card') }}
                                @elseif($subscription->payment_type == 'crypto')
                                    کریپتو
                                @else
                                    {{ __('store.zarinpal') }}
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="detail-box left">
                        <span class="d-label">{{ __('store.paid_amount') }}</span>
                        <span class="d-value">{{ number_format($subscription->amount_paid) }} {{ __('store.toman') }}</span>
                    </div>
                </div>
            </div>
        @else
            <div class="no-sub-card">
                <div class="icon-wrapper">🔒</div>
                <h3>{{ __('store.no_active_subscription_title') }}</h3>
                <p>{{ __('store.no_active_subscription_desc') }}</p>
            </div>
        @endif

        <div class="divider"></div>

        <div class="section-header">
            <h2>{{ __('store.plans_title') }}</h2>
            <p>{{ __('store.plans_subtitle') }}</p>
        </div>

        <div class="plans-grid">
            @foreach($plans as $plan)
                <div class="plan-card">
                    <div class="plan-content">
                        <h3 class="plan-title">{{ app()->getLocale() === 'fa' ? $plan->title_fa : ($plan->title_en ?? $plan->title_fa) }}</h3>
                        <div class="plan-price">
                            {{ number_format($plan->toman) }}
                            <span class="currency">{{ __('store.toman') }}</span>
                        </div>
                        <div class="plan-duration">
                            {{ $plan->duration_days }} {{ __('store.days_full_access') }}
                        </div>

                        <p class="plan-desc">
                            {{ app()->getLocale() === 'fa' ? $plan->description_fa : ($plan->description_en ?? $plan->description_fa) }}
                        </p>
                    </div>

                    <div class="payment-actions">
                        {{-- 1. Zarinpal --}}
                        <form action="{{ route('payment.request') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                            <button type="submit" class="btn-buy btn-zarinpal">
                                <span>💳</span>
                                {{ __('store.buy_subscription') }}
                            </button>
                        </form>

                        {{-- 2. Card to Card --}}
                        <button type="button" 
                                class="btn-buy btn-card" 
                                onclick="openCardModal('{{ $plan->id }}', '{{ number_format($plan->toman) }}')">
                            <span>🏧</span>
                            {{ __('store.card_to_card') }}
                        </button>

                        {{-- 3. Telegram Stars --}}
                        <button type="button"
                                class="btn-buy btn-stars"
                                data-plan-id="{{ $plan->id }}"
                                onclick="payWithStars(this)">
                            <span>⭐️</span>
                            {{ __('store.pay_with_stars') }}
                        </button>

                        {{-- 4. Crypto Payment (NEW) --}}
                        <button type="button"
                                class="btn-buy btn-crypto"
                                data-plan-id="{{ $plan->id }}"
                                onclick="payWithCrypto(this)">
                            <span>💎</span>
                            {{ __('store.pay_with_crypto') ?? 'پرداخت با تتر/کریپتو' }}
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>

{{-- Card to Card Modal --}}
<div id="cardModal" class="modal-overlay" onclick="closeCardModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h3>{{ __('store.card_to_card_title') }}</h3>
            <button class="modal-close" onclick="closeCardModal()">×</button>
        </div>
        
        <div class="modal-body">
            <p class="modal-text">
                {{ __('store.card_modal_desc') }} 
                <strong id="modalAmountDisplay" style="color: var(--accent-color)"></strong> 
                {{ __('store.toman') }} 
                {{ __('store.card_modal_desc_2') }}:
            </p>

            <div class="card-info-box" onclick="copyCardNumber()">
                <div class="card-detail-row">
                    <span class="detail-label">به نام:</span>
                    <span class="detail-value">Ramtin Charghandeh</span>
                </div>
                
                <div class="card-divider"></div>

                <div class="card-detail-row">
                    <span class="detail-label">شماره کارت:</span>
                    <span class="detail-value card-number-font" id="cardNumberToCopy">6219-8618-8414-1549</span>
                </div>

                <div class="card-divider"></div>

                <div class="card-detail-row">
                    <span class="detail-label">شماره شبا:</span>
                    <span class="detail-value card-number-font sm-font">IR610560611828006768309801</span>
                </div>

                <div class="copy-hint">{{ __('store.click_to_copy') }}</div>
            </div>

            <form action="{{ route('payment.cardToCard') }}" method="POST" class="card-form" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="plan_id" id="modalPlanId">
                
                <div class="upload-area" id="drop-area">
                    <input type="file" name="receipt" id="receipt" accept="image/*" hidden required>
                    <div class="upload-content" id="upload-content">
                        <div class="upload-icon">☁️</div>
                        <p class="upload-text">تصویر فیش را اینجا رها کنید</p>
                        <p class="upload-hint">یا برای انتخاب کلیک کنید</p>
                    </div>
                    <div class="preview-container" id="preview-container" style="display: none;">
                        <img id="preview-image" src="" alt="Receipt Preview">
                        <button type="button" class="remove-btn" onclick="removeImage(event)">×</button>
                    </div>
                </div>

                <button type="submit" class="btn-submit-card" id="submitBtn" disabled>
                    {{ __('store.submit_receipt') }}
                </button>
            </form>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-color: #2563eb;
        --secondary-color: #1e40af;
        --accent-color: #10b981;
        --card-color: #0d9488;
        --bg-card: rgba(255, 255, 255, 0.1);
        --text-light: #f3f4f6;
        --text-muted: #9ca3af;
    }

    .store-wrapper {
        min-height: 100vh;
        padding: 40px 20px;
        direction: rtl;
        font-family: inherit;
    }

    .store-container {
        max-width: 800px;
        margin: 0 auto;
    }

    /* Alerts */
    .alert-box { padding: 15px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; font-weight: bold; }
    .alert-box.success { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }
    .alert-box.error { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; }

    .section-header { text-align: center; margin-bottom: 25px; }
    .section-header h2 { font-size: 1.5rem; color: #4a5568; margin-bottom: 5px; }
    .section-header p { color: var(--text-muted); font-size: 0.9rem; }

    /* Premium Sub Card */
    .premium-sub-card {
        background: #e0e5ec;
        border-radius: 24px;
        padding: 30px;
        position: relative;
        overflow: hidden;
        box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #4a5568;
        margin-bottom: 40px;
        direction: rtl;
    }
    .glow-effect {
        position: absolute;
        top: -50%; right: -50%; width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
        pointer-events: none;
    }
    .card-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
    .order-id-wrapper { font-size: 0.75rem; color: rgba(74, 85, 104, 0.6); font-family: monospace; letter-spacing: 1px; }
    .status-badge { background: rgba(16, 185, 129, 0.15); border: 1px solid #10b981; color: #065f46; padding: 6px 14px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; font-weight: bold; }
    .main-counter { text-align: center; margin: 30px 0; }
    .days-count { display: block; font-size: 4.5rem; font-weight: 800; line-height: 1; color: #6c5ce7; }
    .days-label { font-size: 1.1rem; color: rgba(74, 85, 104, 0.8); margin-top: 5px; display: block; }
    .progress-wrapper { margin-bottom: 35px; padding: 0 10px; }
    .progress-track { background: rgba(0, 0, 0, 0.05); height: 8px; border-radius: 10px; overflow: hidden; }
    .progress-fill { background: #6c5ce7; height: 100%; border-radius: 10px; }
    .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 25px; }
    .detail-box { display: flex; flex-direction: column; gap: 6px; }
    .detail-box.right { text-align: right; }
    .detail-box.left { text-align: left; }
    .d-label { font-size: 0.8rem; color: rgba(74, 85, 104, 0.6); }
    .d-value { font-size: 1rem; font-weight: 700; color: #4a5568; }
    .payment-method-badge { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
    .pm-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .pm-dot.yellow { background-color: #fbbf24; }
    .pm-dot.teal { background-color: #2dd4bf; }
    .no-sub-card {
        background: #e0e5ec;
        border: 1px dashed rgba(74, 85, 104, 0.3);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        color: #718096;
        box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.5), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    }
    .divider { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 40px 0; }

    /* Plans Grid */
    .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
    .plan-card { 
        background: #e0e5ec; border-radius: 24px; padding: 8px; 
        display: flex; flex-direction: column; justify-content: space-between; 
        overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
    }
    .plan-card:hover {
        transform: translateY(-7px);
        box-shadow: 14px 14px 28px rgba(163, 177, 198, 0.8), -14px -14px 28px rgba(255, 255, 255, 0.9);
    }
    .plan-content { padding: 24px; text-align: center; color: #4a5568; flex-grow: 1; }
    .plan-title { font-size: 1.25rem; font-weight: 800; color: #4a5568; margin-bottom: 12px; }
    .plan-price { font-size: 1.8rem; font-weight: 800; color: #6c5ce7; margin-bottom: 8px; }
    .plan-price .currency { font-size: 0.9rem; color: #718096; font-weight: 500; }
    .plan-duration { display: inline-block; background: rgba(108, 92, 231, 0.1); color: #6c5ce7; padding: 5px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; }
    .plan-desc { font-size: 0.9rem; color: #718096; line-height: 1.7; margin-bottom: 10px; }

    /* Buttons Area */
    .payment-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px 8px; }

    /* Modern Buttons */
    .btn-buy {
        width: 100%; color: white; padding: 12px 15px; border: none; border-radius: 14px;
        font-weight: 700; font-size: 0.95rem; cursor: pointer; 
        transition: all 0.2s ease;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        position: relative; overflow: hidden;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .btn-buy:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.1); }
    .btn-buy:active { transform: scale(0.98); }

    /* Button Variants */
    .btn-zarinpal { background: linear-gradient(135deg, #2563eb, #1d4ed8); } /* Blue */
    .btn-card { background: linear-gradient(135deg, #0d9488, #0f766e); } /* Teal */
    .btn-stars { background: linear-gradient(135deg, #f59e0b, #d97706); } /* Gold */
    .btn-crypto { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } /* Violet/Purple */

    /* Modal */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s; }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-content {
        background: #e0e5ec;
        width: 90%;
        max-width: 400px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        transform: scale(0.95);
        transition: transform 0.3s;
        box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
        color: #4a5568;
    }
    .modal-overlay.active .modal-content { transform: scale(1); }
    .modal-header { padding: 18px 24px; background: rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.08); }
    .modal-header h3 { color: #4a5568; font-size: 1.1rem; margin: 0; font-weight: bold; }
    .modal-close { background: none; border: none; color: #4a5568; font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
    .modal-close:hover { color: #6c5ce7; }
    .modal-body { padding: 24px; color: #4a5568; }
    .modal-text { margin-bottom: 24px; font-size: 0.95rem; line-height: 1.6; text-align: center; }

    /* Card Info & Upload */
    .card-info-box { background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); padding: 24px; border-radius: 18px; margin-bottom: 24px; cursor: pointer; box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.5), inset -3px -3px 6px rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; gap: 14px; position: relative; transition: transform 0.2s; }
    .card-info-box:active { transform: scale(0.99); }
    .card-detail-row { display: flex; justify-content: space-between; align-items: center; }
    .detail-label { font-size: 0.85rem; color: #718096; }
    .detail-value { font-weight: 700; color: #4a5568; }
    .card-number-font { font-family: monospace; letter-spacing: 1.5px; font-size: 1rem; }
    .card-divider { height: 1px; background: rgba(0, 0, 0, 0.08); }
    .copy-hint { font-size: 0.75rem; color: #6c5ce7; text-align: center; margin-top: 5px; font-weight: 600; }

    .upload-area { border: 2px dashed rgba(74, 85, 104, 0.3); border-radius: 18px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.3s; background: #e0e5ec; margin-bottom: 20px; position: relative; min-height: 160px; display: flex; align-items: center; justify-content: center; color: #4a5568; }
    .upload-area:hover { border-color: var(--accent-color); background: rgba(108, 92, 231, 0.05); }
    .upload-icon { font-size: 2.8rem; margin-bottom: 12px; display: block; }
    .preview-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 16px; overflow: hidden; background: #e0e5ec; }
    .remove-btn { position: absolute; top: 12px; right: 12px; background: rgba(239, 68, 68, 0.9); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

    .btn-submit-card { width: 100%; background: var(--accent-color); color: #fff; padding: 14px; border-radius: 14px; font-weight: 800; border: none; cursor: pointer; font-size: 1rem; transition: opacity 0.2s; box-shadow: 3px 3px 6px rgba(108, 92, 231, 0.3); }
    .btn-submit-card:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Toast */
    .toast { position: fixed; z-index: 9999; top: 20px; right: 20px; max-width: 400px; width: 90%; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); color: #0f172a; background: rgba(255,255,255,0.95); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all 0.3s ease; direction: rtl; }
    .toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .toast.success { border-left: 5px solid #10b981; }
    .toast.error { border-left: 5px solid #ef4444; }
    .toast-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,0.05); flex-shrink: 0; }
    .toast-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
    .toast-text { font-size: 0.9rem; color: #475569; line-height: 1.5; }
    .toast-close { background: transparent; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; padding: 0 5px; line-height: 1; }
    html[lang="en"] .toast { direction: ltr; right: 20px; left: auto; }
</style>

<script>
    const I18N = {
        locale: @json(app()->getLocale()),
        successTitle: @json(__('store.toast_success_title')),
        successText: @json(__('store.toast_invoice_sent')),
        errorTitle: @json(__('store.toast_error_title')),
        errorText: @json(__('store.toast_invoice_failed')),
        networkErrorText: @json(__('store.toast_network_error')),
        sendingText: @json(__('store.sending_invoice') ?? 'در حال ارسال...'),
        payWithStarsText: @json(__('store.pay_with_stars')),
        payWithCryptoText: @json(__('store.pay_with_crypto') ?? 'پرداخت با تتر/کریپتو'),
        copied: @json(__('store.copied')),
    };

    // --- Toast Functions ---
    function showToast(type, title, text) {
        const toast = document.getElementById('toast');
        const icon = document.getElementById('toastIcon');
        const tTitle = document.getElementById('toastTitle');
        const tText = document.getElementById('toastText');
        toast.classList.remove('success', 'error');
        toast.classList.add(type);
        icon.textContent = (type === 'success') ? '✅' : '⚠️';
        tTitle.textContent = title;
        tText.textContent = text;
        toast.classList.add('show');
        clearTimeout(window.__toastTimer);
        window.__toastTimer = setTimeout(() => hideToast(), 6000);
    }
    function hideToast() { document.getElementById('toast').classList.remove('show'); }

    // --- Modal & Card Functions ---
    function openCardModal(planId, amount) {
        const modal = document.getElementById('cardModal');
        document.getElementById('modalPlanId').value = planId;
        document.getElementById('modalAmountDisplay').textContent = amount;
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    function closeCardModal() {
        document.getElementById('cardModal').classList.remove('active');
        document.body.style.overflow = '';
    }
    function copyCardNumber() {
        const cardNumber = document.getElementById('cardNumberToCopy').innerText;
        navigator.clipboard.writeText(cardNumber.replace(/\s/g, '')).then(() => {
            showToast('success', I18N.successTitle, I18N.copied || 'شماره کارت کپی شد');
        });
    }

    // --- Drag & Drop ---
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('receipt');
    const uploadContent = document.getElementById('upload-content');
    const previewContainer = document.getElementById('preview-container');
    const previewImage = document.getElementById('preview-image');
    const submitBtn = document.getElementById('submitBtn');

    if(dropArea) {
        dropArea.addEventListener('click', () => fileInput.click());
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, (e) => {e.preventDefault(); e.stopPropagation()}, false);
        });
        ['dragenter', 'dragover'].forEach(eventName => dropArea.addEventListener(eventName, () => dropArea.classList.add('drag-over'), false));
        ['dragleave', 'drop'].forEach(eventName => dropArea.addEventListener(eventName, () => dropArea.classList.remove('drag-over'), false));
        dropArea.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files), false);
        fileInput.addEventListener('change', function() { handleFiles(this.files); });
    }

    function handleFiles(files) {
        if (files.length > 0) {
            const file = files[0];
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onloadend = function() {
                    previewImage.src = reader.result;
                    uploadContent.style.display = 'none';
                    previewContainer.style.display = 'block';
                }
                reader.readAsDataURL(file);
                if (fileInput.files.length === 0) {
                    const dt = new DataTransfer(); dt.items.add(file); fileInput.files = dt.files;
                }
                submitBtn.disabled = false;
            } else {
                showToast('error', 'خطا', 'لطفاً فقط فایل تصویری آپلود کنید.');
            }
        }
    }
    function removeImage(e) {
        e.stopPropagation();
        fileInput.value = ''; previewImage.src = '';
        previewContainer.style.display = 'none'; uploadContent.style.display = 'block';
        submitBtn.disabled = true;
    }

    // --- Stars Payment ---
    async function payWithStars(btn) {
        const planId = btn?.dataset?.planId;
        btn.disabled = true; const oldText = btn.innerHTML; btn.textContent = I18N.sendingText;
        try {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
            const res = await fetch("{{ route('subscription.sendStarInvoice') }}", {
                method: "POST", headers: { "X-CSRF-TOKEN": csrf, "Accept": "application/json", "Content-Type": "application/json" },
                body: JSON.stringify({ plan_id: planId })
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok || !data.success) { showToast('error', I18N.errorTitle, data.message || I18N.errorText); return; }
            showToast('success', I18N.successTitle, data.message || I18N.successText);
        } catch (e) { showToast('error', I18N.errorTitle, I18N.networkErrorText); } 
        finally { btn.disabled = false; btn.innerHTML = oldText; }
    }

    // --- Crypto Payment (NEW) ---
    async function payWithCrypto(btn) {
        const planId = btn?.dataset?.planId;
        const originalContent = btn.innerHTML;
        
        btn.disabled = true;
        btn.textContent = I18N.sendingText;

        try {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
            const res = await fetch("{{ route('payment.crypto') }}", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": csrf,
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ plan_id: planId })
            });

            const data = await res.json();

            if (res.ok && data.success) {
                showToast('success', I18N.successTitle, data.message);
            } else {
                showToast('error', I18N.errorTitle, data.message || I18N.errorText);
            }
        } catch (e) {
            showToast('error', I18N.errorTitle, I18N.networkErrorText);
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalContent;
        }
    }
</script>
@endsection