{% 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">

 <h4 class="header-title mt-0" style="font-size:25px;">Ajouter Projet</h4>
 
    <br/>
      {% 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 %}

    <br/>
                                     
{{form_start(aboutprojetform)}}

<div class="row form-material">
    {{-- COL 1 : Infos de base + images --}}
    <div class="col-md-6">
        <h5 class="mt-0 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">📋 Informations générales</h5>

        <h6 class="input-title mt-0">Titre * :</h6>
        {{ form_widget(aboutprojetform.titre) }}

        <h6 class="input-title">Description * :</h6>
        {{ form_widget(aboutprojetform.description) }}

        <h6 class="input-title mt-lg-0">Nom client * :</h6>
        {{ form_widget(aboutprojetform.nomclient) }}

        <h6 class="input-title">Emplacement projet * :</h6>
        {{ form_widget(aboutprojetform.emplacementprojet) }}

        <h6 class="input-title mt-lg-0">Pays projet * :</h6>
        {{ form_widget(aboutprojetform.payerprojet) }}

        <h6 class="input-title mt-lg-0">Secteur :</h6>
        {{ form_widget(aboutprojetform.secteur) }}

        <h6 class="input-title mt-lg-0">Témoignage client :</h6>
        {{ form_widget(aboutprojetform.temoignageclient) }}

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">🖼️ Images & Médias</h5>

        <h6 class="input-title mt-lg-0">Image principale * :</h6>
        {{ form_widget(aboutprojetform.brochure) }}

        <h6 class="input-title mt-lg-0">Image 2 (Problématique) :</h6>
        {{ form_widget(aboutprojetform.brochure2) }}

        <h6 class="input-title mt-lg-0">Image 3 (Solution) :</h6>
        {{ form_widget(aboutprojetform.brochure3) }}

        <h6 class="input-title mt-lg-0">Infographie (PNG/JPG/SVG) :</h6>
        {{ form_widget(aboutprojetform.infographie) }}

        <h6 class="input-title mt-lg-0">Lien YouTube (FR) :</h6>
        {{ form_widget(aboutprojetform.youtubeLink) }}

        <h6 class="input-title mt-lg-0">YouTube Link (EN) :</h6>
        {{ form_widget(aboutprojetform.youtubeLinkEn) }}
    </div>

    {{-- COL 2 : Services, filiales, études de cas --}}
    <div class="col-md-6">
        <h5 class="mt-0 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">🔧 Services & Filiales</h5>

        <h6 class="input-title">Service principal * :</h6>
        {{ form_widget(aboutprojetform.serviceproject) }}

        <h6 class="input-title">Autre Service 1 :</h6>
        {{ form_widget(aboutprojetform.serviceproject1) }}

        <h6 class="input-title">Autre Service 2 :</h6>
        {{ form_widget(aboutprojetform.serviceproject2) }}

        <h6 class="input-title">Autre Service 3 :</h6>
        {{ form_widget(aboutprojetform.serviceproject3) }}

        <h6 class="input-title">Autre Service 4 :</h6>
        {{ form_widget(aboutprojetform.serviceproject4) }}

        <h6 class="input-title mt-3">Filiales impliquées :</h6>
        <div class="p-2" style="border:1px solid #ddd; border-radius:6px;">
            {{ form_widget(aboutprojetform.filiares) }}
        </div>

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">📐 Caractéristiques techniques</h5>
        {% for i in 1..8 %}
        <h6 class="input-title">Caractéristique {{ i }}{% if i == 1 %} *{% endif %} :</h6>
        {{ form_widget(attribute(aboutprojetform, 'technique'~i)) }}
        {% endfor %}

        <h6 class="input-title mt-3">Ne s'affiche pas sur le site :</h6>
        {{ form_widget(aboutprojetform.npa) }}
    </div>
</div>

{{-- ÉTUDES DE CAS : pleine largeur --}}
<div class="row mt-4">
    <div class="col-12">
        <h5 class="mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">📖 Étude de Cas — Section 1 : Contexte</h5>
        <div class="row">
            <div class="col-md-6"><h6>Contexte (FR) :</h6>{{ form_widget(aboutprojetform.contexte) }}</div>
            <div class="col-md-6"><h6>Context (EN) :</h6>{{ form_widget(aboutprojetform.contexte_en) }}</div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6"><h6>Objectifs & enjeux (FR) :</h6>{{ form_widget(aboutprojetform.objectifs) }}</div>
            <div class="col-md-6"><h6>Objectives (EN) :</h6>{{ form_widget(aboutprojetform.objectifs_en) }}</div>
        </div>

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">⚠️ Section 2 : Problématique & Risques</h5>
        <div class="row">
            <div class="col-md-6"><h6>Problématique (FR) :</h6>{{ form_widget(aboutprojetform.problematique) }}</div>
            <div class="col-md-6"><h6>Problem Statement (EN) :</h6>{{ form_widget(aboutprojetform.problematique_en) }}</div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6"><h6>Risques identifiés (FR) :</h6>{{ form_widget(aboutprojetform.risques) }}</div>
            <div class="col-md-6"><h6>Identified Risks (EN) :</h6>{{ form_widget(aboutprojetform.risques_en) }}</div>
        </div>

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">💡 Section 3 : Solution & Innovations</h5>
        <div class="row">
            <div class="col-md-6"><h6>Solution (FR) :</h6>{{ form_widget(aboutprojetform.solution) }}</div>
            <div class="col-md-6"><h6>Solution (EN) :</h6>{{ form_widget(aboutprojetform.solution_en) }}</div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6"><h6>Innovations & procédés (FR) :</h6>{{ form_widget(aboutprojetform.innovations) }}</div>
            <div class="col-md-6"><h6>Innovations (EN) :</h6>{{ form_widget(aboutprojetform.innovations_en) }}</div>
        </div>

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">🏗️ Section 4 : Rôle de STRAM</h5>
        <div class="row">
            <div class="col-md-6"><h6>Rôle STRAM (FR) :</h6>{{ form_widget(aboutprojetform.roleStram) }}</div>
            <div class="col-md-6"><h6>STRAM Role (EN) :</h6>{{ form_widget(aboutprojetform.roleStram_en) }}</div>
        </div>

        <h5 class="mt-4 mb-3" style="color:#0E1641; border-bottom:2px solid #F59E00; padding-bottom:5px;">📊 Section 5 : Indicateurs de Performance (KPIs)</h5>
        <div class="row">
            <div class="col-md-4">
                <div class="p-3" style="background:#f0f4ff; border-radius:8px;">
                    <h6 style="color:#0E1641;">🔩 KPIs Techniques (FR)</h6>{{ form_widget(aboutprojetform.kpisTechniques) }}
                    <h6 style="color:#0E1641;" class="mt-2">Technical KPIs (EN)</h6>{{ form_widget(aboutprojetform.kpisTechniques_en) }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3" style="background:#f0fff4; border-radius:8px;">
                    <h6 style="color:#0E1641;">💰 KPIs Économiques (FR)</h6>{{ form_widget(aboutprojetform.kpisEconomiques) }}
                    <h6 style="color:#0E1641;" class="mt-2">Economic KPIs (EN)</h6>{{ form_widget(aboutprojetform.kpisEconomiques_en) }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3" style="background:#f0fff8; border-radius:8px;">
                    <h6 style="color:#0E1641;">🌿 KPIs Environnementaux (FR)</h6>{{ form_widget(aboutprojetform.kpisEnvironnementaux) }}
                    <h6 style="color:#0E1641;" class="mt-2">Environmental KPIs (EN)</h6>{{ form_widget(aboutprojetform.kpisEnvironnementaux_en) }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <button type="submit" class="btn btn-success" style="width:200px; font-size:16px;">💾 Enregistrer le projet</button>
    </div>
</div>

{{ form_end(aboutprojetform, {'render_rest': false}) }}
   
</div>






{% endblock %}

{% block javascript %}
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>


<script>
    ClassicEditor
        .create(document.querySelector('#{{ aboutprojetform.description.vars.id }}'), {
            toolbar: [
                'heading', '|',
                'fontFamily', 'fontColor', 'fontSize', '|',
                'bold', 'italic', 'underline', '|',
                'bulletedList', 'numberedList', '|',
                'insertTable', '|',
                'undo', 'redo'
            ],
         
           

        })
        .catch(error => {
            console.error(error);
        });
</script>

{% endblock %}