@extends('layouts.user')

@section('content')

<main
    class="w-full xl:px-[48px] px-2 mt-8 pb-6 xl:pb-[48px] sm:pt-[156px] pt-[100px]"
    >
    <!-- write your code here-->
    <div class="flex flex-col space-y-20 2xl:flex-row 2xl:space-x-11">
        <aside
        class="2xl:w-[382px] w-full bg-white dark:bg-darkblack-600 rounded-lg px-4 pb-7"
        >
        <header
            class="flex flex-col items-center -mt-8 text-center pb-7"
        >
            <img
            src="{{ asset('images/toy-avatar.png') }}"
            class="rounded-lg"
            alt=""
            />
            <h3 class="mt-4 text-xl font-bold text-bgray-700 dark:text-white">
            {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}
            </h3>
            <p class="text-base font-medium text-bgray-500 dark:text-white">
            {{ auth()->user()->email }} • {{ auth()->user()->username }}
            </p>
            
        </header>
        <hr>
        {{-- <ul class="space-y-6 border-t border-b border-gray-200 py-7 dark:border-darkblack-400">
            <li class="flex justify-between">
            <span class="text-sm font-medium text-gray-500 dark:text-white"
                >Experience</span
            >
            <span class="text-sm font-semibold text-bgray-900 dark:text-white">
                2-4 Years</span
            >
            </li>
            <li class="flex justify-between">
            <span class="text-sm font-medium text-gray-500 dark:text-white"
                >Seniority Level</span
            >
            <span class="text-sm font-semibold text-bgray-900 dark:text-white">
                Senior Level</span
            >
            </li>
            <li class="flex justify-between">
            <span class="text-sm font-medium text-gray-500 dark:text-white"
                >Employment</span
            >
            <span class="text-sm font-semibold text-bgray-900 dark:text-white">
                Full Time</span
            >
            </li>
            <li class="flex justify-between">
            <span class="text-sm font-medium text-gray-500 dark:text-white"
                >Salary</span
            >
            <span class="text-sm font-semibold text-bgray-900 dark:text-white">
                $250-300</span
            >
            </li>
        </ul> --}}
        <div class="py-6 border-b border-bgray-200 dark:border-darkblack-400">
            <ul class="space-y-2.5">
            <h4 class="mb-3 text-sm font-medium text-gray-500 dark:text-white">Referral Code</h4>
            <li
                class="bg-[#E4FDED] dark:bg-darkblack-500 py-3 px-2 pr-4 flex justify-between items-center rounded-lg"
            >
                <div class="flex items-center gap-x-3">
                <span
                    class="inline-flex items-center justify-center w-10 h-10 bg-white rounded-lg dark:bg-darkblack-600"
                >
                    <svg
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    >
                    <path
                        d="M12.8334 2.74951V6.41618C12.8334 6.65929 12.93 6.89245 13.1019 7.06436C13.2738 7.23627 13.5069 7.33285 13.75 7.33285H17.4167"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M15.5834 19.2495H6.41671C5.93048 19.2495 5.46416 19.0564 5.12034 18.7125C4.77653 18.3687 4.58337 17.9024 4.58337 17.4162V4.58285C4.58337 4.09661 4.77653 3.6303 5.12034 3.28648C5.46416 2.94267 5.93048 2.74951 6.41671 2.74951H12.8334L17.4167 7.33285V17.4162C17.4167 17.9024 17.2236 18.3687 16.8797 18.7125C16.5359 19.0564 16.0696 19.2495 15.5834 19.2495Z"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 8.24951H9.16667"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 11.916H13.75"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 15.583H13.75"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    </svg>
                </span>
                <div class="flex flex-col">
                    <h5 class="text-sm font-semibold text-bgray-900 dark:text-white">
                    Overview.pdf
                    </h5>
                    <span class="text-xs text-bgray-500">50 Kb</span>
                </div>
                </div>
                <button>
                <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    class="stroke-bgray-900 dark:stroke-bgray-50"
                    d="M17.5 12.4995V15.8328C17.5 16.2749 17.3244 16.6988 17.0118 17.0114C16.6993 17.3239 16.2754 17.4995 15.8333 17.4995H4.16667C3.72464 17.4995 3.30072 17.3239 2.98816 17.0114C2.67559 16.6988 2.5 16.2749 2.5 15.8328V12.4995"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                    <path
                    d="M5.83337 8.33301L10 12.4997L14.1667 8.33301"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                    <path
                    d="M10 12.4995V2.49951"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                </svg>
                </button>
            </li>
            <h4 class="mb-3 text-sm font-medium text-gray-500 dark:text-white">Referral Link</h4>
            <li
                class="bg-[#E4FDED] dark:bg-darkblack-500 py-3 px-2 pr-4 flex justify-between items-center rounded-lg"
            >
                <div class="flex items-center gap-x-3">
                <span
                    class="inline-flex items-center justify-center w-10 h-10 bg-white rounded-lg dark:bg-darkblack-600"
                >
                    <svg
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    >
                    <path
                        d="M12.8334 2.74951V6.41618C12.8334 6.65929 12.93 6.89245 13.1019 7.06436C13.2738 7.23627 13.5069 7.33285 13.75 7.33285H17.4167"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M15.5834 19.2495H6.41671C5.93048 19.2495 5.46416 19.0564 5.12034 18.7125C4.77653 18.3687 4.58337 17.9024 4.58337 17.4162V4.58285C4.58337 4.09661 4.77653 3.6303 5.12034 3.28648C5.46416 2.94267 5.93048 2.74951 6.41671 2.74951H12.8334L17.4167 7.33285V17.4162C17.4167 17.9024 17.2236 18.3687 16.8797 18.7125C16.5359 19.0564 16.0696 19.2495 15.5834 19.2495Z"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 8.24951H9.16667"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 11.916H13.75"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8.25 15.583H13.75"
                        stroke="#22C55E"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    </svg>
                </span>
                <div class="flex flex-col">
                    <h5 class="text-sm font-semibold text-bgray-900 dark:text-white">
                    Overview.pdf
                    </h5>
                    <span class="text-xs text-bgray-500">50 Kb</span>
                </div>
                </div>
                <button>
                <svg
                    class="stroke-bgray-900 dark:stroke-bgray-50"
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    d="M17.5 12.4995V15.8328C17.5 16.2749 17.3244 16.6988 17.0118 17.0114C16.6993 17.3239 16.2754 17.4995 15.8333 17.4995H4.16667C3.72464 17.4995 3.30072 17.3239 2.98816 17.0114C2.67559 16.6988 2.5 16.2749 2.5 15.8328V12.4995"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                    <path
                    d="M5.83337 8.33301L10 12.4997L14.1667 8.33301"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                    <path
                    d="M10 12.4995V2.49951"
                    
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    />
                </svg>
                </button>
            </li>
            </ul>
        </div>
        <div class="pt-6">
            <h4 class="mb-4 text-sm font-medium text-gray-500 dark:text-white">
            Hiring Agent
            </h4>
            <div class="flex gap-x-4">
            <div>
                <img src="assets/images/avatar/hr.png" alt="" />
            </div>
            <div>
                <h5 class="text-base font-semibold text-bgray-900 dark:text-white">
                Annette Black
                </h5>
                <span class="text-sm font-medium text-success-300"
                >HR Specialist •
                <span class="text-bgray-500 dark:text-bgray-50">4 Yrs Exp</span>
                </span>
            </div>
            </div>
        </div>
        <div class="flex justify-center mt-8">
            <button
            data-target="#multi-step-modal"
            class="py-3 font-medium text-white transition duration-300 ease-in-out rounded-lg bg-success-300 hover:bg-success-400 modal-open px-7"
            >
            Add a contact
            </button>
        </div>
        </aside>
    </div>
    <!-- write your code here-->
    </main>



    


          

<div class="main-content">
  <div class="page-content dark:bg-zinc-700">
      <div class="container-fluid px-[0.625rem] pb-16">
          <div class="grid grid-cols-1 mb-5">
              <div class="flex items-center justify-between">
                  <h4 class="text-lg font-semibold text-gray-800 mb-sm-0 grow dark:text-gray-100">Profile</h4>
                  <nav class="flex"  h-1100aria-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="text-sm font-medium text-gray-500 ltr:ml-1 rtl:mr-1 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">Profile</a>
                              </div>
                          </li>
                      </ol>
                  </nav>
              </div>
          </div>

          
          <div class="grid grid-cols-12 gap-4">
              <div class="col-span-12 lg:col-span-8">
                  <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                      <div class="card-body">
                          <div class="grid grid-cols-12 ">
                              <div class="col-span-9">
                                  <div class="flex flex-wrap items-center" style="overflow: hidden;"> 
                                      <div class="w-20 h-20 ltr:mr-1 rtl:ml-1">
                                          <img src="{{ asset('images/toy-avatar.png') }}" alt="" class="rounded-full">
                                      </div>
                                      <div>
                                          <h5 class="mb-1 text-gray-700 text-16 dark:text-gray-100">{{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</h5>
                                          <p class="text-gray-500 dark:text-zinc-100 text-13">{{ Auth::user()->username }}</p>

                                          <div class="flex flex-wrap items-start gap-2 mt-3 text-13">
                                              <div class="text-gray-500 dark:text-zinc-100"><i class="text-green-500 align-middle mdi mdi-circle-medium me-1 ltr:mr-1 rtl:ml-1"></i>Active</div>
                                              <div class="text-gray-500 dark:text-zinc-100"><i class="text-green-500 align-middle mdi mdi-circle-medium me-1 ltr:mr-1 rtl:ml-1"></i>{{ Auth::user()->email }}</div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-span-3">
                                  <div class="flex flex-wrap justify-end">
                                      {{-- <button type="button" class="border-transparent btn bg-gray-50/50 dark:bg-zinc-700 dark:text-gray-100"><i class="me-1"></i> Message</button> --}}
                                      <div class="relative dropstart text-end">
                                          <a class="px-6 py-1 text-gray-500 border-transparent shadow-none btn text-16 dark:text-zinc-100 dropdown-toggle " href="#" role="button" data-bs-toggle="dropdown" id="dropdownMenu1" aria-expanded="false">
                                              <i class="bx bx-dots-horizontal-rounded"></i>
                                          </a>
                                          <ul class="absolute z-50 hidden float-left w-40 py-2 text-left list-none bg-white border-none rounded-lg shadow-lg dropdown-menu min-w-max -right-10 top-6 bg-clip-padding dark:bg-zinc-700" aria-labelledby="dropdownMenu1">
                                              <li><a
                                                  class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap dark:text-gray-100 hover:bg-gray-50/50 dark:hover:bg-zinc-600/50"
                                                  href="{{ route('change_pass') }}">Change Password</a>
                                              </li>
                                              <li><a class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap dark:text-gray-100 hover:bg-gray-50/50 dark:hover:bg-zinc-600/50" href="{{ route('wallet') }}">Withdrawal Wallet</a >
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          
                          <ul class="flex pt-5 mt-5 border-t border-gray-50 dark:border-zinc-600" id="pills-tab" role="tablist">
                              <li>
                                  <a class="px-3 py-5 font-medium border-b-2 active text-violet-500 border-violet-300 dark:border-violet-500 " data-bs-toggle="tab" href="#overview" role="tab" aria-selected="true">Overview</a>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                      <div class="border-b card-body border-gray-50 dark:border-zinc-600">
                          <h5 class="text-gray-700 text-15 dark:text-gray-100">My Information</h5>
                      </div>
                      <div class="card-body">
                          <div>
                              <div class="pb-3">
                                  <div class="grid grid-cols-12">
                                      <div class="col-span-12 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2">
                                          <div>
                                              <h5 class="text-gray-700 text-15 dark:text-gray-100">Name :</h5>
                                          </div>
                                      </div>
                                      <div class="col-span-12 sm:col-span-10 md:col-span-10 lg:col-span-10 xl:col-span-10">
                                          <div class="text-gray-500 dark:text-zinc-100">
                                              <p class="mb-0">{{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <div class="pb-3">
                                  <div class="grid grid-cols-12">
                                      <div class="col-span-12 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2">
                                          <div>
                                              <h5 class="text-gray-700 text-15 dark:text-gray-100">Username :</h5>
                                          </div>
                                      </div>
                                      <div class="col-span-12 sm:col-span-10 md:col-span-10 lg:col-span-10 xl:col-span-10">
                                          <div class="text-gray-500 dark:text-zinc-100">
                                              <p class="mb-0">{{ Auth::user()->username }}</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <div class="pb-3">
                                  <div class="grid grid-cols-12">
                                      <div class="col-span-12 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2">
                                          <div>
                                              <h5 class="text-gray-700 text-15 dark:text-gray-100">Email :</h5>
                                          </div>
                                      </div>
                                      <div class="col-span-12 sm:col-span-10 md:col-span-10 lg:col-span-10 xl:col-span-10">
                                          <div class="text-gray-500 dark:text-zinc-100">
                                              <p class="mb-0">{{ Auth::user()->email }}</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <div class="pb-3">
                                  <div class="grid grid-cols-12">
                                      <div class="col-span-12 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2">
                                          <div>
                                              <h5 class="text-gray-700 text-15 dark:text-gray-100">Referral Code :</h5>
                                          </div>
                                      </div>
                                      <div class="col-span-12 sm:col-span-10 md:col-span-10 lg:col-span-10 xl:col-span-10">
                                          <div class="text-gray-500 dark:text-zinc-100">
                                              <p class="mb-0">{{ Auth::user()->username }}</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <div class="pb-3">
                                  <div class="grid grid-cols-12">
                                      <div class="col-span-12 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2">
                                          <div>
                                              <h5 class="text-gray-700 text-15 dark:text-gray-100">Referral Link :</h5>
                                          </div>
                                      </div>
                                      <div class="col-span-12 sm:col-span-10 md:col-span-10 lg:col-span-10 xl:col-span-10">
                                          <div class="text-gray-500 dark:text-zinc-100">
                                              <p id="myInput" class="fw-bold">{{ Auth::user()->referral_link }}</p>
                                              <button type="button" onclick="copyToClipboard()" class="mt-3 btn btn-primary deactivate-account">
                                                  Copy Link <i class="bx bx-copy-alt me-1"></i>
                                              </button>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
                 
              <div class="col-span-12 lg:col-span-4">
                  <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                      <div class="card-body" style="overflow: hidden;">
                          <h5 class="mb-3 text-gray-700 text-15 dark:text-gray-100">My Upline</h5>
                          @if(Auth::user()->referrer_id == null)
                            <p class="py-6 text-center text-gray-700 text-5 dark:text-gray-100">No One Referred You 👑!</p>
                          @else
                          {{-- <a href="#"> --}}
                                <div class="flex items-center p-4">
                                    <div class="flex-shrink-0 avatar-sm ltr:mr-3 rtl:ml-3">
                                        <div class="w-8 h-8 text-center text-gray-100 rounded-full bg-gray-50/50 text-22">
                                            <i class="bx bxs-user-circle"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow">
                                        <div>
                                            <h5 class="mb-1 text-sm text-gray-700 dark:text-gray-100">{{ Auth::user()->referrer->username }}</h5>
                                            <p class="mb-0 text-gray-500 text-13 dark:text-zinc-100">{{ Auth::user()->referrer->email }}</p>
                                        </div>
                                    </div>
                                </div>
                           {{-- </a> --}}
                           @endif
                      </div>
                  </div>
                  
                  <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                      <div class="card-body">
                          <h5 class="mb-4 text-gray-700 text-15 dark:text-gray-100">My Direct Downlines</h5>
                          <div class="list-group" style="overflow: hidden;">
                            @forelse(Auth::user()->referrals as $i => $direct_user)
                              <a href="#">
                                  <div class="flex items-center p-4">
                                      <div class="flex-shrink-0 avatar-sm ltr:mr-3 rtl:ml-3">
                                          <div class="w-8 h-8 text-center text-gray-100 rounded-full bg-gray-50/50 text-22">
                                              <i class="bx bxs-user-circle"></i>
                                          </div>
                                      </div>
                                      <div class="flex-grow">
                                          <div>
                                              <h5 class="mb-1 text-sm text-gray-700 dark:text-gray-100">{{ $direct_user->username }}</h5>
                                              <p class="mb-0 text-gray-500 text-13 dark:text-zinc-100">{{ $direct_user->email }}</p>
                                          </div>
                                      </div>
                                  </div>
                              </a>
                            @empty
                                <p class="py-6 text-center text-gray-700 text-muted dark:text-gray-100">You Have No Direct Downlines!</p>
                            @endforelse
                          </div>
                      </div>
                  </div>
              </div>
          </div>


            
<script>
function copyToClipboard() {
    // Create a temporary input element
    var input = document.createElement("input");
    input.value = document.getElementById("myInput").textContent;

    // Append the input element to the document
    document.body.appendChild(input);

    // Select the content of the input element
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices

    // Copy the content to the clipboard
    document.execCommand("copy");

    // Remove the temporary input element
    document.body.removeChild(input);

    // Alert the user
    alert("Link copied to clipboard");
}
</script>
@endsection