@extends('layouts.app')
@section('title', __('app.dashboard'))
@section('content')

<div class="row g-3 mb-4">
  @php
    $cards = [
      ['label' => __('customers.customers'), 'value' => number_format($stats['customers']), 'icon' => 'bi-people', 'bg' => '#eef2ff', 'color' => '#5b3df5'],
      ['label' => __('sales.sales') . ' (' . __('app.this_month') . ')', 'value' => money($stats['sales_month']), 'icon' => 'bi-receipt', 'bg' => '#e6fcf7', 'color' => '#00c9a7'],
      ['label' => __('sales.profit') . ' (' . __('app.this_month') . ')', 'value' => money($stats['profit_month']), 'icon' => 'bi-graph-up-arrow', 'bg' => '#fff4e6', 'color' => '#f59f00'],
      ['label' => __('expenses.expenses') . ' (' . __('app.this_month') . ')', 'value' => money($stats['expenses_month']), 'icon' => 'bi-wallet2', 'bg' => '#ffe9ec', 'color' => '#e03131'],
    ];
  @endphp
  @foreach($cards as $c)
  <div class="col-6 col-xl-3">
    <div class="card stat-card h-100"><div class="card-body d-flex align-items-center gap-3">
      <div class="icon" style="background:{{ $c['bg'] }};color:{{ $c['color'] }}"><i class="bi {{ $c['icon'] }}"></i></div>
      <div><div class="text-secondary small fw-semibold">{{ $c['label'] }}</div><div class="fs-5 fw-bold">{{ $c['value'] }}</div></div>
    </div></div>
  </div>
  @endforeach
</div>

<div class="row g-3 mb-4">
  <div class="col-4">
    <a href="{{ route('orders.index') }}" class="text-decoration-none">
    <div class="card text-center h-100"><div class="card-body">
      <div class="fs-3 fw-bold text-primary">{{ $stats['orders_active'] }}</div>
      <div class="text-secondary small fw-semibold">{{ __('orders.orders') }}</div>
    </div></div></a>
  </div>
  <div class="col-4">
    <a href="{{ route('orders.index', ['status' => 'ready']) }}" class="text-decoration-none">
    <div class="card text-center h-100"><div class="card-body">
      <div class="fs-3 fw-bold text-success">{{ $stats['orders_ready'] }}</div>
      <div class="text-secondary small fw-semibold">{{ __('orders.status.ready') }}</div>
    </div></div></a>
  </div>
  <div class="col-4">
    <a href="{{ route('orders.index', ['late' => 1]) }}" class="text-decoration-none">
    <div class="card text-center h-100"><div class="card-body">
      <div class="fs-3 fw-bold text-danger">{{ $stats['orders_late'] }}</div>
      <div class="text-secondary small fw-semibold">{{ __('orders.late_orders') }}</div>
    </div></div></a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-lg-8">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3">{{ __('reports.sales_report') }}</h6>
      <canvas id="salesChart" height="110"></canvas>
    </div></div>
  </div>
  <div class="col-lg-4">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3">{{ __('reports.top_products') }}</h6>
      @forelse($topItems as $item)
        <div class="d-flex justify-content-between border-bottom py-2 small">
          <span class="text-truncate">{{ $item->saleable->display_name ?? '—' }}</span>
          <span class="badge text-bg-primary">{{ $item->qty }}</span>
        </div>
      @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
      @endforelse
    </div></div>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-lg-6">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3">{{ __('frames.frames') }} — {{ __('reports.top_products') }}</h6>
      @forelse($topFrames as $item)
        <div class="d-flex justify-content-between border-bottom py-2 small">
          <span class="text-truncate">{{ $item->saleable->display_name ?? '—' }}</span>
          <span class="badge text-bg-info">{{ $item->qty }}</span>
        </div>
      @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
      @endforelse
    </div></div>
  </div>
  <div class="col-lg-6">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3">{{ __('lenses.lenses') }} — {{ __('reports.top_products') }}</h6>
      @forelse($topLenses as $item)
        <div class="d-flex justify-content-between border-bottom py-2 small">
          <span class="text-truncate">{{ $item->saleable->display_name ?? '—' }}</span>
          <span class="badge text-bg-info">{{ $item->qty }}</span>
        </div>
      @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
      @endforelse
    </div></div>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-6">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3 text-danger"><i class="bi bi-exclamation-triangle"></i> {{ __('inventory.low_stock_alert') }}</h6>
      @forelse($lowFrames->concat($lowLenses) as $item)
        <div class="d-flex justify-content-between border-bottom py-2 small">
          <span class="text-truncate">{{ $item->display_name }}</span>
          <span class="badge text-bg-danger">{{ $item->stockIn() }}</span>
        </div>
      @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
      @endforelse
    </div></div>
  </div>
  <div class="col-lg-6">
    <div class="card h-100"><div class="card-body">
      <h6 class="fw-bold mb-3">{{ __('orders.orders') }}</h6>
      @forelse($currentOrders as $order)
        <a href="{{ route('orders.show', $order) }}" class="d-flex justify-content-between border-bottom py-2 small text-decoration-none text-body">
          <span>{{ $order->number }} — {{ $order->customer->name ?? '' }}</span>
          <span class="badge text-bg-{{ order_status_color($order->status) }}">{{ order_status_label($order->status) }}</span>
        </a>
      @empty
        <p class="text-secondary small">{{ __('app.no_data') }}</p>
      @endforelse
    </div></div>
  </div>
</div>

@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('salesChart'),{
  type:'line',
  data:{
    labels:@json($salesChart->pluck('date')->map(fn($d)=>\Illuminate\Support\Carbon::parse($d)->format('m/d'))),
    datasets:[{label:@json(__('sales.sales')),data:@json($salesChart->pluck('total')->map(fn($t)=>(float)$t)),borderColor:'#5b3df5',backgroundColor:'rgba(91,61,245,.08)',fill:true,tension:.35,pointRadius:2}]
  },
  options:{plugins:{legend:{display:false}},scales:{y:{beginAtZero:true}}}
});
</script>
@endpush