@extends('layouts.UserDashboard')
@section('user')
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Team Members</h4>
                <div class="page-title-right">
                    <a href="{{ route('user.dashboard') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- Members List Card -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">Team Members ({{ $members->total() }})</h5>
                </div>
                <div class="card-body p-0">
                    {{-- Desktop Table View --}}
                    <div class="table-responsive d-none d-md-block">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4">Profile & Hierarchy</th>
                                    <th>Role</th>
                                    <th class="text-center">User ID</th>
                                    <th class="text-center">Coin / Room Level</th>
                                    <th class="text-center">Total Dollar</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($members as $member)
                                    @php
                                        $role = $member->getRoleNames()[0] ?? 'User';

                                        // Define Hierarchy Visuals
                                        $bgClass = '';
                                        $indent = 'ps-4';
                                        $border = '';
                                        $badgeClass = 'bg-secondary';

                                        if ($role === 'bd') {
                                            $bgClass = 'bg-primary-subtle';
                                            $border = 'border-left: 5px solid #0d6efd;';
                                            $badgeClass = 'bg-primary';
                                        } elseif ($role === 'agency') {
                                            $bgClass = 'bg-warning-subtle';
                                            // $indent = 'ps-5';
                                            $border = 'border-left: 5px solid #ffc107;';
                                            $badgeClass = 'bg-warning text-dark';
                                        } elseif ($role === 'host') {
                                            $bgClass = 'bg-info-subtle';
                                            $indent = 'style="padding-left: 4.5rem !important;"';
                                            $border = 'border-left: 5px solid #0dcaf0;';
                                            $badgeClass = 'bg-info';
                                        }
                                    @endphp

                                    <tr class="{{ $bgClass }}">
                                        <td class="{{ $indent }}" style="{{ $border }}">
                                            <div class="d-flex align-items-center">
                                                <div class="position-relative">
                                                    {{-- @if ($role !== 'bd')
                                                        <i class="fas fa-level-up-alt fa-rotate-90 position-absolute text-muted"
                                                            style="left: -25px; top: 12px;"></i>
                                                    @endif --}}
                                                    <img src="{{ $member->user_profile->profile_image ? asset($member->user_profile->profile_image) : 'https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg?semt=ais_hybrid&w=740' }}"
                                                        alt="Profile" class="rounded-circle me-3 border shadow-sm"
                                                        style="width:42px; height:42px; object-fit:cover;">
                                                </div>
                                                <div>
                                                    <div class="fw-bold text-dark mb-0">{{ $member->name ?? 'N/A' }}</div>
                                                    <small class="text-muted d-block" style="font-size: 0.75rem;">Added by:
                                                        {{ $member->addedBy->adder->name ?? 'Direct' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span
                                                class="badge {{ $badgeClass }} px-2 py-1 uppercase">{{ $role }}</span>
                                        </td>
                                        <td class="text-center">
                                            <code class="text-primary fw-bold">#{{ $member->user_id }}</code>
                                        </td>
                                        <td class="text-center">
                                            @php
                                                $coin = $member->room_levels->first()->level->level_coin ?? 0;
                                            @endphp
                                            <span class="badge bg-white text-info border border-info px-2">
                                                <i class="fas fa-gem me-1"></i> {{ number_format($coin) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span
                                                class="fw-bold text-success">${{ number_format($member->total_dollar ?? 0, 2) }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-5 text-muted">
                                            <i class="fas fa-users-slash fa-3x mb-3 opacity-25"></i>
                                            <p>No hierarchy members found.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Mobile Card View --}}
                    <div class="d-block d-md-none">
                        @forelse($members as $member)
                            @php
                                $role = $member->getRoleNames()[0] ?? 'User';
                                $mobileClass = '';
                                $mobileStyle = '';

                                if ($role === 'bd') {
                                    $mobileClass = 'bg-primary-subtle border-start border-primary border-4';
                                } elseif ($role === 'agency') {
                                    $mobileClass = 'bg-warning-subtle border-start border-warning border-4 ms-3';
                                } elseif ($role === 'host') {
                                    $mobileClass = 'bg-info-subtle border-start border-info border-4 ms-5';
                                }
                            @endphp
                            <div class="p-3 border-bottom {{ $mobileClass }}">
                                <div class="d-flex align-items-center mb-2">
                                    <img src="{{ $member->user_profile->profile_image ? asset($member->user_profile->profile_image) : 'https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg?semt=ais_hybrid&w=740' }}"
                                        class="rounded-circle me-3 border"
                                        style="width:45px; height:45px; object-fit:cover;">
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="mb-0 fw-bold">{{ $member->name }}</h6>
                                                <small class="text-muted">#{{ $member->user_id }}</small>
                                            </div>
                                            <span
                                                class="badge {{ $role === 'bd' ? 'bg-primary' : ($role === 'agency' ? 'bg-warning text-dark' : 'bg-info') }}">
                                                {{ ucfirst($role) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <div class="bg-white border rounded p-1 px-2 text-center">
                                            <small class="text-muted d-block" style="font-size: 0.7rem;">Coins</small>
                                            <span
                                                class="fw-bold text-info small">{{ number_format($member->room_levels->first()->level->level_coin ?? 0) }}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="bg-white border rounded p-1 px-2 text-center">
                                            <small class="text-muted d-block" style="font-size: 0.7rem;">Total $</small>
                                            <span
                                                class="fw-bold text-success small">${{ number_format($member->total_dollar ?? 0, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5 text-muted">No members found.</div>
                        @endforelse
                    </div>
                </div>
                <!-- Desktop Table View -->
                {{-- <div class="table-responsive d-none d-md-block">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th class="ps-4">Profile</th>
                                <th>Role</th>
                                <th class="text-center">User ID</th>
                                <th class="text-center">Coin / Room Level</th>
                                <th class="text-center">Total Dollar</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($members as $member)
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <img
                                                src="{{ $member->user_profile->profile_image ? asset($member->user_profile->profile_image) : 'https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg?semt=ais_hybrid&w=740' }}"
                                                alt="Profile" class="rounded-circle me-3"
                                                style="width:45px; height:45px; object-fit:cover;">
                                            <div>
                                                <div class="fw-semibold">{{ $member->name ?? 'N/A' }}</div>
                                                <small class="text-muted">{{ $member->email ?? '' }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $member->getRoleNames()[0] ?? 'User' }}</span>
                                    </td>
                                    <td class="text-center">
                                        <code class="text-dark">#{{ $member->user_id }}</code>
                                    </td>
                                    <td class="text-center">
                                        <small class="text-muted d-block">
                                            @if ($member->room_levels && $member->room_levels->count() > 0)
                                                Room Level
                                            @else
                                                N/A
                                            @endif
                                        </small>
                                        @if ($member->room_levels && $member->room_levels->count() > 0)
                                            @php
                                                $highestRoomLevel = $member->room_levels->first();
                                                $displayAmount = $highestRoomLevel->level->level_coin ?? 0;
                                                $levelName = $highestRoomLevel->level ? $highestRoomLevel->level->level_name : 'Room Level';
                                            @endphp
                                            <span class="badge bg-info text-white fs-6" title="{{ $levelName }}">
                                                {{ $displayAmount }}
                                            </span>
                                        @else
                                            <span
                                                class="badge bg-warning text-dark fs-6">0</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success fs-6">${{ $member->total_dollar ?? 0 }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-users fa-2x mb-3"></i>
                                            <p class="mb-0">No team members found.</p>
                                            <small>Your team members will appear here.</small>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div> --}}

                <!-- Mobile Card View -->
                {{-- <div class="d-block d-md-none">
                        @forelse($members as $member)
                            <div class="border-bottom p-3">
                                <div class="d-flex align-items-start mb-2">
                                    <img
                                        src="{{ $member->user_profile->profile_image ? asset($member->user_profile->profile_image) : 'https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg?semt=ais_hybrid&w=740' }}"
                                        alt="Profile" class="rounded-circle me-3"
                                        style="width:50px; height:50px; object-fit:cover;">
                                    <div class="flex-fill">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="mb-1 fw-semibold">{{ $member->name ?? 'N/A' }}</h6>
                                                <small class="text-muted">{{ $member->email ?? '' }}</small>
                                            </div>
                                            <span
                                                class="badge bg-primary">{{ $member->getRoleNames()[0] ?? 'User' }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row text-center mt-2">
                                    <div class="col-4">
                                        <small class="text-muted d-block">User ID</small>
                                        <code class="text-dark">#{{ $member->user_id }}</code>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block">
                                            @if ($member->room_levels && $member->room_levels->count() > 0)
                                                Room Level
                                            @else
                                                Coin
                                            @endif
                                        </small>
                                        @if ($member->room_levels && $member->room_levels->count() > 0)
                                            @php
                                                $highestRoomLevel = $member->room_levels->first();
                                                $displayAmount = $highestRoomLevel->level->level_coin ?? 0;
                                            @endphp
                                            <span class="badge bg-info text-white">{{ $displayAmount }}</span>
                                        @else
                                            <span
                                                class="badge bg-warning text-dark">0</span>
                                        @endif
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted d-block">Dollar</small>
                                        <span class="badge bg-success">${{ $member->total_dollar ?? 0 }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5">
                                <div class="text-muted">
                                    <i class="fas fa-users fa-2x mb-3"></i>
                                    <p class="mb-0">No team members found.</p>
                                    <small>Your team members will appear here.</small>
                                </div>
                            </div>
                        @endforelse
                    </div> --}}

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

    <!-- Pagination -->
    @if ($members->hasPages())
        <div class="row mt-4">
            <div class="col-12">
                <div class="d-flex justify-content-center">
                    <nav aria-label="Page navigation">
                        {{ $members->appends(request()->query())->links() }}
                    </nav>
                </div>
            </div>
        </div>
    @endif

    <style>
        .card {
            border: none;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            border-radius: 0.5rem;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.35em 0.65em;
        }

        .table td {
            vertical-align: middle;
            padding: 1rem 0.75rem;
        }
    </style>
@endsection