@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">Coin Seller 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 -->

    <!-- Search Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Add New Member</h5>
                    <form method="post" action="{{route('user.add.sub.seller.members')}}"
                          class="d-flex flex-column gap-3">
                        @csrf

                        <div class="row g-2">
                            <div class="col-md-6">
                                <label for="assigned_by_id" class="form-label">Direct Seller ID</label>
                                <input type="text" name="assigned_by_id" id="direct_seller_id" value="{{Auth::user()->user_id}}"
                                       class="form-control form-control-lg"
                                       placeholder="Enter Assigned By ID..."
                                       required>
                            </div>
                            <div class="col-md-6">
                                <label for="user_id" class="form-label">User ID</label>
                                <input type="text" name="user_id" id="user_id"
                                       class="form-control form-control-lg"
                                       placeholder="Enter User ID..."
                                       required>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-2">
                            <button type="submit" class="btn btn-primary btn-sm btn-lg px-4">
                                <i class="fas fa-user-plus me-2"></i> Add Member
                            </button>
                        </div>

                        {{--                        <div class="flex-fill">--}}
                        {{--                            <input type="text" name="user_id"--}}
                        {{--                                   class="form-control form-control-lg"--}}
                        {{--                                   placeholder="Enter User ID to add member..."--}}
                        {{--                                   required>--}}
                        {{--                        </div>--}}
                        {{--                        <button type="submit" class="btn btn-primary btn-sm btn-lg px-4">--}}
                        {{--                            <i class="fas fa-user-plus me-2"></i> Add Member--}}
                        {{--                        </button>--}}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 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 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">Total Coin</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">
                                        <span
                                            class="badge bg-warning text-dark fs-6">{{ $member->total_coin ?? 0 }}</span>
                                    </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 members found in your sub seller team.</p>
                                            <small>Use the form above to add new members.</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">Coin</small>
                                        <span class="badge bg-warning text-dark">{{ $member->total_coin ?? 0 }}</span>
                                    </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 members found in your sub seller team.</p>
                                    <small>Use the form above to add new members.</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;
        }

        .form-control:focus {
            border-color: #4e73df;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

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