{% extends 'layouts/base.twig' %}

{% block title %}{{ translations.material_complaint }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.material_complaint }}</h3>
    </div>

    {% if errors is not empty %}
        <div class="row">
            <div class="col-12 col-md-4 offset-md-4">
                <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.report_complaint }}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-1"></div>
                                <div class="col-10">
                                    <div class="row">
                                        <div class="col-4">
                                            <label class="form-label" for="id_supplier">{{ translations.supplier }}</label>
                                            <input type="text" class="form-control" id="id_supplier" name="id_supplier"
                                                   value="{{ supplier.name }}" disabled>
                                        </div>
                                        <div class="col-4">
                                            <label class="form-label" for="order_key">{{ translations.order_key }}</label>
                                            <input type="text" class="form-control" id="order_key" name="order_key"
                                                   value="{{ order.getOrderKey() }}" readonly>
                                            <input type="hidden" class="form-control" id="id_order" name="id_order"
                                                   value="{{ order.getId() }}" readonly>
                                        </div>
                                        <div class="col-4">
                                            <label class="form-label" for="delivered">{{ translations.delivered }}</label>
                                            <input type="text" class="form-control" id="delivered" name="delivered"
                                                   value="{{ order.getDeliveredOnDate() }}" disabled>
                                        </div>
                                    </div>

                                    <div class="row mt-5">
                                        <div class="col-5">
                                            <label class="form-label"
                                                   for="material_name">{{ translations.product_name }}</label>
                                            <input type="text" class="form-control" name="material_name"
                                                   value="{{ material.getMaterialName() }}" disabled>
                                            <input type="hidden" name="id_material" value="{{ material.getIdMaterial() }}">
                                            <input type="hidden" name="supplier_sku" value="{{ material.getSupplierSku() }}">
                                        </div>

                                        <div class="col-4">
                                            <label class="form-label"
                                                   for="product_quantity">{{ translations.complaint_quantity }} (max. {{ material.getDeliveredQuantityInBaseUnit() }} {{ material.getUnitName() }})</label>
                                            <input type="number" class="form-control" id="product_quantity"
                                                   name="product_quantity" value="1" min="1"
                                                   max="{{ material.getDeliveredQuantityInBaseUnit }}">
                                            <input type="hidden" class="form-control" name="id_unit"
                                                   value="{{ material.getIdUnit() }}">
                                        </div>
                                    </div>

                                    <div class="row mt-5">
                                        <div class="col-5">
                                            <label class="form-label"
                                                   for="complaint_reason_code">{{ translations.complaint_reason }}</label>
                                            <select class="form-select" id="complaint_reason_code" name="complaint_reason_code">
                                                {% for reason in complaint_reasons %}
                                                    <option value="{{ reason.getCode()  }}">{{ reason.getName() }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-7">
                                            <label class="form-label"
                                                   for="description">{{ translations.description }}</label>
                                            <textarea class="form-control" id="description"
                                                      name="description" rows="3"></textarea>
                                        </div>
                                    </div>

                                    <div class="row mt-5">
                                        <div class="col-6">
                                            <label class="form-label"
                                                   for="attachments_1">{{ translations.attachment }} 1</label>
                                            <input class="form-control" type="file" id="attachments_1"
                                                   name="attachments[]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label"
                                                   for="attachments_2">{{ translations.attachment }} 2</label>
                                            <input class="form-control" type="file" id="attachments_2"
                                                   name="attachments[]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                        </div>
                                    </div>

                                    <div class="row mt-5">
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary"
                                                    id="submit_complaint">{{ translations.submit_complaint }}</button>
                                            <a href="{{ root }}/material-orders/realised"
                                               class="btn btn-secondary float-end">{{ translations.back }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}

    // valid qty and disable button + spinner on submit
    <script>
        (function () {
            var form = document.querySelector('form[method="POST"]');
            var submitBtn = document.getElementById('submit_complaint');
            var qtyInput = document.getElementById('product_quantity');

            if (!form || !submitBtn || !qtyInput) return;

            form.addEventListener('submit', function (event) {
            var maxQty = parseFloat(qtyInput.max);
            var enteredQty = parseFloat(qtyInput.value);

            if (enteredQty > maxQty || enteredQty < 1 || isNaN(enteredQty)) {
                event.preventDefault();
                alert('{{ translations.invalid_quantity_message|e('js') }}');
                qtyInput.focus();
                    return;
            }

                // disable button and add spinner
                submitBtn.disabled = true;
                // prevent adding multiple spinners
                if (!document.getElementById('submit-spinner')) {
                    var spinner = document.createElement('span');
                    spinner.className = 'spinner-border spinner-border-sm ms-2';
                    spinner.setAttribute('role', 'status');
                    spinner.setAttribute('aria-hidden', 'true');
                    spinner.id = 'submit-spinner';
                    submitBtn.appendChild(spinner);
                }
            });
        })();
    </script>
{% endblock %}