{% extends 'base.html.twig' %}

{% block body %}

<div class="container-fluid px-3 px-md-4 py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-xl-10">
            <h1 class="h2 mb-4">Ajout d'Articles</h1>
            <div class="card mb-4">
                <div class="card-body">
                    <form method="post">
                        <div>
                            <label for="deposant_id">Déposant :</label>
                            <select id="deposant_id" name="deposant_id" class="form-control" required>
                                <option value="">Sélectionnez un déposant</option>
                                {% for deposant in deposants %}
                                    <option value="{{ deposant.id }}">{{ deposant.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div id="articles-container">
                        <h2>Articles</h2>
                        <div>
                        <h4>Article1</h4>
                        <div class="mb-3">
            <input type="text" name="articles[0][titre]" placeholder="Titre" required class="form-control">
        </div>
        <div class="mb-3">
            <textarea name="articles[0][description]" placeholder="Description" class="form-control"></textarea>
        </div>
        <div class="mb-3">
            <input type="number" name="articles[0][prix]" placeholder="Prix" required class="form-control">
        </div>
        <div class="mb-3">
            <input type="number" name="articles[0][comission]" placeholder="Comission" required class="form-control" value="{{commission}}">
        </div>
    </div>
</div>

                        <br/>
                        <center>
                            <button type="button" id="add-article" class="btn btn-secondary">Ajouter un autre article</button>
                            <button type="submit" class="btn btn-info">Ajouter</button>
                        </center>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    // Initialize Select2 on the Déposant select element
    $(document).ready(function() {
        $('#deposant_id').select2({
            placeholder: "Rechercher un déposant",
            allowClear: true
        });
    });

    // Add dynamic article fields
    let articleIndex = 1;
    document.getElementById('add-article').addEventListener('click', () => {
        const container = document.getElementById('articles-container');
        const newArticle = document.createElement('div');
        newArticle.innerHTML = `
            <br/><h4>Article ${articleIndex+1}</h4>
            <input type="text" name="articles[${articleIndex}][titre]" placeholder="Titre" required class="form-control">
            <textarea name="articles[${articleIndex}][description]" placeholder="Description" class="form-control"></textarea>
            <input type="number" name="articles[${articleIndex}][prix]" placeholder="Prix" required class="form-control">
            <input type="number" name="articles[${articleIndex}][comission]" placeholder="Comission" required class="form-control" value="{{commission}}">
        `;
        container.appendChild(newArticle);
        articleIndex++;
    });
</script>
{% endblock %}