@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">

  <x-ui.stat-card label="Clients totaux" :value="$stats['total_clients']" color="blue"
    :sub="$stats['active_clients'].' actifs · '.$stats['prospect_clients'].' prospects'">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

  <x-ui.stat-card label="Chiffre d'affaires" :value="number_format($stats['total_revenue'],0,',',' ')" color="green"
    sub="XAF — ventes acceptées" value-size="18px">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

  <x-ui.stat-card label="Alertes stock" :value="$stats['low_stock']" color="yellow" sub="Produits sous le seuil">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

  <x-ui.stat-card label="Ventes aujourd'hui" :value="$stats['today_sales']" color="navy"
    :sub="number_format($stats['today_revenue'],0,',',' ').' XAF'">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

  <x-ui.stat-card label="Docs brouillon" :value="$stats['pending_docs']" color="purple" sub="En attente de traitement">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

  <x-ui.stat-card label="Inactifs" :value="$stats['inactive_clients']" color="red" sub="Clients à relancer">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>

</div>

{{-- ── Chiffre d'affaires par mois (retour utilisateur INSTALL.md 17/08,
     point 8) : vue par année + graphique en barres SVG fait à la main
     (pas de librairie externe, cohérent avec la règle "zéro nouvelle
     dépendance" déjà actée à l'étape 4 pour éviter une lib PDF). ────── --}}
@php
  $moisLabels = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'];
  $maxTotal   = max($revenueChart->max('total'), 1);
  $chartW = 760; $chartH = 180; $barGap = 6;
  $barW   = ($chartW / 12) - $barGap;
@endphp
<div class="card" style="margin-bottom:20px">
  <div class="card-header">
    <div class="card-title">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>
      Chiffre d'affaires
    </div>
    <form method="GET" action="{{ route('dashboard') }}">
      <select name="year" class="form-control form-control-sm" onchange="this.form.submit()" style="width:auto">
        @foreach($availableYears as $y)
          <option value="{{ $y }}" @selected($y == $year)>{{ $y }}</option>
        @endforeach
      </select>
    </form>
  </div>
  <div class="card-body">
    <svg viewBox="0 0 {{ $chartW }} {{ $chartH + 24 }}" style="width:100%;height:auto" role="img" aria-label="Chiffre d'affaires mensuel {{ $year }}">
      @foreach($revenueChart as $i => $m)
        @php
          $barH = $maxTotal > 0 ? max(($m['total'] / $maxTotal) * $chartH, $m['total'] > 0 ? 3 : 0) : 0;
          $x    = $i * ($barW + $barGap);
          $y    = $chartH - $barH;
        @endphp
        <rect x="{{ $x }}" y="{{ $y }}" width="{{ $barW }}" height="{{ $barH }}" rx="3"
              fill="{{ $m['total'] > 0 ? 'var(--brand-500, #2563eb)' : 'var(--gray-200)' }}">
          <title>{{ $moisLabels[$i] }} {{ $year }} — {{ number_format($m['total'],0,',',' ') }} XAF ({{ $m['nb'] }} vente(s))</title>
        </rect>
        <text x="{{ $x + $barW / 2 }}" y="{{ $chartH + 16 }}" text-anchor="middle" font-size="11" fill="var(--gray-400)">{{ $moisLabels[$i] }}</text>
      @endforeach
    </svg>
    <div class="table-container" style="margin-top:12px">
      <table class="data-table">
        <thead><tr><th>Mois</th><th>Ventes</th><th>Chiffre d'affaires</th></tr></thead>
        <tbody>
          @foreach($revenueChart as $i => $m)
          <tr>
            <td>{{ $moisLabels[$i] }} {{ $year }}</td>
            <td class="td-muted">{{ $m['nb'] }}</td>
            <td style="font-weight:600">{{ number_format($m['total'],0,',',' ') }} XAF</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>

{{-- ── Relances à faire (retour utilisateur INSTALL.md 17/08, point 2) ── --}}
<div class="card" id="relances-dues" style="margin-bottom:20px">
  <div class="card-header">
    <div class="card-title">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      Relances à faire
    </div>
  </div>
  <div class="table-container">
    <table class="data-table">
      <thead><tr><th>Client</th><th>Date</th><th>Note</th><th></th></tr></thead>
      <tbody>
        @forelse($dueFollowUps as $fu)
        <tr>
          <td><a href="{{ route('clients.show',$fu->client) }}" class="table-link">{{ $fu->client?->name }}</a></td>
          <td class="td-muted" style="color:{{ $fu->scheduled_date->isPast() ? 'var(--error)' : 'var(--gray-400)' }}">{{ $fu->scheduled_date->format('d/m/Y H:i') }}</td>
          <td>{{ $fu->notes ?? '—' }}</td>
          <td>
            <form method="POST" action="{{ route('followups.update',$fu) }}">
              @csrf @method('PUT')
              <input type="hidden" name="status" value="done">
              <button type="submit" class="btn btn-success btn-sm" style="font-size:11.5px;padding:3px 10px">✓ Fait</button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="4"><div class="empty-state" style="padding:24px 0"><h3 style="font-size:13px;color:var(--success)">Aucune relance en attente ✓</h3></div></td></tr>
        @endforelse
      </tbody>
    </table>
  </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><x-ui.badge :color="$sale->status_color">{{ $sale->status_label }}</x-ui.badge></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><x-ui.badge :color="$mv->type_color">{{ $mv->type_label }}</x-ui.badge></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