<?php
// Base URL pour sous-dossier
$base = rtrim(dirname($_SERVER['SCRIPT_NAME'] ?? ''), '/');
if ($base === '/') { $base = ''; }
$stats = $stats ?? ['total'=>0,'sum_ht'=>0.0,'sum_tva'=>0.0,'sum_ttc'=>0.0,'last30_count'=>0,'last30_ttc'=>0.0];
$statusStats = $statusStats ?? [];
$monthlyStats = $monthlyStats ?? [];
?>

<style>
  /* Style compatible Bootstrap 5 */
  .kpi-card { border: 1px solid #e9ecef; border-radius: .5rem; padding: .75rem 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .kpi-value { font-size: 1.25rem; font-weight: 700; }
  .kpi-label { color: #6c757d; }
  .table thead th { background: #f8f9fa; }
  .badge { font-size: .85rem; }
</style>

<div class="d-flex align-items-center justify-content-between mb-3">
  <h2 class="mb-0">Devis</h2>
  <div>
    <form method="get" action="" class="form-inline d-inline-block mr-2">
      <?php $fs = isset($filterStatus) ? trim((string)$filterStatus) : ''; ?>
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <span class="input-group-text">Statut</span>
        </div>
        <select name="status" class="custom-select custom-select-sm" onchange="this.form.submit()">
          <option value="" <?= ($fs===''?'selected':'') ?>>Tous</option>
          <option value="En attente" <?= ($fs==='En attente'?'selected':'') ?>>En attente</option>
          <option value="Validé" <?= ($fs==='Validé'?'selected':'') ?>>Validé</option>
          <option value="Rejeté" <?= ($fs==='Rejeté'?'selected':'') ?>>Rejeté</option>
        </select>
        <?php if ($fs!==''): ?>
          <div class="input-group-append">
            <a href="?" class="btn btn-outline-secondary">Réinitialiser</a>
          </div>
        <?php endif; ?>
      </div>
    </form>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#quoteModal">
      <i class="fas fa-plus-circle"></i> Nouveau devis
    </button>
  </div>
</div>

<!-- KPIs -->
<div class="row">
  <div class="col-6 col-md-3 mb-3">
    <div class="kpi-card">
      <div class="kpi-label">Nombre de devis</div>
      <div class="kpi-value"><?= (int)$stats['total'] ?></div>
    </div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="kpi-card">
      <div class="kpi-label">Total HT</div>
      <div class="kpi-value"><?= number_format((float)$stats['sum_ht'], 2, ',', ' ') ?></div>
    </div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="kpi-card">
      <div class="kpi-label">Total TVA</div>
      <div class="kpi-value"><?= number_format((float)$stats['sum_tva'], 2, ',', ' ') ?></div>
    </div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="kpi-card">
      <div class="kpi-label">Total TTC</div>
      <div class="kpi-value"><?= number_format((float)$stats['sum_ttc'], 2, ',', ' ') ?></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12 col-lg-6 mb-3">
    <div class="card">
      <div class="card-header">Répartition par statut</div>
      <div class="card-body">
        <?php if (!empty($statusStats)): ?>
          <?php foreach ($statusStats as $st): ?>
            <span class="badge badge-secondary mr-2 mb-2">
              <?= htmlspecialchars($st['status'] ?: 'Non défini') ?>
              <span class="ml-1">(<?= (int)$st['c'] ?>)</span>
            </span>
          <?php endforeach; ?>
        <?php else: ?>
          <span class="text-muted">Aucune donnée</span>
        <?php endif; ?>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 mb-3">
    <div class="card">
      <div class="card-header">TTC par mois (6 derniers)</div>
      <div class="card-body" style="height: 220px;">
        <canvas id="quotesMonthlyChart" height="200"></canvas>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <strong class="mb-0">Liste des devis</strong>
    <small class="text-muted">Derniers en premier</small>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>N° Devis</th>
            <th>Client</th>
            <th>Date</th>
            <th>Statut</th>
            <th>Total TTC</th>
            <th>Devise</th>
            <th width="180">Actions</th>
          </tr>
        </thead>
        <tbody>
          <?php if (empty($quotes)): ?>
            <tr><td colspan="7" class="text-center text-muted py-4">Aucun devis</td></tr>
          <?php else: ?>
            <?php foreach ($quotes as $q): ?>
              <tr>
                <td><strong><?= htmlspecialchars($q['quote_no'] ?? ('DEV-' . (int)$q['id'])) ?></strong></td>
                <td><?= htmlspecialchars($q['client_name'] ?? '') ?></td>
                <td><?= !empty($q['quote_date']) ? date('d/m/Y', strtotime($q['quote_date'])) : '—' ?></td>
                <td>
                  <?php 
                    $st = trim($q['status'] ?? 'En attente');
                    $badge = 'badge-secondary';
                    if ($st === 'Validé') $badge = 'badge-success';
                    elseif ($st === 'Rejeté') $badge = 'badge-danger';
                    elseif ($st === 'En attente') $badge = 'badge-info';
                    $hasReason = ($st === 'Rejeté' && !empty($q['reject_reason'] ?? ''));
                  ?>
                  <span class="badge <?= $badge ?>"
                        <?= $hasReason ? 'data-toggle="tooltip" data-placement="top" title="'.htmlspecialchars($q['reject_reason'], ENT_QUOTES).'"' : '' ?>>
                    <?= htmlspecialchars($st) ?>
                    <?php if ($hasReason): ?>
                      <i class="fas fa-info-circle ml-1"></i>
                    <?php endif; ?>
                  </span>
                  <?php if ($hasReason): ?>
                    <a href="#" class="small ml-2" onclick="showRejectReason('<?= htmlspecialchars($q['reject_reason'], ENT_QUOTES) ?>'); return false;">Voir le motif</a>
                  <?php endif; ?>
                </td>
                <td><?= number_format((float)($q['total_ttc'] ?? 0), 2, ',', ' ') ?></td>
                <td><?= htmlspecialchars($q['currency'] ?? 'XOF') ?></td>
                <td>
                  <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-primary" onclick="showQuoteDetail(<?= (int)$q['id'] ?>)"><i class="fas fa-eye"></i></button>
                    <button type="button" class="btn btn-outline-warning" onclick="editQuote(<?= (int)$q['id'] ?>)"><i class="fas fa-edit"></i></button>
                    <div class="btn-group btn-group-sm" role="group">
                      <button id="actionsDropdown<?= (int)$q['id'] ?>" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Actions
                      </button>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="actionsDropdown<?= (int)$q['id'] ?>">
                        <a class="dropdown-item" href="#" onclick="duplicateQuote(<?= (int)$q['id'] ?>); return false;"><i class="fas fa-clone mr-2"></i>Dupliquer</a>
                        <a class="dropdown-item" href="#" onclick="exportQuotePdf(<?= (int)$q['id'] ?>); return false;"><i class="fas fa-file-pdf mr-2"></i>Exporter PDF</a>
                        <a class="dropdown-item" href="#" onclick="exportQuotePdfWithHistory(<?= (int)$q['id'] ?>); return false;"><i class="fas fa-file-pdf mr-2"></i>Exporter PDF (avec historique)</a>
                        <a class="dropdown-item" href="#" onclick="openEmailQuote(<?= (int)$q['id'] ?>, '<?= htmlspecialchars(($q['quote_no'] ?? ''), ENT_QUOTES) ?>'); return false;"><i class="fas fa-envelope mr-2"></i>Envoyer par email</a>
                        <div class="dropdown-divider"></div>
                        <h6 class="dropdown-header">Changer le statut</h6>
                        <a class="dropdown-item" href="#" onclick="changeQuoteStatus(<?= (int)$q['id'] ?>,'En attente'); return false;">En attente</a>
                        <a class="dropdown-item" href="#" onclick="changeQuoteStatus(<?= (int)$q['id'] ?>,'Validé'); return false;">Validé</a>
                        <a class="dropdown-item" href="#" onclick="changeQuoteStatus(<?= (int)$q['id'] ?>,'Rejeté'); return false;">Rejeté</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-danger" href="#" onclick="confirmDeleteQuote(<?= (int)$q['id'] ?>, '<?= htmlspecialchars($q['quote_no'] ?? '', ENT_QUOTES) ?>'); return false;"><i class="fas fa-trash mr-2"></i>Supprimer</a>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            <?php endforeach; ?>
          <?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modale Détail Devis (Bootstrap 4) -->
<div class="modal fade" id="quoteDetailModal" tabindex="-1" role="dialog" aria-labelledby="quoteDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quoteDetailModalLabel">Détail du devis</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="quoteDetailBody">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Chargement...</span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

<!-- Modale Voir Motif de Rejet (Bootstrap 4) -->
<div class="modal fade" id="rejectReasonViewModal" tabindex="-1" role="dialog" aria-labelledby="rejectReasonViewModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title" id="rejectReasonViewModalLabel">Motif du rejet</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="rejectReasonViewText" class="pre-wrap"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
 </div>

<!-- Modale Modifier Devis (Bootstrap 4) -->
<div class="modal fade" id="quoteEditModal" tabindex="-1" role="dialog" aria-labelledby="quoteEditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quoteEditModalLabel">Modifier le devis</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="quoteEditBody">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Chargement...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modale Envoyer par email (Bootstrap 4) -->
<div class="modal fade" id="quoteEmailModal" tabindex="-1" role="dialog" aria-labelledby="quoteEmailModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quoteEmailModalLabel">Envoyer le devis <span id="emailQuoteNo"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="quoteEmailForm">
          <input type="hidden" name="quote_id" id="emailQuoteId">
          <div class="form-group">
            <label>Destinataire</label>
            <input type="email" class="form-control" name="to" placeholder="client@example.com" required>
          </div>
          <div class="form-group">
            <label>Objet</label>
            <input type="text" class="form-control" name="subject" placeholder="Votre devis" value="Votre devis" required>
          </div>
          <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" name="message" rows="4" placeholder="Bonjour, veuillez trouver ci-joint votre devis."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" id="sendQuoteEmailBtn">Envoyer</button>
      </div>
    </div>
  </div>
 </div>

<!-- Modale Confirmation Suppression (Bootstrap 4) -->
<div class="modal fade" id="quoteDeleteModal" tabindex="-1" role="dialog" aria-labelledby="quoteDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="quoteDeleteModalLabel">Confirmer la suppression</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Êtes-vous sûr de vouloir supprimer le devis <strong id="deleteQuoteNo"></strong> ?</p>
        <p class="text-danger"><i class="fas fa-exclamation-triangle"></i> Cette action est irréversible.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
      </div>
    </div>
  </div>
</div>

<!-- Modale Motif de Rejet (Bootstrap 4) -->
<div class="modal fade" id="rejectReasonModal" tabindex="-1" role="dialog" aria-labelledby="rejectReasonModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title" id="rejectReasonModalLabel">Motif du rejet</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="rejectQuoteId" value="">
        <div class="form-group">
          <label for="rejectReason">Veuillez préciser le motif</label>
          <textarea id="rejectReason" class="form-control" rows="4" placeholder="Ex: Prix non conforme, informations manquantes, etc." required></textarea>
          <small class="form-text text-muted">Le motif sera enregistré avec le devis.</small>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-warning" id="confirmRejectBtn">Rejeter le devis</button>
      </div>
    </div>
  </div>
 </div>

<!-- Modale Nouveau Devis (Bootstrap 4) -->
<div class="modal fade" id="quoteModal" tabindex="-1" role="dialog" aria-labelledby="quoteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quoteModalLabel">Nouveau devis</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="quoteModalBody">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Chargement...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
  (function(){
    var ctx = document.getElementById('quotesMonthlyChart');
    if (!ctx) return;
    var labels = [
      <?php foreach (array_reverse($monthlyStats) as $m): ?>
        '<?= htmlspecialchars($m['ym'] ?? '') ?>',
      <?php endforeach; ?>
    ];
    var dataTtc = [
      <?php foreach (array_reverse($monthlyStats) as $m): ?>
        <?= (float)($m['ttc'] ?? 0) ?>,
      <?php endforeach; ?>
    ];
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Total TTC',
          data: dataTtc,
          backgroundColor: '#007bff'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [{ ticks: { beginAtZero: true } }]
        }
      }
    });
  })();
</script>

<script>
  // Injecter jQuery + Popper + Bootstrap 4 si nécessaire
  (function(){
    function addCss(href){ var l=document.createElement('link'); l.rel='stylesheet'; l.href=href; document.head.appendChild(l); }
    function addJs(src,cb){ var s=document.createElement('script'); s.src=src; s.onload=cb||function(){}; document.body.appendChild(s); }
    if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.modal) {
      addCss('https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css');
      addJs('https://code.jquery.com/jquery-3.5.1.slim.min.js', function(){
        addJs('https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', function(){
          addJs('https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js');
        });
      });
    }
    // Attendre jQuery + Bootstrap (modal) avant d'exécuter du code dépendant de $/modal
    window.onBS4Ready = window.onBS4Ready || function(cb){
      var tries = 0;
      (function wait(){
        if (window.jQuery && window.jQuery.fn && window.jQuery.fn.modal) { try { cb(window.jQuery); } catch(e){} return; }
        if (tries++ > 200) { try { cb(window.jQuery || null); } catch(e){} return; }
        setTimeout(wait, 50);
      })();
    };
  })();

  // Charger le formulaire de création dans la modale (Bootstrap 4)
  onBS4Ready(function($){
    $('#quoteModal').on('show.bs.modal', function(){
      var $body = $('#quoteModalBody');
      $body.html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="sr-only">Chargement...</span></div></div>');
      fetch('<?= $base ?>/quotes/create?modal=1')
        .then(function(r){ return r.text(); })
        .then(function(html){ $body.html(html); initQuoteForm(); })
        .catch(function(err){ $body.html('<div class="alert alert-danger">Erreur lors du chargement du formulaire</div>'); console.error(err); });
    });
    // Initialiser les tooltips BS4 (motif de rejet)
    $('[data-toggle="tooltip"]').tooltip();
  });

  function initQuoteForm() {
    const form = document.querySelector('#quoteModalBody form');
    if (!form) return;

    // Gestion de la soumission du formulaire
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      try {
        // Préparer les données du formulaire
        const formData = new FormData(form);
        
        // Envoyer les données
        const response = await fetch(form.action, {
          method: 'POST',
          body: formData,
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        });

        if (response.ok) {
          // Fermer la modale (Bootstrap 4) et recharger
          $('#quoteModal').modal('hide');
          window.location.reload();
        } else {
          const error = await response.text();
          throw new Error(error || 'Erreur lors de l\'enregistrement');
        }
      } catch (error) {
        alert('Erreur: ' + error.message);
        console.error('Erreur:', error);
      }
    });

    // Gestion des lignes de devis dynamiques
    initQuoteLines();
    
    // Gestion du client pour les hints
    initClientHints();
  }

  function initQuoteLines() {
    const tbody = document.querySelector('#lines-table tbody');
    const addBtn = document.querySelector('#add-line');
    if (!tbody || !addBtn) return;

    // Récupérer les items et catégories
    const itemsJson = document.querySelector('#quote-items-json');
    const categoriesJson = document.querySelector('#quote-categories-json');
    
    let items = [];
    let categories = [];
    
    try {
      items = itemsJson ? JSON.parse(itemsJson.value) : [];
      categories = categoriesJson ? JSON.parse(categoriesJson.value) : [];
    } catch (e) {
      console.error('Erreur parsing JSON:', e);
    }

    const itemsByCategory = items.reduce((acc, item) => {
      if (!acc[item.category_id]) acc[item.category_id] = [];
      acc[item.category_id].push(item);
      return acc;
    }, {});

    function calculateTotals() {
      let totalHT = 0;
      document.querySelectorAll('#lines-table tbody tr').forEach(tr => {
        const qty = parseFloat(tr.querySelector('.quantity')?.value || 0);
        const price = parseFloat(tr.querySelector('.unit_price')?.value || 0);
        totalHT += qty * price;
      });

      const vatRate = parseFloat(document.querySelector('input[name="vat_rate"]')?.value || 0);
      const totalTVA = totalHT * (vatRate / 100);
      const totalTTC = totalHT + totalTVA;

      document.querySelector('#total-ht').textContent = totalHT.toLocaleString('fr-FR', { minimumFractionDigits: 2 });
      document.querySelector('#total-tva').textContent = totalTVA.toLocaleString('fr-FR', { minimumFractionDigits: 2 });
      document.querySelector('#total-ttc').textContent = totalTTC.toLocaleString('fr-FR', { minimumFractionDigits: 2 });
    }

    function addLine(prefill = null) {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>
          <select class="form-control form-control-sm cat_select">
            <option value="">Catégorie…</option>
            ${categories.map(c => `<option value="${c.id}">${c.name}</option>`).join('')}
          </select>
        </td>
        <td>
          <select class="form-control form-control-sm item_select" disabled>
            <option value="">Choisir…</option>
          </select>
          <input type="hidden" name="lines[][designation]">
        </td>
        <td><input class="form-control form-control-sm unit" value="u"><input type="hidden" name="lines[][unit]"></td>
        <td><input type="number" step="0.001" class="form-control form-control-sm quantity" value="1"><input type="hidden" name="lines[][quantity]"></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm unit_price" value="0"><input type="hidden" name="lines[][unit_price]"></td>
        <td class="line-total">0,00</td>
        <td><button type="button" class="btn btn-sm btn-danger remove-line">×</button></td>
      `;
      tbody.appendChild(tr);

      const catSelect = tr.querySelector('.cat_select');
      const itemSelect = tr.querySelector('.item_select');
      const unitInput = tr.querySelector('.unit');
      const qtyInput = tr.querySelector('.quantity');
      const priceInput = tr.querySelector('.unit_price');
      const totalCell = tr.querySelector('.line-total');
      const hiddenDes = tr.querySelector('input[name="lines[][designation]"]');

      function updateItems() {
        const catId = parseInt(catSelect.value || 0);
        itemSelect.innerHTML = '<option value="">Choisir…</option>';
        itemSelect.disabled = !catId;
        
        if (catId && itemsByCategory[catId]) {
          itemsByCategory[catId].forEach(item => {
            const opt = document.createElement('option');
            opt.value = item.id;
            opt.textContent = item.designation;
            opt.dataset.unit = item.unit;
            opt.dataset.price = item.unit_price;
            itemSelect.appendChild(opt);
          });
        }
      }

      function updateLineTotal() {
        const qty = parseFloat(qtyInput.value || 0);
        const price = parseFloat(priceInput.value || 0);
        const total = qty * price;
        totalCell.textContent = total.toLocaleString('fr-FR', { minimumFractionDigits: 2 });
        calculateTotals();
      }

      catSelect.addEventListener('change', () => {
        updateItems();
        hiddenDes.value = '';
      });

      itemSelect.addEventListener('change', () => {
        const opt = itemSelect.selectedOptions[0];
        if (opt && opt.value) {
          unitInput.value = opt.dataset.unit || 'u';
          priceInput.value = opt.dataset.price || 0;
          hiddenDes.value = opt.textContent;
          updateLineTotal();
        }
      });

      qtyInput.addEventListener('input', updateLineTotal);
      priceInput.addEventListener('input', updateLineTotal);

      tr.querySelector('.remove-line').addEventListener('click', () => {
        tr.remove();
        calculateTotals();
      });

      if (prefill) {
        qtyInput.value = prefill.quantity || 1;
        priceInput.value = prefill.unit_price || 0;
        unitInput.value = prefill.unit || 'u';
        hiddenDes.value = prefill.designation || '';
        updateLineTotal();
      }
    }

    addBtn.addEventListener('click', () => addLine());
    
    // Ajouter une ligne par défaut
    if (tbody.children.length === 0) {
      addLine();
    }

    // Recalculer quand le taux de TVA change
    const vatInput = document.querySelector('input[name="vat_rate"]');
    if (vatInput) {
      vatInput.addEventListener('input', calculateTotals);
    }

    // Avant soumission, copier les valeurs dans les hidden
    const form = document.querySelector('#quoteModalBody form');
    if (form) {
      form.addEventListener('submit', () => {
        document.querySelectorAll('#lines-table tbody tr').forEach(tr => {
          tr.querySelector('input[name="lines[][unit]"]').value = tr.querySelector('.unit').value;
          tr.querySelector('input[name="lines[][quantity]"]').value = tr.querySelector('.quantity').value;
          tr.querySelector('input[name="lines[][unit_price]"]').value = tr.querySelector('.unit_price').value;
        });
      });
    }
  }

  function initClientHints() {
    const selClient = document.querySelector('select[name="client_id"]');
    const selType = document.querySelector('#related_type');
    const refInput = document.querySelector('#related_ref');
    
    if (!selClient) return;

    function setGrey(el, on) {
      if (!el) return;
      if (on) {
        el.classList.add('bg-light', 'text-muted');
      } else {
        el.classList.remove('bg-light', 'text-muted');
      }
    }

    function lockType(val) {
      if (!selType) return;
      selType.value = val || '';
      selType.disabled = !!val;
      setGrey(selType, !!val);
    }

    function lockRef(val) {
      if (!refInput) return;
      refInput.value = val || '';
      refInput.readOnly = !!val;
      setGrey(refInput, !!val);
    }

    async function refreshHints() {
      const id = parseInt(selClient.value || 0);
      if (!id) {
        lockType('');
        lockRef('');
        return;
      }

      try {
        const res = await fetch('<?= $base ?>/quotes/client-hints?client_id=' + id);
        if (!res.ok) throw new Error('fetch');
        const data = await res.json();
        
        if (data && (data.related_ref || data.related_type)) {
          lockType(data.related_type || '');
          lockRef(data.related_ref || '');
        } else {
          lockType('');
          lockRef('');
        }
      } catch (e) {
        lockType('');
        lockRef('');
      }
    }

    selClient.addEventListener('change', refreshHints);
    refreshHints();
  }
</script>

<script>
  // Fonctions pour gérer les actions sur les devis
  function duplicateQuote(id){
    if(!confirm('Dupliquer ce devis ?')) return;
    fetch('<?= $base ?>/quotes/duplicate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With':'XMLHttpRequest' },
      body: 'id=' + encodeURIComponent(id)
    }).then(function(r){
      if(!r.ok) throw new Error('Duplication échouée');
      return r.json();
    }).then(function(){ window.location.reload(); })
    .catch(function(e){ alert('Erreur: ' + e.message); });
  }

  function exportQuotePdf(id){
    window.open('<?= $base ?>/quotes/pdf?id=' + id, '_blank');
  }

  function exportQuotePdfWithHistory(id){
    window.open('<?= $base ?>/quotes/pdf?id=' + id + '&history=1', '_blank');
  }

  function openEmailQuote(id, quoteNo){
    onBS4Ready(function($){
      $('#emailQuoteId').val(id);
      $('#emailQuoteNo').text(quoteNo||'');
      $('#quoteEmailModal').modal('show');
    });
  }

  // Afficher la modale de motif de rejet
  function showRejectReason(reason){
    onBS4Ready(function($){
      var txt = (reason || '').replace(/\n/g, '\n');
      $('#rejectReasonViewText').text(txt);
      $('#rejectReasonViewModal').modal('show');
    });
  }

  onBS4Ready(function($){
    $('#sendQuoteEmailBtn').on('click', function(){
      var fd = $('#quoteEmailForm').serialize();
      fetch('<?= $base ?>/quotes/send', {
        method:'POST',
        headers:{ 'Content-Type':'application/x-www-form-urlencoded', 'X-Requested-With':'XMLHttpRequest' },
        body: fd
      }).then(function(r){ if(!r.ok) throw new Error('Envoi échoué'); return r.json(); })
      .then(function(){ $('#quoteEmailModal').modal('hide'); alert('Email envoyé.'); })
      .catch(function(e){ alert('Erreur: ' + e.message); });
    });
  });

  // Confirmer le rejet avec motif (attendre jQuery/BS4)
  onBS4Ready(function($){
    $('#confirmRejectBtn').on('click', function(){
      var id = $('#rejectQuoteId').val();
      var reason = ($('#rejectReason').val() || '').trim();
      if (!reason) { alert('Veuillez saisir un motif.'); return; }
      fetch('<?= $base ?>/quotes/status', {
        method:'POST',
        headers:{ 'Content-Type':'application/x-www-form-urlencoded', 'X-Requested-With':'XMLHttpRequest' },
        body: 'id=' + encodeURIComponent(id) + '&status=' + encodeURIComponent('Rejeté') + '&reason=' + encodeURIComponent(reason)
      }).then(function(r){ if(!r.ok) throw new Error('Changement de statut échoué'); return r.json(); })
      .then(function(){ $('#rejectReasonModal').modal('hide'); window.location.reload(); })
      .catch(function(e){ alert('Erreur: ' + e.message); });
    });
  });

  function changeQuoteStatus(id, status){
    if (status === 'Rejeté') {
      // Ouvrir la modale de motif de rejet lorsque BS4 est prêt
      return onBS4Ready(function($){
        $('#rejectQuoteId').val(id);
        $('#rejectReason').val('');
        $('#rejectReasonModal').modal('show');
      });
    }
    fetch('<?= $base ?>/quotes/status', {
      method:'POST',
      headers:{ 'Content-Type':'application/x-www-form-urlencoded', 'X-Requested-With':'XMLHttpRequest' },
      body: 'id=' + encodeURIComponent(id) + '&status=' + encodeURIComponent(status)
    }).then(function(r){ if(!r.ok) throw new Error('Changement de statut échoué'); return r.json(); })
    .then(function(){ window.location.reload(); })
    .catch(function(e){ alert('Erreur: ' + e.message); });
  }
  
  // Afficher le détail d'un devis
  function showQuoteDetail(quoteId) {
    onBS4Ready(function($){
      var $modal = $('#quoteDetailModal');
      var $body = $('#quoteDetailBody');
      $body.html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="sr-only">Chargement...</span></div></div>');
      $modal.modal('show');
      fetch('<?= $base ?>/quotes/show?id=' + quoteId + '&modal=1')
        .then(function(r){ return r.text(); })
        .then(function(html){ $body.html(html); })
        .catch(function(err){ $body.html('<div class="alert alert-danger">Erreur lors du chargement des détails</div>'); console.error(err); });
    });
  }
  
  // Modifier un devis
  function editQuote(quoteId) {
    onBS4Ready(function($){
      var $modal = $('#quoteEditModal');
      var $body = $('#quoteEditBody');
      $body.html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="sr-only">Chargement...</span></div></div>');
      $modal.modal('show');
      fetch('<?= $base ?>/quotes/edit?id=' + quoteId + '&modal=1')
        .then(function(r){ return r.text(); })
        .then(function(html){ $body.html(html); initEditQuoteForm(); })
        .catch(function(err){ $body.html('<div class="alert alert-danger">Erreur lors du chargement du formulaire</div>'); console.error(err); });
    });
  }
  
  // Initialiser le formulaire d'édition
  function initEditQuoteForm() {
    const form = document.querySelector('#quoteEditBody form');
    if (!form) return;
    
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      try {
        const formData = new FormData(form);
        
        const response = await fetch(form.action, {
          method: 'POST',
          body: formData,
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        });
        
        if (response.ok) {
          $('#quoteEditModal').modal('hide');
          window.location.reload();
        } else {
          const error = await response.text();
          throw new Error(error || 'Erreur lors de la mise à jour');
        }
      } catch (error) {
        alert('Erreur: ' + error.message);
        console.error('Erreur:', error);
      }
    });
    
    // Initialiser les lignes du devis
    initQuoteLines();
    initClientHints();
  }
  
  // Confirmer la suppression
  let deleteQuoteId = null;
  
  function confirmDeleteQuote(quoteId, quoteNo) {
    deleteQuoteId = quoteId;
    document.getElementById('deleteQuoteNo').textContent = quoteNo;
    onBS4Ready(function($){ $('#quoteDeleteModal').modal('show'); });
  }
  
  // Supprimer le devis
  document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
    if (!deleteQuoteId) return;
    
    try {
      const response = await fetch('<?= $base ?>/quotes/destroy?id=' + deleteQuoteId, {
        method: 'POST',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });
      
      if (response.ok) {
        $('#quoteDeleteModal').modal('hide');
        window.location.reload();
      } else {
        throw new Error('Erreur lors de la suppression');
      }
    } catch (error) {
      alert('Erreur: ' + error.message);
      console.error('Erreur:', error);
    }
  });
</script>