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

{% block page_title %}Calculadora de gastos de envío{% endblock %}

{% block page_content %}
    <div class="row">
        <div class="col-md-5">
            <div class="box">
                <div class="box-body" style="padding: 10px 20px;">
                    <form name="shipping_costs_calculator_" method="POST" action="{{ path('app_shipping_costs_calculate') }}" id="calculate-shipping-options-form">
                    {{ form_errors(form) }}
                    <div class="row" style="margin-bottom: 0">
                     <div class="col-md-6">
                         {{ form_row(form.country) }}
                     </div>
                     <div class="col-md-6">
                         {{ form_row(form.postalCode) }}
                     </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 text-center">
                            <button class="btn" style="width:100%" id="add-individually">Añadir productos individualmente</button>
                        </div>
                        <div class="col-sm-6 text-center">
                            <button class="btn" style="width:100%" id="add-massively">Añadir productos masivamente</button>
                        </div>
                    </div>
                    <div class="row" id="quantities-as-text" style="display:none">
                        <div class="col-sm-12">
                            {{ form_row(form.productQuantitiesAsText) }}
                        </div>
                    </div>
                    <div id="shipping_costs_calculator__productQuantities"  style="display:none">
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_widget(form.productQuantities[0].reference, { 'attr' : { 'placeholder' : 'SKU'}}) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.productQuantities[0].quantity, { 'attr' : { 'placeholder' : 'Cantidad'}}) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <button id="add-product" class="btn"  style="display:none">Añadir otro producto</button>
                            <input type="submit" id="calculate" class="btn" value="Calcular opciones de envío" />
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
        <div id="results" class="col-sm-7">
            <div class="box">
                <div class="box-body">
                    <a href="{{ path('app_shipping_costs_calculate_from_excel') }}">
                        <button class="btn">Cálculo masivo con fichero Excel</button>
                    </a>
                    <div style="margin-top:20px">
                        El CSV/XLSX deberá contener las columnas country_iso_code, postcode, sku y quantity en la cabecera.
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $('#add-product').on('click', function(e){
            e.preventDefault();
            let container = $('#shipping_costs_calculator__productQuantities')
            let existing = container.children().length;
            let name = 'shipping_costs_calculator__productQuantities_' + existing + '_';

            container.append(
                '<div class="row">' +
                '<div class="col-sm-6">' +
                '<input type="text" id="' + name + 'reference" name="shipping_costs_calculator_[productQuantities]['+existing+'][reference]" class="form-control" placeholder="sku">' +
                '</div> ' +
                '<div class="col-sm-6">' +
                '<input type="text" id="' + name + 'quantity" name="shipping_costs_calculator_[productQuantities]['+existing+'][quantity]" class="form-control" placeholder="cantidad">' +
                '</div> </div>'
            )
        });

        $('#calculate-shipping-options-form').on('submit', function(e){
            e.preventDefault();
            $.ajax(
                {
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data:  $(this).serialize()
                }).done(function(data) {
                $('#results').html(data);
            });
        });

        $('#add-individually').on('click', function(e){
            e.preventDefault();
            $('#shipping_costs_calculator__productQuantities').show();
            $('#add-product').show();
            $('#quantities-as-text').hide();
            $('#add-massively').hide();
            $('#add-individually').hide();

        });

        $('#add-massively').on('click', function(e){
            e.preventDefault();
            $('#shipping_costs_calculator__productQuantities').hide();
            $('#quantities-as-text').show();
            $('#add-massively').hide();
            $('#add-individually').hide();
        });
    </script>
{% endblock %}