{% extends "/coulisses/base.html.twig" %}

{% set roomFields = [
    {"key": "summary",          "label": "Résumé",                "type": "wysiwyg", "required": true},
    {"key": "presentation",     "label": "Présentation",           "type": "wysiwyg", "required": true},
    {"key": "welcome",          "label": "Message d'accueil",      "type": "input",   "required": false, "placeholder": "ex: Bienvenue dans votre chambre..."},
    {"key": "meta_title",       "label": "Meta titre (SEO)",       "type": "input",   "required": false},
    {"key": "meta_description", "label": "Meta description (SEO)", "type": "input",   "required": false}
] %}

{% block styles %}{% endblock %}

{% block content %}
<div class="page-main">

    <a href="/coulisses/chambres" class="back-link">← Chambres</a>
    <h1>{{ room.name }}</h1>

    {# ── Formulaire principal : infos + traductions + images ── #}
    <form method="post" action="/coulisses/chambres/{{ room.slug }}/sauvegarder" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        {# Informations générales #}
        <div class="section">
            <div class="section-title">Informations générales</div>
            <div class="card">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name">Nom de la chambre</label>
                        <input type="text" id="name" name="name" value="{{ room.name }}" required>
                    </div>
                    <div class="form-group">
                        <label for="sort_order">Ordre d'affichage</label>
                        <input type="number" id="sort_order" name="sort_order" value="{{ room.sort_order }}" min="0">
                    </div>
                </div>

                <div class="form-row-3">
                    <div class="form-group">
                        <label for="base_price">Prix de base <span class="label-opt">(€/nuit)</span></label>
                        <input type="number" id="base_price" name="base_price" value="{{ room.base_price }}" min="0">
                    </div>
                    <div class="form-group">
                        <label for="surface">Surface <span class="label-opt">(m²)</span></label>
                        <input type="number" id="surface" name="surface" value="{{ room.surface }}" min="0">
                    </div>
                    <div class="form-group">
                        <label for="floor">Étage</label>
                        <select id="floor" name="floor">
                            <option value="">—</option>
                            <option value="0" {{ room.floor == 0 and room.floor is not null ? 'selected' : '' }}>RDC</option>
                            <option value="1" {{ room.floor == 1 ? 'selected' : '' }}>1er étage</option>
                            <option value="2" {{ room.floor == 2 ? 'selected' : '' }}>2e étage</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="reservit_cat_id">Reservit Cat ID <span class="label-opt">(facultatif)</span></label>
                        <input type="number" id="reservit_cat_id" name="reservit_cat_id" value="{{ room.reservit_cat_id }}">
                    </div>
                    <div class="form-group">
                        <label for="reservit_room_id">Reservit Room ID <span class="label-opt">(facultatif)</span></label>
                        <input type="number" id="reservit_room_id" name="reservit_room_id" value="{{ room.reservit_room_id }}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="checkbox-row">
                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ room.is_active ? 'checked' : '' }}>
                        <label for="is_active" class="checkbox-label" style="text-transform:none;letter-spacing:0;font-weight:500;">Chambre active (visible sur le site)</label>
                    </div>
                </div>
            </div>
        </div>

        {# Contenus multilingues #}
        <div class="section">
            <div class="section-title">Contenus multilingues</div>
            <div
                data-admin-component="MultiLangEditor"
                data-locales="{{ locales }}"
                data-fields="{{ roomFields|json_encode }}"
                data-values="{{ room.translations|json_encode }}"
                data-csrf-token="{{ csrf_token }}"
            ></div>
        </div>

        {# Images #}
        <div class="section">
            <div class="section-title">Images</div>
            <div
                data-admin-component="ImageManager"
                data-images="{{ room.images|json_encode }}"
                data-upload-url="/coulisses/chambres/{{ room.slug }}/image"
                data-delete-url="/coulisses/chambres/{{ room.slug }}/image/"
                data-locales="{{ locales }}"
                data-csrf-token="{{ csrf_token }}"
            ></div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-save">Enregistrer</button>
            <a href="/coulisses/chambres" class="btn-cancel">Annuler</a>
        </div>
    </form>

    {# ── Formulaire Atouts ── #}
    <div class="section" style="margin-top: 40px;">
        <div class="section-title">Atouts de la chambre</div>
        <div class="card">
            {% if allFeatures is empty %}
            <p style="color:#9ca3af;font-size:13px;">Aucun atout défini. <a href="/coulisses/atouts/nouveau">En créer un</a>.</p>
            {% else %}
            <div
                data-admin-component="RoomFeatureSorter"
                data-assigned="{{ room.assigned_features | json_encode }}"
                data-all-features="{{ allFeatures | json_encode }}"
                data-save-url="/coulisses/chambres/{{ room.slug }}/atouts"
                data-csrf-token="{{ csrf_token }}"
            ></div>
            {% endif %}
        </div>
    </div>

    {# ── Formulaire Prestations ── #}
    <div class="section">
        <div class="section-title">Prestations associées</div>
        <div class="card">
            <form method="post" action="/coulisses/chambres/{{ room.slug }}/prestations">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                {% if allActivities is empty %}
                <p style="color:#9ca3af;font-size:13px;">Aucune prestation définie. <a href="/coulisses/prestations/nouveau">En créer une</a>.</p>
                {% else %}
                <div class="features-grid">
                    {% for activity in allActivities %}
                    <label class="feature-item">
                        <input
                            type="checkbox"
                            name="activity_ids[]"
                            value="{{ activity.id }}"
                            {{ activity.id in room.activity_ids ? 'checked' : '' }}
                        >
                        <span>{{ activity.label ?? activity.slug }}</span>
                    </label>
                    {% endfor %}
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-save">Enregistrer les prestations</button>
                </div>
                {% endif %}
            </form>
        </div>
    </div>

</div>
{% endblock %}