{% extends 'base.html.twig' %}

{% block title %}Nouveau client{% endblock %}

{% block body %}
<!-- TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/eswlws0xwwgd8crb6m5jwr5i5oi4o4yvwl5bxr4swki9mj8b/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: 'textarea'
            /*plugins: [
            'a11ychecker','advlist','advcode','advtable','autolink','checklist','export',
            'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
            'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
            ],
            toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify |' +
            'bullist numlist checklist outdent indent | removeformat | code table help'*/
      })
    </script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Visualisation d'un projet (mode d'édition)");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");
    })
</script>
<script>
/* Ajout de ressources au projet */
var inputElm = document.querySelector('#kt_tagify_users');

const usersList = [
    { value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
    { value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
    { value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
    { value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
    { value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
    { value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
    { value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
    { value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
];

function tagTemplate(tagData) {
    return `
        <tag title="${(tagData.title || tagData.email)}"
                contenteditable='false'
                spellcheck='false'
                tabIndex="-1"
                class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
                ${this.getAttributes(tagData)}>
            <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
            <div class="d-flex align-items-center">
                <div class='tagify__tag__avatar-wrap ps-0'>
                    <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="assets/media/${tagData.avatar}">
                </div>
                <span class='tagify__tag-text'>${tagData.name}</span>
            </div>
        </tag>
    `
}

function suggestionItemTemplate(tagData) {
    return `
        <div ${this.getAttributes(tagData)}
            class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
            tabindex="0"
            role="option">

            ${tagData.avatar ? `
                    <div class='tagify__dropdown__item__avatar-wrap me-2'>
                        <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="assets/media/${tagData.avatar}">
                    </div>` : ''
                }

            <div class="d-flex flex-column">
                <strong>${tagData.name}</strong>
                <span>${tagData.email}</span>
            </div>
        </div>
    `
}

// initialize Tagify on the above input node reference
var tagify = new Tagify(inputElm, {
    tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
    enforceWhitelist: true,
    skipInvalid: true, // do not remporarily add invalid tags
    dropdown: {
        closeOnSelect: false,
        enabled: 0,
        classname: 'users-list',
        searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
    },
    templates: {
        tag: tagTemplate,
        dropdownItem: suggestionItemTemplate
    },
    whitelist: usersList
})

tagify.on('dropdown:show dropdown:updated', onDropdownShow)
tagify.on('dropdown:select', onSelectSuggestion)

var addAllSuggestionsElm;

function onDropdownShow(e) {
    var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;

    if (tagify.suggestedListItems.length > 1) {
        addAllSuggestionsElm = getAddAllSuggestionsElm();

        // insert "addAllSuggestionsElm" as the first element in the suggestions list
        dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
    }
}

function onSelectSuggestion(e) {
    if (e.detail.elm == addAllSuggestionsElm)
        tagify.dropdown.selectAll.call(tagify);
}

// create a "add all" custom suggestion element every time the dropdown changes
function getAddAllSuggestionsElm() {
    // suggestions items should be based on "dropdownItem" template
    return tagify.parseTemplate('dropdownItem', [{
        class: "addAll",
        name: "Add all",
        email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
            return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
        }, 0) + " Members"
    }]
    )
}
</script>
<div class="container-page">
    <div class="app-form">
        <h1>Modification d'un projet</h1>
        <p></p>
        <div STYLE="background-color:#000000; height:6px; width:auto%;"></div>
        <br>
        {{ form_start(projectForm) }}
            <!-- Nom du client -->
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Nom du client</label>
                <select name="{{ field_name(projectForm.company) }}" class="form-control">
                    {% for label, value in field_choices(projectForm.company) %}
                        {% set selected = '' %}
                        {% if label == company %}
                            {% set selected = 'selected' %}
                        {% endif %}
                        <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Choix du projet parent -->
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Projet Parent (facultatif)</label>
                <select name="{{ field_name(projectForm.parentProject) }}" class="form-control">
                    <option value="">{{ field_label(projectForm.parentProject) }}</option>
                    {% for label, value in field_choices(projectForm.parentProject) %}
                        <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Logo du projet -->
            <div class="mb-3">
                <label for="formFile" class="form-label">Logo du projet</label>
                <input class="form-control" type="file" name="{{ field_name(projectForm.projectLogo) }}" id="formFile">
            </div>
            
            <!-- Nom du projet -->
            <div class="mb-3">
                <label for="project_projectName" class="form-label">Nom du projet</label>
                <input type="text" value="{{ project.projectName }}" name="{{ field_name(projectForm.projectName) }}" class="form-control" id="project_projectName" placeholder="Nom du projet">
                <div id="emailHelp" class="form-text">Saisir le nom du projet</div>
            </div>

            <!-- Extrait du projet -->
            <div class="mb-3">
                <label for="project_projectExcerpt" class="form-label">Description courte</label>
                <input type="text" name="{{ field_name(projectForm.excerpt) }}" value="{{ field_value(projectForm.excerpt) }}" class="form-control" id="project_projectExcerpt" placeholder="Présentation courte du projet">
                <div id="emailHelp" class="form-text">Cette description doit être courte, elle apparaîtra sur la carte du projet.</div>
            </div>

            <!-- Brief du projet -->
            <div class="mb-3">
                <label for="project_projectBrief" class="form-label">Brief du projet</label>
                <textarea id="tiny" name="{{ field_name(projectForm.projectBrief) }}" class="form-control" id="project_projectBrief" rows="10" cols="60" placeholder="Le brief de projet est un résumé qui décrit rapidement les objectifs et les exigences du projet. Il s’adresse à l’équipe projet et aux parties prenantes du projet. 
                    Il doit répondre aux questions suivantes : 
                    * les raisons et les exigences du projet
                    * ses objectifs principaux,
                    * sa portée,
                    * les différents jalons,
                    * les livrables,
                    * le calendrier du projet.
                    
                    Il doit inclure les éléments suivants :
                    * le nom du projet ;
                    * les informations concernant le client (comment et qui contacter, son secteur d’activité, ses produits, sa clientèle) ;
                    * la description du projet (le contexte, la portée, les livrables) ;
                    * les objectifs du projet ;
                    * les informations clés (le public cible, le planning, les jalons, la durée du projet, le budget, etc.).">{{ project.projectBrief }}</textarea>
                <div id="emailHelp" class="form-text">Saisir le brief du projet</div>
            </div>

            <!-- Description du projet -->
            <div class="mb-3">
                <label for="project_projectDescription" class="form-label">Description du projet</label>
                <textarea id="project_projectDescription" class="form-control" name="{{ field_name(projectForm.projectDescription) }}" placeholder="Saisir le besoin détaillé du projet" rows="15" cols="60">{{ project.projectDescription }}</textarea>
                <div id="emailHelp" class="form-text">Saisir une description détaillée du projet</div>
            </div> 

            <!-- Commentaire du projet -->
            <div class="mb-3">
                <label for="project_projectComments" class="form-label">Commentaires</label>
                <textarea id="project_projectComments" class="form-control" name="{{ field_name(projectForm.projectComments) }}" placeholder=
                "Saisir des commentaires utiles pour l'équipe projet. Son historique, les points de concordance avec d'autres projets, comment traiter certains points etc..." rows="7" cols="20">{{ project.projectComments }}</textarea>
                <div id="emailHelp" class="form-text">Saisir des commentaires utiles</div>
            </div>

            <!-- Statut du projet -->
            <div class="mb-3">
                <label for="project_projectStatus" class="form-label">Statut du projet</label>
                <select name="{{ field_name(projectForm.projectStatus) }}" class="form-control">
                    {% for label, value in field_choices(projectForm.projectStatus) %}
                        {% set selected = '' %}
                        {% if label == project.projectStatus %}
                            {% set selected = 'selected' %}
                        {% endif %}
                        <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Estimation du projet -->
            <div class="mb-3 choice-object">
                <label for="project_projectEstimation" class="form-label">Estimation du projet</label>
                <input type="text" name="{{ field_name(projectForm.costEstimation) }}" class="form-control" id="project_projectEstimation" placeholder="Estimation du projet" value="{{ project.costEstimation }}">
                <div id="emailHelp" class="form-text">Saisir un estimation du projet dans l'unité choisie</div>
            </div>

            <!-- Unité de gestion du projet -->
            <div class="mb-3 choice-object">
                <label for="exampleInputEmail1" class="form-label">Unité de gestion du projet</label>
                <select name="{{ field_name(projectForm.projectManagementUnit) }}" class="form-control">
                    <option value="{{ project.projectManagementUnit }}">{{ project.projectManagementUnit }}</option>
                    {% for label, value in field_choices(projectForm.projectManagementUnit) %}
                        <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Couleur du texte -->
            <div class="mb-3">
                <label for="project_color" class="form-label">Couleur du texte</label>
                <input type="color" class="form-control form-control-color" id="project_color" name="{{ field_name(projectForm.color) }}" value="#ffffff" title="Sélectionner une couleur">
            </div>

            <!-- Couleur du fond -->
            <div class="mb-3">
                <label for="project_backgroundColor" class="form-label">Couleur du fond</label>
                <input type="color" class="form-control form-control-color" id="project_backgroundColor" name="{{ field_name(projectForm.backgroundColor) }}" value="#563d7c" title="Sélectionner une couleur">
            </div>

            <!-- Ajout de ressources au projet https://preview.keenthemes.com/html/metronic/docs/forms/tagify -->
            <div class="mb-3">
                <label class="form-label">Ressources projet</label>
                <input class="form-control d-flex align-items-center" value="" placeholder="write some tags" id="kt_tagify_users" />
            </div>


            <br>
            <button type="submit" class="btn-glossy">Mettre à jour</button>
            {{ form_rest(projectForm) }}
    {{ form_end(projectForm) }}
    </div> 
</div>  
{% endblock %}