@extends('layouts.app')
@section('title','Nouvelle vente')
@section('page-title','Nouvelle vente')
@section('content')
<div class="card">
  <div class="card-header">
    <div class="card-title">Créer une vente</div>
    <a href="{{ route('sales.index') }}" class="btn btn-ghost btn-sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="15 18 9 12 15 6"/></svg>Retour</a>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ route('sales.store') }}">
      @csrf
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Référence <span class="req">*</span></label>
          <input type="text" name="reference" class="form-control @error('reference') is-invalid @enderror" value="{{ old('reference',$nextRef) }}" required>
          @error('reference')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Client <span class="req">*</span></label>
          <select name="client_id" class="form-control @error('client_id') is-invalid @enderror" required>
            <option value="">— Sélectionner un client —</option>
            @foreach($clients as $c)<option value="{{ $c->id }}" @selected(old('client_id',request('client_id'))==$c->id)>{{ $c->name }}</option>@endforeach
          </select>
          @error('client_id')<div class="form-error">{{ $message }}</div>@enderror
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Statut</label>
          <select name="status" class="form-control">
            <option value="draft" @selected(old('status','draft')==='draft')>Brouillon</option>
            <option value="sent" @selected(old('status')==='sent')>Envoyé</option>
            <option value="accepted" @selected(old('status')==='accepted')>Accepté</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Notes</label>
          <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="Notes optionnelles">
        </div>
      </div>

      <div class="divider"></div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
        <h3 style="font-size:14px;font-weight:700">Lignes de vente</h3>
        <button type="button" class="btn btn-outline btn-sm" onclick="addSaleItem()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Ajouter une ligne
        </button>
      </div>
      <div class="table-container" style="border:1px solid var(--gray-200);border-radius:var(--radius-sm)">
        <table class="data-table" style="min-width:680px">
          <thead><tr><th>Produit</th><th>Quantité</th><th>Prix unitaire</th><th>Total</th><th></th></tr></thead>
          <tbody id="sale-items-body"></tbody>
          <tfoot>
            <tr><td colspan="3" style="text-align:right;font-weight:700;padding:12px;background:var(--gray-50)">TOTAL</td>
                <td style="font-weight:800;font-size:15px;background:var(--gray-50)" id="sale-grand-total">0</td><td style="background:var(--gray-50)"></td></tr>
          </tfoot>
        </table>
      </div>
      @error('items')<div class="form-error" style="margin-top:8px">{{ $message }}</div>@enderror

      <div class="form-actions" style="border-top:1px solid var(--gray-100);padding-top:16px;margin-top:20px">
        <button type="submit" class="btn btn-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/></svg>Enregistrer la vente</button>
        <a href="{{ route('sales.index') }}" class="btn btn-outline">Annuler</a>
      </div>
    </form>
  </div>
</div>
@push('scripts')
<script>
window.PRODUCTS = @json($products->map(fn($p)=>['id'=>$p->id,'name'=>$p->name,'reference'=>$p->reference,'selling_price'=>$p->selling_price,'stock'=>$p->stock]));
document.addEventListener('DOMContentLoaded', () => addSaleItem());
</script>
@endpush
@endsection