@extends('layout.user')

@section('title', 'ওয়ালেট')

@section('content')
@php
    $primaryBlue = '#2563eb'; 
    $secondaryBlue = '#1d4ed8';
    $lightBlue = '#eff6ff';
    $ink = '#1e293b';

    $now   = now()->format('d M Y, h:i A');
    $menus = [
        ['label' => 'ভাউচার ব্যালেন্স',        'href' => url('/voucher'),          'icon' => 'fa-ticket', 'color' => '#2563eb'],
        ['label' => 'ইনকাম হিস্ট্রি',          'href' => url('/income-history'),   'icon' => 'fa-clock-rotate-left', 'color' => '#1d4ed8'],

        ['label' => 'আজকের ইনকাম',            'href' => url('/income/today'),      'icon' => 'fa-calendar-day', 'color' => '#3b82f6'],
        ['label' => 'গতকালের ইনকাম',          'href' => url('/income/yesterday'),   'icon' => 'fa-calendar-check', 'color' => '#6366f1'],
        ['label' => '৭ দিনের ইনকাম',          'href' => url('/income/last-7-days'), 'icon' => 'fa-calendar-week', 'color' => '#8b5cf6'],
        ['label' => '৩০ দিনের ইনকাম',         'href' => url('/income/last-30-days'),'icon' => 'fa-calendar-alt', 'color' => '#ec4899'],
        ['label' => 'এখন পর্যন্ত মোট ইনকাম',  'href' => url('/income/total'),       'icon' => 'fa-coins', 'color' => '#f59e0b'],
    ];
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  :root {
    --primary-blue: {{ $primaryBlue }};
    --secondary-blue: {{ $secondaryBlue }};
    --bg-light: {{ $lightBlue }};
    --text-dark: {{ $ink }};
  }

  .blue-border { border: 1.5px solid #2563eb !important; }

  .wallet-card {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 24px;
    padding: 30px 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  }

  .wallet-card::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }

  .balance-label {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }

  .balance-amount {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .balance-date {
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    backdrop-filter: blur(5px);
  }

  .income-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 25px 0 15px 5px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .menu-item {
    background: #fff;
    padding: 14px 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  }

  .menu-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .menu-info {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .icon-box {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
  }

  .label-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
  }

  .arrow-icon {
    color: #cbd5e1;
    font-size: 0.9rem;
    transition: transform 0.3s;
  }

  .menu-item:hover .arrow-icon {
    color: var(--primary-blue);
    transform: translateX(3px);
  }
</style>

<div class="container py-4" style="max-width:480px;">

  <div class="wallet-card text-center blue-border">
    <div class="balance-label">টোটাল ব্যালেন্স</div>
    <div class="balance-amount">
        <i class="fas fa-wallet" style="font-size: 1.8rem;"></i>
        <span>{{ number_format(Auth::user()->balance, 2) }} ৳</span>
    </div>
    <div class="balance-date">
        <i class="far fa-clock me-1"></i> {{ $now }}
    </div>
  </div>

  <h3 class="income-section-title">
    <i class="fas fa-chart-line text-primary"></i> ইনকাম রিপোর্ট বিবরণ
  </h3>

  <div class="menu-list">
    @foreach($menus as $m)
      <a href="{{ $m['href'] }}" class="menu-item blue-border">
        <div class="menu-info">
          <div class="icon-box"
               style="background-color: {{ $m['color'] }}; box-shadow: 0 4px 10px {{ $m['color'] }}44;">
            <i class="fas {{ $m['icon'] }}"></i>
          </div>
          <span class="label-text">{{ $m['label'] }}</span>
        </div>
        <i class="fas fa-chevron-right arrow-icon"></i>
      </a>
    @endforeach
  </div>

</div>
@endsection