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

{% block title %}Agrope CRM{% endblock %}

{% block body %}
    <datalist id="ca">
        {% for ca in dataListsCa %}
            <option data-value="{{ ca.id }}" value="{{ ca.codeAction }}"></option>
        {% endfor %}
    </datalist>
    <div class="flex-container">
        {% for item in items %}
            {% if item.key != 'dossier-new_link' %}
                {% set redirect_path= item.path %}
                <a class="section" href="{{ path(redirect_path) }}" id="{{ item.key }}">
                    <div class="section-preview">
                        <h4>{{ item.subtitle }}</h4>
                    </div>
                    <div class="section-info">
                        <h6>
                            <i class="fad fa-{{ item.icon }} fa-lg" ></i>{{ item.section }}
                        </h6>
                        <h2>{{ item.title }}</h2>
                        {% if item.title == "Dossiers" %}
                            <form class='filter-container' id="query_form" onsubmit="urlGen(this);" method="post">
                                <label for="id"><i>Rechercher un dossier :</i></label>
                                <input type='text' id="query_bar" class='filter-input' oninput="this.value" list="ca"
                                       autocomplete="off" name="codeAction" placeholder="Nom dossier" min="0" autofocus/>
                                <button type='submit'>
                                    <img class="filter-submit" src="{{ asset('assets/pictures/next.svg') }}"/>
                                </button>
                            </form>
                        {% endif %}
                        {% if item.path == 'database' %}
                            <label for="crud_name"><i>Modifier une liste de données :</i></label>
                            <select id="cruds_sel" class="filter-input" name="crud_name"
                                    onchange="location = this.value;">
                                <option value="" selected style="color: #DEDEDE06">-- Accès rapide --</option>
                                {% for opt in cruds %}
                                    <option value="{{ path(opt.path) }}">{{ opt.title }}</option>
                                {% endfor %}
                            </select>
                        {% endif %}
                    </div>
                </a>

            {% else %}
                <div class="section" onclick="dossierTypeChoice()">
                    <div class="section-preview">
                        <h4>{{ item.subtitle }}</h4>
                    </div>
                    <div class="section-info">
                        <h6><i class="fad fa-{{ item.icon }} fa-lg"></i>{{ item.section }}</h6>
                        <h2>{{ item.title }}</h2>
                        <div class="last_dir">Dernier dossier créé :
                            <ul>
                                <div>
                                    <li>N°{{ last_dir.codeAction }}</li>
                                    <li>Formation: {{ last_dir.intituleFormation }}</li>
                                    <li>Compte: {{ last_dir.nomCompte }}</li>
                                </div>
                                <div>
                                    <li>Modalité: {{ last_dir.modFormation }}</li>
                                    <li>{{ last_dir.certifiant ? 'Certifiante' : 'Non certifiante' }}</li>
                                    <li>Créé le {{ last_dir.dateCreation|date('d/m/Y') }}</li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>

    <script>
        /******************************************************/
        let input_query = document.getElementById('query_bar');
        let crud_select = document.getElementById('cruds_sel');
        let anchor_tag_dossier = document.getElementById('dossier-all_link');
        let anchor_tag_cruds = document.getElementById('database_link');


        $(anchor_tag_dossier).on('click', (e) => {
            if ($(e.target).is(input_query)) {
                e.preventDefault();
            }
        });
        $(anchor_tag_cruds).on('click', (e) => {
            if ($(e.target).is(crud_select)) {
                e.preventDefault();
            }
        });

        function urlGen(f) {
            let shownVal = document.getElementById("query_bar").value;
            let value2send = document.querySelector("#ca option[value='"+shownVal+"']").dataset.value;

            let start = document.location.pathname;
            start = start.replace(document.location.pathname, '/dossier/')
            f.action = start + value2send;
            console.log(f.action)
            return true;
        }

    </script>
{% endblock %}