{% extends 'admin/layout.html.twig' %}

{% block title %}Éditeur de plan de scène{% endblock %}

{% block admin_body %}
{% include 'admin/ui/_page_header.html.twig' with {page_eyebrow:'Plan de scène',page_title:(new_version ? 'Créer une nouvelle version' : 'Modifier le plan'),page_subtitle:'Place et ajuste les éléments du plateau. Les modifications ne sont enregistrées qu’après validation.',page_actions:[{label:'Tous les plans',href:path('admin_stage_plan_index'),icon:'bi-arrow-left'}]} only %}

<div class="alert alert-light border stage-editor-device-note" role="note"><i class="bi bi-phone-landscape me-2"></i><strong>Confort d’édition :</strong> sur petit écran, tourne le téléphone en paysage. Une tablette ou un ordinateur reste préférable pour les ajustements précis.</div>

<form method="post" id="stage-plan-form" data-prevent-double-submit="true">
    <input type="hidden" name="_token" value="{{ csrf_token('stage-plan') }}">
    <textarea hidden name="layout_json" id="layout-json">{{ plan.layoutJson }}</textarea>

    <div class="row g-3">
        <div class="col-xl-3">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body">
                    <label class="form-label">Code <span class="text-danger">*</span></label>
                    <select class="form-select mb-3" name="code" required>
                        {% for code in constant('App\\Entity\\StagePlan::CODES') %}
                            <option value="{{ code }}" {{ plan.code == code ? 'selected' : '' }}>{{ code }}</option>
                        {% endfor %}
                    </select>

                    <label class="form-label">Nom <span class="text-danger">*</span></label>
                    <input class="form-control mb-3" name="name" value="{{ plan.name }}" required>

                    <div class="row g-2">
                        <div class="col">
                            <label class="form-label">Largeur (m)</label>
                            <input class="form-control" type="number" step="0.1" name="width_meters" value="{{ plan.widthMeters }}">
                        </div>
                        <div class="col">
                            <label class="form-label">Profondeur (m)</label>
                            <input class="form-control" type="number" step="0.1" name="depth_meters" value="{{ plan.depthMeters }}">
                        </div>
                    </div>

                    <label class="form-label mt-3">Description</label>
                    <textarea class="form-control" rows="3" name="description">{{ plan.description }}</textarea>

                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" name="show_legend" id="showLegend" {{ plan.showLegend ? 'checked' : '' }}>
                        <label class="form-check-label" for="showLegend">Afficher la légende</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="active" id="active" {{ plan.active ? 'checked' : '' }}>
                        <label class="form-check-label" for="active">Version active</label>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white"><strong>Palette</strong></div>
                <div class="card-body stage-palette">
                    {% set current = '' %}
                    {% for type, icon in icons %}
                        {% if current != icon.category %}
                            <div class="small text-uppercase text-secondary fw-bold mt-2 mb-1">{{ icon.category }}</div>
                            {% set current = icon.category %}
                        {% endif %}
                        <button
                            type="button"
                            class="stage-palette-item"
                            data-type="{{ type }}"
                            data-label="{{ icon.label }}"
                            data-icon="{{ path('admin_technical_icon', {filename: icon.file}) }}"
                        >
                            <img src="{{ path('admin_technical_icon', {filename: icon.file}) }}" alt="">
                            <span>{{ icon.label }}</span>
                        </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-xl-9">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <strong>Plateau</strong>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="toggle-grid">
                            <i class="bi bi-grid-3x3"></i> Grille
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="clear-stage">
                            <i class="bi bi-trash"></i> Vider
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="stage-pdf-preview">
                        <div class="stage-pdf-dimensions">
                            Plateau minimum : <span id="stage-preview-width">{{ plan.widthMeters }}</span> × <span id="stage-preview-depth">{{ plan.depthMeters }}</span> m
                        </div>
                        <div class="stage-pdf-row">
                            <div>
                                <div id="stage-editor" class="stage-editor">
                                    <div class="stage-orientation stage-orientation-back">FOND DE SCÈNE</div>
                                    <div class="stage-orientation stage-orientation-left">JARDIN</div>
                                    <div class="stage-orientation stage-orientation-right">COUR</div>
                                    <div class="stage-center-guide"></div>
                                    <div class="stage-front-label">FACE PUBLIC</div>
                                </div>
                                <div class="stage-audience-preview" aria-hidden="true">
                                    <div class="stage-audience-people">● ● ● ● ● ● ● ● ● ● ●</div>
                                    <strong>PUBLIC</strong>
                                </div>
                            </div>
                            <aside class="stage-pdf-legend">
                                <strong>LÉGENDE</strong>
                                <div id="stage-legend" class="stage-pdf-legend-list"></div>
                            </aside>
                        </div>
                    </div>

                    <div id="stage-selection-panel" class="stage-selection-panel d-none mt-3">
                        <div>
                            <div class="small text-uppercase text-secondary fw-bold">Élément sélectionné</div>
                            <div id="stage-selection-label" class="fw-semibold"></div>
                        </div>
                        <div class="stage-scale-control">
                            <label for="stage-object-scale" class="small text-secondary mb-0">Taille</label>
                            <input id="stage-object-scale" type="range" min="45" max="250" step="5" value="100" class="form-range mb-0">
                            <span id="stage-object-scale-value" class="small text-nowrap fw-semibold">100 %</span>
                        </div>
                        <div class="stage-selection-actions">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="stage-selected-rotate-left" title="Pivoter à gauche"><i class="bi bi-arrow-counterclockwise"></i></button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="stage-selected-rotate-right" title="Pivoter à droite"><i class="bi bi-arrow-clockwise"></i></button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="stage-selected-rename"><i class="bi bi-pencil me-1"></i>Renommer</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="stage-selected-duplicate"><i class="bi bi-copy me-1"></i>Dupliquer</button>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="stage-selected-delete"><i class="bi bi-trash me-1"></i>Supprimer</button>
                        </div>
                    </div>

                </div>
            </div>

            <div class="alert alert-light border mt-3 small mb-0">
                <i class="bi bi-info-circle me-1"></i>
                Touche un élément de la palette pour l’ajouter, puis fais-le glisser sur le plateau. Les actions de sélection fonctionnent au toucher. Sur ordinateur, le glisser-déposer, le clic droit et les raccourcis <kbd>Suppr</kbd> et <kbd>Ctrl</kbd>+<kbd>D</kbd> restent disponibles.
            </div>
        </div>
    </div>
    <div class="bottom-action-bar stage-plan-save-bar"><a class="btn btn-outline-secondary touch-target" href="{{ path('admin_stage_plan_index') }}">Annuler</a><button class="btn btn-dark touch-target" type="submit"><i class="bi bi-save me-1"></i>Enregistrer le plan</button></div>
</form>

<div id="stage-context-menu" class="stage-context-menu d-none" role="menu" aria-label="Actions sur l’élément">
    <button type="button" data-stage-action="rename"><i class="bi bi-pencil"></i>Renommer</button>
    <button type="button" data-stage-action="duplicate"><i class="bi bi-copy"></i>Dupliquer</button>
    <div class="stage-context-separator"></div>
    <button type="button" data-stage-action="rotate-left"><i class="bi bi-arrow-counterclockwise"></i>Pivoter -45°</button>
    <button type="button" data-stage-action="rotate-right"><i class="bi bi-arrow-clockwise"></i>Pivoter +45°</button>
    <button type="button" data-stage-action="grow"><i class="bi bi-arrows-angle-expand"></i>Agrandir</button>
    <button type="button" data-stage-action="shrink"><i class="bi bi-arrows-angle-contract"></i>Réduire</button>
    <div class="stage-context-separator"></div>
    <button type="button" class="text-danger" data-stage-action="delete"><i class="bi bi-trash"></i>Supprimer</button>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/stage-plan-editor.js') }}"></script>
{% endblock %}