@extends('layout.user')

@section('content')
@php
  // 🌈 Theme colors from GeneralSetting
  $gs = \App\Models\GeneralSetting::first();
  $g1 = $gs->icon_color   ?? '#0B5D1E';
  $g2 = $gs->hover_color  ?? '#0F7A2E';
  $g3 = $gs->accent_color ?? '#E4002B';
  $txt= $gs->text_color   ?? '#0f172a';
  $resellingBanner = $gs->reselling_banner ?? null;
  if (!empty($resellingBanner) && !preg_match('/^https?:\\/\\//i', $resellingBanner)) {
    $resellingBanner = asset(ltrim($resellingBanner, '/'));
  }
@endphp

<style>
  :root{
    --bd-g:  {{ $g1 }};
    --bd-g2: {{ $g2 }};
    --bd-r:  {{ $g3 }};
    --ink:   {{ $txt }};
  }

  #dash a, #dash a:hover, #dash a:focus { text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent }

  .grad-flag{background:linear-gradient(90deg,var(--bd-g),var(--bd-g2))}
  .card-flag{
    border-radius:1rem;background:linear-gradient(0deg,#fff,#fff) padding-box,
    linear-gradient(90deg,var(--bd-g),var(--bd-g2)) border-box;
    border:2px solid transparent;box-shadow:0 8px 20px rgba(0,0,0,.06)
  }
  .card-flag:hover{transform:translateY(-2px);transition:.2s}

  .h-card{color:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .hero-banner{
    border-radius:1rem;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    background:#fff;
  }
  .hero-banner img{display:block;width:100%;height:auto}
  .mini-card{
    border-radius:1rem;color:#fff;text-align:center;padding:1rem;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.1)
  }
</style>

<div id="dash" class="mx-auto max-w-6xl px-2 sm:px-3 md:px-4 mt-3 space-y-6 pb-10">

  @if(!empty($resellingBanner))
    <div class="hero-banner">
      <img src="{{ $resellingBanner }}" alt="Reselling Banner">
    </div>
  @endif

  {{-- 🧭 Top summary --}}
  <div class="h-card grad-flag text-white">
    <div class="p-6 sm:p-8 flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-2xl sm:text-3xl font-extrabold">{{ auth()->user()->name ?? 'Guest User' }}</h1>
        <p class="mt-1 text-white/90 text-sm sm:text-base">{{ now()->format('F d, Y') }}</p>
      </div>
      <div class="mt-4 sm:mt-0">
        <div class="px-6 py-4 bg-white/20 rounded-2xl text-center shadow-md">
          <div class="text-sm font-medium">সর্বমোট আয়</div>
          <div class="mt-1 text-2xl sm:text-3xl font-extrabold">৳{{ number_format($totalEarn,2) }}</div>
        </div>
      </div>
    </div>
    <div class="h-1 w-full" style="background:linear-gradient(90deg,#ffffff26,#ffffff80,#ffffff26)"></div>
  </div>

  {{-- 💰 ইনকাম সামারি --}}
  <h2 class="text-base font-semibold px-1" style="color:var(--ink)">💰 ইনকাম সামারি</h2>
  <div class="grid grid-cols-2 gap-3">
    <div class="mini-card" style="background:var(--bd-g)">
      <i class="fas fa-money-bill-trend-up text-3xl mb-2"></i>
      <p class="text-sm">আজকের ইনকাম</p>
      <h2 class="text-xl font-bold">৳{{ number_format($earn['today'],2) }}</h2>
    </div>
    <div class="mini-card" style="background:var(--bd-g2)">
      <i class="fas fa-coins text-3xl mb-2"></i>
      <p class="text-sm">গতকালের ইনকাম</p>
      <h2 class="text-xl font-bold">৳{{ number_format($earn['yesterday'],2) }}</h2>
    </div>
    <div class="mini-card" style="background:var(--bd-r)">
      <i class="fas fa-chart-line text-3xl mb-2"></i>
      <p class="text-sm">গত ৭ দিনের ইনকাম</p>
      <h2 class="text-xl font-bold">৳{{ number_format($earn['last7'],2) }}</h2>
    </div>
    <div class="mini-card" style="background:color-mix(in oklab,var(--bd-r) 40%, var(--bd-g) 60%)">
      <i class="fas fa-sack-dollar text-3xl mb-2"></i>
      <p class="text-sm">গত ৩০ দিনের ইনকাম</p>
      <h2 class="text-xl font-bold">৳{{ number_format($earn['last30'],2) }}</h2>
    </div>
  </div>

  {{-- 📦 অর্ডার সামারি --}}
  <h2 class="text-base font-semibold px-1 mt-2" style="color:var(--ink)">📦 অর্ডার সামারি</h2>
  <div class="grid grid-cols-2 gap-3">
    <div class="mini-card" style="background:color-mix(in oklab,var(--bd-g) 90%, white 10%)">
      <i class="fas fa-calendar-day text-3xl mb-2"></i>
      <p class="text-sm">আজকের অর্ডার</p>
      <h2 class="text-xl font-bold">{{ number_format($orders['today']) }}</h2>
    </div>
    <div class="mini-card" style="background:color-mix(in oklab,var(--bd-g2) 80%, var(--bd-r) 20%)">
      <i class="fas fa-calendar-minus text-3xl mb-2"></i>
      <p class="text-sm">গতকালের অর্ডার</p>
      <h2 class="text-xl font-bold">{{ number_format($orders['yesterday']) }}</h2>
    </div>
    <div class="mini-card" style="background:color-mix(in oklab,var(--bd-r) 30%, var(--bd-g2) 70%)">
      <i class="fas fa-calendar-week text-3xl mb-2"></i>
      <p class="text-sm">শেষ ৭ দিন</p>
      <h2 class="text-xl font-bold">{{ number_format($orders['last7']) }}</h2>
    </div>
    <div class="mini-card" style="background:color-mix(in oklab,var(--bd-r) 60%, var(--bd-g) 40%)">
      <i class="fas fa-calendar-days text-3xl mb-2"></i>
      <p class="text-sm">শেষ ৩০ দিন</p>
      <h2 class="text-xl font-bold">{{ number_format($orders['last30']) }}</h2>
    </div>
  </div>

  {{-- 📊 স্ট্যাটাস অনুযায়ী --}}
  <h2 class="text-base font-semibold px-1 mt-2" style="color:var(--ink)">📊 স্ট্যাটাস অনুযায়ী</h2>
  <div class="grid grid-cols-2 gap-3">
    <div class="mini-card" style="background:#f59e0b">
      <i class="far fa-hourglass-half text-3xl mb-2"></i>
      <p class="text-sm">পেন্ডিং</p>
      <h2 class="text-xl font-bold">{{ number_format($statusCounts['pending']) }}</h2>
    </div>
    <div class="mini-card" style="background:var(--bd-g)">
      <i class="fas fa-gear text-3xl mb-2"></i>
      <p class="text-sm">প্রসেসিং</p>
      <h2 class="text-xl font-bold">{{ number_format($statusCounts['processing']) }}</h2>
    </div>
    <div class="mini-card" style="background:var(--bd-r)">
      <i class="fas fa-xmark-circle text-3xl mb-2"></i>
      <p class="text-sm">রিজেক্টেড</p>
      <h2 class="text-xl font-bold">{{ number_format($statusCounts['rejected']) }}</h2>
    </div>
    <div class="mini-card" style="background:var(--bd-g2)">
      <i class="fas fa-check-circle text-3xl mb-2"></i>
      <p class="text-sm">কমপ্লিটেড</p>
      <h2 class="text-xl font-bold">{{ number_format($statusCounts['completed']) }}</h2>
    </div>
  </div>
</div>
@endsection
