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

@section('content_detail')
  <div class="w-full lg:w-4/5 md:p-6 lg:shadow-2xl overflow-hidden" x-data="{ activeTab: 'assets' }">
    <!-- Header -->
    <header class="bg-primary-gradient text-white pt-4 pb-8 relative">
      <div class="flex justify-between items-center px-4 pb-4">
        <div class="w-10 h-10 bg-white/20 bg-opacity-40 rounded-full flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
          </svg>
        </div>
        <div class="flex gap-4">
          <div
            class="w-10 h-10 bg-white/20 bg-opacity-40 rounded-full flex items-center justify-center cursor-pointer hover:bg-opacity-60 transition">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
            </svg>
          </div>
          
        </div>
      </div>
      <div class="px-6">
      <div class="flex justify-between items-start mb-8">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-white/20 rounded-full"></div>
          <div>
            <p class="text-sm opacity-90">Total Assets</p>
            <p class="text-4xl font-bold text-white">{{ fiat_format(get_total_balance()['fiat']) }}</p>
            <p class="text-sm opacity-90 flex items-center mt-1">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 3a1 1 0 01.707.293l7 7a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L3.707 11.707a1 1 0 01-1.414-1.414l7-7A1 1 0 0110 3z" />
              </svg>
              <span class="text-green-200">+14.72%</span>
            </p>
          </div>
        </div>
       
      </div>

      <!-- Chart Placeholder -->
      <div class="relative h-32 -mx-6 mt-6">
        <div class="absolute inset-x-0 bottom-0 h-24 chart-line opacity-30"></div>
        <svg class="w-full h-full" viewBox="0 0 360 120" preserveAspectRatio="none">
          <path d="M0 80 Q90 40 180 60 T360 50 L360 120 L0 120 Z" fill="rgba(255,255,255,0.15)" />
          <path d="M0 80 Q90 40 180 60 T360 50" stroke="#34d399" stroke-width="3" fill="none" />
        </svg>
        <div class="absolute bottom-4 right-6 text-sm opacity-80">Oct</div>
      </div>
      </div>
    </header>

    <!-- Action Buttons -->
    <div class="px-6 -mt-6">
      <div class="bg-card rounded-2xl shadow-lg p-4 pt-8 grid grid-cols-4 gap-4">
        <a role="button" href="{{ route('user.staking.index') }}"
          class="flex flex-col items-center space-y-2 py-3 rounded-xl hover:bg-dark-secondary transition">
          <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-orange-600" fill="#000" viewBox="0 0 24 24">
              <path
                d="M12 1L3 6v6c0 5.25 3.75 10.5 9 11 5.25-.5 9-5.75 9-11V6l-9-5zm0 2.18l7 3.89v5.34c0 4.5-3.07 8.91-7 9.46-3.93-.55-7-4.96-7-9.46V7.07l7-3.89z" />
              <path d="M11 8h2v6h-2zm0 7h2v2h-2z" />
            </svg>
          </div>
          <span class="text-xs font-medium text-white">Stake</span>
        </a>
        <a role="button" href="{{ route('user.wallet.index', 'receive') }}"
          class="flex flex-col items-center space-y-2 py-3 rounded-xl hover:bg-dark-secondary transition">
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
            </svg>
          </div>
          <span class="text-xs font-medium text-white">Receive</span>
        </a>
        <a role="button" href="{{ route('user.wallet.index', 'send') }}"
          class="flex flex-col items-center space-y-2 py-3 rounded-xl hover:bg-dark-secondary transition">
          <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
          </div>
          <span class="text-xs font-medium text-white">Send</span>
        </a>
        <a role="button" href="{{ route('user.wallet.swap.index') }}"
          class="flex flex-col items-center space-y-2 py-3 rounded-xl hover:bg-dark-secondary transition">
          <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center">
            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
            </svg>
          </div>
          <span class="text-xs font-medium text-white">Convert</span>
        </a>
      </div>
    </div>

    <!-- Assets Section -->
    <div class="px-6 mt-8">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-white">Assets</h2>
        <button class="text-gray-400">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </button>
      </div>

      <!-- Asset List -->
      <div class="space-y-4">
        <!-- Bitcoin -->
        @forelse($user->wallets as $wallet)
          @if($wallet->coin?->menu)
            <div class="flex items-center justify-between p-4 bg-card rounded-2xl  transition">
              <div class="flex items-center space-x-4">
                <div
                  class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white text-xl font-bold"><img src="{{ asset('assets/coin/'.strtolower($wallet->coin?->symbol).".png") }}" />
                </div>
                <div>
                  <p class="font-bold text-sm  text-white">{{ $wallet->coin?->name }}</p>
                  <p class="text-xs font-medium text-white">{{ $wallet->coin?->symbol }}</p>
                </div>
              </div>
              <div class="text-right">
                <p class="font-semibold text-white">{{ fiat_format($wallet->convertedBalance($user->userCurrency)) }}
                  {{$user->userCurrency}} </p>
                <p class="text-sm text-red-500">-0.53%</p>
                <p class="text-xs text-beige mt-1">{{ coin_format($wallet->balance, $wallet->coin?->digits ?? 2) }}
                  {{$user->cryptoCurrency}}</p>
              </div>
            </div>
          @endif
        @empty

        @endforelse

      </div>
    </div>

    <!-- Bottom Navigation -->

  </div>
@endsection