{% extends "./template.html" %}
{% load nearbeach_extras %}
{% block content %}
{% load static %}
<body onload="on_page_load()">
    <div class="card mt-4">
        <div class="card-header">
            <h1>Requirement Information - {{ requirement_id }}</h2>
        </div>
        <div class="card-body">
            <form id="requirement_information" name="requirement_information" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ requirement_information_form.media }}
                <div class="form-group">
                    <label for="id_requirement_title">Requirement Title</label>
                    {{ requirement_information_form.requirement_title }}
                </div>
                <div class="form-group">
                    <label for="id_requirement_scope">Requirement Scope</label>
                    {{ requirement_information_form.requirement_scope }}
                </div>

                {% if requirement_results.organisation %}
                    <div class="form-group">Organisation - {{ requirement_results.organisation }}</div>
                {% endif %}

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="id_requirement_type">Requirement Type</label>
                        {{ requirement_information_form.requirement_type }}
                    </div>
                    <div class="form-group col-md-6">
                        <label for="id_requirement_status">Requirement Status</label>
                        {{ requirement_information_form.requirement_status }}
                    </div>
                </div>
                <input type="submit" value="Update" class="btn btn-primary col-md-12">
            </form>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Requirement Items</h2>
        </div>
        <div class="card-body">
            <a href="{% url 'new_requirement_item' requirement_id %}">Create Requirement Item</a>
            {% if requirement_item_results %}
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td class="col-md-2">Requirement Item</td>
                            <td class="col-md-8">Requirement Item Description</td>
                            <td class="col-md-2">Requirement Item Status</td>
                        </tr>
                    </thead>
                    {% for item in requirement_item_results %}
                        <tr>
                            <td><a href="{% url 'requirement_item_information' item.requirement_item_id %}">ITM{{ item.requirement_item_id }}</a></td>
                            <td>{{ item.requirement_item_title }}</td>
                            <td>{{ item.requirement_item_status }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% endif %}
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Requirement Links</h2>
        </div>
        <div class="card-body" id="requirement_link_body">
            Loading...
        </div>
    </div>


    <form method="post" class="bug_list" id="bug_list">
        <h2>Requirement Bug List</h2>
        Loading...
    </form>

    <form method="post" class="bug_search" id="bug_search">
        <h2>Bug Search</h2>
        Loading...
    </form>

    <form action="POST" id="tag_results" class="tag_results">
        <div class="card mt-4">
            <div class="card-header">
                <h2>Tags</h2>
            </div>
            <div class="card-body">
                Loading...
            </div>
        </div>
    </form>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Document Uploads</h2>
        </div>
        <div class="card-body" id="document_tree_list">
            Loading...
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Requirement Linked to Kanban Board</h2>
        </div>
        <div class="card-body">
            {% if kanban_board_results %}
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <td>Kanban Board Name</td>
                        </tr>
                    </thead>
                    {% for row in kanban_board_results %}
                        <tr><td>
                            <a href="{% url 'kanban_requirement_information' row.kanban_board_id %}">{{ row.kanban_board_name }}</a>
                        </td></tr>
                    {% endfor %}
                </table>
            {% else %}
                <a href="{% url 'new_kanban_requirement_board' requirement_results.requirement_id %}">Click here to create kanban link</a>
            {% endif %}
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Extract Requirement</h2>
        </div>
        <div class="card-body">
            <a href="{% url 'preview_requirement' requirement_id %}" target="_blank">Requirement Preview</a><br/>
            <a href="{% url 'extract_requirement' requirement_id %}">Download Requirement</a>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Customers</h2>
        </div>
        <div class="card-body">
            <form id="requirement_customers">
                Loading...
            </form>
        </div>
    </div>

    {% if permission >= 3 %}
        <div class="card mt-4">
            <div class="card-header">
                <h2>Assigned Users</h2>
            </div>
            <div class="card-body">
                <form method="post" class="assigned_users" id="assigned_users">
                    Loading...
                </form>
                <div id="assigned_user_list">Loading list...</div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Assigned Groups</h2>
            </div>
            <div class="card-body">
                <form method="post" class="assigned_groups" id="assigned_groups">
                    Loading add...
                </form>
                <div id="assigned_group_list">Loading list...</div>
            </div>
        </div>
    {% endif %}


    <!-- THIS IS WHERE THE MODALS ARE STORED :)-->
    <!-- Link Requirements to objects -->
    <div class="modal" tabindex="-1" role="dialog" id="link_requirements_modal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!-- HEADER -->
                <div class="modal-header">
                    <h5 class="modal-title">Link Requirements</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- BODY -->
                <div class="modal-body" id="link_requirements_modal_body">
                    Loading Objects...
                </div>


                <!-- FOOTER -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>




    <script>
        $("#bug_search").on('submit', function(e) {
           e.preventDefault();

           //Change the submit button for user feedback
           $("#bug_search_submit").prop("disabled",true);
           $("#bug_search_submit").val("SEARCHING...");


           $.ajax({
               type: 'POST',
               url: '/bug_search/{{ requirement_id }}/requirement/',
               data: $(this).serialize(),
               success: function(data) {
                   $("#bug_search").html(data);
               },
               error: function() {
                   new_error("Sorry, submitting the bug search caused an error");
               }
           })
        });


        $("#assigned_users").on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '/assigned_user_add/{{ requirement_id }}/requirement/',
                data: $(this).serialize(),
                success: function() {
                    load_assigned_user_list();
                    load_assigned_user_add();
                },
                error: function() {
                    new_error("Sorry, project assigned users did not save. Please try again.");
                }
            })
        });


        $("#assigned_groups").on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '/assigned_group_add/{{ requirement_id }}/requirement/',
                data: $(this).serialize(),
                success: function() {
                    load_assigned_group_add();
                    load_assigned_group_list();
                    load_assigned_user_add();
                    load_assigned_user_list();
                },
                error: function() {
                    new_error("Sorry, project assigned users did not save. Please try again.");
                }
            })
        });

        $("#requirement_customers").on('submit', function(e){
            e.preventDefault();

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/requirement_customer_information/{{ requirement_id }}/',
                data: $(this).serialize(),
                dataType: "HTML",
                type: "POST",
                success: function(data) {
                    $("#requirement_customers").html(data);
                },
                error: function() {
                    new_error("Sorry, could not connect the customer.");
                }
            })
        });

        $("#tag_results").on('submit', function(e) {
           e.preventDefault();

           $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

           $.ajax({
               url: '/tag_information/{{ requirement_id }}/requirement/',
               data: $(this).serialize(),
               dataType: 'HTML',
               type: 'POST',
               success: function(data) {
                   $("#tag_results").html(data);
               },
               error: function() {
                   new_error("Sorry, could not save tag.");
               },
           })
        });


        function load_bug_list() {
            $.ajax({
                url: '/bug_list/{{ requirement_id }}/requirement',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#bug_list").html(data);
                },
                error: function() {
                    new_error("There was an issue loading the bug list");
                }
            });
        }


        function load_bug_search() {
            $.ajax({
                url: '/bug_search/{{ requirement_id }}/requirement',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#bug_search").html(data);
                },
                error: function() {
                    new_error("There was an issues loading the bug search");
                }
            })

        }


        function load_assigned_group_add() {
            $.ajax({
                url: '/assigned_group_add/{{ requirement_id }}/requirement/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $('#assigned_groups').html(data);
                },
                error: function() {
                    $('#assigned_groups').html('<h2>Assigned Groups</h2>Sorry, assigned groups encounted an error and did not load.');
                }
            });
        };


        function load_assigned_group_list() {
            $.ajax({
                url: '/assigned_group_list/{{ requirement_id }}/requirement/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $('#assigned_group_list').html(data);
                },
                error: function() {
                    $('#assigned_group_list').html('<h2>Assigned Groups</h2>Sorry, assigned groups encounted an error and did not load.');
                }
            });
        };

        function load_assigned_user_add() {
            $.ajax({
                url: '/assigned_user_add/{{ requirement_id }}/requirement/',
                data:  {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#assigned_users").html(data);
                },
                error: function() {
                    $("#assigned_users").html("<h2>Assigned Users</h2>Sorry, users encounted an error and did not load");
                }
            })
        };

        function load_assigned_user_list() {
            $.ajax({
                url: '/assigned_user_list/{{ requirement_id }}/requirement/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#assigned_user_list").html(data);
                },
                error: function(data) {
                    $("#assigned_user_list").html("<p>User list failed to load</p>")
                }
            })
        }

        function delete_group_item(group_item) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/assigned_group_delete/' + group_item + '/',
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    load_assigned_group_list();
                    load_assigned_group_add();
                },
                error: function() {
                    new_error("Sorry, there was an issue deleting the Assigned Group")
                }
            });
        };


        function on_page_load() {
            //Load all ajax modules
            load_assigned_group_list();
            load_assigned_group_add();
            load_assigned_user_list();
            load_assigned_user_add();
            load_requirement_customers();
            load_bug_search();
            load_bug_list();
            load_tag_results();
            load_requirement_link_list();
            load_document_tree_list({{ requirement_id }},'requirement');
        }

        function load_requirement_customers() {
            $.ajax({
                url: '/requirement_customer_information/{{ requirement_id }}',
                data: {},
                dataType: "HTML",
                type: "GET",
                success: function(data) {
                    $("#requirement_customers").html(data);
                },
                error: function() {
                    new_error("Sorry - the requirement customers did not load correctly");
                }
            });
        }


        function load_requirement_links() {
            /*
            Method
            ~~~~~~
            1. Show modal - it will have a loading screen
            2. GET information from /requirement_link/requirement_id/
            3. Paste information from AJAX into modal
            4. User will select their result... there is another function for dealing with this.
             */

            // Show the modal
            $("#link_requirements_modal").modal('show');

            // Get the data
            $.ajax({
                url: '/new_requirement_link/{{ requirement_id }}/',
                data: {},
                dataType: "HTML",
                type: "GET",
                success: function(data) {
                    //Success - place the link information into the modal
                    $("#link_requirements_modal_body").html(data);
                },
                error: function() {
                    new_error("Sorry - the requirement links did not load correctly");
                }
            })
        }


        function post_requirement_links(location_id,destination) {
            /*
            Method
            ~~~~~~
            1. Prepare the ajax query
            2. Send the request to /new_requirement_link/{{ requirement_id }}/location_id/destination
            3. Once completed - add the two parts to the end of the table :) SHHH - don't tell anyone we didn't reload
                that section.
             */
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/new_requirement_link/{{ requirement_id }}/' + location_id + '/' + destination + '/',
                data: {},
                dataType: "HTML",
                type: "POST",
                success: function(data) {
                    /*
                    Method
                    ~~~~~~
                    1. Party - it was successful
                    2. Append the data onto the table at the end
                    3. Shh - don't tell the user. :)
                     */

                    json_results = JSON.parse(data); //To play around with
                    html_to_append = "<tr><td><a href=\"/" + json_results['destination'] + "_information/" + json_results['location_id'] + "/\">"
                        + json_results['object_link']
                        + "</a></td><td>"
                        + json_results['object_description']
                        + "</td></tr>";

                    //Append on the end
                    $("#requirement_link_table").append(html_to_append);

                    //Shh - close the modal
                    $("#link_requirements_modal").modal("hide");
                },
                error: function() {
                    new_error("Sorry - there was an issue connecting the link.");
                }
            })
        }



        function load_tag_results() {
            $.ajax({
                url: '/tag_information/{{ requirement_id }}/requirement/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#tag_results").html(data);
                },
                error: function() {
                    new_error("Sorry - tag results did not load");
                }
            });
        }

        function delete_tag(tag_id) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/delete_tag_from_object/' + tag_id + '/{{ requirement_id }}/requirement/',
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    load_tag_results();
                },
                error: function() {
                    new_error("Sorry - did not delete tag correctly");
                }
            });
        }

        function requirement_link_remove(requirement_link_id) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $("#requirement_link_body").html("Loading...");

            $.ajax({
                url: `/requirement_link_remove/${requirement_link_id}/`,
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    load_requirement_link_list();
                },
                error: function() {
                    new_error("Sorry - did not delete tag correctly");
                }
            });
        }

        function requirement_item_link_remove(requirement_item_link_id) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $("#requirement_link_body").html("Loading...");

            $.ajax({
                url: `/requirement_item_link_remove/${requirement_item_link_id}/`,
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    load_requirement_link_list();
                },
                error: function() {
                    new_error("Sorry - did not delete tag correctly");
                }
            });
        }

        function load_requirement_link_list() {
            $.ajax({
                url: '/requirement_link_list/{{ requirement_id }}/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#requirement_link_body").html(data);
                },
                error: function() {
                    new_error("Sorry - there was an error");
                }
            })
        }

        function remove_customer(customer_id) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: `/requirement_remove_customer/{{ requirement_id }}/${customer_id}/`,
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    $("#requirement_customers").html(data);
                },
                error: function() {
                    new_error("Sorry - there was an error removing the customer");
                }
            })
        }
    </script>

</body>
{% endblock %}