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

{% block title %}New Financial{% endblock %}

{% block body %}
    <h1>Add Financials</h1>

    {{ form_start(form) }}

    {{ form_row(form.pub) }}
    {{ form_row(form.year) }}
    {{ form_row(form.descriptor) }}
    {{ form_row(form.comments2) }}
    {{ form_row(form.dateReceivedAt) }}
    {{ form_row(form.commentary) }}


    <hr>
    <h2>Attachment</h2>

    <ul class="attachments" data-prototype="{{ form_widget(form.attachments.vars.prototype)|e('html_attr') }}">
        {% for attachment in form.attachments %}

            <li><p>{{ attachment.vars.value.attachmentName }}</p>{{ form_row(attachment.attachmentFile ) }}</li>
        {% endfor %}
    </ul>


    {{ form_widget(form) }}
    <button class="btn btn-primary">{{ button_label|default('Save') }}</button>
    {{ form_end(form) }}

    <a class="btn btn-info" href="{{ path('dashboard_financial_index') }}">Return to list</a>
{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>
    <script>

        $("input.datetime").flatpickr({
            altInput: true,
            altFormat: "D j M Y",
            {% if financial.dateReceivedAt is not null  %}
            defaultDate: "{{ financial.dateReceivedAt.format('Y-m-d H:i:s') }}",
            {% endif %}
            time_24hr: true,
            enableTime: false,
            noCalendar: false,
            dateFormat: "Y-m-d H:i:s",
            minuteIncrement: 15
            //minDate: "today",
        });
    </script>
    <script>
        $(document).ready(function() {
            bsCustomFileInput.init();
        });
        CKEDITOR.replaceClass = 'wysiwyg' ;
    </script>


    <script>

        var $collectionHolder;

        var $addAttachmentButton = $('<button type="button" class=" btn btn-info add_attachment_link">Add an attachment</button>');
        var $newLinkLi = $('<div><br/></div>').append($addAttachmentButton);

        $(document).ready(function () {
            bsCustomFileInput.init();


            $collectionHolder = $('ul.attachments');
            $collectionHolder.append($newLinkLi);
            $collectionHolder.data('index', $collectionHolder.find('input').length);

            $collectionHolder.find('li').each(function () {
                addTagFormDeleteLink($(this));
            });

            $addAttachmentButton.on('click', function (e) {
                addAttachmentForm($collectionHolder, $newLinkLi);
                bsCustomFileInput.init();
            });

            function addAttachmentForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype');
                var index = $collectionHolder.data('index');

                var newForm = prototype;
                newForm = newForm.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);

                var $newFormLi = $('<li class="my-3"></li>').append(newForm);
                $newLinkLi.before($newFormLi);

                bsCustomFileInput.init();
                addTagFormDeleteLink($newFormLi);
            }

            function addTagFormDeleteLink($attachmentFormLi) {
                var $removeFormButton = $('<button class="btn btn-danger" type="button">Delete this attachment</button>');
                $attachmentFormLi.append($removeFormButton);

                $removeFormButton.on('click', function (e) {
                    $attachmentFormLi.remove();
                });
            }
        });


    </script>



{% endblock %}