{% form_theme form 'properties/_form_theme.html.twig' %}
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="bg-light shadow p-4 rounded">
                {{ form_start(form) }}

                <div class="form-group row">
                    <label for="category" class="col-md-4 col-form-label">Choix de la catégorie de ce bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.category, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Choix de la catégorie'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="housingType" class="col-md-4 col-form-label">Type de logement</label>
                    <div class="col-md-8">
                        {% for choice in form.housingType %}
                            <div class="form-check form-check-inline">
                                {{ form_widget(choice, {'label': false, 'attr': {'class': 'form-check-input'}}) }}
                                <label class="form-check-label" for="{{ choice.vars.id }}">
                                    {{ choice.vars.label }}
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div id="subType" class="form-group row">
                    <label for="subType" class="col-md-4 col-form-label">Type de location</label>
                    <div class="col-md-8">
                        {% for choice in form.subType %}
                            <div class="form-check form-check-inline">
                                {{ form_widget(choice, {'label': false, 'attr': {'class': 'form-check-input'}}) }}
                                <label class="form-check-label" for="{{ choice.vars.id }}">
                                    {{ choice.vars.label }}
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="garden" class="col-md-4 col-form-label">Ce bien dispose d'un jardin</label>
                    <div class="col-md-8">
                        <div class="form-check form-check-inline">
                            {{ form_widget(form.garden[0], {'label': false, 'attr': {'class': 'form-check-input'}}) }}
                            <label class="form-check-label" aria-label="oui" for="{{ form.garden[0].vars.id }}">
                                Oui
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            {{ form_widget(form.garden[1], {'label': false, 'attr': {'class': 'form-check-input'}}) }}
                            <label class="form-check-label" aria-label="non" for="{{ form.garden[1].vars.id }}">
                                Non
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="roomNumber" class="col-md-4 col-form-label">Nombre de pièces de ce bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.roomNumber, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Nombre de pièces'}}) }}
                    </div>
                </div>

                <div id="rent" class="form-group row">
                    <label for="rent" class="col-md-4 col-form-label">Loyer du bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.rent, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Loyer du bien'}}) }}
                    </div>
                </div>
                
                <div id="price" class="form-group row">
                    <label for="price" class="col-md-4 col-form-label">Prix de vente de ce bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.price, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Prix de vente'}}) }}
                    </div>
                </div>
                
                <div class="form-group row">
                    <label for="user" class="col-md-4 col-form-label">Propriétaire</label>
                    <div class="col-md-8">
                        {{ form_row(form.user, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Propriétaire'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="harea" class="col-md-4 col-form-label">Superficie de ce bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.harea, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Superficie'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="placeType" class="col-md-4 col-form-label">Type du lieu</label>
                    <div class="col-md-8">
                        {{ form_row(form.placeType, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Type du lieu'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="placeNumber" class="col-md-4 col-form-label">Numéro de voie</label>
                    <div class="col-md-8">
                        {{ form_row(form.placeNumber, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Numéro de voie'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="street" class="col-md-4 col-form-label">Rue</label>
                    <div class="col-md-8">
                        {{ form_row(form.street, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Rue'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="city" class="col-md-4 col-form-label">Ville</label>
                    <div class="col-md-8">
                        {{ form_row(form.city, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Ville'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="zipCode" class="col-md-4 col-form-label">Code postal</label>
                    <div class="col-md-8">
                        {{ form_row(form.zipCode, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Code postal'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="yearBuilt" class="col-md-4 col-form-label">Année de construction</label>
                    <div class="col-md-8">
                        {{ form_row(form.yearBuilt, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Année de construction'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="heating" class="col-md-4 col-form-label">Type de chauffage</label>
                    <div class="col-md-8">
                        {{ form_row(form.heating, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Type de chauffage'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="title" class="col-md-4 col-form-label">Titre de l'annonce</label>
                    <div class="col-md-8">
                        {{ form_row(form.title, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Titre de l\'annonce'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="content" class="col-md-4 col-form-label">Contenu de l'annonce</label>
                    <div class="col-md-8">
                        {{ form_row(form.content, {'label': false, 'attr': {'class': 'form-control rounded-pill', 'placeholder': 'Contenu de l\'annonce'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <label for="images" class="col-md-4 col-form-label">Importez les images représentant ce bien</label>
                    <div class="col-md-8">
                        {{ form_row(form.images, {'label': false, 'attr': {'class': 'form-control-file'}}) }}
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary rounded-pill mt-3">Soumettre</button>
                    </div>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Fonction pour mettre à jour le texte du h2
        function updateSelectedCategory() {
            var selectedCategory = $('#properties_category option:selected').text().toLowerCase();

            // Vérifier si la catégorie choisie est "location" (insensible à la casse)
            if (selectedCategory.includes("location")) {
                $('#price').hide();
                $('#rent').show();
                $('#subType').show();
            } else {
                $('#price').show();
                $('#rent').hide();
                $('#subType').hide();
            }
        }

        // Appel initial pour afficher la catégorie par défaut
        updateSelectedCategory();

        // Écouter les changements sur le champ de sélection de catégorie
        $('#properties_category').change(function() {
            updateSelectedCategory();
        });
    });
</script>