{% set userData = app.session.get('userData') %}
<style>
    .add_serial_input_btn, .remove_serial_input_btn {
        min-width: unset;
        height: unset;
        margin-bottom: 0.5rem!important;
    }
</style>
<form id="form-purchaseOrderBreakdownItemDelivery" method="POST">
    <h4>{{ page_title }}</h4>
    <div id="flash-messages-content-modal"></div>
    <div class="row">
        <div class="columns large-6">
            <p class="form-hint-text">Enter basic information below</p>
            <div class="row">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.invoiceDate) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.invoiceDate) }}
                </div>
            </div>
            <div class="row">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.invoice_no) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.invoice_no) }}
                </div>
            </div>
            <div class="row">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.dr_no) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.dr_no) }}
                </div>
            </div>
            {#<div class="row">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.location) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.location) }}
                </div>
            </div>#}
            <div class="row">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.quantity) }}
                </div>
                <div class="large-8 columns" style="display: flex;">
                    {{ form_widget(form.quantity) }}
                    <button type="button" class="action-button-style add_serial_input_btn {{ isItemised ? '' : 'hide' }}" data-key="0" ><i class="fa fa-plus"></i></button>
                </div>
            </div>
            <div class="row hide">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.payment_method) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.payment_method) }}
                </div>
            </div>
            <div class="row hide">
                <div class="large-4 large-text-right columns">
                    {{ form_label(form.bank_description) }}
                </div>
                <div class="large-8 columns">
                    {{ form_widget(form.bank_description) }}
                    {{ form_widget(form.bank) }}
                </div>
            </div>
        </div>
        <div class="columns large-6 {{ isItemised ? '' : 'hide' }}">
            <p class="form-hint-text">Enter serial no/s below</p>
            <div class="row">
                <div class="large-4 large-text-right columns">
                    <label for="">Serial No/s</label>
                </div>
                <div class="large-8 columns serialNo_td" data-key="0">
                    {% for serialNo in form.vars.value.purchaseOrderBreakdownItemDeliverySerialNos %}
                        <div style="display: flex">
                            <input data-key="0" type="hidden" name="purchaseOrderBreakdownItems[0][serialNo][{{ loop.index0 }}][id]" value="{{ serialNo.id }}">
                            <input data-key="0" type="text"   name="purchaseOrderBreakdownItems[0][serialNo][{{ loop.index0 }}][serialNo]" value="{{ serialNo.serialNo }}" class="purchaseOrderBreakdownItems_serialNo">
                            <button data-key="0" type="button" class="action-button-style remove_serial_input_btn" data-index="{{ loop.index0 }}"><i class="fa fa-minus"></i></button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <hr class="max-width-initial">
    <div class="row max-width-initial">
        <div class="small-12 columns no-padding-right">
            <div class="button-container clearfix">
                <button type="button" class="button just-continue href-purchaseOrderBreakdownItemDelivery-action float-right" name="action" value="{{ action }}"
                        data-message="Are you sure you want to save this information?"
                >Save</button>

                {% if action == 'u' and (userData.type == 'Super Admin' or 'Admin Purchase Order Receive Delete' in userData.accesses) %}
                    <button type="button" class="ask-continue button alert href-purchaseOrderBreakdownItemDelivery-action float-right" name="action" value="d"
                            data-message="Are you sure you want to delete this record?"
                    >Delete</button>
                {% endif %}
            </div>
        </div>
    </div>
    {{ form_widget(form.purchaseOrderBreakdownItem) }}
    {{ form_widget(form.action) }}
    {{ form_widget(form.id) }}
    {{ form_widget(form._token) }}
</form>

<script>

    const po_receive_form = {
        init: function () {
            po_receive_form.bindRemoveSerial();
            po_receive_form.bindAddSerial();
        },
        bindAddSerial: function () {
            jQ('.add_serial_input_btn').unbind('click').bind('click', function () {
                let key = jQ(this).data('key');
                po_receive_form.addSerialInputByKey(key);
            });
            jQ('.purchaseOrderBreakdownItems_serialNo').unbind('keyup').bind('keyup', function (e) {
                let key = jQ(this).data('key');
                if (e.key === 'Enter' || e.keyCode === 13) {
                    po_receive_form.addSerialInputByKey(key);
                }
            });
        },
        bindRemoveSerial: function () {
            jQ('.remove_serial_input_btn').unbind('click').bind('click', function () {
                let key = jQ(this).data('key');
                jQ(this).parent().remove();
                po_receive_form.updateQuantityByKey(key);
            });
        },
        updateQuantityByKey: function (key) {
            let qty = jQ(`.purchaseOrderBreakdownItems_serialNo[data-key="${key}"]`).length;
            jQ(`.itemised_quantity[data-key="${key}"]`).val(qty === 0 ? '' : qty);
        },
        addSerialInputByKey: function (key) {
            let serialNo_td = jQ(`.serialNo_td[data-key="${key}"]`),
                indexes = [],
                i = 0;

            serialNo_td.find('.purchaseOrderBreakdownItems_serialNo').each(function (index, el) {
                indexes.push(parseInt(jQ(el).data('index')));
            });

            if(indexes.length > 0) {
                i = Math.max.apply(null, indexes) + 1;
            }

            let div = jQ('<div>').css({'display': 'flex'}),
                input = jQ('<input>').attr({
                    type: 'text',
                    class: 'purchaseOrderBreakdownItems_serialNo',
                    name: `purchaseOrderBreakdownItems[${key}][serialNo][${i}][serialNo]`,
                    'data-key': key,
                    'data-index': i,
                }),
                removeBtn = jQ('<button>').attr({
                    type: 'button',
                    class: 'action-button-style remove_serial_input_btn',
                    'data-key': key,
                    'data-index': i,
                }).html('<i class="fa fa-minus"></i>');

            div.append(input);
            div.append(removeBtn);
            div.appendTo(serialNo_td);

            po_receive_form.updateQuantityByKey(key);
            po_receive_form.bindRemoveSerial();
            po_receive_form.bindAddSerial();

            input.focus();

        },
    };

    po_receive_form.init();
</script>