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

{% block title %}Gestion des biens{% endblock %}

{% block body %}
    <h1 class="mb-4 text-center my-5">Nos biens</h1>

    <div class="m-5">
        <button class="btn btn-secondary filter-btn active" data-filter="all" aria-disabled="true">Tout afficher</button>
        <button class="btn btn-secondary filter-btn" data-filter="available" aria-disabled="false"> Biens disponibles</button>
        <button class="btn btn-secondary filter-btn" data-filter="not-available" aria-disabled="false">Biens non disponibles</button>
    </div>

    {% if properties is not empty %}
        <div class="row px-4" style="margin-left:0; margin-right:0;">
            {% for property in properties %}
                <div class="col-md-4 mb-4 property-card {% if property.isAvailable %}available{% else %}not-available{% endif %}">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ property.title }}</h5>
                            <p class="card-text">Propriétaire : {{ property.user.name }}</p>
                            <p class="card-text">Nombre de pièces : {{ property.roomNumber }}</p>
                            <p class="card-text">Type de transaction : {{ property.category.name }}</p>
                            <p class="card-text">Type du logement : {{ property.housingType ? "Maison" : "Appartement" }}</p>
                            <p class="card-text">Ville : {{ property.address.city }}</p>
                            <p class="card-text">Disponibilité : {{ property.isAvailable ? 'disponible' : 'non disponible' }}</p>
                            <a href="{{ path('app_properties_show', {'id': property.id}) }}" class="btn btn-info">
                                <i class="fas fa-eye"></i> Afficher
                            </a>
                            {% if app.user and app.user.roles[0] == "ROLE_ADMIN" %}
                                <a href="{{ path('app_properties_edit', {'id': property.id}) }}" class="btn btn-primary">
                                    <i class="fas fa-edit"></i> Modifier
                                </a>
                                {% include 'properties/_delete_form.html.twig' with {'property': property} %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-warning" role="alert">
            Aucun enregistrement trouvé
        </div>
    {% endif %}

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.filter-btn').click(function() {
                var filter = $(this).data('filter');
                
                // Désactive tous les boutons sauf celui cliqué
                $('.filter-btn').removeClass('active disabled');
                $('.filter-btn').attr('aria-disabled', 'false');
                $(this).addClass('active');
                $(this).attr('aria-disabled', 'true');

                // Affiche ou cache les propriétés en fonction du filtre
                if (filter === 'all') {
                    $('.property-card').show();
                } else if (filter === 'available') {
                    $('.property-card').hide();
                    $('.available').show();
                } else if (filter === 'not-available') {
                    $('.property-card').hide();
                    $('.not-available').show();
                }
            });

            // Appliquer le style Bootstrap aux boutons indisponibles initialement
            $('.filter-btn:not(.active)').addClass('disabled');
        });
    </script>
{% endblock %}