{% extends '@App/base.html.twig' %}
{% block title %}MPI TEMPLATE: {{ mpi.name }}{% endblock %}
{% block modal %}
    <div class="modal fade" id="mpi-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="prompt-title"></h4>
                </div>
                <div class="modal-body">
                    <input class="form-control" type="text" style="width: 100%" id="prompt-name">
                    <input class="form-control" type="hidden" id="prompt-id">
                    <input class="form-control" type="hidden" id="prompt-action">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="prompt-submit" class="btn btn-primary">Save</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-md-12 text-center">
            <div id="accordion" class="mpi-data"></div>
            <button class="btn btn-lg btn-info"
                    id="mpi-prompt"
                    data-id="{{ mpi.id }}"
                    data-action="new-inspection-group"
                    data-toggle="modal"
                    data-target="#mpi-modal"
                    data-label="New Inspection Group"
            >+ Add New Inspection Group</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card-header bg-primary">
                <h5 class="mpi-group-title">BRAKES CONFIGURATION</h5>
            </div>
            <div class="card">
                <div class="card-body">
                    {% for brake in brakes %}
                        <div class="card">
                            <div class="card-body">
                                <h5>{{ brake.name }}</h5>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card-header bg-primary">
                <h5 class="mpi-group-title">TIRE CONFIGURATION</h5>
            </div>
            <div class="card">
                <div class="card-body">
                    {% for tire in tires %}
                        <div class="card">
                            <div class="card-body">
                                <h5>{{ tire.name }}</h5>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
    function loadData(id){
        $( ".mpi-data" ).html( '<div class="alert alert-primary" role="alert"><h1>LOADING</h1></div>' );
        var html = '';
        var url = '/api/mpi/' + id + '/details';
        $.get(url, function (resp) {
            $( resp ).each(function( templateId, template ) {
                $( template.mpi_groups ).each(function( groupId, group ) {
                    if(group.active == true && group.name != 'Brakes' && group.name != 'Tires'){
                        html += '<div class="card-header bg-primary" id="headingOne">\n' +
                            '<button class="btn btn-link" data-toggle="collapse" data-target="#' + groupId + '" aria-expanded="true" aria-controls="collapseOne">\n' +
                            '<h5 class="mpi-group-title">INSPECTION GROUP: ' + group.name +
                            '</button>' +
                            '<button class="btn btn-danger button-right"\n' +
                            ' id="mpi-prompt"\n' +
                            ' data-id="' + group.id +'"\n' +
                            ' data-action="remove-inspection-group"\n' +
                            ' data-toggle="modal"\n' +
                            ' data-target="#mpi-modal"\n' +
                            ' data-label="Remove Inspection Group"\n' +
                            ' >Remove Group' +
                            '</button>\n' +
                            '<button class="btn btn-success button-right"\n' +
                            ' id="mpi-prompt"\n' +
                            ' data-id="' + group.id +'"\n' +
                            ' data-action="edit-inspection-group"\n' +
                            ' data-toggle="modal"\n' +
                            ' data-target="#mpi-modal"\n' +
                            ' data-label="Edit Inspection Group"\n' +
                            ' data-value="' + group.name + '"\n' +
                            ' >Edit Group Name' +
                            '</button>\n' +
                            '</div>';
                        html += '<div id="' + groupId + '" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">\n' +
                            '<div class="card-body">';
                        $( group.mpi_items ).each(function( pointId, point ) {
                            console.log(point);
                            if(point.active == true){
                                html += '<div class="card">\n' +
                                    '<div class="card-body">\n' +
                                    point.name +
                                    '<button class="btn btn-danger button-right"\n' +
                                    ' id="mpi-prompt"\n' +
                                    ' data-id="' + point.id +'"\n' +
                                    ' data-action="remove-inspection-point"\n' +
                                    ' data-toggle="modal"\n' +
                                    ' data-target="#mpi-modal"\n' +
                                    ' data-label="Remove Inspection Point"\n' +
                                    ' >Remove' +
                                    '</button>\n' +
                                    '<button class="btn btn-success button-right"\n' +
                                    ' id="mpi-prompt"\n' +
                                    ' data-id="' + point.id +'"\n' +
                                    ' data-action="edit-inspection-point"\n' +
                                    ' data-toggle="modal"\n' +
                                    ' data-target="#mpi-modal"\n' +
                                    ' data-label="Edit Inspection Point"\n' +
                                    ' data-value="' + point.name + '"\n' +
                                    ' >Edit' +
                                    '</button>\n' +
                                    '</div>\n' +
                                    '</div>';
                            }
                        });
                        html += '<div class="row">\n' +
                            '<div class="col-md-6">\n' +
                            '</div>\n' +
                            '<div class="col-md-6" style="padding-bottom:20px;">\n' +
                            '<button class="btn btn-success button-right" \n' +
                            ' id="mpi-prompt"\n' +
                            ' data-id="' + group.id +'"\n' +
                            ' data-action="new-inspection-point"\n' +
                            ' data-toggle="modal"\n' +
                            ' data-target="#mpi-modal"\n' +
                            ' data-label="New Inspection Point"\n' +
                            ' >+ Add Inspection Point' +
                            '</button>\n' +
                            '</div>\n' +
                            '</div>';
                        html += '</div></div>';

                    }
                });
            });
            $( ".mpi-data" ).html( html );
            console.log(resp);
        }).error(function (e) {
            console.log(e);
        });
    }
    loadData({{ mpi.id }});
    $('body').on('click', '#mpi-prompt', function () {
        $("#prompt-title").text($(this).data('label'));
        $("#prompt-id").val($(this).data('id'));
        $("#prompt-action").val($(this).data('action'));
        $("#prompt-name").show();
        $("#prompt-submit").attr('class','btn btn-primary');
        if($(this).data('action') == 'edit-inspection-point'){
            $("#prompt-name").val($(this).data('value'));
        }
        else if($(this).data('action') == 'edit-inspection-group'){
            $("#prompt-name").val($(this).data('value'));
        }
        else if($(this).data('action') == 'remove-inspection-point' || $(this).data('action') == 'remove-inspection-group'){
            $("#prompt-name").hide();
            $("#prompt-submit").toggleClass('btn-primary btn-danger');
        }
        else{
            $("#prompt-name").val('');
        }

    });

    function mpiAdd(postURL, id, name){
        $.post(postURL, {
            id   : id,
            name  : name,
        }, function (resp) {
            loadData({{ mpi.id }});
            $('#mpi-modal').modal('toggle');
        }).error(function (e) {
            console.log(e);
            alert('Submission Failed, please verify and try again');
        });
    }

    function mpiEdit(postURL, name){
        $.post(postURL, {
            name  : name,
        }, function (resp) {
            loadData({{ mpi.id }});
            $('#mpi-modal').modal('toggle');
        }).error(function (e) {
            console.log(e);
            alert('Submission Failed, please verify and try again');
        });
    }

    function mpiRemove(postURL){
        $.get(postURL, function (resp) {
            loadData({{ mpi.id }});
            $('#mpi-modal').modal('toggle');
        }).error(function (e) {
            console.log(e);
            alert('Submission Failed, please verify and try again');
        });
    }

    $('body').on('click', '#prompt-submit', function () {
        var promptId = $("#prompt-id").val();
        var promptAction = $("#prompt-action").val();
        var promptName = $("#prompt-name").val();
        var postURL = '';
        switch (promptAction) {
            case 'new-inspection-group':
                postURL = '/api/mpi/' + promptId + '/group/add';
                mpiAdd(postURL, promptId, promptName);
                break;
            case 'remove-inspection-group':
                postURL = '/api/mpi/group/' + promptId + '/deactivate';
                mpiRemove(postURL);
                break;
            case 'edit-inspection-group':
                postURL = '/api/mpi/group/' + promptId + '/edit';
                mpiEdit(postURL, promptName);
                break;
            case 'new-inspection-point':
                postURL = '/api/mpi/group/' + promptId + '/item/add';
                mpiAdd(postURL, promptId, promptName);
                break;
            case 'remove-inspection-point':
                postURL = '/api/mpi/item/' + promptId + '/deactivate';
                mpiRemove(postURL);
                break;
            case 'edit-inspection-point':
                postURL = '/api/mpi/item/' + promptId + '/edit';
                mpiEdit(postURL, promptName);
                break;
        }
    });
</script>
{% endblock %}