@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">
  <x-ui.stat-card label="Total mouvements" :value="$stats['total']" color="blue">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Entrées aujourd'hui" value="+{{ $stats['today_in'] }}" color="green">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Sorties aujourd'hui" value="-{{ $stats['today_out'] }}" color="red">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>
  <x-ui.stat-card label="Ajustements" :value="$stats['adjustments']" color="yellow">
    <x-slot:icon><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></x-slot:icon>
  </x-ui.stat-card>
</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>
          <option value="retour" @selected(request('type')==='retour')>Retour</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><x-ui.badge :color="$mv->type_color">{{ $mv->type_label }}</x-ui.badge></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
        @php $oldStockProduct = old('product_id') ? $products->firstWhere('id', (int) old('product_id')) : null; @endphp
        <div class="form-group" style="position:relative">
          <label class="form-label">Produit <span class="req">*</span></label>
          <input type="hidden" name="product_id" id="stock-product-id" value="{{ $oldStockProduct?->id }}" required>
          <input type="text" class="form-control @error('product_id') is-invalid @enderror" autocomplete="off"
                 id="stock-product-search"
                 placeholder="Rechercher un produit (nom ou référence)…"
                 value="{{ $oldStockProduct ? "{$oldStockProduct->reference} — {$oldStockProduct->name}" : '' }}"
                 oninput="stockProductSearchInput(this.value)"
                 onfocus="stockProductSearchInput(this.value)"
                 onblur="setTimeout(closeStockProductResults, 200)">
          <div class="product-search-results" id="stock-product-results"></div>
          <div class="td-muted" id="stock-product-stock-hint" style="font-size:11px;margin-top:2px">{{ $oldStockProduct ? "Stock disponible : {$oldStockProduct->stock}" : '' }}</div>
          <div class="stock-warning" id="stock-movement-warning" style="display:none;font-size:11px;font-weight:600;margin-top:2px;color:var(--error)"></div>
          @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 onchange="updateStockMovementWarning()">
            <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="text" inputmode="decimal" data-decimal name="quantity" class="form-control @error('quantity') is-invalid @enderror" value="{{ old('quantity',1) }}" required oninput="updateStockMovementWarning()">
          @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