@extends('layouts.app')
@section('title','Tableau de bord')
@section('page-title','Tableau de bord')

@section('topbar-actions')
  <span style="font-size:12px;color:var(--gray-400);background:var(--gray-100);padding:5px 10px;border-radius:6px">
    {{ now()->isoFormat('dddd D MMMM YYYY') }}
  </span>
@endsection

@section('content')

{{-- ── Stats row ──────────────────────────────────────────── --}}
<div class="stats-grid" style="grid-template-columns:repeat(6,1fr);margin-bottom:24px">

  <div class="stat-card blue">
    <div class="stat-header">
      <div><div class="stat-label">Clients totaux</div><div class="stat-value">{{ $stats['total_clients'] }}</div></div>
      <div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
    </div>
    <div class="stat-sub">{{ $stats['active_clients'] }} actifs · {{ $stats['prospect_clients'] }} prospects</div>
  </div>

  <div class="stat-card green">
    <div class="stat-header">
      <div><div class="stat-label">Chiffre d'affaires</div><div class="stat-value" style="font-size:18px">{{ number_format($stats['total_revenue'],0,',',' ') }}</div></div>
      <div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
    </div>
    <div class="stat-sub">XAF — ventes acceptées</div>
  </div>

  <div class="stat-card yellow">
    <div class="stat-header">
      <div><div class="stat-label">Alertes stock</div><div class="stat-value">{{ $stats['low_stock'] }}</div></div>
      <div class="stat-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    </div>
    <div class="stat-sub">Produits sous le seuil</div>
  </div>

  <div class="stat-card">
    <div class="stat-header">
      <div><div class="stat-label">Ventes aujourd'hui</div><div class="stat-value">{{ $stats['today_sales'] }}</div></div>
      <div class="stat-icon navy"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg></div>
    </div>
    <div class="stat-sub">{{ number_format($stats['today_revenue'],0,',',' ') }} XAF</div>
  </div>

  <div class="stat-card purple">
    <div class="stat-header">
      <div><div class="stat-label">Docs brouillon</div><div class="stat-value">{{ $stats['pending_docs'] }}</div></div>
      <div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
    </div>
    <div class="stat-sub">En attente de traitement</div>
  </div>

  <div class="stat-card red">
    <div class="stat-header">
      <div><div class="stat-label">Inactifs</div><div class="stat-value">{{ $stats['inactive_clients'] }}</div></div>
      <div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
    </div>
    <div class="stat-sub">Clients à relancer</div>
  </div>

</div>

{{-- ── Main grid ──────────────────────────────────────────── --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px">

  {{-- Recent Sales --}}
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          Dernières ventes
        </div>
      </div>
      <a href="{{ route('sales.index') }}" class="btn btn-ghost btn-sm">Voir tout →</a>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead><tr><th>Référence</th><th>Client</th><th>Montant</th><th>Statut</th></tr></thead>
        <tbody>
          @forelse($recentSales as $sale)
          <tr>
            <td><a href="{{ route('sales.show',$sale) }}" class="table-link">{{ $sale->reference }}</a></td>
            <td class="td-primary">{{ $sale->client?->name ?? '—' }}</td>
            <td style="font-weight:600">{{ number_format($sale->amount,0,',',' ') }} <span class="td-muted">XAF</span></td>
            <td><span class="badge badge-{{ $sale->status_color }}">{{ $sale->status_label }}</span></td>
          </tr>
          @empty
          <tr><td colspan="4"><div class="empty-state" style="padding:28px 0">
            <div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg></div>
            <h3>Aucune vente</h3>
          </div></td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- Low stock --}}
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          Stock critique
        </div>
      </div>
      <a href="{{ route('products.index') }}?low_stock=1" class="btn btn-ghost btn-sm">Voir tout →</a>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead><tr><th>Produit</th><th>Réf.</th><th>Stock</th><th>Seuil</th></tr></thead>
        <tbody>
          @forelse($lowStockProducts as $p)
          <tr>
            <td><a href="{{ route('products.show',$p) }}" class="table-link">{{ $p->name }}</a></td>
            <td><span class="code-tag">{{ $p->reference }}</span></td>
            <td>
              <span style="font-weight:700;color:{{ $p->stock <= $p->min_stock ? 'var(--error)' : 'var(--warning)' }}">{{ $p->stock }}</span>
            </td>
            <td class="td-muted">{{ $p->alert_stock }}</td>
          </tr>
          @empty
          <tr><td colspan="4"><div class="empty-state" style="padding:28px 0">
            <div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24"><polyline points="20 6 9 17 4 12"/></svg></div>
            <h3 style="color:var(--success)">Stocks OK ✓</h3>
          </div></td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>

{{-- ── Recent movements + Quick actions ──────────────────── --}}
<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px">

  {{-- Movements --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
        Derniers mouvements de stock
      </div>
      <a href="{{ route('stock.index') }}" class="btn btn-ghost btn-sm">Voir tout →</a>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead><tr><th>Produit</th><th>Type</th><th>Qté</th><th>Par</th><th>Date</th></tr></thead>
        <tbody>
          @forelse($recentMovements as $mv)
          <tr>
            <td class="td-primary">{{ $mv->product?->name ?? '—' }}</td>
            <td><span class="badge badge-{{ $mv->type_color }}">{{ $mv->type_label }}</span></td>
            <td style="font-weight:700">{{ $mv->type==='out' ? '-' : '+' }}{{ $mv->quantity }}</td>
            <td class="td-muted">{{ $mv->user?->name ?? '—' }}</td>
            <td class="td-muted">{{ $mv->created_at->format('d/m H:i') }}</td>
          </tr>
          @empty
          <tr><td colspan="5"><div class="empty-state" style="padding:28px 0"><div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/></svg></div><h3>Aucun mouvement</h3></div></td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- Quick actions --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        Actions rapides
      </div>
    </div>
    <div class="card-body">
      <div class="quick-grid">
        <a href="{{ route('clients.create') }}" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
          Nouveau client
        </a>
        <a href="{{ route('sales.create') }}" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/><line x1="12" y1="6" x2="12" y2="10"/><line x1="10" y1="8" x2="14" y2="8"/></svg>
          Nouvelle vente
        </a>
        <a href="{{ route('documents.create') }}?type=DEV" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
          Nouveau devis
        </a>
        <a href="{{ route('documents.create') }}?type=FAC" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
          Nouvelle facture
        </a>
        <a href="{{ route('products.create') }}" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/></svg>
          Ajouter produit
        </a>
        <a href="{{ route('stock.index') }}" class="quick-action">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
          Mouvement stock
        </a>
      </div>
    </div>
  </div>

</div>

@endsection