@extends('layouts.marketer')

@section('title')
Member Details - {{ $user->username ?? $user->first_name }}
@endsection

@section('content')

<div class="dashboard-container">
    <!-- Breadcrumb -->
    <div class="breadcrumb-container">
        <a href="{{ route('marketer') }}" class="breadcrumb-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Back to Dashboard
        </a>
    </div>

    <!-- Member Header -->
    <div class="member-header-card">
        <div class="member-header-content">
            <div class="member-header-left">
                <div class="member-large-avatar">
                    {{ strtoupper(substr($user->username ?? $user->first_name, 0, 2)) }}
                </div>
                <div class="member-header-info">
                    <h1 class="member-header-title">
                        {{ ucfirst($user->username ?? $user->first_name . ' ' . $user->last_name) }}
                    </h1>
                    <p class="member-header-email">{{ $user->email }}</p>
                    <div class="member-header-badges">
                        @if(count($user->referrals) > 0)
                            <span class="badge badge-success">Active Affiliate</span>
                        @else
                            <span class="badge badge-danger">Inactive Affiliate</span>
                        @endif
                        @if(!$user->username)
                            <span class="badge badge-warning">No Store Setup</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="member-header-right">
                <div class="quick-stat-card">
                    <span class="quick-stat-label">Member Since</span>
                    <span class="quick-stat-value">{{ date('M j, Y', strtotime($user->created_at)) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Member Stats Grid -->
    <div class="member-stats-grid">
        <div class="member-stat-card stat-primary">
            <div class="member-stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
            </div>
            <div class="member-stat-content">
                <p class="member-stat-label">Total Team Size</p>
                <h3 class="member-stat-value">{{ number_format($totalTeamSize) }}</h3>
                <span class="member-stat-detail">Across all 3 levels</span>
            </div>
        </div>

        <div class="member-stat-card stat-success">
            <div class="member-stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="1" x2="12" y2="23"></line>
                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                </svg>
            </div>
            <div class="member-stat-content">
                <p class="member-stat-label">Main Balance</p>
                <h3 class="member-stat-value">${{ number_format($user->balance, 2) }}</h3>
                <span class="member-stat-detail">Current wallet balance</span>
            </div>
        </div>

        <div class="member-stat-card stat-info">
            <div class="member-stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4"></path>
                    <path d="M4 6v12c0 1.1.9 2 2 2h14v-4"></path>
                    <path d="M18 12a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4v-4h-4z"></path>
                </svg>
            </div>
            <div class="member-stat-content">
                <p class="member-stat-label">Rebate Balance</p>
                <h3 class="member-stat-value">${{ number_format($user->rebates, 2) }}</h3>
                <span class="member-stat-detail">Accumulated rebates</span>
            </div>
        </div>

        <div class="member-stat-card stat-warning">
            <div class="member-stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                    <polyline points="17 6 23 6 23 12"></polyline>
                </svg>
            </div>
            <div class="member-stat-content">
                <p class="member-stat-label">Total Profits</p>
                <h3 class="member-stat-value">${{ number_format($totalProfits, 2) }}</h3>
                <span class="member-stat-detail">From bids & sells</span>
            </div>
        </div>
    </div>

    <!-- Financial Overview -->
    <div class="financial-overview-section">
        <h2 class="section-title">Financial Overview</h2>
        <div class="financial-grid">
            <div class="financial-card">
                <div class="financial-card-header">
                    <h3>Deposits</h3>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <polyline points="19 12 12 19 5 12"></polyline>
                    </svg>
                </div>
                <div class="financial-card-body">
                    <p class="financial-amount financial-amount-success">${{ number_format($totalDeposits, 2) }}</p>
                    <p class="financial-label">Total deposits made</p>
                </div>
            </div>

            <div class="financial-card">
                <div class="financial-card-header">
                    <h3>Withdrawals</h3>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="12" y1="19" x2="12" y2="5"></line>
                        <polyline points="5 12 12 5 19 12"></polyline>
                    </svg>
                </div>
                <div class="financial-card-body">
                    <p class="financial-amount financial-amount-danger">${{ number_format($totalWithdrawals, 2) }}</p>
                    <p class="financial-label">Total withdrawals made</p>
                </div>
            </div>

            <div class="financial-card">
                <div class="financial-card-header">
                    <h3>Net Position</h3>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                </div>
                <div class="financial-card-body">
                    <p class="financial-amount {{ ($totalDeposits - $totalWithdrawals) >= 0 ? 'financial-amount-success' : 'financial-amount-danger' }}">
                        ${{ number_format($totalDeposits - $totalWithdrawals, 2) }}
                    </p>
                    <p class="financial-label">Deposits minus withdrawals</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Downline Breakdown -->
    <div class="downline-section">
        <h2 class="section-title">Downline Network Breakdown</h2>
        <div class="downline-level-cards">
            <!-- First Generation -->
            <div class="downline-level-card level-1-card">
                <div class="downline-level-header">
                    <div class="downline-level-title">
                        <h3>First Generation</h3>
                        <span class="downline-level-badge">Direct Referrals</span>
                    </div>
                    <div class="downline-level-count">{{ count($first) }}</div>
                </div>
                <div class="downline-level-body">
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Deposits</span>
                        <span class="downline-metric-value">${{ number_format($firstGenDeposits, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Withdrawals</span>
                        <span class="downline-metric-value">${{ number_format($firstGenWithdrawals, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Profits</span>
                        <span class="downline-metric-value text-success">${{ number_format($firstGenProfits, 2) }}</span>
                    </div>
                </div>
            </div>

            <!-- Second Generation -->
            <div class="downline-level-card level-2-card">
                <div class="downline-level-header">
                    <div class="downline-level-title">
                        <h3>Second Generation</h3>
                        <span class="downline-level-badge">Level 2</span>
                    </div>
                    <div class="downline-level-count">{{ count($second) }}</div>
                </div>
                <div class="downline-level-body">
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Deposits</span>
                        <span class="downline-metric-value">${{ number_format($secondGenDeposits, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Withdrawals</span>
                        <span class="downline-metric-value">${{ number_format($secondGenWithdrawals, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Profits</span>
                        <span class="downline-metric-value text-success">${{ number_format($secondGenProfits, 2) }}</span>
                    </div>
                </div>
            </div>

            <!-- Third Generation -->
            <div class="downline-level-card level-3-card">
                <div class="downline-level-header">
                    <div class="downline-level-title">
                        <h3>Third Generation</h3>
                        <span class="downline-level-badge">Level 3</span>
                    </div>
                    <div class="downline-level-count">{{ count($third) }}</div>
                </div>
                <div class="downline-level-body">
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Deposits</span>
                        <span class="downline-metric-value">${{ number_format($thirdGenDeposits, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Withdrawals</span>
                        <span class="downline-metric-value">${{ number_format($thirdGenWithdrawals, 2) }}</span>
                    </div>
                    <div class="downline-metric">
                        <span class="downline-metric-label">Total Profits</span>
                        <span class="downline-metric-value text-success">${{ number_format($thirdGenProfits, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Downline Members Table -->
    <div class="members-table-section">
        <h2 class="section-title">Downline Members</h2>
        <div class="members-tabs">
            <button class="members-tab-btn active" data-generation="1">
                <span class="tab-label-full">First Generation ({{ $firstGenMembers->total() }})</span>
                <span class="tab-label-short">1st ({{ $firstGenMembers->total() }})</span>
            </button>
            <button class="members-tab-btn" data-generation="2">
                <span class="tab-label-full">Second Generation ({{ $secondGenMembers->total() }})</span>
                <span class="tab-label-short">2nd ({{ $secondGenMembers->total() }})</span>
            </button>
            <button class="members-tab-btn" data-generation="3">
                <span class="tab-label-full">Third Generation ({{ $thirdGenMembers->total() }})</span>
                <span class="tab-label-short">3rd ({{ $thirdGenMembers->total() }})</span>
            </button>
        </div>

        <div class="members-tab-content">
            <!-- First Generation Table -->
            <div class="members-tab-pane active" data-generation="1">
                <!-- Mobile Cards -->
                <div class="mobile-cards mobile-only">
                    @forelse($firstGenMembers as $member)
                    <div class="member-mobile-card">
                        <div class="member-mobile-header">
                            <div class="member-avatar member-avatar-sm">
                                {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                            </div>
                            <div class="member-mobile-info">
                                <h4>{{ ucfirst($member->username ?? $member->first_name) }}</h4>
                                <p>{{ $member->email }}</p>
                                @if(count($member->referrals) > 0)
                                    <span class="status-badge status-active">Active</span>
                                @else
                                    <span class="status-badge status-inactive">Inactive</span>
                                @endif
                            </div>
                        </div>
                        <div class="member-mobile-stats">
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Balance</span>
                                <span class="mobile-stat-value">${{ number_format($member->balance, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Deposits</span>
                                <span class="mobile-stat-value text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Withdrawals</span>
                                <span class="mobile-stat-value text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Profits</span>
                                <span class="mobile-stat-value text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Team Size</span>
                                <span class="team-size-badge">{{ number_format(count($member->referrals)) }}</span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state">
                        <p>No members in this generation</p>
                    </div>
                    @endforelse
                </div>

                <!-- Desktop Table -->
                <div class="table-container desktop-only">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Email</th>
                                <th>Balance</th>
                                <th>Deposits</th>
                                <th>Withdrawals</th>
                                <th>Profits</th>
                                <th>Team Size</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($firstGenMembers as $member)
                            <tr>
                                <td>
                                    <div class="member-cell">
                                        <div class="member-avatar member-avatar-sm">
                                            {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                                        </div>
                                        <span class="member-name">{{ ucfirst($member->username ?? $member->first_name) }}</span>
                                    </div>
                                </td>
                                <td class="text-muted">{{ $member->email }}</td>
                                <td class="text-bold">${{ number_format($member->balance, 2) }}</td>
                                <td class="text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</td>
                                <td class="text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</td>
                                <td class="text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</td>
                                <td>
                                    <span class="team-size-badge">{{ number_format($memberDetails[$member->id]['team_size'] ?? 0) }}</span>
                                </td>
                                <td>
                                    @if(count($member->referrals) > 0)
                                        <span class="status-badge status-active">Active</span>
                                    @else
                                        <span class="status-badge status-inactive">Inactive</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">No members in this generation</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($firstGenMembers->hasPages())
                <div class="pagination-wrapper">
                    {{ $firstGenMembers->links('pagination::bootstrap-4') }}
                </div>
                @endif
            </div>

            <!-- Second Generation Table -->
            <div class="members-tab-pane" data-generation="2">
                <!-- Mobile Cards -->
                <div class="mobile-cards mobile-only">
                    @forelse($secondGenMembers as $member)
                    <div class="member-mobile-card">
                        <div class="member-mobile-header">
                            <div class="member-avatar member-avatar-sm">
                                {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                            </div>
                            <div class="member-mobile-info">
                                <h4>{{ ucfirst($member->username ?? $member->first_name) }}</h4>
                                <p>{{ $member->email }}</p>
                                @if(count($member->referrals) > 0)
                                    <span class="status-badge status-active">Active</span>
                                @else
                                    <span class="status-badge status-inactive">Inactive</span>
                                @endif
                            </div>
                        </div>
                        <div class="member-mobile-stats">
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Balance</span>
                                <span class="mobile-stat-value">${{ number_format($member->balance, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Deposits</span>
                                <span class="mobile-stat-value text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Withdrawals</span>
                                <span class="mobile-stat-value text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Profits</span>
                                <span class="mobile-stat-value text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Team Size</span>
                                <span class="team-size-badge">{{ number_format($memberDetails[$member->id]['team_size'] ?? 0) }}</span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state">
                        <p>No members in this generation</p>
                    </div>
                    @endforelse
                </div>

                <!-- Desktop Table -->
                <div class="table-container desktop-only">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Email</th>
                                <th>Balance</th>
                                <th>Deposits</th>
                                <th>Withdrawals</th>
                                <th>Profits</th>
                                <th>Team Size</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($secondGenMembers as $member)
                            <tr>
                                <td>
                                    <div class="member-cell">
                                        <div class="member-avatar member-avatar-sm">
                                            {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                                        </div>
                                        <span class="member-name">{{ ucfirst($member->username ?? $member->first_name) }}</span>
                                    </div>
                                </td>
                                <td class="text-muted">{{ $member->email }}</td>
                                <td class="text-bold">${{ number_format($member->balance, 2) }}</td>
                                <td class="text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</td>
                                <td class="text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</td>
                                <td class="text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</td>
                                <td>
                                    <span class="team-size-badge">{{ number_format($memberDetails[$member->id]['team_size'] ?? 0) }}</span>
                                </td>
                                <td>
                                    @if(count($member->referrals) > 0)
                                        <span class="status-badge status-active">Active</span>
                                    @else
                                        <span class="status-badge status-inactive">Inactive</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">No members in this generation</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($secondGenMembers->hasPages())
                <div class="pagination-wrapper">
                    {{ $secondGenMembers->links('pagination::bootstrap-4') }}
                </div>
                @endif
            </div>

            <!-- Third Generation Table -->
            <div class="members-tab-pane" data-generation="3">
                <!-- Mobile Cards -->
                <div class="mobile-cards mobile-only">
                    @forelse($thirdGenMembers as $member)
                    <div class="member-mobile-card">
                        <div class="member-mobile-header">
                            <div class="member-avatar member-avatar-sm">
                                {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                            </div>
                            <div class="member-mobile-info">
                                <h4>{{ ucfirst($member->username ?? $member->first_name) }}</h4>
                                <p>{{ $member->email }}</p>
                                @if(count($member->referrals) > 0)
                                    <span class="status-badge status-active">Active</span>
                                @else
                                    <span class="status-badge status-inactive">Inactive</span>
                                @endif
                            </div>
                        </div>
                        <div class="member-mobile-stats">
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Balance</span>
                                <span class="mobile-stat-value">${{ number_format($member->balance, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Deposits</span>
                                <span class="mobile-stat-value text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Withdrawals</span>
                                <span class="mobile-stat-value text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Profits</span>
                                <span class="mobile-stat-value text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</span>
                            </div>
                            <div class="mobile-stat">
                                <span class="mobile-stat-label">Team Size</span>
                                <span class="team-size-badge">{{ number_format($memberDetails[$member->id]['team_size'] ?? 0) }}</span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state">
                        <p>No members in this generation</p>
                    </div>
                    @endforelse
                </div>

                <!-- Desktop Table -->
                <div class="table-container desktop-only">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Email</th>
                                <th>Balance</th>
                                <th>Deposits</th>
                                <th>Withdrawals</th>
                                <th>Profits</th>
                                <th>Team Size</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($thirdGenMembers as $member)
                            <tr>
                                <td>
                                    <div class="member-cell">
                                        <div class="member-avatar member-avatar-sm">
                                            {{ strtoupper(substr($member->username ?? $member->first_name, 0, 2)) }}
                                        </div>
                                        <span class="member-name">{{ ucfirst($member->username ?? $member->first_name) }}</span>
                                    </div>
                                </td>
                                <td class="text-muted">{{ $member->email }}</td>
                                <td class="text-bold">${{ number_format($member->balance, 2) }}</td>
                                <td class="text-success">${{ number_format($memberDetails[$member->id]['deposits'] ?? 0, 2) }}</td>
                                <td class="text-danger">${{ number_format($memberDetails[$member->id]['withdrawals'] ?? 0, 2) }}</td>
                                <td class="text-info">${{ number_format($memberDetails[$member->id]['profits'] ?? 0, 2) }}</td>
                                <td>
                                    <span class="team-size-badge">{{ number_format($memberDetails[$member->id]['team_size'] ?? 0) }}</span>
                                </td>
                                <td>
                                    @if(count($member->referrals) > 0)
                                        <span class="status-badge status-active">Active</span>
                                    @else
                                        <span class="status-badge status-inactive">Inactive</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">No members in this generation</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($thirdGenMembers->hasPages())
                <div class="pagination-wrapper">
                    {{ $thirdGenMembers->links('pagination::bootstrap-4') }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('marketer-styles')

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Generation tabs functionality
    const tabButtons = document.querySelectorAll('.members-tab-btn');
    const tabPanes = document.querySelectorAll('.members-tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const generation = button.getAttribute('data-generation');

            // Remove active class from all
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));

            // Add active class to clicked
            button.classList.add('active');
            document.querySelector(`.members-tab-pane[data-generation="${generation}"]`).classList.add('active');
        });
    });
});
</script>

@endsection