@extends('layouts.user')

@section('content')

<div class="main-content" style="min-height: 100vh">
    <div class="page-content dark:bg-zinc-700" style="padding-bottom: 400px; padding-top: 150px;">
        <div class="container-fluid px-[0.625rem]">
            <div class="grid grid-cols-1 mb-5">
                <div class="flex items-center justify-between">
                    <h4 class="mb-sm-0 text-lg font-semibold grow text-gray-800 dark:text-gray-100">Third Generation</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
                            <li class="inline-flex items-center">
                                <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                                    Dashboard
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <a href="#" class="ltr:ml-1 rtl:mr-1 text-sm font-medium text-gray-500 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">Network</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>

            
            <div class=" grid grid-cols-1">
                <div class="grid grid-cols-12 items-stretch">
                    <div class="col-span-12 lg:col-span-6 self-center">
                        <h5 class="text-15 text-gray-600 dark:text-gray-100">Team List - Level 3</h5>
                    </div>
                </div>
            

                <div class="mt-5 relative overflow-x-auto">
                    <table class="w-full">
                        <thead class="border-b border-gray-50 cursor-pointer dark:border-zinc-600">
                            <tr class="text-gray-700 dark:text-gray-100">
                                <th class="relative text-start p-4 dark:text-gray-100">Name
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Username
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Email
                                </th>
                                <th class="relative text-start p-4 dark:text-gray-100">Referred By
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse(Auth::user()->referrals as $st_gen_user)
                            @if (count($st_gen_user->referrals) > 0)
                                @forelse($st_gen_user->referrals as $k => $nd_gen_user)
                                    @if (count($nd_gen_user->referrals) > 0)
                                        @forelse($nd_gen_user->referrals as $rd_gen_user)
                                            <tr class="border-b border-gray-50 gray-600 dark:border-zinc-600">
                                                <td class="inline-flex items-center p-4">
                                                    <div class="avatar-sm flex-shrink-0 ltr:mr-3 rtl:ml-3">
                                                        <div class="bg-gray-50/50 h-8 w-8 text-22 rounded-full text-center text-gray-100">
                                                            <i class="bx bxs-user-circle"></i>
                                                        </div>
                                                    </div>
                                                    <a class="text-gray-700 dark:text-gray-100">{{ $rd_gen_user->first_name . ' ' . $rd_gen_user->last_name }}</a>
                                                </td>
                                                <td class="p-4 dark:text-zinc-50">{{ $rd_gen_user->username }}</td>
                                                <td class="p-4 dark:text-zinc-50">{{ $rd_gen_user->email }}</td>
                                                <td class="p-4 dark:text-zinc-50">
                                                    {{ $rd_gen_user->referrer->first_name." ".$rd_gen_user->referrer->last_name }} (<a class="test-primary">{{ $rd_gen_user->referrer->username }}</a>)
                                                </td>
                                            </tr>
                                        @empty
                                            <p class="text-muted text-center text-gray-700 dark:text-gray-100 py-6">You Have No 3rd Generation Downlines!</p>
                                        @endforelse
                                    @endif
                                @empty
                                    <p class="text-muted text-center text-gray-700 dark:text-gray-100 py-6">You Have No 3rd Generation Downlines!</p>
                                @endforelse
                            @endif
                        @empty
                            <p class="text-muted text-center text-gray-700 dark:text-gray-100 py-6">You Have No 3rd Generation Downlines!</p>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="flex items-center place-content-between mt-4 mb-16">
                    <div class="mt-4 mb-2">
                        <p class="text-gray-600 dark:text-zinc-100">Showing all entries</p>
                    </div>
                </div>
            </div>


@endsection