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

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

{% block body %}
    <datalist id="ca">
        {% for ca in dataListsCa %}
            <option data-value="{{ ca.id }}">{{ ca.codeAction }}</option>
        {% endfor %}
    </datalist>
    <div class="flex-container">
        {% for item in items %}
            {% set redirect_path= item.path %}
            <a class="section" href="{{ path(redirect_path) }}">
                <div class="section-preview">
                    <h4>Ajout/Édition</h4>
                </div>
                <div class="section-info">
                    {% if  item.icon == "db" %}
                        <h6><i class='fad fa-database'></i>{{ item.section }}</h6>
                    {% else %}
                        <h6><i class='fad fa-user-circle'></i>{{ item.section }}</h6>
                    {% endif%}
                    <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="id" 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 style="margin-top: 20px" 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>

        {% endfor %}
    </div>

    <script>
        let des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
        Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
                if(this.type === 'text' && this.list) {
                    let value = des.get.call(this);
                    let opt = [].find.call(this.list.options, function(option) {
                        return option.value === value;
                    });
                    return opt ? opt.dataset.value : value;
                }
            }});
        /******************************************************/
        let input_query = document.getElementById('query_bar');
        let crud_select = document.getElementById('cruds_sel');
        let anchor_tag_dossier = document.getElementsByClassName('section')[0];
        let anchor_tag_cruds = document.getElementsByClassName('section')[1];


        $(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 start = document.location.pathname;
            start = start.replace('dashboard', 'dossier/')
            let end = document.getElementById("query_bar").value;
            f.action = start + end;
            return true;
        }

    </script>
{% endblock %}