@extends('layouts.app')

@section('title', 'Tiếp thị liên kết - Locket Gold')

@section('content')
    @include('partials.header')

    <div class="lg:ml-64">
        @include('partials.topbar')

        <section class="py-16 lg:py-24 bg-secondary/30 min-h-screen">
            <div class="max-w-2xl mx-auto px-4 sm:px-6">

                {{-- Header --}}
                <div class="text-center mb-10 scroll-reveal">
                    <div class="text-5xl mb-3" style="filter:drop-shadow(0 0 20px rgba(245,197,24,0.3));">🤝</div>
                    <h2 class="text-3xl sm:text-4xl font-bold text-text mb-2">Tiếp thị <span class="text-accent">liên kết</span></h2>
                    <p class="text-text-muted text-sm">Giới thiệu bạn bè, nhận hoa hồng {{ $commissionRate }}% mỗi đơn hàng</p>
                </div>

                {{-- Referral Link Card --}}
                <div class="bg-secondary rounded-2xl border border-accent/15 p-6 mb-5 scroll-reveal">
                    <h3 class="text-sm font-bold text-text mb-3 flex items-center gap-2">🔗 Link giới thiệu của bạn</h3>
                    <div class="flex gap-2">
                        <input type="text" id="refLink" readonly
                               value="{{ url('/ref/' . $user->referral_code) }}"
                               class="flex-1 bg-primary border border-accent/15 rounded-xl px-4 py-3 text-text text-sm font-medium outline-none focus:border-accent" style="cursor:text;">
                        <button onclick="copyRef()" id="copyBtn"
                                class="px-5 py-3 bg-accent hover:bg-accent-dark text-white font-semibold text-sm rounded-xl shadow-lg shadow-accent/25 hover:-translate-y-0.5 transition-all border-0 cursor-pointer">
                            📋 Copy
                        </button>
                    </div>
                    <p class="text-[11px] text-text-muted mt-2">Mã giới thiệu: <strong class="text-accent">{{ $user->referral_code }}</strong></p>
                </div>

                {{-- Stats Cards (Horizontal Strip) --}}
                <div class="flex items-stretch gap-3 mb-5 scroll-reveal overflow-x-auto">
                    <div class="bg-secondary border border-accent/15 rounded-2xl px-6 py-4 text-center min-w-[120px] flex-1">
                        <div class="text-3xl font-extrabold text-text">{{ $totalReferrals }}</div>
                        <div class="text-[10px] font-semibold text-text-muted uppercase tracking-wider mt-1">Đã giới thiệu</div>
                    </div>
                    <div class="bg-secondary border border-accent/15 rounded-2xl px-6 py-4 text-center min-w-[120px] flex-1">
                        <div class="text-3xl font-extrabold text-accent">{{ $buyers }}</div>
                        <div class="text-[10px] font-semibold text-text-muted uppercase tracking-wider mt-1">Người mua gói</div>
                    </div>
                    <div class="bg-secondary border border-accent/15 rounded-2xl px-6 py-4 text-center min-w-[120px] flex-1">
                        <div class="text-3xl font-extrabold text-green-400">{{ number_format($totalEarnings) }}đ</div>
                        <div class="text-[10px] font-semibold text-text-muted uppercase tracking-wider mt-1">Tổng hoa hồng</div>
                    </div>
                    <div class="bg-secondary border border-accent/15 rounded-2xl px-6 py-4 text-center min-w-[120px] flex-1">
                        <div class="text-3xl font-extrabold text-green-400">{{ number_format($balance) }}đ</div>
                        <div class="text-[10px] font-semibold text-text-muted uppercase tracking-wider mt-1">Số dư</div>
                    </div>
                </div>

                {{-- How it works --}}
                <div class="bg-secondary border border-accent/15 rounded-2xl p-5 mb-5 scroll-reveal">
                    <h3 class="text-sm font-bold text-text mb-3">📖 Cách hoạt động</h3>
                    <div class="space-y-3">
                        <div class="flex items-start gap-3">
                            <div class="w-7 h-7 rounded-full bg-accent/10 flex items-center justify-center shrink-0 border border-accent/20">
                                <span class="text-xs font-bold text-accent">1</span>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-text">Chia sẻ link giới thiệu</div>
                                <div class="text-xs text-text-muted">Gửi link cho bạn bè qua mạng xã hội, tin nhắn...</div>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-7 h-7 rounded-full bg-accent/10 flex items-center justify-center shrink-0 border border-accent/20">
                                <span class="text-xs font-bold text-accent">2</span>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-text">Bạn bè đăng ký & mua gói</div>
                                <div class="text-xs text-text-muted">Họ tạo tài khoản qua link và nâng cấp gói bất kỳ</div>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-7 h-7 rounded-full bg-green-500/10 flex items-center justify-center shrink-0 border border-green-500/20">
                                <span class="text-xs font-bold text-green-400">3</span>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-text">Nhận hoa hồng {{ $commissionRate }}%</div>
                                <div class="text-xs text-text-muted">Bạn được <strong>{{ $commissionRate }}%</strong> giá trị đơn hàng cho mỗi giao dịch thành công</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Referral List (Collapsible) --}}
                <div class="bg-secondary border border-accent/15 rounded-2xl overflow-hidden scroll-reveal">
                    <button
                        onclick="toggleReferralList()"
                        class="w-full px-5 py-4 flex items-center justify-between hover:bg-accent/5 transition-colors cursor-pointer"
                    >
                        <h3 class="text-sm font-bold text-text flex items-center gap-2">👥 Danh sách người đã giới thiệu</h3>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-text-muted font-medium">{{ $referrals->count() }} người</span>
                            <svg id="referral-arrow" class="w-4 h-4 text-text-muted transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </div>
                    </button>

                    <div id="referral-list" class="hidden divide-y divide-accent/10">
                    @if($referrals->count() > 0)
                        @foreach($referrals as $ref)
                        <div class="px-5 py-3.5 flex items-center justify-between hover:bg-accent/5 transition-colors">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center border border-accent/20">
                                    <span class="text-xs font-bold text-accent">{{ strtoupper(substr($ref->username, 0, 1)) }}</span>
                                </div>
                                <div>
                                    <div class="text-sm font-semibold text-text">{{ $ref->username }}</div>
                                    <div class="text-[10px] text-text-muted">{{ $ref->created_at ? \Carbon\Carbon::parse($ref->created_at)->format('d/m/Y') : '' }}</div>
                                </div>
                            </div>
                            <div class="text-right">
                                @if($ref->status === 'paid')
                                    <div class="text-sm font-bold text-green-400">+{{ number_format($ref->commission) }}đ</div>
                                    <div class="text-[10px] text-green-400 font-medium">Đã thanh toán</div>
                                @elseif($ref->current_plan)
                                    <div class="text-[10px] font-medium px-2 py-1 rounded-full bg-accent/10 text-accent border border-accent/20">Đang dùng {{ ucfirst($ref->current_plan) }}</div>
                                @else
                                    <div class="text-[10px] font-medium px-2 py-1 rounded-full bg-primary text-text-muted border border-accent/10">Chưa mua gói</div>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    @else
                    <div class="px-5 py-12 text-center">
                        <div class="text-4xl mb-3">🎯</div>
                        <div class="text-sm font-semibold text-text-muted">Chưa có ai đăng ký qua link của bạn</div>
                        <div class="text-xs text-text-muted mt-1">Chia sẻ link ở trên để bắt đầu kiếm hoa hồng!</div>
                    </div>
                    @endif
                    </div>
                </div>

                <script>
                function toggleReferralList() {
                    const list = document.getElementById('referral-list');
                    const arrow = document.getElementById('referral-arrow');
                    list.classList.toggle('hidden');
                    arrow.classList.toggle('rotate-180');
                }
                </script>

                {{-- Withdraw Section --}}
                <div class="bg-secondary border border-accent/15 rounded-2xl p-5 mt-5 scroll-reveal">
                    <h3 class="text-sm font-bold text-text mb-4 flex items-center gap-2">💰 Rút tiền hoa hồng</h3>

                    @if(session('success'))
                    <div class="mb-4 px-4 py-3 bg-green-500/10 border border-green-500/25 rounded-xl text-green-400 text-sm font-medium">✅ {{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                    <div class="mb-4 px-4 py-3 bg-red-500/10 border border-red-500/25 rounded-xl text-red-400 text-sm font-medium">❌ {{ session('error') }}</div>
                    @endif

                    {{-- Balance --}}
                    <div class="bg-primary border border-accent/15 rounded-xl p-4 mb-4">
                        <div class="text-xs text-text-muted font-medium mb-1">Số dư khả dụng</div>
                        <div class="text-2xl font-extrabold text-text">{{ number_format($balance) }}đ</div>
                        @if($balance < 50000)
                        <div class="mt-2">
                            <div class="flex items-center justify-between text-[10px] text-text-muted mb-1">
                                <span>Tiến trình rút tiền</span>
                                <span>{{ number_format($balance) }} / 50.000đ</span>
                            </div>
                            <div class="w-full h-2 bg-secondary rounded-full overflow-hidden">
                                <div class="h-full bg-accent rounded-full transition-all" style="width:{{ min(100, $balance / 500) }}%"></div>
                            </div>
                            <p class="text-[10px] text-text-muted mt-1">Cần thêm <strong>{{ number_format(50000 - $balance) }}đ</strong> để đủ điều kiện rút</p>
                        </div>
                        @endif
                    </div>

                    @if($balance >= 50000 && !$hasPending)
                    <form method="POST" action="{{ route('affiliate.withdraw') }}">
                        @csrf
                        <div class="grid grid-cols-2 gap-3 mb-3">
                            <div>
                                <label class="block text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-1">Ngân hàng</label>
                                <input type="text" name="bank_name" required placeholder="VD: MBBank, Vietcombank..." class="w-full bg-primary border border-accent/15 rounded-xl px-3 py-2.5 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all font-medium">
                            </div>
                            <div>
                                <label class="block text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-1">Số tài khoản</label>
                                <input type="text" name="bank_account" required placeholder="Số tài khoản..." class="w-full bg-primary border border-accent/15 rounded-xl px-3 py-2.5 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all font-medium">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3 mb-3">
                            <div>
                                <label class="block text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-1">Chủ tài khoản</label>
                                <input type="text" name="bank_owner" required placeholder="Tên chủ TK..." class="w-full bg-primary border border-accent/15 rounded-xl px-3 py-2.5 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all font-medium" style="text-transform:uppercase;">
                            </div>
                            <div>
                                <label class="block text-[10px] font-semibold text-text-muted uppercase tracking-wider mb-1">Số tiền rút</label>
                                <input type="number" name="amount" required min="50000" max="{{ $balance }}" value="{{ $balance }}" class="w-full bg-primary border border-accent/15 rounded-xl px-3 py-2.5 text-sm text-text outline-none focus:border-accent focus:ring-2 focus:ring-accent/15 transition-all font-medium">
                            </div>
                        </div>
                        <button type="submit" class="w-full py-3 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl shadow-lg hover:-translate-y-0.5 transition-all border-0 cursor-pointer">
                            💸 Yêu cầu rút tiền
                        </button>
                        <p class="text-[10px] text-text-muted mt-2 text-center">Tối thiểu 50.000đ • Admin sẽ duyệt trong 24h</p>
                    </form>
                    @elseif($hasPending)
                    <div class="text-center py-4">
                        <div class="text-3xl mb-2">⏳</div>
                        <div class="text-sm font-semibold text-amber-400">Đang chờ admin duyệt yêu cầu rút tiền</div>
                        <div class="text-xs text-text-muted mt-1">Vui lòng chờ admin xử lý trước khi gửi yêu cầu mới</div>
                    </div>
                    @elseif($balance < 50000)
                    <div class="text-center py-2">
                        <div class="text-xs text-text-muted">Giới thiệu thêm bạn bè để đạt mức rút tối thiểu 50.000đ</div>
                    </div>
                    @endif
                </div>

                {{-- Withdrawal History --}}
                @if($withdrawals->count() > 0)
                <div class="bg-secondary border border-accent/15 rounded-2xl overflow-hidden mt-5 scroll-reveal">
                    <div class="px-5 py-4 border-b border-accent/10 bg-primary/20">
                        <h3 class="text-sm font-bold text-text flex items-center gap-2">📋 Lịch sử rút tiền</h3>
                    </div>
                    <div class="divide-y divide-accent/10">
                        @foreach($withdrawals as $wd)
                        <div class="px-5 py-3.5 flex items-center justify-between hover:bg-accent/5 transition-colors">
                            <div>
                                <div class="text-sm font-semibold text-text">{{ number_format($wd->amount) }}đ</div>
                                <div class="text-[10px] text-text-muted">{{ $wd->bank_name }} • {{ $wd->bank_account }}</div>
                                <div class="text-[10px] text-text-muted">{{ $wd->created_at ? \Carbon\Carbon::parse($wd->created_at)->format('d/m/Y H:i') : '' }}</div>
                            </div>
                            <div>
                                @if($wd->status === 'approved')
                                    <span class="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-green-500/10 text-green-400 border border-green-500/20">✅ Đã duyệt</span>
                                @elseif($wd->status === 'rejected')
                                    <span class="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-red-500/10 text-red-400 border border-red-500/20">❌ Từ chối</span>
                                @else
                                    <span class="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20">⏳ Chờ duyệt</span>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>
        </section>
    </div>

    <script>
        function copyRef() {
            const input = document.getElementById('refLink');
            navigator.clipboard.writeText(input.value).then(() => {
                const btn = document.getElementById('copyBtn');
                btn.innerHTML = '✅ Copied!';
                setTimeout(() => btn.innerHTML = '📋 Copy', 2000);
            });
        }
    </script>
@endsection