@extends('template.basic.layouts.master')

@section('content')
<div class="grid grid-cols-12">
<div class="col-span-2">
@include('template.basic.partials.user.sidebar')
</div>
<div class="col-span-10">
<div class="dashboard-main w-11/12">
   <div class="w-full">
       <div class="w-full">
    <div class="flex relative mb-10 min-h-[60px] items-center justify-between pt-6 px-4 lg:mb-4 lg:min-h-[104px] lg:items-start lg:justify-start lg:px-0 text-[#eaecef]">

        <!-- LEFT SECTION -->
        <div class="flex items-center lg:items-start">

            <!-- Avatar -->
            <div class="relative flex">
                <img
                    alt="user avatar"
                    src="https://public.nftstatic.com/static/nft/res/nft-cex/S3/1695716378565_p7gg128kqzin6mp0ezo3tlwjbbmqblp9.png"
                    class="object-cover cursor-pointer w-[56px] h-[56px] lg:w-[64px] lg:h-[64px] rounded-[10px]"
                />

                <!-- Hover Edit Icon -->
                <div class="absolute inset-0 hidden lg:flex items-center justify-center rounded-[10px] cursor-pointer hover:bg-opacity-80 hover:bg-[#181A20] group">
                    <svg class="opacity-0 group-hover:opacity-100 text-gray-400" width="24" height="24" viewBox="0 0 24 24">
                        <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M15.336 4.776l3.89 3.889-1.768 1.767-3.89-3.889 1.768-1.767zm-3.181 3.181l3.889 3.89-5.129 5.128H20v3H7.915l-.004.003H4.022V16.09l8.133-8.132z"
                            fill="currentColor"
                        ></path>
                    </svg>
                </div>
            </div>

            <!-- Username + Icon Row -->
            <div class="flex flex-col pl-4 lg:pl-6">
                <div class="min-h-[24px] min-w-[200px] mb-2 lg:mb-3 max-w-[171px] font-semibold leading-[24px] truncate break-all">
                    {{$user->username}}
                </div>

                <div class="flex h-[28px] flex-row">
                    <div class="relative">
                        <div class="flex items-center">
                            <svg width="16" height="16" viewBox="0 0 24 24">
                                <path d="M11.293 15.182l4.243-4.243-1.415-1.414-2.828 2.829-1.414-1.415-1.415 1.414 2.829 2.829z" fill="currentColor"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 3h5L21 9.5v5L14.5 21h-5L3 14.5v-5L9.5 3zm7.5 9a5 5 0 11-10 0 5 5 0 0110 0z" fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Divider (desktop only) -->
        <div class="hidden lg:block w-px h-full bg-gray-700"></div>

        <!-- RIGHT SECTION (mobile hidden) -->
        <div class="hidden lg:flex flex-col justify-center items-center flex-wrap max-w-[570px] lg:flex-row">

            <!-- USER ID -->
            <div class="flex flex-row justify-between pb-4 text-sm leading-5 mr-10 min-w-[115px] lg:flex-col lg:justify-normal">
                <div class="mb-1 text-gray-400">User ID</div>
                <div class="flex items-center">
                    <div>{{$user->username}}</div>
                    <svg width="16" height="16" class="ml-1 cursor-pointer text-gray-400 hover:text-white" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3h11v13h-3V6H9V3zM4 8v13h11V8.02L4 8z" fill="currentColor"></path>
                    </svg>
                </div>
            </div>

            <!-- VIP LEVEL -->
            <div class="flex flex-row justify-between pb-4 text-sm leading-5 mr-10 min-w-[100px] lg:flex-col lg:justify-normal">
                <div class="mb-1 text-gray-400">VIP Level</div>
                <a target="_blank" class="cursor-pointer text-white">
                    <div class="flex items-center group">
                        {{ucfirst($user->user_level)}} User
                        <svg width="16" height="16" class="ml-1 text-gray-400 group-hover:text-white" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M12.288 12l-3.89 3.89 1.768 1.767L15.823 12l-1.768-1.768-3.889-3.889-1.768 1.768 3.89 3.89z"
                                  fill="currentColor"></path>
                        </svg>
                    </div>
                </a>
            </div>

            <!-- USER TYPE -->
            <div class="flex flex-row justify-between pb-4 text-sm leading-5 min-w-[60px] lg:flex-col lg:justify-normal">
                <div class="mb-1 text-gray-400">User Type</div>
                <div>{{ucfirst($user->type)}}</div>
            </div>

        </div>

    </div>
       </div>
       @include('template.basic.user.partials.balance_display') 
       @include('template.basic.user.partials.asset_display') 
   </div>
</div>
</div>
</div>
@endsection