@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">Notes</label>
          <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="Notes optionnelles">
        </div>
      </div>
      {{-- Une vente est directement acceptée à sa création (retour
           utilisateur INSTALL.md 17/08, point 9) : stock décrémenté et
           facture générée immédiatement, sans statut intermédiaire à
           choisir. --}}

      <div class="divider"></div>
      <h3 style="font-size:14px;font-weight:700;margin-bottom:12px">Lignes de vente</h3>
      <div class="table-container" style="border:1px solid var(--gray-200);border-radius:var(--radius-sm)">
        <table class="data-table" style="min-width:720px">
          <thead><tr><th style="width:34px">#</th><th>Produit</th><th style="width:90px">Quantité</th><th style="width:120px">Prix unitaire</th><th style="width:110px">Total</th><th style="width:40px"></th></tr></thead>
          <tbody id="sale-items-body">
            <tr class="sale-add-row" id="sale-add-row" onclick="addSaleItem()">
              <td colspan="6">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13" style="vertical-align:-2px;margin-right:4px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Ajouter un produit
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr><td colspan="4" 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>

{{-- Panneau de création rapide de produit — évite une resaisie libre qui
     créerait un doublon dans le catalogue (cf. INSTRUCTIONS-claude-cli.md, étape 1) --}}
<div class="modal-overlay" id="quick-product-modal">
  <div class="modal">
    <div class="modal-header">
      <div class="modal-title">Créer un nouveau produit</div>
      <button type="button" class="modal-close" onclick="closeQuickCreateProduct()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="modal-body">
      <div id="quick-product-error" class="form-error" style="display:none;margin-bottom:12px"></div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Référence <span class="req">*</span></label>
          <input type="text" id="qp-reference" class="form-control" placeholder="REF-001">
        </div>
        <div class="form-group">
          <label class="form-label">Catégorie <span class="req">*</span></label>
          <input type="text" id="qp-category" class="form-control" list="qp-cats-list" placeholder="Ex: Imprimantes">
          <datalist id="qp-cats-list">@foreach($categories as $c)<option value="{{ $c }}">@endforeach</datalist>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Nom du produit <span class="req">*</span></label>
        <input type="text" id="qp-name" class="form-control">
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Prix de vente (XAF) <span class="req">*</span></label>
          <input type="number" id="qp-selling-price" class="form-control" step="0.01" min="0">
        </div>
        <div class="form-group">
          <label class="form-label">Prix d'achat (XAF) <span class="req">*</span></label>
          <input type="number" id="qp-purchase-price" class="form-control" step="0.01" min="0">
          <div class="form-hint">Pré-rempli à 20% du prix de vente, modifiable.</div>
        </div>
      </div>
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label">Stock initial <span class="req">*</span></label>
        <input type="number" id="qp-stock" class="form-control" min="0" value="0">
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" onclick="closeQuickCreateProduct()">Annuler</button>
      <button type="button" class="btn btn-primary" onclick="submitQuickCreateProduct()">Créer et ajouter à la vente</button>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  addSaleItem();
  initPurchasePriceRule('qp-selling-price', 'qp-purchase-price');
});
</script>
@endpush
@endsection