{% extends 'base.html.twig' %}
{% import _self as formMacros %}

{% macro printItemRow(formItem) %}
    <td class="col-3">{{ form_widget(formItem.label) }}</td>
    <td class="col-5">{{ form_widget(formItem.resume) }}</td>
    <td class="col-2">{{ form_widget(formItem.quantity) }}</td>
    <td class="col-1">{{ form_widget(formItem.priceHT) }}</td>
    <td class="col-1">
        <a href="#" class="js-remove-item action-link">
            <i class="ti-trash"></i>
        </a></td>
{% endmacro %}

{% block title %}Génération de facture{% endblock %}
{% block titre_page %}Génération de facture{% endblock %}
{% block resume_page %}Petit formulaire de génération de facture, histoire d'avoir le même format{% endblock %}
{% block description_page %}{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-sm-12 col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-6">
                            <h5 class="card-title">Paramètres de la facture</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{ form_start(form) }}
                    <div class="row">
                        <div class="col-6">
                            <h5>Client</h5>
                            <hr/>
                            <div class="row">
                                <div class="col-12">
                                    {{ form_row(form.client.name) }}
                                    {{ form_row(form.client.address) }}
                                </div>
                                <div class="col-4">
                                    {{ form_row(form.client.postalCode) }}
                                </div>
                                <div class="col-8">
                                    {{ form_row(form.client.city) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <h5 class="text-end">Informations générales</h5>
                            <hr/>
                            <div class="row">
                                <div class="col-6">
                                    {{ form_row(form.reference) }}
                                </div>
                                <div class="col-6">
                                    {{ form_row(form.referenceClient) }}
                                </div>
                                <div class="col-6">
                                    {{ form_row(form.date) }}
                                </div>
                                <div class="col-6">
                                    {{ form_row(form.tva) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h5>Détails de la facture</h5>
                        </div>
                        <div class="col-4 text-end mb-1">
                            <button type="button" data-collection-holder-class="items"
                                    class="add_item btn btn-primary rounded-pill btn-sm"><i class="ti-plus"></i>&nbsp;Ajouter
                                ligne
                            </button>
                        </div>
                        <hr/>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="text-start col-3">Libellé</th>
                                    <th class="text-start col-5">Résumé</th>
                                    <th class="text-start col-1">Quantité</th>
                                    <th class="text-start col-2">Prix HT</th>
                                    <th class="text-center col-1">&nbsp;</th>
                                </tr>
                                </thead>
                                <tbody class="items"
                                       data-index="{{ form.items|length > 0 ? form.items|last.vars.name + 1 : 0 }}"
                                       data-prototype="{{ formMacros.printItemRow(form.items.vars.prototype)|e('html_attr') }}">
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">
                            {{ form_rest(form) }}
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        // Date format options
        const dateFormatOption = {weekday: "long", year: "numeric", month: "long", day: "numeric"};

        const mdPicker_DatePortrait = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DatePortraitInput = document.querySelector("#facture_date");

        // Dispatch input event
        mdPicker_DatePortrait.trigger = mdPicker_DatePortraitInput;

        // Text input events
        mdPicker_DatePortraitInput.addEventListener("focus", () => mdPicker_DatePortrait.toggle());
        mdPicker_DatePortraitInput.addEventListener("onOk", () => mdPicker_DatePortraitInput.value = new Date(mdPicker_DatePortrait.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));

        window.addEventListener("DOMContentLoaded", async () => {
            const addFormToCollection = (e) => {
                const collectionHolder = document.querySelector('.' +
                    e.currentTarget.dataset.collectionHolderClass);
                const item = document.createElement('tr');
                item.innerHTML = collectionHolder
                    .dataset
                    .prototype
                    .replace(
                        /__name__/g,
                        collectionHolder.dataset.index
                    );
                collectionHolder.appendChild(item);
                collectionHolder.dataset.index++;
            };

            document
                .querySelectorAll('.add_item')
                .forEach(btn => {
                    btn.addEventListener("click", addFormToCollection)
                });

            $('.items').on('click', '.js-remove-item ', function(e){
                $(this).parent().parent().remove();
            });
        });
    </script>
{% endblock %}