@extends('layouts.app')
@section('title','Nouveau document')
@section('page-title','Nouveau document')
@section('breadcrumb')
  <a href="{{ route('documents.index') }}" class="breadcrumb-link">Documents</a>
  <span class="breadcrumb-sep">›</span>
  <span class="breadcrumb-current">Nouveau</span>
@endsection

@section('content')
@php $isBL = $typeCode === 'BL'; @endphp

<form method="POST" action="{{ route('documents.store') }}">
  @csrf
  @if($parent ?? null)
    <input type="hidden" name="document_parent_id" value="{{ $parent->id }}">
    <input type="hidden" name="document_parent_ref" value="{{ $parent->reference }}">
  @endif
  <div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start">

    <div>
      @if($parent ?? null)
      <div class="card" style="margin-bottom:16px;border-color:var(--brand-300);background:var(--brand-50)">
        <div class="card-body" style="padding:14px 16px;font-size:13px">
          <strong>Avoir pour la facture {{ $parent->reference }}</strong> — les lignes ci-dessous reprennent celles
          de la facture d'origine à titre de point de départ : modifiez ou supprimez celles qui ne sont pas
          concernées par cet avoir.
        </div>
      </div>
      @endif
      {{-- En-tête ─────────────────────────────────────────────────────────--}}
      <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" id="type_code_select" class="form-control" required onchange="updateTypeLayout(this.value)">
                @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', isset($parent) && $parent ? 'Avoir — Facture '.$parent->reference : '') }}" required placeholder="Ex : Fourniture matériel informatique">
            </div>
          </div>

          {{-- Client ──────────────────────────────────────────────────────--}}
          <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 existant —</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 }}"
                  data-rc="{{ $client->rc ?? '' }}"
                  data-niu="{{ $client->niu ?? '' }}"
                  @selected(old('client_id', $parent?->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', $parent?->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', $parent?->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', $parent?->client_telephone) }}">
            </div>
            <div class="form-group">
              <label class="form-label">Adresse / Ville</label>
              <input type="text" name="client_adresse" id="client_adresse" class="form-control" value="{{ old('client_adresse', $parent?->client_adresse) }}">
            </div>
          </div>
          {{-- RC / NIU (requis sur facture officielle) ────────────────────--}}
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">N° RC client</label>
              <input type="text" name="client_rc" id="client_rc" class="form-control" value="{{ old('client_rc', $parent?->client_rc) }}" placeholder="Ex : RC/DLN/2022/B/874">
            </div>
            <div class="form-group">
              <label class="form-label">N° Contribuable (NIU)</label>
              <input type="text" name="client_niu" id="client_niu" class="form-control" value="{{ old('client_niu', $parent?->client_niu) }}" placeholder="Ex : M042217228042W">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Correspondant Icavi</label>
              <input type="text" name="correspondant" class="form-control" value="{{ old('correspondant') }}" placeholder="Nom du contact interne">
            </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>

      {{-- Lignes du document ───────────────────────────────────────────────--}}
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <div class="card-title" id="lines-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 une ligne
          </button>
        </div>
        <div class="table-container">
          <table class="data-table" id="doc-lines-table">
            <thead id="doc-lines-head">
              {{-- Headers injectés dynamiquement selon le type --}}
            </thead>
            <tbody id="doc-lines-body"></tbody>
          </table>
        </div>
        @error('lignes')<div class="form-error" style="padding:10px 16px">{{ $message }}</div>@enderror
      </div>
    </div>

    {{-- Panneau droit ────────────────────────────────────────────────────--}}
    <div>
      {{-- Totaux (masqués pour BL) ─────────────────────────────────────--}}
      <div class="card" style="margin-bottom:16px" id="totaux-panel">
        <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">IS (%)</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 IS (informatif, non inclus)</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</span>
              <span id="doc-total-ttc" style="color:var(--success)">0</span>
            </div>
          </div>
        </div>
      </div>

      {{-- Conditions ──────────────────────────────────────────────────────--}}
      <div class="card">
        <div class="card-header"><div class="card-title">Conditions & notes</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 : Offre 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>
@endsection

@push('scripts')
<script>
// Lignes à préremplir (parcours "Créer un avoir" — étape 6), consommées
// une seule fois au premier rendu du tableau, jamais réinjectées si
// l'utilisateur change ensuite le type de document.
window.PREFILL_LINES = @json($prefillLines ?? []);
var prefillConsumed = false;

// Type courant
var currentType = '{{ old('type_code', $typeCode) }}';

// ── Remplissage des données client ──────────────────────────────────────────
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  || '';
    document.getElementById('client_rc').value        = opt.dataset.rc    || '';
    document.getElementById('client_niu').value       = opt.dataset.niu   || '';
  }
}

// ── Gestion du type de document (BL vs autres) ─────────────────────────────
function updateTypeLayout(typeCode) {
  currentType = typeCode;
  var isBL    = (typeCode === 'BL');

  // Masquer le panneau totaux pour un BL
  var totaux = document.getElementById('totaux-panel');
  if (totaux) totaux.style.display = isBL ? 'none' : 'block';

  // Titre du tableau
  var title = document.getElementById('lines-card-title');
  if (title) title.textContent = isBL ? 'Articles livrés' : 'Lignes du document';

  // Reconstruire le header du tableau
  var thead = document.getElementById('doc-lines-head');
  if (thead) {
    if (isBL) {
      thead.innerHTML = '<tr><th>Produit</th><th>Désignation</th><th>Qté commandée</th><th>Qté livrée</th><th>Unité</th><th></th></tr>';
    } else {
      thead.innerHTML = '<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>';
    }
  }

  // Vider le tableau et ajouter une ligne vide — sauf au tout premier
  // rendu d'un avoir, où les lignes du document parent sont reprises
  // comme point de départ éditable.
  var tbody = document.getElementById('doc-lines-body');
  if (tbody) {
    tbody.innerHTML = '';
    if (!prefillConsumed && window.PREFILL_LINES && window.PREFILL_LINES.length) {
      prefillConsumed = true;
      window.PREFILL_LINES.forEach(function (line) {
        addDocLine();
        var idx        = tbody.querySelectorAll('tr').length - 1;
        var prodId     = document.querySelector('.doc-product-id-' + idx);
        var searchInput= document.querySelector('.doc-product-search-' + idx);
        var ref        = document.querySelector('.doc-ref-' + idx);
        var des        = document.querySelector('[name="lignes[' + idx + '][designation]"]');
        var qte        = document.querySelector('[name="lignes[' + idx + '][quantite]"]');
        var unite      = document.querySelector('[name="lignes[' + idx + '][unite]"]');
        var pu         = document.querySelector('[name="lignes[' + idx + '][prix_unitaire]"]');
        var remise     = document.querySelector('[name="lignes[' + idx + '][remise]"]');
        if (prodId && line.produit_id) prodId.value = line.produit_id;
        if (searchInput) searchInput.value = (line.reference_prod ? line.reference_prod + ' — ' : '') + (line.designation || '');
        if (ref)    ref.value    = line.reference_prod || '';
        if (des)    des.value    = line.designation || '';
        if (qte)    qte.value    = line.quantite;
        if (unite)  unite.value  = line.unite || '';
        if (pu && pu.type !== 'hidden') pu.value = line.prix_unitaire;
        if (remise) remise.value = line.remise;
        calcDocRow(idx);
      });
    } else {
      addDocLine();
    }
  }
}

// ── Ajout d'une ligne (BL ou standard) ─────────────────────────────────────
function addDocLine() {
  var tbody = document.getElementById('doc-lines-body');
  if (!tbody) return;
  var idx  = tbody.querySelectorAll('tr').length;
  var isBL = (currentType === 'BL');

  // Recherche produit « tapez pour filtrer » (retour utilisateur INSTALL.md
  // 17/08, point 10) : harmonisée sur le module Ventes (Étape 1), au lieu
  // de la liste déroulante brute utilisée jusqu'ici ici. Fonctions
  // partagées docProductSearchInput/renderDocProductResults/selectDocProduct
  // définies dans public/js/app.js.
  var productCell =
      '<input type="hidden" name="lignes[' + idx + '][produit_id]" class="doc-product-id-' + idx + '">'
    + '<input type="text" class="form-control form-control-sm doc-product-search doc-product-search-' + idx + '" autocomplete="off"'
    +   ' placeholder="Rechercher un produit (nom ou référence)…"'
    +   ' oninput="docProductSearchInput(' + idx + ', this.value)"'
    +   ' onfocus="docProductSearchInput(' + idx + ', this.value)"'
    +   ' onblur="setTimeout(function(){closeDocProductResults(' + idx + ')}, 200)">'
    + '<div class="product-search-results" id="doc-product-results-' + idx + '"></div>'
    + '<div class="td-muted" id="doc-stock-hint-' + idx + '" style="font-size:11px;margin-top:2px"></div>'
    + '<div class="stock-warning" id="doc-stock-warning-' + idx + '" style="display:none;font-size:11px;font-weight:600;margin-top:2px;color:var(--error)"></div>'
    + '<input type="hidden" name="lignes[' + idx + '][reference_prod]" class="doc-ref-' + idx + '">';

  var row = document.createElement('tr');

  if (isBL) {
    // Structure BL : pas de prix, pas de montant
    row.innerHTML =
      '<td style="min-width:220px;position:relative">'
      +   productCell
      +   '<input type="hidden" name="lignes[' + idx + '][prix_unitaire]" value="0">'
      + '</td>'
      + '<td style="min-width:220px"><input type="text" name="lignes[' + idx + '][designation]" class="form-control form-control-sm" required placeholder="Désignation">'
      +   '<input type="text" name="lignes[' + idx + '][notes_ligne]" class="form-control form-control-sm" placeholder="Ex : Matricule 5120" style="margin-top:4px;font-size:12px"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][quantite]" class="form-control form-control-sm" value="1" style="width:80px" oninput="updateDocStockWarning(' + idx + ')"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][quantite_livree]" class="form-control form-control-sm" value="1" style="width:80px"></td>'
      + '<td><input type="text" name="lignes[' + idx + '][unite]" class="form-control form-control-sm" placeholder="U" style="width:60px"></td>'
      + '<td><button type="button" class="btn btn-ghost btn-icon btn-sm" onclick="this.closest(\'tr\').remove();updateDocTotal()" title="Supprimer">'
      +   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>'
      + '</button></td>';
  } else {
    // Structure standard : prix + montant HT
    row.innerHTML =
      '<td style="min-width:240px;position:relative">'
      +   productCell
      + '</td>'
      + '<td style="min-width:220px"><input type="text" name="lignes[' + idx + '][designation]" class="form-control form-control-sm" required placeholder="Désignation du produit/service"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][quantite]" class="form-control form-control-sm" value="1" style="width:70px" oninput="calcDocRow(' + idx + ');updateDocStockWarning(' + idx + ')"></td>'
      + '<td><input type="text" name="lignes[' + idx + '][unite]" class="form-control form-control-sm" placeholder="U" style="width:55px"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][prix_unitaire]" class="form-control form-control-sm" value="0" style="width:90px" oninput="calcDocRow(' + idx + ')"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][remise]" class="form-control form-control-sm" value="0" style="width:60px" oninput="calcDocRow(' + idx + ')"></td>'
      + '<td class="doc-row-ht-' + idx + '" style="font-weight:700;text-align:right;white-space:nowrap">0</td>'
      + '<td><button type="button" class="btn btn-ghost btn-icon btn-sm" onclick="this.closest(\'tr\').remove();updateDocTotal()" title="Supprimer">'
      +   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>'
      + '</button></td>';
  }

  tbody.appendChild(row);
  if (typeof initDecimalInputs === 'function') initDecimalInputs(row);
}

// Initialisation au chargement
document.addEventListener('DOMContentLoaded', function() {
  updateTypeLayout(currentType);

  // Client pré-sélectionné à l'arrivée sur la page (ex. lien « Nouveau
  // document »/« Nouveau devis » depuis la fiche client, ?client_id=...) :
  // fillClientData() ne se déclenchait jusqu'ici que sur un changement
  // manuel de la liste (onchange), jamais au chargement initial — email/
  // téléphone/adresse restaient vides malgré le client déjà sélectionné
  // dans la liste (retour utilisateur INSTALL.md 17/08). On ne le fait que
  // si le nom client est encore vide, pour ne pas écraser un old() après
  // une erreur de validation (l'utilisateur a pu modifier ces champs).
  var clientSelect = document.getElementById('client-select');
  var clientNomEl  = document.getElementById('client_nom');
  if (clientSelect && clientSelect.value && clientNomEl && !clientNomEl.value) {
    fillClientData(clientSelect);
  }
});

// Mise à jour du type via le select
document.addEventListener('DOMContentLoaded', function() {
  var sel = document.getElementById('type_code_select');
  if (sel) sel.addEventListener('change', function() { updateTypeLayout(this.value); });
});
</script>
@endpush