{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-tag"></i>{{ 'propositions.list.title'|trans }}</h1>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="dtProposition" class="grid-x"></div>
        {% if (dt_settings_customer.data.data_set|length < 1 and userOrCustomer == 1) or (dt_settings_user.data.data_set|length < 1 and userOrCustomer == 0) %}
            <p class="mt-2 text-center">{{ 'emptyData'|trans }}</p>
        {% endif %}
        <div class="table-button">
            <input id="gotoprint" type="button" class="button mt-1" value="{{ 'propositions.button.gotoprint.label'|trans }}"/>
            <input id="select_all" type="button" class="button mt-1" value="{{ 'propositions.button.select_all.label'|trans }}"/>
            <input id="valid_prop" type="button" class="button success validation mt-1" value="{{ 'propositions.button.valid.label'|trans }}"/>
        </div>

        <div class="reveal tiny" id="modalConfirmationRedirection" data-reveal>
            <div class="reveal-title">{{ 'propositions.modal.title_redirect'|trans }}</div>
            <div class="reveal-body">
                <div id="info" class="text-center mb-1"></div>
                <div class="grid-x grid-padding-x align-center">
                    <div class="cell shrink">
                        <a id="confirmModalRedirectPrintYes" class="button small no-mb" href="#">{{ 'propositions.modal.yes'|trans }}</a>
                    </div>
                    <div class="cell shrink">
                        <a data-close class="cancel button small no-mb">{{ 'propositions.modal.no'|trans }}</a>
                    </div>
                </div>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
            <div class="reveal-title">{{ 'propositions.modal.title'|trans }}</div>
            <div class="reveal-body">
                <div id="info" class="text-center mb-1"></div>
                <div class="grid-x grid-padding-x align-center">
                    <div class="cell shrink">
                        <a id="confirmModalYes" class="button small no-mb" href="#">{{ 'propositions.modal.yes'|trans }}</a>
                    </div>
                    <div class="cell shrink">
                        <a data-close class="cancel button small no-mb">{{ 'propositions.modal.no'|trans }}</a>
                    </div>
                </div>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>


{% endblock %}

{% block userOrCustomer %}
    {# TODO remplacer ça par un fichier twig.html #}
    <input type="radio" name="UserOrCustomer" value="Client" id="customer" required><label for="customer">Client</label>
    <input type="radio" name="UserOrCustomer" value="Utilisateur" id="user"><label for="user">Utilisateur</label>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            {# {% if dt_settings.data.data_set|length > 0 %} #}
            let userOrCustomer = {{ userOrCustomer|json_encode|raw }};
            let dtToolbar_test;
            let data_user = {{ dt_settings_user|json_encode|raw }};
            let data_customer = {{ dt_settings_customer|json_encode|raw }};

            if (userOrCustomer === true) { // CUSTOMER
                $('#customer').prop('checked', true);
                dtToolbar_test = new dtToolbar(document.getElementById('dtProposition'),  {{ dt_settings_customer|json_encode|raw }}, [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 'id':'btn_generate_rapports','icon':'fa-book'}, {'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'}, {'type':'button','title': '{{ "datatable.custom_button.import" | trans }}', 'id':{% if is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') %}'btn_call_import'{% else %}'btn_call_import_not_allowed'{% endif %},'icon':'fa-cloud-download'},{'type':'button','title': '{{ "datatable.custom_button.import_cmj" | trans }}', 'id':{% if is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}'btn_call_import_cmj'{% else %}'btn_call_import_cmj_not_allowed'{% endif %},'icon':'fa-download'}]);
                {# checkIsNewEvent({{ dt_settings_customer|json_encode|raw }},dataTable ); #}
            } else { //USER
                $('#user').prop('checked', true);
                dtToolbar_test = new dtToolbar(document.getElementById('dtProposition'),  {{ dt_settings_user|json_encode|raw }}, [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 'id':'btn_generate_rapports','icon':'fa-book'}, {'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'}, {'type':'button','title': '{{ "datatable.custom_button.import" | trans }}', 'id':{% if is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') %}'btn_call_import'{% else %}'btn_call_import_not_allowed'{% endif %},'icon':'fa-cloud-download'},{'type':'button','title': '{{ "datatable.custom_button.import_cmj" | trans }}', 'id':{% if is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}'btn_call_import_cmj'{% else %}'btn_call_import_cmj_not_allowed'{% endif %},'icon':'fa-download'}]);
                {# checkIsNewEvent({{ dt_settings_user|json_encode|raw }},dataTable ); #}

            }

            $('#customer').click(function (event) {
                let dataTable = $('#proposition_list').DataTable();
                dataTable.clear().draw();
                dataTable.rows.add(data_customer["data"]["data_set"]);
                dataTable.columns.adjust().draw();
                checkIsNewEvent({{ dt_settings_customer|json_encode|raw }}, dataTable);
            });

            $('#user').click(function (event) {
                let dataTable = $('#proposition_list').DataTable();
                dataTable.clear().draw();
                dataTable.rows.add(data_user["data"]["data_set"]);
                dataTable.columns.adjust().draw();
                checkIsNewEvent({{ dt_settings_user|json_encode|raw }}, dataTable);
            });
            {# {% endif %} #}

            let url;

            let valid_prop = document.getElementById("valid_prop");
            let select_all = document.getElementById("select_all");
            let div_list = document.getElementById("list_pro");

            select_all.addEventListener("click", function () {
                SelectingAll();
            });

            let info_div = document.getElementById('info');
            let Rhref;


            $(document).ready(function () {
                $('#valid_prop').click(function (event) {
                    event.preventDefault();
                    Rhref = url;
                    info_div.innerText = "{{ 'propositions.button.valid.label'|trans }}?";
                    $("#modalConfirmationAction").foundation('open');
                });

                $('#gotoprint').click(function (event) {
                    event.preventDefault();
                    $("#modalConfirmationRedirection").foundation('open');
                });

                $('#confirmModalRedirectPrintYes').click(function (e) {
                    window.location.replace("redirect");
                });

                $('#confirmModalYes').click(function (e) {
                    Validating();
                });

                $('#confirmModalNo').click(function (e) {
                    $("#confirmModalNo").foundation('close');
                });
            });

            function Validating() {
                let table = document.getElementById("dtProposition");
                let checkBoxes = table.getElementsByTagName("INPUT");
                let url_propositions_string = "";
                let url_propositions_checked = 0;

                for (let i = 1; i < checkBoxes.length - 1; i++) {
                    if (checkBoxes[i].checked) {
                        let row = checkBoxes[i].parentNode.parentNode;
                        let id_string = row.id.match(/(\d+)/);
                        url_propositions_string += id_string[0] + ',';
                        url_propositions_checked += 1;
                    }
                }

                if (url_propositions_checked === 0) {
                    url_propositions_string = "null";
                }

                url = '{{ url("app_proposition_create", {'propositions_id': 'propositions_id'}) }}';
                url = url.replace("propositions_id", url_propositions_string);

                window.location = url;
            }

            let statut = 0;

            function SelectingAll() {
                let table = document.getElementById("dtProposition");
                let checkBoxes = table.getElementsByTagName("INPUT");
                if (statut === 0) {
                    for (let i = 0; i < checkBoxes.length; i++) {
                        checkBoxes[i].checked = true;
                    }
                    statut = 1;
                } else {
                    for (let z = 0; z < checkBoxes.length; z++) {
                        checkBoxes[z].checked = false;
                    }
                    statut = 0;
                }
            }
        });
    </script>

{% endblock %}