@extends('layouts.app')
@section('title','Mouvements de stock')
@section('page-title','Mouvements de stock')

@section('content')
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
  <div class="stat-card blue"><div class="stat-header"><div><div class="stat-label">Total mouvements</div><div class="stat-value">{{ $stats['total'] }}</div></div><div class="stat-icon blue"><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></div></div></div>
  <div class="stat-card green"><div class="stat-header"><div><div class="stat-label">Entrées aujourd'hui</div><div class="stat-value">+{{ $stats['today_in'] }}</div></div><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></div></div></div>
  <div class="stat-card red"><div class="stat-header"><div><div class="stat-label">Sorties aujourd'hui</div><div class="stat-value">-{{ $stats['today_out'] }}</div></div><div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></div></div></div>
  <div class="stat-card yellow"><div class="stat-header"><div><div class="stat-label">Ajustements</div><div class="stat-value">{{ $stats['adjustments'] }}</div></div><div class="stat-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div></div></div>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px">

  <div class="card">
    <div class="card-header"><div class="card-title">Historique</div></div>
    <div class="filter-bar">
      <form method="GET" style="display:flex;gap:8px;flex-wrap:wrap;width:100%">
        <div class="search-wrap">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" name="search" class="form-control" placeholder="Produit…" value="{{ request('search') }}">
        </div>
        <select name="type" class="form-control" style="width:auto">
          <option value="">Tous types</option>
          <option value="in" @selected(request('type')==='in')>Entrée</option>
          <option value="out" @selected(request('type')==='out')>Sortie</option>
          <option value="adjustment" @selected(request('type')==='adjustment')>Ajustement</option>
        </select>
        <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
        @if(request()->hasAny(['search','type']))<a href="{{ route('stock.index') }}" class="btn btn-ghost btn-sm">Reset</a>@endif
      </form>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead><tr><th>Produit</th><th>Type</th><th>Qté</th><th>Raison</th><th>Par</th><th>Date</th><th></th></tr></thead>
        <tbody>
          @forelse($movements as $mv)
          <tr>
            <td><a href="{{ route('products.show',$mv->product) }}" class="table-link">{{ $mv->product?->name }}</a><div class="td-muted" style="font-size:11px">{{ $mv->product?->reference }}</div></td>
            <td><span class="badge badge-{{ $mv->type_color }}">{{ $mv->type_label }}</span></td>
            <td style="font-weight:700;color:{{ $mv->type==='out' ? 'var(--error)' : 'var(--success)' }}">{{ $mv->type==='out' ? '-' : '+' }}{{ $mv->quantity }}</td>
            <td class="td-muted" style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $mv->reason ?? '—' }}</td>
            <td style="font-size:12.5px">{{ $mv->user?->name ?? '—' }}</td>
            <td class="td-muted" style="white-space:nowrap">{{ $mv->created_at->format('d/m H:i') }}</td>
            <td>
              @if(auth()->user()->isAdmin())
              <form method="POST" action="{{ route('stock.destroy',$mv) }}">@csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Supprimer ?" style="color:var(--error)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
              </form>
              @endif
            </td>
          </tr>
          @empty
          <tr><td colspan="7"><div class="empty-state"><div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><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"/></svg></div><h3>Aucun mouvement</h3></div></td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <div class="pagination-wrap">
      <div class="pagination-info">{{ $movements->firstItem() }}–{{ $movements->lastItem() }} sur {{ $movements->total() }}</div>
      {{ $movements->links() }}
    </div>
  </div>

  <div class="card" style="align-self:start">
    <div class="card-header"><div class="card-title">Nouveau mouvement</div></div>
    <div class="card-body">
      <form method="POST" action="{{ route('stock.store') }}">
        @csrf
        <div class="form-group">
          <label class="form-label">Produit <span class="req">*</span></label>
          <select name="product_id" class="form-control" required>
            <option value="">— Sélectionner —</option>
            @foreach($products as $p)<option value="{{ $p->id }}" @selected(old('product_id')==$p->id)>{{ $p->reference }} — {{ $p->name }} (stock: {{ $p->stock }})</option>@endforeach
          </select>
          @error('product_id')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Type <span class="req">*</span></label>
          <select name="type" class="form-control" required>
            <option value="in" @selected(old('type')==='in')>📥 Entrée</option>
            <option value="out" @selected(old('type')==='out')>📤 Sortie</option>
            <option value="adjustment" @selected(old('type')==='adjustment')>🔧 Ajustement</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Quantité <span class="req">*</span></label>
          <input type="number" name="quantity" class="form-control @error('quantity') is-invalid @enderror" min="1" value="{{ old('quantity',1) }}" required>
          @error('quantity')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Raison / Note</label>
          <textarea name="reason" class="form-control" rows="3" placeholder="Motif du mouvement…">{{ old('reason') }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary" style="width:100%">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><polyline points="20 6 9 17 4 12"/></svg>
          Enregistrer
        </button>
      </form>
    </div>
  </div>
</div>
@endsection