<div class="modal fade" id="ajouterProductionModal" tabindex="-1" aria-labelledby="ajouterProductionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" action="/eagle_client_istanbulcups/api/productions/ajouter.php">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="ajouterProductionModalLabel">Ajouter une production</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="date_production" class="form-label">Date de production</label>
              <input type="datetime-local" class="form-control" name="date_production" id="date_production" value="<?= date('Y-m-d\TH:i') ?>" required>
            </div>
            <div class="col-md-6">
              <label for="depot_id" class="form-label">Dépôt de production</label>
              <select class="form-select" name="depot_id" id="depot_id" required>
                <option value="">-- Choisir un dépôt --</option>
                <?php
                $depots = $conn->query("SELECT * FROM depots")->fetchAll(PDO::FETCH_ASSOC);
                foreach ($depots as $d): ?>
                  <option value="<?= $d['id'] ?>"><?= htmlspecialchars($d['nom']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>

          <hr>
          <h6>Matières premières</h6>
          <div id="listeMatieres">
            <div class="row mb-2">
              <div class="col-md-6">
                <select class="form-select" name="matieres[0][produit_id]" required>
                  <option value="">-- Choisir un produit --</option>
                  <?php
                  $produits = $conn->query("SELECT * FROM produits WHERE type='matiere'")->fetchAll(PDO::FETCH_ASSOC);
                  foreach ($produits as $p): ?>
                    <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['nom']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="col-md-4">
                <input type="number" name="matieres[0][quantite]" class="form-control" placeholder="Quantité" min="1" required>
              </div>
              <div class="col-md-2">
                <button type="button" class="btn btn-danger btn-sm btn-supprimer-ligne">X</button>
              </div>
            </div>
          </div>
          <button type="button" class="btn btn-secondary btn-sm" id="ajouterLigneMatiere">+ Ajouter matière</button>

          <hr>
          <h6>Produits finis</h6>
          <div id="listeProduitsFinis">
            <div class="row mb-2">
              <div class="col-md-6">
                <select class="form-select" name="finis[0][produit_id]" required>
                  <option value="">-- Choisir un produit --</option>
                  <?php
                  $produitsF = $conn->query("SELECT * FROM produits WHERE type='produit'")->fetchAll(PDO::FETCH_ASSOC);
                  foreach ($produitsF as $p): ?>
                    <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['nom']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="col-md-4">
                <input type="number" name="finis[0][quantite]" class="form-control" placeholder="Quantité" min="1" required>
              </div>
              <div class="col-md-2">
                <button type="button" class="btn btn-danger btn-sm btn-supprimer-ligne">X</button>
              </div>
            </div>
          </div>
          <button type="button" class="btn btn-secondary btn-sm" id="ajouterLigneProduitFini">+ Ajouter produit fini</button>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="submit" class="btn btn-primary">Valider</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let indexMatiere = 1;
    let indexFini = 1;

    document.getElementById('ajouterLigneMatiere').addEventListener('click', function() {
        const template = document.querySelector('#listeMatieres .row').cloneNode(true);
        template.querySelectorAll('select,input').forEach(input => {
            if (input.name.includes('matieres[0]')) {
                input.name = input.name.replace('matieres[0]', `matieres[${indexMatiere}]`);
                input.value = '';
            }
        });
        document.getElementById('listeMatieres').appendChild(template);
        indexMatiere++;
    });

    document.getElementById('ajouterLigneProduitFini').addEventListener('click', function() {
        const template = document.querySelector('#listeProduitsFinis .row').cloneNode(true);
        template.querySelectorAll('select,input').forEach(input => {
            if (input.name.includes('finis[0]')) {
                input.name = input.name.replace('finis[0]', `finis[${indexFini}]`);
                input.value = '';
            }
        });
        document.getElementById('listeProduitsFinis').appendChild(template);
        indexFini++;
    });

    document.body.addEventListener('click', function(e){
        if(e.target.classList.contains('btn-supprimer-ligne')){
            e.target.closest('.row').remove();
        }
    });
});
</script>
