{% extends "adminstram/layout.html.twig" %}
{% block styles %}
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/theme.css">
{% endblock %}
{% block body %}
<div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="header-title mt-0" style="font-size:25px;">Qui-sommes-nous</h4>
        <button type="submit" form="about-form" class="btn btn-success">Enregistrer</button>
    </div>
    {% for message in app.flashes('info') %}
        <div class="alert bg-gradient2 text-white"><p style="text-align:center; font-size:18px;color:white;">{{ message }}</p></div>
    {% endfor %}

    {{ form_start(aboutform, {'attr': {'enctype': 'multipart/form-data', 'id': 'about-form'}}) }}
    <div class="row">
        <div class="col-md-6">
            <h5>Infos Générales (Anciens champs)</h5>
            {{ form_row(aboutform.mission) }}
            {{ form_row(aboutform.mission_en) }}
            {{ form_row(aboutform.vision) }}
            {{ form_row(aboutform.vision_en) }}
            {{ form_row(aboutform.description) }}
            {{ form_row(aboutform.description_en) }}
            {{ form_row(aboutform.technique1) }}
            {{ form_row(aboutform.technique2) }}
            {{ form_row(aboutform.technique3) }}
            {{ form_row(aboutform.technique4) }}
            {{ form_row(aboutform.technique5) }}
        </div>
        <div class="col-md-6">
            <h5>Le Mot du DG</h5>
            {{ form_row(aboutform.ceoName) }}
            {{ form_row(aboutform.ceoRole) }}
            {{ form_row(aboutform.ceoRoleEn) }}
            {{ form_row(aboutform.ceoMessageTitle) }}
            {{ form_row(aboutform.ceoMessageTitleEn) }}
            {{ form_row(aboutform.ceoVideoUrl) }}
            {{ form_row(aboutform.ceoVideoFile) }}
            {{ form_row(aboutform.ceoMessageText) }}
            {{ form_row(aboutform.ceoMessageTextEn) }}
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-6">
            <h5>Notre Histoire</h5>
            {{ form_row(aboutform.historyTitle) }} {{ form_row(aboutform.historyTitleEn) }}
            {{ form_row(aboutform.historyDesc) }} {{ form_row(aboutform.historyDescEn) }}
            <h6>Date 1</h6>
            {{ form_row(aboutform.historyYear1) }} {{ form_row(aboutform.historyYear1En) }}
            {{ form_row(aboutform.historyText1) }} {{ form_row(aboutform.historyText1En) }}
            <h6>Date 2</h6>
            {{ form_row(aboutform.historyYear2) }} {{ form_row(aboutform.historyYear2En) }}
            {{ form_row(aboutform.historyText2) }} {{ form_row(aboutform.historyText2En) }}
            <h6>Date 3</h6>
            {{ form_row(aboutform.historyYear3) }} {{ form_row(aboutform.historyYear3En) }}
            {{ form_row(aboutform.historyText3) }} {{ form_row(aboutform.historyText3En) }}
            <h6>Date 4</h6>
            {{ form_row(aboutform.historyYear4) }} {{ form_row(aboutform.historyYear4En) }}
            {{ form_row(aboutform.historyText4) }} {{ form_row(aboutform.historyText4En) }}
        </div>
        <div class="col-md-6">
            <h5>Nos Valeurs</h5>
            {{ form_row(aboutform.valuesTitle) }} {{ form_row(aboutform.valuesTitleEn) }}
            {{ form_row(aboutform.valuesIntro) }} {{ form_row(aboutform.valuesIntroEn) }}
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <h6>Valeur 1</h6>
                    {{ form_row(aboutform.value1Title) }} {{ form_row(aboutform.value1TitleEn) }}
                    {{ form_row(aboutform.value1Text) }} {{ form_row(aboutform.value1TextEn) }}
                </div>
                <div class="col-md-6">
                    <h6>Valeur 2</h6>
                    {{ form_row(aboutform.value2Title) }} {{ form_row(aboutform.value2TitleEn) }}
                    {{ form_row(aboutform.value2Text) }} {{ form_row(aboutform.value2TextEn) }}
                </div>
                <div class="col-md-6">
                    <h6>Valeur 3</h6>
                    {{ form_row(aboutform.value3Title) }} {{ form_row(aboutform.value3TitleEn) }}
                    {{ form_row(aboutform.value3Text) }} {{ form_row(aboutform.value3TextEn) }}
                </div>
                <div class="col-md-6">
                    <h6>Valeur 4</h6>
                    {{ form_row(aboutform.value4Title) }} {{ form_row(aboutform.value4TitleEn) }}
                    {{ form_row(aboutform.value4Text) }} {{ form_row(aboutform.value4TextEn) }}
                </div>
            </div>
            <hr>
            {{ form_row(aboutform.valuesVideoUrl) }}
        </div>
    </div>
    <hr>
    <div class="row bg-light p-3 rounded" style="border: 1px solid #ddd;">
        <div class="col-md-12">
            <h5 class="text-primary">Gouvernance (Structure de Direction)</h5>
            {{ form_row(aboutform.govTitle) }}
            {{ form_row(aboutform.govTitleEn) }}
            {{ form_row(aboutform.govIntro) }}
            {{ form_row(aboutform.govIntroEn) }}
        </div>
        <div class="col-md-4">
            <h6 class="text-info">Approche : Pilier 1</h6>
            {{ form_row(aboutform.govPillar1Title) }} {{ form_row(aboutform.govPillar1Text) }}
            {{ form_row(aboutform.govPillar1TitleEn) }} {{ form_row(aboutform.govPillar1TextEn) }}
        </div>
        <div class="col-md-4">
            <h6 class="text-info">Approche : Pilier 2</h6>
            {{ form_row(aboutform.govPillar2Title) }} {{ form_row(aboutform.govPillar2Text) }}
            {{ form_row(aboutform.govPillar2TitleEn) }} {{ form_row(aboutform.govPillar2TextEn) }}
        </div>
        <div class="col-md-4">
            <h6 class="text-info">Approche : Pilier 3</h6>
            {{ form_row(aboutform.govPillar3Title) }} {{ form_row(aboutform.govPillar3Text) }}
            {{ form_row(aboutform.govPillar3TitleEn) }} {{ form_row(aboutform.govPillar3TextEn) }}
        </div>
        <div class="col-md-12">
            <hr>
            <h6 class="text-info">Impact Stratégique</h6>
            {{ form_row(aboutform.govImpactTitle) }} {{ form_row(aboutform.govImpactTitleEn) }}
            <div class="row">
                <div class="col-md-4">
                    {{ form_row(aboutform.govImpactPoint1) }} {{ form_row(aboutform.govImpactPoint1En) }}
                </div>
                <div class="col-md-4">
                    {{ form_row(aboutform.govImpactPoint2) }} {{ form_row(aboutform.govImpactPoint2En) }}
                </div>
                <div class="col-md-4">
                    {{ form_row(aboutform.govImpactPoint3) }} {{ form_row(aboutform.govImpactPoint3En) }}
                </div>
            </div>
            <hr>
            {{ form_row(aboutform.govCodirVideoUrl) }}
            {{ form_row(aboutform.govCodirVideoFile) }}
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <h5 class="text-primary">Section : Notre Impact</h5>
            {{ form_row(aboutform.impactIntro) }}
            {{ form_row(aboutform.impactIntroEn) }}
            <div class="row">
                <div class="col-md-6">
                    <h6>Points Impact (FR)</h6>
                    {{ form_row(aboutform.impactPoint1) }}
                    {{ form_row(aboutform.impactPoint2) }}
                    {{ form_row(aboutform.impactPoint3) }}
                    {{ form_row(aboutform.impactPoint4) }}
                    {{ form_row(aboutform.impactPoint5) }}
                </div>
                <div class="col-md-6">
                    <h6>Points Impact (EN)</h6>
                    {{ form_row(aboutform.impactPoint1En) }}
                    {{ form_row(aboutform.impactPoint2En) }}
                    {{ form_row(aboutform.impactPoint3En) }}
                    {{ form_row(aboutform.impactPoint4En) }}
                    {{ form_row(aboutform.impactPoint5En) }}
                </div>
            </div>
            <hr>
            {{ form_row(aboutform.impactVideoUrl) }}
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-md-12">
            <h5 class="text-primary">Section : HSSE</h5>
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(aboutform.hsseTitle) }} {{ form_row(aboutform.hsseTitleEn) }}
                    {{ form_row(aboutform.hsseIntro) }} {{ form_row(aboutform.hsseIntroEn) }}
                </div>
                <div class="col-md-6">
                    {{ form_row(aboutform.hssePoint1) }} {{ form_row(aboutform.hssePoint1En) }} {{ form_row(aboutform.hsseImage1File) }}
                    {{ form_row(aboutform.hssePoint2) }} {{ form_row(aboutform.hssePoint2En) }} {{ form_row(aboutform.hsseImage2File) }}
                    {{ form_row(aboutform.hssePoint3) }} {{ form_row(aboutform.hssePoint3En) }} {{ form_row(aboutform.hsseImage3File) }}
                </div>
            </div>
            {{ form_row(aboutform.hsseVideo) }}
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <h5 class="text-primary">Section : Savvy (Expertise Technique)</h5>
            {{ form_row(aboutform.savvyTitle) }} {{ form_row(aboutform.savvyTitleEn) }}
            {{ form_row(aboutform.savvyText) }} {{ form_row(aboutform.savvyTextEn) }}
        </div>
    </div>

    <button type="submit" form="about-form" class="btn btn-success mt-4">Enregistrer</button>
    {{ form_end(aboutform, {'render_rest': false}) }}
</div>
{% endblock %}

{% block javascript %}
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    const fieldsToEnhance = [
        '#{{ aboutform.description.vars.id }}', '#{{ aboutform.description_en.vars.id }}',
        '#{{ aboutform.mission.vars.id }}', '#{{ aboutform.mission_en.vars.id }}',
        '#{{ aboutform.vision.vars.id }}', '#{{ aboutform.vision_en.vars.id }}',
        '#{{ aboutform.ceoMessageText.vars.id }}', '#{{ aboutform.ceoMessageTextEn.vars.id }}',
        '#{{ aboutform.historyText1.vars.id }}', '#{{ aboutform.historyText1En.vars.id }}',
        '#{{ aboutform.historyText2.vars.id }}', '#{{ aboutform.historyText2En.vars.id }}',
        '#{{ aboutform.historyText3.vars.id }}', '#{{ aboutform.historyText3En.vars.id }}',
        '#{{ aboutform.historyText4.vars.id }}', '#{{ aboutform.historyText4En.vars.id }}',
        '#{{ aboutform.value1Text.vars.id }}', '#{{ aboutform.value1TextEn.vars.id }}',
        '#{{ aboutform.value2Text.vars.id }}', '#{{ aboutform.value2TextEn.vars.id }}',
        '#{{ aboutform.value3Text.vars.id }}', '#{{ aboutform.value3TextEn.vars.id }}',
        '#{{ aboutform.value4Text.vars.id }}', '#{{ aboutform.value4TextEn.vars.id }}',
        '#{{ aboutform.govPillar1Text.vars.id }}', '#{{ aboutform.govPillar1TextEn.vars.id }}',
        '#{{ aboutform.govPillar2Text.vars.id }}', '#{{ aboutform.govPillar2TextEn.vars.id }}',
        '#{{ aboutform.govPillar3Text.vars.id }}', '#{{ aboutform.govPillar3TextEn.vars.id }}',
        '#{{ aboutform.govIntro.vars.id }}', '#{{ aboutform.govIntroEn.vars.id }}',
        '#{{ aboutform.govImpactPoint1.vars.id }}', '#{{ aboutform.govImpactPoint1En.vars.id }}',
        '#{{ aboutform.govImpactPoint2.vars.id }}', '#{{ aboutform.govImpactPoint2En.vars.id }}',
        '#{{ aboutform.govImpactPoint3.vars.id }}', '#{{ aboutform.govImpactPoint3En.vars.id }}',
        '#{{ aboutform.valuesIntro.vars.id }}', '#{{ aboutform.valuesIntroEn.vars.id }}',
        '#{{ aboutform.impactIntro.vars.id }}', '#{{ aboutform.impactIntroEn.vars.id }}',
        '#{{ aboutform.impactPoint1.vars.id }}', '#{{ aboutform.impactPoint1En.vars.id }}',
        '#{{ aboutform.impactPoint2.vars.id }}', '#{{ aboutform.impactPoint2En.vars.id }}',
        '#{{ aboutform.impactPoint3.vars.id }}', '#{{ aboutform.impactPoint3En.vars.id }}',
        '#{{ aboutform.impactPoint4.vars.id }}', '#{{ aboutform.impactPoint4En.vars.id }}',
        '#{{ aboutform.impactPoint5.vars.id }}', '#{{ aboutform.impactPoint5En.vars.id }}',
        '#{{ aboutform.hsseIntro.vars.id }}', '#{{ aboutform.hsseIntroEn.vars.id }}',
        '#{{ aboutform.hssePoint1.vars.id }}', '#{{ aboutform.hssePoint1En.vars.id }}',
        '#{{ aboutform.hssePoint2.vars.id }}', '#{{ aboutform.hssePoint2En.vars.id }}',
        '#{{ aboutform.hssePoint3.vars.id }}', '#{{ aboutform.hssePoint3En.vars.id }}',
        '#{{ aboutform.savvyText.vars.id }}', '#{{ aboutform.savvyTextEn.vars.id }}'
    ];

    fieldsToEnhance.forEach(function(selector) {
        const element = document.querySelector(selector);
        if (element) {
            ClassicEditor
                .create(element, {
                    toolbar: [
                        'heading', '|',
                        'bold', 'italic', 'underline', 'link', '|',
                        'bulletedList', 'numberedList', '|',
                        'insertTable', '|',
                        'undo', 'redo'
                    ],
                })
                .catch(error => {
                    console.error(error);
                });
        }
    });
</script>
{% endblock %}