{% extends 'simple.html.twig' %}
{% block content %}
    <div class="{{ containerClass }}">
        <div class="row">
            <div class="col col-xs-12">
                <p class="h5 text-center">{% trans %}Αλλαγή αντιστοίχισης crate σε rack{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col col-md-12">
                <form class="justify-content-center">
                    <div class="form-row align-items-center">
                        <div class="form-group col-md-8">
                            <label for="barcode" class="sr-only">{% trans %}Σκάναρε{% endtrans %}</label>
                            <input type="text" class="form-control mr-sm-2" id="barcode" placeholder="{% trans %}Σκάναρε ή πληκτρολόγησε το barcode{% endtrans %}">
                        </div>
                        <div class="form-group col-md-4">
                            <button id="scan-button" type="submit" class="btn btn-primary btn-block">{% trans %}Scan{% endtrans %}</button>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <div class="form-group col-md-12">
                            <button id="save-button" type="submit" class="btn btn-primary btn-block" disabled>{% trans %}Αποθήκευση{% endtrans %}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            function validateNextButton() {
                var buttonDisabled = $('#barcode').val().trim() === '';
                $('#save-button').prop('disabled', buttonDisabled);
            }
            $('#barcode').on('input', validateNextButton);
        });

        $(document).ready(function () {
            $("#save-button").click(function (e) {
                e.preventDefault();
            });
        });

        $(document).ready(function () {
            $("#scan-button").click(function (e) {
                e.preventDefault();
            });
        });
    </script>
{% endblock %}