@extends('layouts.agent_layout')

@section('content')



<main class="h-full pb-16 overflow-y-auto">
          <div class="container grid px-6 mx-auto">
            <h2
              class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
            >
              {{ $users->first_name }}'s Info
            </h2>
            <!-- CTA -->
            <a
              class="flex items-center justify-between p-4 mb-8 text-sm font-semibold bg-blue-600 shadow-md focus:outline-none focus:shadow-outline-orange"
              href="{{ url('/') }}" style="color: #fff;"
            >
              <div class="flex items-center">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  ></path>
                </svg>
                <span>Go to main website</span>
              </div>
              <span>View &RightArrow;</span>
            </a>

            <x-alert/>

            <!-- Big section cards -->
            <h4
              class="mt-4 mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
            >
            Basic Info
            </h4>
            
            
            <div
              class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
            >
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Name: {{ $users->first_name }} {{ $users->last_name }}
              </p>
            </div>
            <div
              class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
            >
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Email: {{ $users->email }}
              </p>
            </div>
            <div
              class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
            >
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Store Name: {{ $users->username }}
              </p>
            </div>
            
            <div
              class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800"
            >
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Date Of Birth: {{ $users->dob }}
              </p>
            </div>

            
            {{--<!-- Responsive cards -->
            <h4
              class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
            >
            Earning Details
            </h4>
            <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
              <div
                class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
                style="border-radius:25px;">
                <div
                  class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fill-rule="evenodd"
                      d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <p
                    class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
                  >
                  Current Balance
                  </p>
                  <p
                    class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                  >
                    $ {{ number_format($users->balance, 2) }}
                  </p>
                </div>
              </div>

              <div
                class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
                style="border-radius:25px;">
                <div
                  class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fill-rule="evenodd"
                      d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <p
                    class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
                  >
                      Team Total
                  </p>
                  <p
                    class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                  >
                    {{ count($users->referrals) }}
                  </p>
                </div>
              </div>

              <div
                class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
                style="border-radius:25px;">
                <div
                  class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fill-rule="evenodd"
                      d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <p
                    class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
                  >
                  Rebate Balance
                  </p>
                  <p
                    class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                  >
                    $ {{ number_format($users->rebates, 2) }}
                  </p>
                </div>
              </div>

            </div>--}}

             <!-- Responsive cards -->
             <h4
              class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
            >
            Marketing Info
            </h4>
            <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">

              <div
                class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
                style="border-radius:25px;">
                <div
                  class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fill-rule="evenodd"
                      d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <p
                    class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
                  >
                  User Type
                  </p>
                  <p
                    class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                  >
                  {{ ucfirst($users->type) }}
                  </p>
                </div>
              </div>

              <div
                class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
                style="border-radius:25px;">
                <div
                  class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fill-rule="evenodd"
                      d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <p
                    class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400"
                  >
                  Direct Upline
                  </p>
                  <p
                    class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                  >
                  {{ $users->referrer ? $users->referrer->username : 'Was not reffered!' }}
                  </p>
                </div>
              </div>

            </div>

            
 

          @if($users->vendor && $users->vendor?->status === 'approved')
            <div class="flex items-center justify-between mb-4">
              <h4
                class="text-lg font-semibold text-gray-600 dark:text-gray-300"
              >
                Vendor Info
              </h4>

              <a href="{{ route('admin.create-product', ['user' => $users->id]) }}"
                    class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent active:bg-green-500 hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
                    type="submit" style="color: #fff;"
                  >
                Add Products +
              </a>
            </div>
               <!-- New Table -->
               <div class="w-full overflow-hidden rounded-lg shadow-xs">
              <div class="w-full overflow-x-auto">
              <table class="w-full whitespace-no-wrap">
                  <thead>
                    <tr
                      class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
                    >
                      <th class="px-4 py-3">Product Name</th>
                      <th class="px-4 py-3">Value</th>
                      <th class="px-4 py-3">Category</th>
                      <th class="px-4 py-3">Action</th>
                    </tr>
                  </thead>
                  <tbody
                    class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
                  >

                  @forelse($users->products as $product)
                    <tr class="text-gray-700 dark:text-gray-400">
                      <td class="px-4 py-3">
                        <div class="flex items-center text-sm">
                          <!-- Avatar with inset shadow -->
                          <img class="mr-3" src="{{ asset('storage/products/'.$product->image1) }}" style="height: 40px;"/>
                          <div
                            class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
                          >
                            <div
                              class="absolute inset-0 rounded-full shadow-inner"
                              aria-hidden="true"
                            ></div>
                          </div>
                          <div><a href="{{ route('admin.edit-product', $product->id) }}">
                            <p class="font-semibold">{{ $product->name }}</p>
                          </div></a>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm">
                        $ {{ number_format($product->value, 2) }}
                      </td>
                      <td class="px-4 py-3 text-sm">
                        {{ $product->category }}
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center space-x-6 text-sm">
                        <a
                            class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                            aria-label="Edit" href="{{ route('admin.edit-product', $product->id) }}"
                          >
                            <svg
                              class="w-5 h-5"
                              aria-hidden="true"
                              fill="currentColor"
                              viewBox="0 0 20 20"
                            >
                              <path
                                d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                              ></path>
                            </svg>
                          </a>
                          <a
                              class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                              aria-label="Edit" href="{{ route('admin.create-bid', $product->id) }}"
                          >
                            <svg class="w-5 h-5"  width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" 
                              fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z"/>  
                              <circle cx="9" cy="19" r="2" />  <circle cx="17" cy="19" r="2" />  
                              <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
                            </svg>
                          </a>
                          <form method="post" id="{{'form-delete-'.$product->id}}" action="{{route('admin.product-destroy', $product->id)}}" >
                          @csrf
                          @method('delete')
                          <button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray" 
                          type="submit" onclick="return confirm('Dear Admin, Are you sure you want to delete the {{ $product->name }} product?');"
                          >
                            <svg
                              class="w-5 h-5"
                              aria-hidden="true"
                              fill="currentColor"
                              viewBox="0 0 20 20"
                            >
                              <path
                                fill-rule="evenodd"
                                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                                clip-rule="evenodd"
                              ></path>
                            </svg>
                          </button>
                        </form>
                        </div>
                      </td>
                    </tr>
                    @empty
                    <div align="center" class="my-3">
                        <p class="text-gray-700 lead dark:text-gray-200">No Trading History.</p>
                    </div>
                    <br><br><br>
                    @endforelse

                    
                  </tbody>
                </table>
              </div>
            </div>
            @endif



        <!-- Recent Transaction Card -->
        <div class="mt-8">
          <p class="mb-2 font-semibold text-gray-700 dark:text-gray-400">{{ $users->first_name }}'s Team</p>
        </div>
        <div class="grid gap-6 mt-10 mb-8 md:grid-cols-2">
            <!-- Card -->
            <div class="bg-white rounded-b-lg shadow-xs dark:bg-gray-800">
                <div
                class="h-64 p-4 mb-0 text-lg font-semibold text-purple-100 bg-blue-600 rounded-t-lg shadow-md focus:outline-none focus:shadow-outline-purple"
                style="color: #fff;"
                >
                    <div class="flex items-center">
                        <svg
                        class="w-5 h-5 mr-2"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        >
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                        ></path>
                        </svg>
                        <span>First Generation</span>
                    </div>
                </div>
                <div class="text-gray-700 bg-white rounded-b-lg shadow-xs dark:bg-gray-800 dark:text-gray-200">
                    @forelse($users->referrals as $i => $direct_user)
                      <div class="flex items-center justify-between p-4 text-gray-700 border-b dark:text-gray-200">
                          <div>
                              <span class="text-lg font-semibold">{{ $direct_user->first_name }} {{ $direct_user->last_name }}</span><br>
                              <small class="text-xs">{{ $direct_user->email }} - {{ $direct_user->username }}</small>
                          </div>
                          <div>
                              <span class="text-sm">
                                  <a href="{{ route('admin.agent.user_info', $direct_user->id) }}" class="text-gray-700 dark:text-gray-200">More ></a> <br>
                                  <!--@if(count($direct_user->investment) > 0 && count($direct_user->referrals) > 0)-->
                                  @if(count($direct_user->investment) > 0)
                                  <span style="color:green">Active</span>
                                  @else
                                  <span style="color:red">In-Active</span>
                                  @endif
                              </span>
                          </div>
                      </div>
                    @empty
                    <div class="flex items-center p-4">
                        <div
                            class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                            ></path>
                            </svg>
                        </div>
                        <div>
                            <p
                            class="text-sm text-gray-700 dark:text-gray-200"
                            >
                                {{ $users->first_name }} Does Not Have First Level Team!
                            </p>
                        </div>
                    </div>
                    @endforelse
                </div>       
            </div>
            
             <!-- Card -->
             <div class="bg-white rounded-b-lg shadow-xs dark:bg-gray-800">
                <div
                class="h-64 p-4 mb-0 text-lg font-semibold text-purple-100 bg-blue-600 rounded-t-lg shadow-md focus:outline-none focus:shadow-outline-purple"
                style="color: #fff;"
                >
                    <div class="flex items-center">
                        <svg
                        class="w-5 h-5 mr-2"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        >
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                        ></path>
                        </svg>
                        <span>Second Generation</span>
                    </div>
                </div>
                <div class="text-gray-700 bg-white rounded-b-lg shadow-xs dark:bg-gray-800 dark:text-gray-200">
                  @forelse($users->referrals as $j =>  $first_gen_user)
                    @if (count($first_gen_user->referrals) > 0)
                        @forelse($first_gen_user->referrals as $direct_user)
                          <div class="flex items-center justify-between p-4 text-gray-700 border-b dark:text-gray-200">
                              <div>
                                  <span class="text-lg font-semibold">{{ $direct_user->first_name }} {{ $direct_user->last_name }}</span><br>
                                  <small class="text-xs">{{ $direct_user->email }} - {{ $direct_user->username }}</small>
                              </div>
                              <div>
                                  <span class="text-sm">
                                      <a href="{{ route('admin.agent.user_info', $direct_user->id) }}" class="text-gray-700 dark:text-gray-200">More ></a> <br>
                                      <!--@if(count($direct_user->investment) > 0 && count($direct_user->referrals) > 0)-->
                                      @if(count($direct_user->investment) > 0)
                                      <span style="color:green">Active</span>
                                      @else
                                      <span style="color:red">In-Active</span>
                                      @endif
                                  </span>
                              </div>
                          </div>
                        @empty
                          <div class="flex items-center p-4">
                            <div
                                class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                            >
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                                ></path>
                                </svg>
                            </div>
                            <div>
                                <p
                                class="text-sm text-gray-700 dark:text-gray-200"
                                >
                                    {{ $users->first_name }} Does Not Have Second Level Team!
                                </p>
                            </div>
                        </div>
                      @endforelse
                    @endif
                  @empty
                  <div class="flex items-center p-4">
                      <div
                          class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                      >
                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                          ></path>
                          </svg>
                      </div>
                      <div>
                          <p
                          class="text-sm text-gray-700 dark:text-gray-200"
                          >
                              {{ $users->first_name }} Does Not Have Second Level Team!
                          </p>
                      </div>
                  </div>
                  @endforelse
                </div>       
            </div>
            
             <!-- Card -->
             <div class="bg-white rounded-b-lg shadow-xs dark:bg-gray-800">
                <div
                class="h-64 p-4 mb-0 text-lg font-semibold text-purple-100 bg-blue-600 rounded-t-lg shadow-md focus:outline-none focus:shadow-outline-purple"
                style="color: #fff;"
                >
                    <div class="flex items-center">
                        <svg
                        class="w-5 h-5 mr-2"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        >
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                        ></path>
                        </svg>
                        <span>Third Generation</span>
                    </div>
                </div>
                <div class="text-gray-700 bg-white rounded-b-lg shadow-xs dark:bg-gray-800 dark:text-gray-200">
                  @forelse($users->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 $direct_user)
                                  <div class="flex items-center justify-between p-4 text-gray-700 border-b dark:text-gray-200">
                                      <div>
                                          <span class="text-lg font-semibold">{{ $direct_user->first_name }} {{ $direct_user->last_name }}</span><br>
                                          <small class="text-xs">{{ $direct_user->email }} - {{ $direct_user->username }}</small>
                                      </div>
                                      <div>
                                          <span class="text-sm">
                                              <a href="{{ route('admin.agent.user_info', $direct_user->id) }}" class="text-gray-700 dark:text-gray-200">More ></a> <br>
                                              <!--@if(count($direct_user->investment) > 0 && count($direct_user->referrals) > 0)-->
                                               @if(count($direct_user->investment) > 0)
                                              <span style="color:green">Active</span>
                                              @else
                                              <span style="color:red">In-Active</span>
                                              @endif
                                          </span>
                                      </div>
                                  </div>
                                  @empty
                                  <div class="flex items-center p-4">
                                      <div
                                          class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                                      >
                                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                          <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                                          ></path>
                                          </svg>
                                      </div>
                                      <div>
                                          <p
                                          class="text-sm text-gray-700 dark:text-gray-200"
                                          >
                                              {{ $users->first_name }} Does Not Have Third Level Team!
                                          </p>
                                      </div>
                                  </div>
                                @endforelse
                              @endif
                          @empty
                            <div class="flex items-center p-4">
                                <div
                                    class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                                >
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                                    ></path>
                                    </svg>
                                </div>
                                <div>
                                    <p
                                    class="text-sm text-gray-700 dark:text-gray-200"
                                    >
                                        {{ $users->first_name }} Does Not Have Third Level Team!
                                    </p>
                                </div>
                            </div>
                          @endforelse
                      @endif
                  @empty
                    <div class="flex items-center p-4">
                        <div
                            class="p-3 mr-4 text-gray-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-gray-700"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"
                            ></path>
                            </svg>
                        </div>
                        <div>
                            <p
                            class="text-sm text-gray-700 dark:text-gray-200"
                            >
                                {{ $users->first_name }} Does Not Have Third Level Team!
                            </p>
                        </div>
                    </div>
                  @endforelse
                </div>       
            </div>
        </div>




           
             

    
    </div>
</main>



@endsection