{% form_theme form 'bootstrap_4_layout.html.twig' %}
<form class="" role="form" id="formChooseCourierServices"  action="{{ path('choose_rates_comparison') }}" method="POST" >
    {#{{ form_start (form, {'attr':{'id': 'formSendImportCustomers' }})}}#}
    {# {{ form_start (form)}} #}

    <div class="form-group">
        {{ form_label(form.choosesCouriers)}}
        {{ form_widget(form.choosesCouriers ,{'attr': {'style':'width: 100%'}})}}
        {{ form_errors(form.choosesCouriers)}}
    </div>

    <div class="form-group">
        {{ form_label(form.margin)}}
        {{ form_widget(form.margin) }}
        {{ form_errors(form.margin)}}
    </div>

    {{ form_rest (form)}}

    {{ form_end (form)}}
</form>

<script>
    $(document).ready(function() {

        $('#choose_courier_service_choosesCouriers').select2({
            placeholder: "Select couriers service (max 3)",
            maximumSelectionLength: 3
        });
        $('#choose_courier_service_choosesCouriers').change(function () {
            console.log($(this).val());
            let courierServices = $(this).val();
            console.log(courierServices.length);
            if(courierServices.length >= 2){
                let routePdf = $('#ratesForComparison').data('route-pdf');
                $('#modalAction').removeClass('disabled');
                $.each($(this).val(),function (key, val) {
                    routePdf = routePdf.replace((key + 1) * -1, val);
                });
                // routePdf = routePdf.replace(0, val);
                console.log(routePdf);

                $('#modalAction').attr('data-href',routePdf);

            }else{
                $('#modalAction').addClass('disabled');
            }
        });
    });
</script>