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

{% block title %}Galerie{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
<style>
body {
    font-size: 16px;
}
</style>
{% endblock %}
{% block body %}
{% if is_granted('ROLE_ADMIN') %}

    <h1>CONTROL - ACL STORE</h1>

    <form method="get" action="{{ path('app_galerie') }}">
        <input type="text" name="search" value="{{ searchQuery }}" placeholder="Rechercher par refstore"/>
        <button type="submit">Rechercher</button>
    </form>
<br>
<h3>Données entrées par l'utilisateur :</h3>
<br>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>ROULAGE</th>
            <th>MONTAGE</th>
            <th>REGLAGE</th>
            <th>EMBALLAGE1</th>
            <th>EMBALLAGE2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Refstore</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.refstore }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Reftoile</th>
                            <th>Lambrequin</th>
                            <th>Forme Lambrequin</th>
                            <th>Aspect toile</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recuproulageData %}
                            <tr>
                                <td>{{ record.reftoile }}</td>
                                <td>{{ record.lambrequin == 1 ? 'Oui' : 'Non' }}</td>
                                <td>
                                    {% if record.lambrequin == 1 %}
                                        {{ record.formelambrequin == 1 ? 'Droit' : 'Vague' }}
                                    {% else %}
                                        {{ record.formelambrequin == 1 ? '' : '' }}
                                    {% endif %}
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.img }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Série</th>
                            <th>Ral</th>
                            <th>Ral image</th>
                            <th>Côté Manoeuvre</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recupmontageData %}
                            <tr>
                                <td>{{ record.serie }}</td>
                                <td>{{ record.ral }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.img }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>{{ record.cotemanoeuvre == 1 ? 'Droite' : 'Gauche' }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Reftoile</th>
                            <th>Lambrequin</th>
                            <th>Forme Lambrequin</th>
                            <th>Série</th>
                            <th>Largeur HT</th>
                            <th>Avancée</th>
                            <th>Manoeuvre</th>
                            <th>Côté Manoeuvre</th>
                            <th>Image</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recupreglageData %}
                            <tr>
                                <td>{{ record.reftoile }}</td>
                                <td>{{ record.lambrequin == 1 ? 'Oui' : 'Non' }}</td>
                                <td>
                                    {% if record.lambrequin == 1 %}
                                        {{ record.formelambrequin == 1 ? 'Droit' : 'Vague' }}
                                    {% else %}
                                        {{ record.formelambrequin == 1 ? '' : '' }}
                                    {% endif %}
                                </td>
                                <td>{{ record.serie }}</td>
                                <td>{{ record.largeurht }}</td>
                                <td>{{ record.avancee }}</td>
                                <td>{{ record.manoeuvre }}</td>
                                <td>{{ record.cotemanoeuvre == 1 ? 'Droite' : 'Gauche' }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.img }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Largeur HT</th>
                            <th>Ral</th>
                            <th>Manoeuvre</th>
                            <th>Côté Manoeuvre</th>
                            <th>INTERRUPTEUR OUI / NON</th>
                            <th>TYPE MANIVELLE</th>
                            <th>REFERENCE AUTOMATISME 1</th>
                            <th>REFERENCE AUTOMATISME 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recupemballage1Data %}
                            <tr>
                                <td>{{ record.largeurht }}</td>
                                <td>{{ record.ral }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.manoeuvre }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.cotemanoeuvre }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.interrupteur }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.typemanivelle }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.refauto1 }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.refauto2 }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>INTERRUPTEUR OUI / NON</th>
                            <th>TYPE MANIVELLE</th>
                            <th>REFERENCE AUTOMATISME 1</th>
                            <th>REFERENCE AUTOMATISME 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in recupemballage2Data %}
                            <tr>
                                <td>{{ record.interrupteur == 1 ? 'Oui' : 'Non' }}</td>
                                <td>{{ record.typemanivelle}}</td>
                                <td>{{ record.refauto1 }}</td>
                                <td>{{ record.refauto2 }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- Repeat the above <tr> for each outer row if needed -->
    </tbody>
</table>

<br>
<h3>Données entrées par l'employée de lancement de production :</h3>
<br>
    <table>
    <thead>
        <tr>
            <th>ID</th>
            <th>ROULAGE</th>
            <th>MONTAGE</th>
            <th>REGLAGE</th>
            <th>EMBALLAGE1</th>
            <th>EMBALLAGE2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Refstore</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.refstore }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Reftoile</th>
                            <th>Lambrequin</th>
                            <th>Forme Lambrequin</th>
                            <th>Aspect toile</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.reftoile }}</td>
                                <td>{{ record.lambrequin == 1 ? 'Oui' : 'Non' }}</td>
                                <td>
                                    {% if record.lambrequin == 1 %}
                                        {{ record.formelambrequin == 1 ? 'Droit' : 'Vague' }}
                                    {% else %}
                                        {{ record.formelambrequin == 1 ? '' : '' }}
                                    {% endif %}
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.img }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="roulageimage{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Série</th>
                            <th>Ral</th>
                            <th>Ral image</th>
                            <th>Côté Manoeuvre</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.mserie }}</td>
                                <td>{{ record.mral }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.mralimg }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="mralimg{{ loop.index }}">
                                    </div>
                                </td>
                                <td>{{ record.mcotemanoeuvre == 1 ? 'Droite' : 'Gauche' }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Reftoile</th>
                            <th>Lambrequin</th>
                            <th>Forme Lambrequin</th>
                            <th>Série</th>
                            <th>Largeur HT</th>
                            <th>Avancée</th>
                            <th>Manoeuvre</th>
                            <th>Côté Manoeuvre</th>
                            <th>Image</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.reftoile }}</td>
                                <td>{{ record.lambrequin == 1 ? 'Oui' : 'Non' }}</td>
                                <td>
                                    {% if record.lambrequin == 1 %}
                                        {{ record.formelambrequin == 1 ? 'Droit' : 'Vague' }}
                                    {% else %}
                                        {{ record.formelambrequin == 1 ? '' : '' }}
                                    {% endif %}
                                </td>
                                <td>{{ record.serie }}</td>
                                <td>{{ record.largeurht }}</td>
                                <td>{{ record.avancee }}</td>
                                <td>{{ record.manoeuvre }}</td>
                                <td>{{ record.cotemanoeuvre == 1 ? 'Droite' : 'Gauche' }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.img }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Largeur HT</th>
                            <th>Ral</th>
                            <th>Manoeuvre</th>
                            <th>Côté Manoeuvre</th>
                            <th>INTERRUPTEUR OUI / NON</th>
                            <th>TYPE MANIVELLE</th>
                            <th>REFERENCE AUTOMATISME 1</th>
                            <th>REFERENCE AUTOMATISME 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.e1largeurht }}</td>
                                <td>{{ record.e1ral }}</td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1manoeuvre }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1cotemanoeuvre }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1interrupteur }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1typemanivelle }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1refauto1 }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                                <td>
                                    <img src="data:image/jpeg;base64,{{ record.e1refauto2 }}" alt="Image" style="max-width: 100px; cursor: pointer;" class="myImg" data-modal="modal{{ loop.index }}"/>
                                    <div id="modal{{ loop.index }}" class="modal">
                                        <span class="close" data-modal="modal{{ loop.index }}">&times;</span>
                                        <img class="modal-content" id="img{{ loop.index }}">
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>INTERRUPTEUR OUI / NON</th>
                            <th>TYPE MANIVELLE</th>
                            <th>REFERENCE AUTOMATISME 1</th>
                            <th>REFERENCE AUTOMATISME 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in superviseData %}
                            <tr>
                                <td>{{ record.e2interrupteur == 1 ? 'Oui' : 'Non' }}</td>
                                <td>{{ record.e2typemanivelle}}</td>
                                <td>{{ record.e2refauto1 }}</td>
                                <td>{{ record.e2refauto2 }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- Repeat the above <tr> for each outer row if needed -->
    </tbody>
</table>
<script>
    // JavaScript for image modal functionality
    document.addEventListener('DOMContentLoaded', function () {
        var images = document.getElementsByClassName("myImg");
        for (var i = 0; i < images.length; i++) {
            images[i].onclick = function(){
                var modalId = this.getAttribute("data-modal");
                var modal = document.getElementById(modalId);
                var modalImg = modal.querySelector(".modal-content");
                modal.style.display = "block";
                modalImg.src = this.src;
            }
        }

        var spans = document.getElementsByClassName("close");
        for (var i = 0; i < spans.length; i++) {
            spans[i].onclick = function(){
                var modalId = this.getAttribute("data-modal");
                var modal = document.getElementById(modalId);
                modal.style.display = "none";
            }
        }
    });
</script>
{% else %}
{% endif %}
{% endblock %}