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

{% block title %}Dossier Financier{% endblock %}

{% block body %}
    <datalist id="ca">
        {% for ca in dataListsCa %}
            <option data-value="{{ ca.id }}">{{ ca.codeAction }}</option>
        {% endfor %}
    </datalist>
    <datalist id="comptes">
        {% for compte in dataListCompte %}
            <option>{{ compte }}</option>
        {% endfor %}
    </datalist>
    {% for message in app.flashes('ERR::BAD_PARAMS') %}
        <div class="flash-notice"
             style="max-width:45vw;display: flex;align-items: center;justify-content: center; height: fit-content;color: #FFF; padding: 15px 25px;font-weight: 700; font-size:18px;margin: auto;position: absolute;top: 40px; left: 0; right: 0; background: #c0392b; border-radius: 25px; z-index: 99999">
            {{ message }}
        </div>
    {% endfor %}
    <div class="flex-container flex-column">
        <div style="display: flex">
            {% for el in no_constrain %}
                {% set redirect_path= el.path %}
                {% if el.path == "new_bill" %}
                    <div class="section">
                        <div class="section-preview">
                        </div>
                        <div class="section-info">
                            <h2>{{ el.title }}</h2>
                                <form class='filter-container' id="f-query_form" onsubmit="urlGen(this);" method="post">
                                    <label for="id"><i>Facture pour le dossier (obligatoire):</i></label>
                                    <input type='text' id="f-query_bar" class='filter-input' oninput="this.value" list="ca"
                                           autocomplete="off" name="id" placeholder="Nom dossier" min="0" autofocus/>
                                    <button id="f-submit_new"><img class="filter-submit"
                                                                   src="{{ asset('assets/pictures/next.svg') }}"/></button>
                                </form>
                        </div>
                    </div>
                {% else %}
                    <a class="section" href="{{ path(redirect_path) }}">
                        <div class="section-preview">
                        </div>
                        <div class="section-info">
                            <h2>{{ el.title }}</h2>
                        </div>
                    </a>
            {% endif %}
            {% endfor %}
        </div>
        <hr class="finance-separator"/>
        <form class="finance-form flex-container flex-column" method="POST" style="margin-left: 20px;">
            <div class="finance-form-date" style="font-size: 1rem">
                <span>Pour la periode </span>
                <label for="du">du :</label>
                <input type="date" name="du" id="du"/>
                <label for="au">au :</label>
                <input type="date" name="au" id="au"/>
            </div>
            <div class="finance-form-compte" style="font-size: .8rem">
                <span> <i class="fad fa-dot-circle"></i> optionel :</span>
                <label for="compte"> préciser un compte </label>
                <input type="text" name="compte" placeholder="nom compte" list="comptes" id="compte"/>
            </div>
        </form>
        <div class="flex-container">
            {% for el in date_constrain %}
                {% set redirect_path= el.path %}
                <div class="section finance_sect date" data-form_action={{ path(redirect_path) }}>
                    <div class="section-preview finance-no-constrain" data-form_action={{ path(redirect_path) }}>
                    </div>
                    <div class="section-info finance-info" data-form_action={{ path(redirect_path) }}>
                        {% if el.path=='prev_bill' %}
                            <div style="display: flex; flex-flow: column">
                                <h2 data-form_action={{ path(redirect_path) }}>Prévis</h2>
                                <h4 id="previ_title" data-form_action={{ path(redirect_path) }}>{{ el.title }}</h4>
                            </div>
                        {% else %}
                            <h2 data-form_action={{ path(redirect_path) }}>{{ el.title }}</h2>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <script src="{{ asset('assets/scripts/financierScript.js') }}"></script>
    <script>
        /* code pour aficher seulement le text sans les values dans la datalist*/
        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('f-query_bar');
        let anchor_tag_dossier = document.getElementById('dossier-all_link');


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

        function urlGen(f) {
            let start = document.location.pathname;
            let end = document.getElementById("f-query_bar").value;
            f.action = start + "nouvelle_facture/" + end;
            return true;
        }

    </script>
{% endblock %}