{% extends '@App/base.html.twig' %}
{% block title %}MPI Wheel Configuration{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        <b>Total Axles</b>
                        <select id="axels" class="form-control">
                            <option value="2" selected>2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                        </select>
                    </div>
                </div>
                <div id="wheelForm">

                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a href="#" class="btn btn-block btn-primary" id="formSubmit">Submit</a>
                        <a href="#" class="btn btn-block btn-primary" id="formProcessing" style="display:none;">Processing</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        function axels(total){
            switch(total) {
                case '2':
                    $('.axelConfig').hide();
                    $('.axelConfig[data-axel="1"]').show();
                    $('.axelConfig[data-axel="2"]').show();
                    break;
                case '3':
                    $('.axelConfig').hide();
                    $('.axelConfig[data-axel="1"]').show();
                    $('.axelConfig[data-axel="2"]').show();
                    $('.axelConfig[data-axel="3"]').show();
                    break;
                case '4':
                    $('.axelConfig').hide();
                    $('.axelConfig[data-axel="1"]').show();
                    $('.axelConfig[data-axel="2"]').show();
                    $('.axelConfig[data-axel="3"]').show();
                    $('.axelConfig[data-axel="4"]').show();
                    break;
                case '5':
                    $('.axelConfig').show();
                    $('.axelConfig[data-axel="6"]').hide();
                    $('.axelConfig[data-axel="7"]').hide();
                    $('.axelConfig[data-axel="8"]').hide();
                    break;
                case '6':
                    $('.axelConfig').show();
                    $('.axelConfig[data-axel="7"]').hide();
                    $('.axelConfig[data-axel="8"]').hide();
                    break;
                case '7':
                    $('.axelConfig').show();
                    $('.axelConfig[data-axel="8"]').hide();
                    break;
                case '8':
                    $('.axelConfig').show();
                    break;
                default:
            }
        }
        function wheels(axel,total){
            switch(total) {
                case '0':
                    $('.wheelImage[data-axel="' + axel + '"]').hide();
                    break;
                case '2':
                    $('.wheelImage[data-axel="' + axel + '"][data-wheel="1"]').show();
                    $('.wheelImage[data-axel="' + axel + '"][data-wheel="2"]').show();
                    $('.wheelImage[data-axel="' + axel + '"][data-wheel="3"]').hide();
                    $('.wheelImage[data-axel="' + axel + '"][data-wheel="4"]').hide();
                    break;
                case '4':
                    $('.wheelImage[data-axel="' + axel + '"]').show();
                    break;
                default:
            }
        }
        function wheelForm(axel){
            var wheelImage = '{{ asset('images/general/car-wheel.png') }}';
            var html = '<div id="axel' + axel + '" data-axel="' + axel + '" class="row text-center axelConfig">\n' +
                '                        <div class="col-md-4">\n' +
                '                            <b>Axle ' + axel + ' Total Wheels</b>\n' +
                '                            <select id="' + axel + '" class="form-control wheels" data-axel="' + axel + '">\n' +
                '                                <option value="2" selected>2</option>\n' +
                '                                <option value="4">4</option>\n' +
                '                            </select>\n' +
                '                        </div>\n' +
                '                        <div class="col-md-2">\n' +
                '                            <img class="wheelImage" data-axel="' + axel + '" data-wheel="3" height="50px" src="' + wheelImage + '" style="display:none;">\n' +
            '                        </div>\n' +
            '                        <div class="col-md-2">\n' +
            '                            <img class="wheelImage" data-axel="' + axel + '" data-wheel="1" height="50px" src="' + wheelImage + '">\n' +
            '                        </div>\n' +
            '                        <div class="col-md-2">\n' +
            '                            <img class="wheelImage" data-axel="' + axel + '" data-wheel="2" height="50px" src="' + wheelImage + '">\n' +
            '                        </div>\n' +
            '                        <div class="col-md-2">\n' +
            '                            <img class="wheelImage" data-axel="' + axel + '" data-wheel="4" height="50px" src="' + wheelImage + '" style="display:none;">\n' +
            '                        </div>\n' +
            '                    </div>';
            $('#wheelForm').append(html);
        }
        $( document ).ready(function() {
            wheelForm('1');
            wheelForm('2');
            wheelForm('3');
            wheelForm('4');
            wheelForm('5');
            wheelForm('6');
            wheelForm('7');
            wheelForm('8');
            axels('2');
            $('select').on('change', function() {
                var id = $(this).attr('id');
                var value = this.value;
                switch(id) {
                    case 'axels':
                        axels(value);
                        break;
                    default:
                        wheels(id, value);
                }
            });

            $('body').on('click', '#formSubmit', function () {
                $('#formSubmit').hide();
                $('#formProcessing').show();
                var totalAxels = $('#axels').find(":selected").text();
                var x = 1;
                var payload = new Object();
                while(x <= totalAxels){
                    payload[x] = $('.wheels[data-axel="' + x + '"]').val();
                    x++;
                }
                var payloadJSON = JSON.stringify(payload);
                postURL = '/api/mpi/wheelConfig/{{ mpi }}';
                $.post(postURL, {
                    payload  : payloadJSON,
                }, function (resp) {
                    var url = "{{ path('iservice_mpi_items', {mpi: mpi}) }}";
                    window.location.replace(url);
                    console.log(resp);
                }).error(function (e) {
                    console.log(e);
                    alert('Submission Failed, please verify and try again');
                    $('#formSubmit').show();
                    $('#formProcessing').hide();
                });
            });
        });
    </script>

{% endblock %}