@extends('layouts.app')
@section('title','Nouveau document')
@section('page-title','Nouveau document')
@section('content')
<form method="POST" action="{{ route('documents.store') }}">
  @csrf
  <div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start">

    <div>
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <div class="card-title">En-tête du document</div>
          <a href="{{ route('documents.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">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Type de document <span class="req">*</span></label>
              <select name="type_code" class="form-control" required>
                @foreach($types as $type)<option value="{{ $type->code }}" @selected(old('type_code',$typeCode)===$type->code)>{{ $type->label }}</option>@endforeach
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Titre <span class="req">*</span></label>
              <input type="text" name="title" class="form-control" value="{{ old('title') }}" required placeholder="Ex: Devis matériel informatique">
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Client (sélectionner ou saisir)</label>
            <select name="client_id" class="form-control" id="client-select" onchange="fillClientData(this)">
              <option value="">— Sélectionner un client —</option>
              @foreach($clients as $client)
                <option value="{{ $client->id }}" data-nom="{{ $client->name }}" data-email="{{ $client->email }}" data-phone="{{ $client->phone }}" data-city="{{ $client->city }}" @selected(old('client_id',request('client_id'))==$client->id)>{{ $client->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Nom client <span class="req">*</span></label>
              <input type="text" name="client_nom" id="client_nom" class="form-control" value="{{ old('client_nom') }}" required>
            </div>
            <div class="form-group">
              <label class="form-label">Email client</label>
              <input type="email" name="client_email" id="client_email" class="form-control" value="{{ old('client_email') }}">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Téléphone</label>
              <input type="text" name="client_telephone" id="client_telephone" class="form-control" value="{{ old('client_telephone') }}">
            </div>
            <div class="form-group">
              <label class="form-label">Adresse</label>
              <input type="text" name="client_adresse" id="client_adresse" class="form-control" value="{{ old('client_adresse') }}">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Correspondant</label>
              <input type="text" name="correspondant" class="form-control" value="{{ old('correspondant') }}" placeholder="Nom du contact">
            </div>
            <div class="form-group">
              <label class="form-label">Tél. correspondant</label>
              <input type="text" name="correspondant_tel" class="form-control" value="{{ old('correspondant_tel') }}">
            </div>
          </div>
          <div class="form-row-3">
            <div class="form-group">
              <label class="form-label">Date du document <span class="req">*</span></label>
              <input type="date" name="date_document" class="form-control" value="{{ old('date_document',date('Y-m-d')) }}" required>
            </div>
            <div class="form-group">
              <label class="form-label">Date de validité</label>
              <input type="date" name="date_validite" class="form-control" value="{{ old('date_validite') }}">
            </div>
            <div class="form-group">
              <label class="form-label">Date de livraison</label>
              <input type="date" name="date_livraison" class="form-control" value="{{ old('date_livraison') }}">
            </div>
          </div>
        </div>
      </div>

      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <div class="card-title">Lignes du document</div>
          <button type="button" class="btn btn-primary btn-sm" onclick="addDocLine()"><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</button>
        </div>
        <div class="table-container">
          <table class="data-table" style="min-width:900px">
            <thead><tr><th>Produit</th><th>Désignation</th><th>Qté</th><th>Unité</th><th>PU HT</th><th>Remise %</th><th>HT</th><th></th></tr></thead>
            <tbody id="doc-lines-body"></tbody>
          </table>
        </div>
        @error('lignes')<div class="form-error" style="padding:10px 16px">{{ $message }}</div>@enderror
      </div>
    </div>

    <div>
      <div class="card" style="margin-bottom:16px">
        <div class="card-header"><div class="card-title">Totaux</div></div>
        <div class="card-body">
          <div style="display:flex;flex-direction:column;gap:12px">
            <div style="display:flex;justify-content:space-between;font-size:13.5px">
              <span class="td-muted">Sous-total HT</span><span id="doc-sous-total" style="font-weight:600">0</span>
            </div>
            <div class="form-group" style="margin-bottom:0">
              <label class="form-label">Remise globale (%)</label>
              <input type="number" name="remise_globale" id="remise_globale" class="form-control" min="0" max="100" value="{{ old('remise_globale',0) }}" onchange="updateDocTotal()">
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13.5px">
              <span class="td-muted">Montant remise</span><span id="doc-remise-mt" style="font-weight:600;color:var(--error)">0</span>
            </div>
            <div class="form-group" style="margin-bottom:0">
              <label class="form-label">TVA (%)</label>
              <input type="number" name="tva_taux" id="tva_taux" class="form-control" min="0" value="{{ old('tva_taux',0) }}" onchange="updateDocTotal()">
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13.5px">
              <span class="td-muted">Montant TVA</span><span id="doc-tva-mt" style="font-weight:600">0</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-weight:800;font-size:16px;border-top:2px solid var(--gray-100);padding-top:12px">
              <span>Total TTC</span><span id="doc-total-ttc" style="color:var(--success)">0</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><div class="card-title">Conditions</div></div>
        <div class="card-body">
          <div class="form-group">
            <label class="form-label">Conditions de paiement</label>
            <textarea name="conditions_paiement" class="form-control" rows="2" placeholder="Ex: Paiement à 30 jours…">{{ old('conditions_paiement') }}</textarea>
          </div>
          <div class="form-group">
            <label class="form-label">Validité texte</label>
            <input type="text" name="validite_texte" class="form-control" value="{{ old('validite_texte') }}" placeholder="Ex: Valable 30 jours">
          </div>
          <div class="form-group">
            <label class="form-label">Notes internes</label>
            <textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</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"><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>
            Créer le document
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
@push('scripts')
<script>
window.PRODUCTS = @json($products->map(fn($p)=>['id'=>$p->id,'name'=>$p->name,'reference'=>$p->reference,'selling_price'=>$p->selling_price]));
document.addEventListener('DOMContentLoaded', () => addDocLine());
function fillClientData(select){
  var opt=select.options[select.selectedIndex];
  if(opt&&opt.dataset.nom){
    document.getElementById('client_nom').value=opt.dataset.nom||'';
    document.getElementById('client_email').value=opt.dataset.email||'';
    document.getElementById('client_telephone').value=opt.dataset.phone||'';
    document.getElementById('client_adresse').value=opt.dataset.city||'';
  }
}
</script>
@endpush
@endsection