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

{% block title %}Liste des Hosts{% endblock %}

{% block body %}
    <section class="section">
        <div class="section-header">
        <h1>Liste des Hosts</h1>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Email</th>
                                <th>Nom</th>
                                <th>Prenom</th>
                                <th>Phone</th>
                                <th>Image</th>
                                <th>Adresse</th>
                                <th>Date d'ajout</th>
                                <th>Etat</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for user in host %}
                            <tr>
                                <td>{{ user.id }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.nom }}</td>
                                <td>{{ user.prenom }}</td>
                                <td>{{ user.phone }}</td>
                                <td>
                                    {% if user.image != null %}
                                        <img width="80" src="{{ asset('/uploads/imagesUser/'~user.image) }}" alt="" width="90">
                                    {% else %}
                                        <img width="50" src="{{asset('assets/images/userMessneger.jpg
                                        ')}}" alt="Avatar de {{user.nom}}">
                                    {% endif %}
                                </td>
                                <td>{{ user.adresse }}</td>
                                <td>
                                    <a href="{{ asset('/uploads/hostFiles/'~user.host.identity) }}')}}"><i class="fa fa-file">identité de {{user.nom}}</i></a>
                                </td>
                                <td>
                                    <input
                                        type="checkbox"
                                        class="toggle-verification"
                                        data-id="{{ user.id }}"
                                        data-url="{{ path('app_admin_host_toggle_verification', {'id': user.id}) }}"
                                        {% if user.isVerified %}checked{% endif %}
                                        data-toggle="toggle"
                                        data-on="Active"
                                        data-off="Inactive"
                                        data-onstyle="primary"
                                        data-offstyle="danger"
                                    >
                                    <span id="verification-display-{{ user.id }}">
                                        {% if user.isVerified %}Active{% else %}Inactive{% endif %}
                                    </span>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="12">no records found</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                
                </div>
            </div>
        </div> 
</section>

{% endblock %}
{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.toggle-verification').forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    var id = this.getAttribute('data-id');
                    var url = this.getAttribute('data-url');
                    var checkbox = this;

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({})
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            checkbox.checked = data.isVerified;
                            document.getElementById('verification-display-' + id).textContent = data.isVerified ? 'Active' : 'Inactive';
                        }
                    })
                    .catch(error => console.error('Error:', error));
                });
            });
        });
    </script>
{% endblock %}