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

@section('content')
@php $isBL = $document->type_code === 'BL'; @endphp

<form method="POST" action="{{ route('documents.update', $document) }}">
  @csrf @method('PUT')
  <div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start">

    <div>
      {{-- En-tête ─────────────────────────────────────────────────────────--}}
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <div>
            <div class="card-title">Modifier — {{ $document->documentType?->label }}</div>
            <div class="card-subtitle">Référence : <strong>{{ $document->reference }}</strong></div>
          </div>
          <a href="{{ route('documents.show', $document) }}" 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">
          {{-- Type figé (on ne peut pas changer le type d'un document existant) --}}
          <input type="hidden" name="type_code" value="{{ $document->type_code }}">

          <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', $document->title) }}" required>
          </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', $document->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', $document->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', $document->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', $document->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', $document->client_adresse) }}">
            </div>
          </div>
          <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', $document->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', $document->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', $document->correspondant) }}">
            </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', $document->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', $document->date_document->format('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', $document->date_validite?->format('Y-m-d')) }}">
            </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', $document->date_livraison?->format('Y-m-d')) }}">
            </div>
          </div>
        </div>
      </div>

      {{-- Lignes ───────────────────────────────────────────────────────────--}}
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <div class="card-title">{{ $isBL ? 'Articles livrés' : '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" style="min-width:{{ $isBL ? '600px' : '900px' }}">
            <thead>
              @if($isBL)
                <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
                <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>
              @endif
            </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>
      @if(!$isBL)
      <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', $document->remise_globale) }}" 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', $document->tva_taux) }}" 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>
      @else
        {{-- Champs cachés obligatoires pour la validation BL --}}
        <input type="hidden" name="remise_globale" value="0">
        <input type="hidden" name="tva_taux" value="0">
      @endif

      <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">{{ old('conditions_paiement', $document->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', $document->validite_texte) }}">
          </div>
          <div class="form-group">
            <label class="form-label">Notes internes</label>
            <textarea name="notes" class="form-control" rows="2">{{ old('notes', $document->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"><polyline points="20 6 9 17 4 12"/></svg>
            Enregistrer les modifications
          </button>
        </div>
      </div>
    </div>

  </div>
</form>
@endsection

@php
  // Isolé dans un @php séparé : un @json(...) directement sur une
  // expression multi-lignes (map(fn() => [...]) étalé sur plusieurs
  // lignes) fait planter le compilateur Blade (troncature silencieuse de
  // l'expression, cf. resources/views/sales/edit.blade.php) — @json() doit
  // rester sur une seule ligne, sur une variable déjà calculée.
  $existingLinesData = $document->lines->sortBy('ligne_ordre')->values()->map(fn($l) => [
    'produit_id'      => $l->produit_id,
    'reference_prod'  => $l->reference_prod,
    'designation'     => $l->designation,
    'quantite'        => $l->quantite,
    'quantite_livree' => $l->quantite_livree,
    'unite'           => $l->unite,
    'prix_unitaire'   => $l->prix_unitaire,
    'remise'          => $l->remise,
    'notes_ligne'     => $l->notes_ligne,
  ]);
@endphp
@push('scripts')
<script>
var currentType = '{{ $document->type_code }}';
var isBL        = (currentType === 'BL');

// Données des lignes existantes (pré-remplissage)
var existingLines = @json($existingLinesData);

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   || '';
  }
}

document.addEventListener('DOMContentLoaded', function() {
  // Charger les lignes existantes
  existingLines.forEach(function(line) {
    addDocLine(line);
  });
  updateDocTotal();
});

function addDocLine(prefill) {
  var tbody = document.getElementById('doc-lines-body');
  if (!tbody) return;
  var idx = tbody.querySelectorAll('tr').length;
  var p   = prefill || {};

  // Recherche produit « tapez pour filtrer » (retour utilisateur
  // INSTALL.md 17/08, point 10), préremplie avec le produit déjà lié à la
  // ligne le cas échéant — fonctions partagées définies dans public/js/app.js.
  var searchValue = (p.reference_prod ? p.reference_prod + ' — ' : '') + (p.designation || '');
  var productCell =
      '<input type="hidden" name="lignes[' + idx + '][produit_id]" class="doc-product-id-' + idx + '" value="' + (p.produit_id || '') + '">'
    + '<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)…" value="' + searchValue.replace(/"/g, '&quot;') + '"'
    +   ' 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 + '" value="' + (p.reference_prod || '') + '">';

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

  if (isBL) {
    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:200px"><input type="text" name="lignes[' + idx + '][designation]" class="form-control form-control-sm" required value="' + (p.designation || '') + '">'
      +   '<input type="text" name="lignes[' + idx + '][notes_ligne]" class="form-control form-control-sm" placeholder="Ex : Matricule 5120" value="' + (p.notes_ligne || '') + '" 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="' + (p.quantite || 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="' + (p.quantite_livree || p.quantite || 1) + '" style="width:80px"></td>'
      + '<td><input type="text" name="lignes[' + idx + '][unite]" class="form-control form-control-sm" value="' + (p.unite || '') + '" style="width:60px"></td>'
      + '<td><button type="button" class="btn btn-ghost btn-icon btn-sm" onclick="this.closest(\'tr\').remove()" 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 {
    var ht = (parseFloat(p.quantite) || 1) * (parseFloat(p.prix_unitaire) || 0) * (1 - (parseFloat(p.remise) || 0) / 100);
    row.innerHTML =
      '<td style="min-width:240px;position:relative">'
      +   productCell
      + '</td>'
      + '<td style="min-width:200px"><input type="text" name="lignes[' + idx + '][designation]" class="form-control form-control-sm" required value="' + (p.designation || '') + '"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][quantite]" class="form-control form-control-sm" value="' + (p.quantite || 1) + '" style="width:70px" oninput="calcDocRow(' + idx + ');updateDocStockWarning(' + idx + ')"></td>'
      + '<td><input type="text" name="lignes[' + idx + '][unite]" class="form-control form-control-sm" value="' + (p.unite || '') + '" style="width:55px"></td>'
      + '<td><input type="text" inputmode="decimal" data-decimal name="lignes[' + idx + '][prix_unitaire]" class="form-control form-control-sm" value="' + (p.prix_unitaire || 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="' + (p.remise || 0) + '" style="width:60px" oninput="calcDocRow(' + idx + ')"></td>'
      + '<td class="doc-row-ht-' + idx + '" style="font-weight:700;text-align:right;white-space:nowrap">' + Math.round(ht).toLocaleString('fr-FR') + '</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);
}
</script>
@endpush