{% extends 'admin/page/content.html.twig' %}

{% block head_stylesheets %}
    {{ parent() }}
    <style>
        #loaders {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #000000;
            opacity: 0.65;
            display: none;
        }
        #loaders.active {
            z-index: 10;
            display: block;
        }
        .form-label {
            font-weight: bold;
        }
    </style>
{% endblock %}

{# Change left menu #}
{% block header_logo %}
    <a class="logo" title="Home" href="{{ path('client_index') }}">
        <span class="logo-custom"><i class="fas fa-home me-2"></i>Social media scraper</span>
        <span class="logo-compact"><i class="fas fa-home"></i></span>
    </a>
{% endblock header_logo %}

{% block main_menu_wrapper %}{% endblock main_menu_wrapper %}

{% block page_content %}
    <div class="container">
        <div class="btn btn-secondary my-5">
            <a href="{{ path('client_index') }}"><i class="fas fa-arrow-left"></i>&nbsp;Go Back</a>
        </div>
        {% if form is defined %}
            {% form_theme form 'bootstrap_5_layout.html.twig' %}
            {{ form_start(form) }}
                {{ form_row(form.file) }}
                <div class="mb-3">
                    {{ form_label(form.keyWords, 'Keywords', {'label_attr': {'class': 'form-label'}}) }}
                    <div class="js-keywords-wrapper"
                         data-prototype="{{ form_widget(form.keyWords.vars.prototype, {'attr':{'class':'mb-2'}})|e('html_attr') }}"
                         data-index="{{ form.keyWords|length }}"
                    >
                        <a href="#" class="js-keywords-add btn btn-light">
                            <span class="fa fa-plus-circle"></span>
                            Add new keyword
                        </a>
                    </div>
                </div>
                {{ form_row(form.save) }}
            {{ form_rest(form) }}
            {{ form_end(form) }}
        {% else %}
            <div>Let's check</div>
        {% endif %}
    </div>
    <div class="mnh-500 mnw-500 mnh-350-sm mnw-350-sm radius-lg relative zi-3 text-box justify-content-center vh-100" id="loaders">
        <div class="main-container d-flex align-items-center">
            <div class="text-center">
                <div class="spinner-border text-light" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <h3 class="text-bg-danger text-light px-3 rounded">The download will start automatically after few minutes. Don't close this windows</h3>
            </div>
        </div>
    </div>
{% endblock %}



{% block body_javascript %}
    {{ parent() }}
    <script>
        // hide keyWords field that is display by form_end(form)
        document.querySelector('form fieldset.mb-3').remove();

        let button = document.getElementById('enrichment_save');
        button.addEventListener('click', function(){
            if (document.getElementById('form_file').value) {
                document.getElementById('loaders').classList.add('active');
                document.getElementById('loaders').classList.add('d-flex');
            }
        })

        // Manage keywords add
        var $wrapper = $('.js-keywords-wrapper');
        // $wrapper.on('click', '.js-keywords-add', function(e) {
        // var $wrapper = $('.js-keywords-add');
        $('.js-keywords-add').on('click', function(e) {
            console.log('dedans');
            e.preventDefault();
            // Get the data-prototype explained earlier
            var prototype = $wrapper.data('prototype');
            // get the new index
            var index = $wrapper.data('index');
            // Replace '__name__' in the prototype's HTML to
            // instead be a number based on how many items we have
            var newForm = prototype.replace(/__name__/g, index);
            // increase the index with one for the next item
            $wrapper.data('index', index + 1);
            // Display the form in the page before the "new" link
            $(this).before(newForm);
        });
    </script>
{% endblock body_javascript %}