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

{% block title %}Serial Number - Home{% endblock %}

{% block body %}
    <div class="absolute">
        <div class="d-flex align-items-center">
            <h1>Numéro de serie - Liste</h1>
            <a href="{{ path('app_serial_number_new') }}" class="btn btn-success mx-3">Créer</a>
        </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>Date</th>
                <th>SerialNumber</th>
                <th>Composant</th>
                <th>Fournisseur</th>
                <th>actions</th>
            </tr>
            </thead>
            <tbody id="tbody">
            {% for serial_number in serial_numbers %}
                <tr>
                    <td>{{ serial_number.date.format('d/m/Y h:i:s') }}</td>
                    <td>{{ serial_number.serialNumber }}</td>
                    <td>
                        {% if serial_number.hasComposant() %}
                            {% if  serial_number.composant.hasImage %}
                                {{ serial_number.composant.displayImage | raw }}
                            {% endif %}
                            {{ serial_number.composant }} - {{ serial_number.composant.iSBN }}
                        {% endif %}</td>
                    <td>{{ serial_number.fournisseur }} </td>
                    <td>
                        <a href="{{ path('app_serial_number_edit', {'id': serial_number.id}) }}" class="btn btn-info">Modifier</a>

                        {% if app.user.is('dev') %}
                            <a href="{{ path('app_serial_number_show', {'id': serial_number.id}) }}">show</a>
                        {% endif %}
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="4">Aucun Numéro de série entrée.</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 %}