@extends('layout.user')

@section('title', 'ইনকাম বিবরণ')

@section('content')
@php
    $gs  = \App\Models\GeneralSetting::first();

    $primary   = '#2563EB';
    $secondary = '#1E40AF';
    $accent    = '#38BDF8';
    $ink       = '#0F172A';

    $label  = $label  ?? 'আজকের ইনকাম';
    $income = $income ?? 0;
    $date   = $date   ?? now()->format('d M Y, h:i A');
@endphp

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

<style>
  :root{
    --blue-main: {{ $primary }};
    --blue-dark: {{ $secondary }};
    --blue-soft: {{ $accent }};
    --ink: {{ $ink }};
  }

  body{
    background:#F1F5F9;
    font-family: 'Hind Siliguri', sans-serif;
  }

  .income-card{
    background:linear-gradient(160deg, var(--blue-main), var(--blue-dark));
    border-radius:24px;
    padding:40px 24px;
    color:#fff;
    box-shadow:0 20px 35px rgba(37,99,235,.3);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .income-card::after{
    content:'';
    position:absolute;
    top:-40px; right:-40px;
    width:140px; height:140px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
  }

  .income-icon{
    width:70px; height:70px;
    border-radius:20px;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:20px;
    border:1px solid rgba(255,255,255,.25);
  }

  .income-amount{
    font-size:2.5rem;
    font-weight:900;
    letter-spacing:.5px;
    line-height:1.2;
  }

  .income-label{
    font-size:1.1rem;
    font-weight:600;
    margin-top:6px;
  }

  .income-date{
    font-size:.95rem;
    font-weight:600;
    margin-top:14px;
    color:#ffffff;
    background:rgba(255,255,255,.25);
    padding:6px 18px;
    border-radius:50px;
  }

  .back-btn{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.8rem 2.2rem;
    border-radius:16px;
    background:#fff;
    color:var(--blue-main);
    font-weight:800;
    text-decoration:none;
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
    transition:.3s ease;
    border:1px solid #e2e8f0;
  }

  .back-btn:hover{
    background:var(--blue-main);
    color:#fff;
    transform:translateY(-3px);
  }
</style>

<div class="container-fluid py-5" style="max-width:450px;margin:auto;">

  <div class="income-card mb-5">
      <div class="income-icon">
          <i class="fas fa-wallet"></i>
      </div>

      <div class="income-amount">
          {{ number_format($income, 2) }} ৳
      </div>

      <div class="income-label">
          {{ $label }}
      </div>

      <div class="income-date">
          <i class="far fa-calendar-alt me-1"></i> {{ $date }}
      </div>
  </div>

  <div class="text-center">
      <a href="{{ url()->previous() }}" class="back-btn">
          <i class="fas fa-arrow-left"></i>
          Back
      </a>
  </div>

</div>
@endsection