@extends('layouts.app')

@section('content')
<div class="academy-container" style="max-width: 700px;">
    <a href="{{ route('dashboard') }}" class="btn-back-icon-top">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
        </svg>
    </a>

    <h1>🏦 کیف پول من</h1>
    <p class="folder-description">موجودی خود را مدیریت کرده یا حساب خود را از طریق درگاه مستقیم بانکی شارژ کنید.</p>

    <!-- نمایش پیام‌های سیستم -->
    @if(session('success'))
        <div class="alert alert-success" style="display: block; margin-bottom: 20px;">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger" style="display: block; margin-bottom: 20px;">
            {{ session('error') }}
        </div>
    @endif

    <!-- کارت موجودی -->
    <div class="premium-balance-card" style="background: #e0e5ec; border-radius: 24px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.4); color: #4a5568; margin-top: 20px; box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8); text-align: center;">
        <div style="font-size: 0.9rem; color: #718096; text-transform: uppercase; tracking-wider: 1px; font-weight: 700;">موجودی کل قابل استفاده</div>
        
        <div style="display: flex; justify-content: center; gap: 30px; margin-top: 20px; flex-wrap: wrap;">
            <div>
                <div style="font-size: 2.2rem; font-weight: bold; color: var(--accent-color);">{{ number_format($wallet->available_toman) }}</div>
                <div style="font-size: 0.85rem; color: #718096; margin-top: 5px; font-weight: 600;">تومان 💵</div>
            </div>
            <div style="width: 1px; background: rgba(0,0,0,0.1);"></div>
            <div>
                <div style="font-size: 2.2rem; font-weight: bold; color: #f59e0b;">{{ number_format($wallet->available_star) }}</div>
                <div style="font-size: 0.85rem; color: #718096; margin-top: 5px; font-weight: 600;">Stars ⭐️</div>
            </div>
        </div>
    </div>

    <!-- فرم افزایش موجودی -->
    <h3 style="margin-top: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 10px; color: var(--accent-color);">⚡️ افزایش موجودی حساب</h3>
    <form action="{{ route('wallet.deposit') }}" method="POST" style="margin-top: 20px; display: flex; flex-direction: column; gap: 15px;">
        @csrf
        <div style="display: flex; flex-direction: column; gap: 5px;">
            <label for="amount" style="font-size: 0.9rem; font-weight: bold; color: #4a5568;">مبلغ شارژ (به تومان):</label>
            <input type="number" name="amount" id="amount" class="form-control" style="background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8); border-radius: 12px; padding: 12px; color: #4a5568; font-family: inherit; font-size: 1.1rem;" value="50000" min="10000" required>
        </div>

        <!-- دکمه‌های انتخاب سریع مبلغ -->
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <button type="button" onclick="setAmount(20000)" style="flex: 1; min-width: 80px; background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8); color: #4a5568; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;">۲۰,۰۰۰ تومان</button>
            <button type="button" onclick="setAmount(50000)" style="flex: 1; min-width: 80px; background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8); color: #4a5568; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;">۵۰,۰۰۰ تومان</button>
            <button type="button" onclick="setAmount(100000)" style="flex: 1; min-width: 80px; background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8); color: #4a5568; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;">۱۰۰,۰۰۰ تومان</button>
            <button type="button" onclick="setAmount(200000)" style="flex: 1; min-width: 80px; background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8); color: #4a5568; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;">۲۰۰,۰۰۰ تومان</button>
        </div>

        <button type="submit" class="btn-submit" style="background: var(--accent-color); color: #fff; font-weight: bold; border: none; padding: 14px; border-radius: 12px; cursor: pointer; font-size: 1rem; margin-top: 10px; box-shadow: 3px 3px 6px rgba(108, 92, 231, 0.3);">💳 اتصال به درگاه پرداخت آنلاین</button>
    </form>

    <!-- تراکنش‌های اخیر -->
    <h3 style="margin-top: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 10px; color: var(--accent-color);">📜 تاریخچه تراکنش‌ها</h3>
    <div style="overflow-x: auto; margin-top: 15px;">
        <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: right;">
            <thead>
                <tr style="border-bottom: 2px solid rgba(0, 0, 0, 0.1); color: #4a5568;">
                    <th style="padding: 10px;">بابت / توضیحات</th>
                    <th style="padding: 10px;">مبلغ</th>
                    <th style="padding: 10px;">وضعیت</th>
                    <th style="padding: 10px;">تاریخ تراکنش</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $tx)
                    <tr style="border-bottom: 1px solid rgba(0,0,0,0.08); color: #4a5568;">
                        <td style="padding: 12px 10px;">
                            <div>{{ $tx->description }}</div>
                            @if(isset($tx->is_admin_action) && $tx->is_admin_action)
                                <span style="font-size: 0.7rem; color: #6c5ce7; background: rgba(108, 92, 231, 0.15); padding: 2px 4px; border-radius: 3px;">مدیریتی</span>
                            @endif
                        </td>
                        <td style="padding: 12px 10px; font-weight: bold; color: #4a5568;">
                            {{ number_format($tx->amount) }} 
                            <span style="font-size: 0.8rem; font-weight: normal; color: #718096;">{{ $tx->currency === 'toman' ? 'تومان' : 'Stars' }}</span>
                        </td>
                        <td style="padding: 12px 10px;">
                            @if($tx->status === 'success' || $tx->status === 'available')
                                <span style="background: rgba(16, 185, 129, 0.15); color: #065f46; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: bold;">موفق</span>
                            @elseif($tx->status === 'pending')
                                <span style="background: rgba(245, 158, 11, 0.15); color: #92400e; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: bold;">⏳ در انتظار</span>
                            @else
                                <span style="background: rgba(239, 68, 68, 0.15); color: #991b1b; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: bold;">ناموفق</span>
                            @endif
                        </td>
                        <td style="padding: 12px 10px; font-size: 0.8rem; font-family: monospace;">{{ $tx->created_at }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 20px; color: #718096;">تراکنشی یافت نشد.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($transactions->hasPages())
        <div style="margin-top: 20px;">
            {{ $transactions->links() }}
        </div>
    @endif
</div>

<script>
function setAmount(val) {
    document.getElementById('amount').value = val;
}
</script>
@endsection