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

{% block body %}

    <div class="absolute">

        <div class="d-flex justify-content-between">
            <div class="m-3 p-3 rounded shadow-sm">
                <img src="{{ asset('img/tools.svg') }}" alt="tools" width="50">
                <span class="fs-4">{{ sav }}</span>
            </div>

            <div class="m-3 p-3 rounded shadow-sm">
                {% for item in sav.commande.contenu %}
                    <div class="d-flex justify-content-between">
                        <span>{{ item.quantite }} - {{ item.article }}</span>

                    </div>
                {% endfor %}

            </div>
        </div>

        <div class="search">
            <input class="form-control search " id="search" placeholder="Search"
                   value=""
                   autocomplete="off">
        </div>


        <table class="table table-striped text-center">
            <thead>
            <tr>
                <th></th>
                <th>Article</th>
                <th>EAN</th>
                <th></th>
                <th>actions</th>
            </tr>
            </thead>
            <tbody id="tbody">
            {% for item in composants %}
                <tr>
                    <td>{{ item.displayImage | raw }}</td>
                    <td>{{ item }}</td>
                    <td>
                        {{ item.ISBN }}
                    </td>
                    <td></td>
                    <td>
                        {% if item not in sav.composant %}

                        {% endif %}

                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="4">Aucun composant entré.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>
    <script>
        document.getElementById('search').addEventListener('keyup', (e) => {
            const searchString = e.target.value;
            let url = "{{ path('app_serial_number_find') }}";


            $.ajax({
                method: "POST",
                url: url,
                data: {
                    q: searchString
                },
                success: function (data) {
                    document.getElementById('tbody').innerHTML = data;

                }
            });
        });
    </script>
{% endblock %}

{% block title %}
    SAV - Ajouter un composant
{% endblock %}