{% extends "./template.html" %}
{% block content %}
    {% load static %}
    {{ rfc_form.media }}
    <div class="card mt-4">
        <div class="card-header">
            <h1>New Request For Change</h1>
        </div>
        <div class="card-body">
            {% if rfc_results.rfc_status == 1 %}
                <div class="alert alert-dark">
                    Status: DRAFT - <a href="{% url 'request_for_change_draft' rfc_results.rfc_id %}">Click here to edit</a>
                </div>
            {% elif rfc_results.rfc_status == 2 %}
                <div class="alert alert-warning">Status: Submitted</div>
            {% elif rfc_results.rfc_status == 3 %}
                <div class="alert alert-success">Status: Approved</div>
            {% elif rfc_results.rfc_status == 4 %}
                <div class="alert alert-info">Status: Started</div>
            {% elif rfc_results.rfc_status == 5 %}
                <div class="alert alert-primary">Status: Finished</div>
            {% elif rfc_results.rfc_status == 6 %}
                <div class="alert alert-dark">Status: <strong>REJECTED</strong></div>
            {% endif %}

            <div class="form-group">
                <label for="id_rfc_title">{{ rfc_results.rfc_title }}</label>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="id_rfc_type">Request For Change Type: {{ RFC_TYPE }}</label for="id_rfc_type">
                </div>
                {% if rfc_results.rfc_version_number %}
                    <div class="form-group col-md-6">
                        <label for="id_rfc_version_number">Version/Release Number: {{ rfc_results.rfc_version_number }}</label>
                    </div>
                {% endif %}
            </div>

            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="id_rfc_implementation_state_date">Implementation Start:</label>
                    {{ rfc_results.rfc_implementation_start_date }}
                </div>
                <div class="form-group col-md-4">
                    <label for="id_rfc_implementation_release_date">Implementation End:</label>
                    {{ rfc_results.rfc_implementation_end_date }}
                </div>
                <div class="form-group col-md-4">
                    <label for="id_rfc_implementation_release_date">Release Datetime:</label>
                    {{ rfc_results.rfc_implementation_release_date }}
                </div>
            </div>

            <div class="form-group">
                <label for="id_rfc_summary">Request for Change Summary:</label>
                {{ rfc_form.rfc_summary }}
            </div>

            <div class="form-group">
                <label for="id_rfc_lead">Request for Change Lead User</label>
                {{ rfc_results.rfc_lead }}
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Risk, Plan, and Implement</h2>
        </div>
        <div class="card-body">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="id_rfc_priority">Priority of Change:</label>
                    {{ RFC_PRIORITY }}
                </div>
                <div class="form-group col-md-4">
                    <label for="id_rfc_risk">Risk of Change:</label>
                    {{ RFC_RISK }}
                </div>
                <div class="form-group col-md-4">
                    <label for="id_rfc_impact">Impact of Change:</label>
                    {{ RFC_IMPACT }}
                </div>
            </div>

            <div class="form-group">
                <label for="id_rfc_risk_and_impact_analysis">Risk and Impace Analysis</label>
                {{ rfc_form.rfc_risk_and_impact_analysis }}
            </div>
            <div class="form-group">
                <label for="id_rfc_implementation_plan">Implementation Plan</label>
                {{ rfc_form.rfc_implementation_plan }}
            </div>
            <div class="form-group">
                <label for="id_rfc_backout_plan">Backout Plan</label>
                {{ rfc_form.rfc_backout_plan }}
            </div>
            <div class="form-group">
                <label for="id_rfc_test_plan">Test Plan</label>
                {{ rfc_form.rfc_test_plan }}
            </div>
        </div>
    </div>

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



    <!-- ASSIGNED GROUPS -->
    {% if permission >= 3 %}
        <div class="card mt-4">
            <div class="card-header">
                <h2>Assigned Groups</h2>
            </div>
            <div class="card-body">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <td>Assigned Group Name</td>
                        </tr>
                    </thead>
                    {% for row in group_list_results %}
                        <tr>
                            <td>{{ row.group_id }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    {% endif %}

    <!-- STAKE HOLDERS -->
    <div class="card mt-4">
        <div class="card-header">
            <h2>Stakeholders</h2>
        </div>
        <div class="card-body">
            <div class="alert alert-primary">
                <strong>Please note:</strong> The request for change will email stakeholders automatically when;
                <ul>
                    <li>The Request for Change is approved</li>
                    <li>The Request for Change has started</li>
                    <li>The Request for Change has finished</li>
                </ul>
            </div>

            {% if organisation_stakeholders %}
                <h3 class="mt-2">Organisation Stakeholders</h3>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td>Organisation Name</td>
                            <td>Organisation Website</td>
                            <td>Organisation Email</td>
                        </tr>
                    </thead>
                    {% for row in organisation_stakeholders %}
                        <tr>
                            <td>{{ row.organisation_name }}</td>
                            <td>{{ row.organisation_email }}</td>
                            <td>{{ row.organisation_website }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% endif %}

            {% if customer_stakeholders %}
                <h3 class="mt-2">Customer Stakeholders</h3>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td>Customer First Name</td>
                            <td>Customer Last Name</td>
                            <td>Customer Email</td>
                        </tr>
                    </thead>
                    {% for row in customer_stakeholders %}
                        <tr>
                            <td>{{ row.customer_first_name }}</td>
                            <td>{{ row.customer_last_name }}</td>
                            <td>{{ row.customer_email }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% endif %}
        </div>
    </div>

    <!-- RUN SHEET -->
    <div id="runsheet">
        {% if assigned_user_results %}
            <div class="card mt-4">
                <div class="card-header">
                    <h2>Assigned Users</h2>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <td>Username</td>
                                <td>First Name</td>
                                <td>Last Name</td>
                                <td>Email</td>
                            </tr>
                        </thead>
                        {% for row in assigned_user_results %}
                            <tr>
                                <td>{{ row.username }}</td>
                                <td>{{ row.first_name }}</td>
                                <td>{{ row.last_name }}</td>
                                <td>{{ row.email }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        {% endif %}

        {% if qa_user_results %}
            <div class="card mt-4">
                <div class="card-header">
                    <h2>QA Users</h2>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <td>Username</td>
                                <td>First Name</td>
                                <td>Last Name</td>
                                <td>Email</td>
                            </tr>
                        </thead>
                        {% for row in qa_user_results %}
                            <tr>
                                <td>{{ row.username }}</td>
                                <td>{{ row.first_name }}</td>
                                <td>{{ row.last_name }}</td>
                                <td>{{ row.email }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        {% endif %}

        <div class="card mt-4">
            <div class="card-header">
                <h2>Run Sheet</h2>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td width="10%">Start</td>
                            <td width="10%">End</td>
                            <td width="40%">Title</td>
                            <td width="15%">Assigned User</td>
                            <td width="15%">QA User</td>
                            <td width="10%">Status</td>
                        </tr>
                    </thead>
                    {% for row in change_task_results %}
                        <tr>
                            <td>{{ row.change_task_start_date }}</td>
                            <td>{{ row.change_task_end_date }}</td>
                            <td><a href="{% url 'change_task_information' row.change_task_id %}">{{ row.change_task_title }}</a></td>
                            <td>{{ row.change_task_assigned_user }}</td>
                            <td>{{ row.change_task_qa_user }}</td>
                            <td>{{ row.get_change_task_status_display }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>

    </div>


    {% if rfc_results.rfc_status == 3 %}
        <div class="card mt-4">
            <div class="card-header bg-success">
                <h2>RFC - Approved</h2>
            </div>
            <div class="card-body">
                <button class="btn btn-success w-100" onclick="rfc_start()">Start Request for Change</button>
            </div>
        </div>

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

                $.ajax({
                    url: '/request_for_change_start/{{ rfc_results.rfc_id }}/',
                    data:  {},
                    dataType: "HTML",
                    type: "POST",
                    success: function(data) {
                        //Just reload the page
                        window.location.reload();
                    },
                    error: function() {
                        new_error("Sorry - something went wrong");
                    }
                })
            }
        </script>
    {% endif %}

    {% if team_leader and rfc_results.rfc_status == 2 %}
        <div class="card mt-4">
            <div class="card-header bg-warning">
                <h2>Ready for Approval</h2>
            </div>
            <div class="card-body">
                <strong>Group Approval Status</strong>
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <td class="w-75">Group</td>
                            <td class="w-25">Status</td>
                        </tr>
                    </thead>
                    {% for row in group_approval_results %}
                        <tr>
                            <td>{{ row.group_id }}</td>
                            <td>{{ row.approval }}</td>
                        </tr>
                    {% endfor %}
                </table>

                <div class="alert alert-primary">Please provide notes if you are rejecting or sending back to draft.</div>
                <form class="request_for_change_note_form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="id_rfc_note">Notes</label>
                        {{ request_for_change_note_form.rfc_note }}
                    </div>
                </form>
                <div class="form-row">
                    <button onclick="rfc_approve()" class="btn btn-primary col-md-4">Approve</button>
                    <button onclick="rfc_draft()" class="btn btn-secondary col-md-4">Send back to draft</button>
                    <button onclick="rfc_reject()" class="btn btn-danger col-md-4">Reject</button>
                </div>
            </div>
        </div>
        <script>
            /*
            Hidden here - so no users know of it's existance
             */
            function rfc_approve() {
                $.ajaxSetup({
                    beforeSend: function (xhr, settings) {
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken);
                        }
                    }
                });

                $.ajax({
                    url: '/request_for_change_approve/{{ rfc_results.rfc_id }}/',
                    data:  {},
                    dataType: "HTML",
                    type: "POST",
                    success: function(data) {
                        //Just reload the page
                        window.location.reload();
                    },
                    error: function() {
                        new_error("Sorry - something went wrong");
                    }
                })
            }

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

                $.ajax({
                    url: '/request_for_change_set_to_draft/{{ rfc_results.rfc_id }}/',
                    data:  {},
                    dataType: "HTML",
                    type: "POST",
                    success: function(data) {
                        //Just reload the page
                        window.location.reload();
                    },
                    error: function() {
                        new_error("Sorry - something went wrong");
                    }
                })
            }

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

                $.ajax({
                    url: '/request_for_change_reject/{{ rfc_results.rfc_id }}/',
                    data:  {},
                    dataType: "HTML",
                    type: "POST",
                    success: function(data) {
                        //Just reload the page
                        window.location.reload();
                    },
                    error: function() {
                        new_error("Sorry - something went wrong");
                    }
                })
            }
        </script>

    {% endif %}

    <script>
        window.onload = function on_page_load() {
            //Load each module
            load_document_tree_list({{ rfc_results.rfc_id }},'request_for_change');
        };
    </script>
{% endblock %}