{% extends '@App/app.html.twig' %}

{% block title %}Créer une règle de conformité{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set data = data|default({}) %}
{% set severity = data.severity|default('warning') %}
{% set units = {minutes: 'Minutes', hours: 'Heures', days: 'Jours', boolean: 'Actif / inactif'} %}
{% set categories = {
    work_time: 'Temps de travail',
    rest: 'Repos',
    break: 'Pause',
    publication: 'Publication',
    overlap: 'Chevauchement',
    leave: 'Congés et absences'
} %}

<div class="data-page planning-config-page planning-rule-create" data-controller="planning-settings planning-rule-form">
    <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
        <a href="{{ path('planning_settings_index') }}">Paramètres</a>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <a href="{{ path('planning_settings_rules') }}">Règles de conformité</a>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <strong>Nouvelle règle</strong>
    </nav>

    <form method="post" class="planning-config-form">
        <input type="hidden" name="_token" value="{{ csrf_token('planning_rule_create') }}">

        <header class="planning-rule-create__header">
            <a class="planning-rule-create__back" href="{{ path('planning_settings_rules') }}">
                <i class="ti ti-arrow-left" aria-hidden="true"></i>
                Retour à la liste
            </a>
            <h1>Créer une nouvelle règle de conformité</h1>
            <p>Définissez une nouvelle contrainte de validation pour vos plannings Staffelia.</p>
        </header>

        {% if errors|default([]) is not empty %}
            <div class="alert alert-danger">
                {% for error in errors %}<div>{{ error }}</div>{% endfor %}
            </div>
        {% endif %}

        <div class="planning-config-layout">
            <main class="planning-config-main">
                <section class="planning-config-card planning-config-card--sectioned">
                    <h2><i class="ti ti-info-circle-filled" aria-hidden="true"></i>Informations générales</h2>
                    <div class="planning-config-card__body">
                        <label class="planning-config-field">
                            <span>Nom de la règle <b>*</b></span>
                            <input type="text" name="nom" value="{{ data.nom|default('') }}" placeholder="Ex: Temps de travail hebdomadaire max." data-planning-settings-target="ruleName" data-action="input->planning-settings#suggestRuleCode" required>
                        </label>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field">
                                <span>Code technique <b>*</b></span>
                                <input type="text" name="code" value="{{ data.code|default('') }}" placeholder="ex: max_weekly_work" data-planning-settings-target="ruleCode" data-action="input->planning-settings#markRuleCodeTouched" required>
                                <small>Identifiant unique utilisé par le moteur de règles.</small>
                            </label>
                            <label class="planning-config-field">
                                <span>Catégorie</span>
                                <select name="appliesTo">
                                    {% for value, label in categories %}
                                        <option value="{{ value }}" {{ data.appliesTo|default('work_time') == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                        </div>
                        <label class="planning-config-field">
                            <span>Description détaillée</span>
                            <textarea name="description" rows="4" placeholder="Décrivez le but de cette règle et les conditions d'application...">{{ data.description|default('') }}</textarea>
                        </label>
                    </div>
                </section>

                <section class="planning-config-card planning-config-card--sectioned">
                    <h2><i class="ti ti-cpu" aria-hidden="true"></i>Moteur de conformité</h2>
                    <div class="planning-config-card__body">
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field">
                                <span>Type technique</span>
                                <select name="ruleType" data-planning-rule-form-target="type" data-action="change->planning-rule-form#sync">
                                    {% for value, label in rule_types|default({custom: 'Personnalisée'}) %}
                                        <option value="{{ value }}" {{ data.ruleType|default('custom') == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <label class="planning-config-field">
                                <span>Priorité</span>
                                <input type="number" name="priority" value="{{ data.priority|default(100) }}" min="0">
                            </label>
                        </div>
                        <label class="planning-config-field">
                            <span>Déclencheurs</span>
                            <div class="planning-rule-trigger-grid">
                                {% for event in trigger_events|default([]) %}
                                    <label><input type="checkbox" name="triggerEvents[]" value="{{ event }}" {{ event in data.triggerEvents|default([]) ? 'checked' : '' }}> {{ event }}</label>
                                {% endfor %}
                            </div>
                        </label>
                        <label class="planning-config-field">
                            <span>Paramètres JSON</span>
                            <textarea name="parameters_json" rows="6" data-planning-rule-form-target="parameters">{{ data.parameters_json|default('{}') }}</textarea>
                        </label>
                    </div>
                </section>

                <section class="planning-config-card planning-config-card--sectioned">
                    <h2><i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>Paramétrage du seuil</h2>
                    <div class="planning-config-card__body planning-config-grid planning-config-grid--3">
                        <label class="planning-config-field">
                            <span>Valeur cible</span>
                            <input type="number" name="value" value="{{ data.value|default(48) }}" min="0" step="1">
                        </label>
                        <label class="planning-config-field">
                            <span>Unité</span>
                            <select name="unit">
                                {% for value, label in units %}
                                    <option value="{{ value }}" {{ data.unit|default('minutes') == value ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label class="planning-config-field">
                            <span>Opérateur</span>
                            <select name="operator" disabled>
                                <option>Selon le code de règle</option>
                            </select>
                        </label>
                    </div>
                </section>

                <section class="planning-config-card planning-config-card--sectioned">
                    <h2><i class="ti ti-layers-intersect" aria-hidden="true"></i>Périmètre d'application</h2>
                    <div class="planning-config-card__body">
                        <p class="planning-rule-create__hint">Laissez vide pour appliquer à toute la société.</p>
                        <div class="planning-config-grid planning-config-grid--2">
                            <div>
                                <label class="planning-config-field">
                                    <span>Type de périmètre</span>
                                    <select name="scopeType">
                                        {% for scope in scope_types|default(['company']) %}
                                            <option value="{{ scope }}" {{ data.scopeType|default('company') == scope ? 'selected' : '' }}>{{ scope }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div>
                                <label class="planning-config-field">
                                    <span>ID du périmètre</span>
                                    <input type="number" name="scopeId" value="{{ data.scopeId|default('') }}" min="1" placeholder="Ex: ID service ou salarié">
                                </label>
                            </div>
                        </div>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field">
                                <span>Actif du</span>
                                <input type="date" name="effectiveFrom" value="{{ data.effectiveFrom|default('') }}">
                            </label>
                            <label class="planning-config-field">
                                <span>Actif au</span>
                                <input type="date" name="effectiveTo" value="{{ data.effectiveTo|default('') }}">
                            </label>
                        </div>
                    </div>
                </section>
            </main>

            <aside class="planning-config-aside">
                <section class="planning-config-card planning-rule-create__severity">
                    <h2><i class="ti ti-alert-triangle-filled" aria-hidden="true"></i>Sévérité & État</h2>
                    <span class="planning-rule-create__label">Niveau de sévérité</span>
                    {% for value, label in {info: 'Information', warning: 'Avertissement', blocking: 'Bloquant'} %}
                        <label class="planning-rule-severity planning-rule-severity--{{ value }}">
                            <input type="radio" name="severity" value="{{ value }}" {{ severity == value ? 'checked' : '' }}>
                            <span>{{ label }}</span>
                        </label>
                    {% endfor %}
                    <label class="planning-toggle-row planning-toggle-row--compact">
                        <span><strong>Activer la règle</strong><small>Appliquée dès la prochaine validation.</small></span>
                        <input type="checkbox" name="enabled" value="1" {{ data.enabled|default(true) ? 'checked' : '' }}>
                    </label>
                    <label class="planning-toggle-row planning-toggle-row--compact">
                        <span><strong>Ignorable</strong><small>Peut être contournée en mode avertissement.</small></span>
                        <input type="checkbox" name="ignorable" value="1" {{ data.ignorable|default(true) ? 'checked' : '' }}>
                    </label>
                    <label class="planning-toggle-row planning-toggle-row--compact">
                        <span><strong>Bloque à la publication</strong><small>Empêche la publication si la règle est bloquante.</small></span>
                        <input type="checkbox" name="blockingOnPublish" value="1" {{ data.blockingOnPublish|default(true) ? 'checked' : '' }}>
                    </label>
                    <button class="data-button data-button--primary" type="submit">
                        <i class="ti ti-device-floppy" aria-hidden="true"></i>
                        Enregistrer la règle
                    </button>
                    <a class="data-button data-button--secondary" href="{{ path('planning_settings_rules') }}">Annuler</a>
                </section>

                <section class="planning-config-card planning-rule-create__simulation">
                    <h2><i class="ti ti-test-pipe" aria-hidden="true"></i>Simuler la règle</h2>
                    <p>Tester votre règle sur le planning actuel avant de la rendre active pour tous les managers.</p>
                    <button class="data-button data-button--dark" type="button" disabled>
                        <i class="ti ti-player-play-filled" aria-hidden="true"></i>
                        Lancer la simulation
                    </button>
                </section>
            </aside>
        </div>
    </form>
</div>
{% endblock %}