@extends('layouts.user', ['heading' => 'My Team / मेरी टीम'])

@section('content')
    <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
        <div class="rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Total Team / कुल टीम</div>
            <div class="text-2xl font-bold">{{ $summary['total_team'] }}</div>
        </div>
        <div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Active Team / एक्टिव</div>
            <div class="text-2xl font-bold">{{ $summary['active_team'] }}</div>
        </div>
        <div class="rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">This Month Joining / इस माह</div>
            <div class="text-2xl font-bold">{{ $summary['month_joining'] }}</div>
        </div>
    </div>

    <form method="GET" class="mt-4 flex flex-wrap gap-2">
        <select name="tab" class="rounded border p-2">
            <option value="direct" @selected($tab === 'direct')>Direct Team</option>
            <option value="binary" @selected($tab === 'binary')>Binary Team</option>
            <option value="levels" @selected($tab === 'levels')>Level View</option>
        </select>
        <input name="search" value="{{ $search }}" placeholder="Search name / ID / mobile" class="rounded border p-2" />
        <button class="rounded bg-slate-900 px-4 py-2 text-white">Apply</button>
    </form>

    <div class="mt-4 grid grid-cols-1 gap-3">
        @forelse($members as $member)
            <div class="rounded-2xl bg-white p-4 shadow">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">{{ $member->member_code }} - {{ $member->name }}</div>
                    <span class="rounded-full px-2 py-1 text-xs {{ $member->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">
                        {{ $member->status }}
                    </span>
                </div>
                <div class="mt-1 text-xs text-slate-500">Mobile: {{ $member->mobile }}</div>
                <div class="mt-1 text-xs text-slate-500">Package: ₹ {{ number_format((float) ($member->package_amount ?? 0), 2) }}</div>
                <div class="mt-1 text-xs text-slate-500">Joined: {{ optional($member->created_at)->format('Y-m-d') }}</div>
                @if(isset($member->level_depth))
                    <div class="mt-1 text-xs text-slate-500">Level: {{ $member->level_depth }} ({{ $member->level_leg ?? '-' }})</div>
                @endif
            </div>
        @empty
            <div class="rounded bg-white p-4 text-center text-slate-500">No team records found.</div>
        @endforelse
    </div>
@endsection