{% extends 'risk/project_detail.html' %}
{% block title %}Phase Detail{% endblock title %}
{% block projekt-div %}
    <div class="bg-light col-10">
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title">Phase detail</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <dl class="col-sm-6 row">
                        <dt class="col-sm-4">Phase name</dt>
                        <dd class="col-sm-8"> {{ object.name }}</dd>
                        <dt class="col-sm-4">State</dt>
                        <dd class="col-sm-8"> {{object.is_active|yesno:"active,inactive" }}</dd>
                        <dt class="col-sm-4">Start date</dt>
                        <dd class="col-sm-8"> {{object.start_date}} </dd>
                        <dt class="col-sm-4">Description</dt>
                        <dd class="col-sm-8"> {{object.description}}</dd>
                    </dl>
                    <dl class="col-sm-6 row">
                        <dt class="col-sm-4">Phase manager</dt>
                        <dd class="col-sm-8"> {{object.phase_manager}}</dd>
                        <dt class="col-sm-4">End date</dt>
                        <dd class="col-sm-8"> {{object.estimated_end_date|default_if_none:"-" }}</dd>

                    </dl>

                </div>
                <div class="float-right d-inline">
                    <div class="modal fade" tabindex="-1" role="dialog" id="modal">
                        <div class="modal-dialog modal-xl" role="document">
                          <div class="modal-content"></div>
                        </div>
                    </div>
                    {% if perms.risk.change_projectphase and object.is_active %}
                        <button type="button"  id="update-phase" class=" btn btn-warning">Edit</button>
                    {% endif %}
                    {% if perms.risk.delete_projectphase and object.is_active %}
                        <button type="button" id="delete-phase" class=" btn btn-danger">Deactivate</button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-header">
                <div class="row">
                    <h5 class="card-title col-3">Tasks</h5>
    
                    <div class="col-9 ">
                        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content"></div>
                            </div>
                        </div>
                        <div class="form-inline float-right">
                            <div class="dropdown mr-2">
                                <div class="form-inline">
                                    <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownPhases" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    State
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownPhases">
                                    {% for taskstate,text in taskstates %}
                                        <a class="dropdown-item" type="button" href="?taskstate={{taskstate}}">{{text}}</a>
                                    {% endfor %}
                                    </div>
                                </div>
                            </div>
                            {% if perms.risk.add_risk and object.is_active %}
                                <button id="create-task" class="btn btn-success" type="button" name="button">Add Task</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-responsive">
                <thead class="thead-light">
                    <th scope="col">Task ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Developer</th>
                    <th scope="col">Check from</th>
                    <th scope="col">State</th>
                    <th scope="col">Added</th>
                    <th scope="col">Deadline</th>
                    <th scope="col">Project phase</th>
                    <th scope="col"> </th>
                </thead>
                <tbody>
                    {% for task in tasks %}
                        <tr data-href="{% url 'project-task-change' project_id task.pk%}">
                        <td >{{task.taskID}}</td>
                        <td >{{task.name}}</td>
                        <td >{{task.task_dev}}</td>
                        <td >{{task.task_check }}</td>
                        <td >{{task.taskstate}}</td>
                        <td >{{task.add_date}}</td>
                        <td >{{task.final_date}}</td>
                        <td >{{task.project_phase}}</td>
                        <td>

                        {% if perms.risk.view_project %}
                            <button type="button" class="detail-task btn btn-sm btn-primary" data-form-url="{% url 'project-task-detail' project_id task.pk %}">
                                <span class="fa fa-pencil">Info</span>
                            </button>
                        {% endif %}        
                        </td>
                        </tr>
                    {% endfor %}

                </tbody>
            </table>
        </div>
        <div class="card mt-3">
            <div class="card-header">
                <div class="row">
                    <h5 class="card-title col-3">Risks</h5>
                    <div class="col-9 ">
                        <div class="form-inline float-right ">
                            <div class="dropdown mr-2">
                                <div class="form-inline">
                                    <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownPhases" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                                      State
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownPhases">
                                        {% for state,text in states %}
                                             <a class="dropdown-item" type="button" href="?state={{state}}">{{text}}</a>
                                        {% endfor %}
                                    </div>
                                  </div>
                            </div>
                            {% if perms.risk.add_risk and object.is_active %}
                                <button id="create-risk" class="btn btn-success" type="button" name="button">Create Risk</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-responsive">
                    <tr>
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Risk name</th>
                                <!--<th scope="col">Category</th>-->
                                <th scope="col">Threat</th>
                                <th scope="col">Starter</th>
                                <th scope="col">Owner</th>
                                <th scope="col">Risk</th>
                                <th scope="col">State</th>
                                <th scope="col">Change date</th>
                                <th scope="col"> </th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for risk in risks %}
                            <tr data-href="{% url 'risk-detail' project_id object.pk risk.pk %}">
                                <td >{{risk.name}}</td>
                                <!--<td >{{risk.risk_type}}</td>-->
                                <td >{{risk.threat}}</td>
                                <td >{{risk.starter}}</td>
                                <td >{{risk.risk_assignee}}</td>
                                <td >{{risk.risk}}</td>
                                <td >{{risk.state}}</td>
                                <td >{{risk.state_change_date|default_if_none:"-"}}</td>
                                <td>
                                    <div class="d-flex">
                                        {% if perms.risk.view_project%}
                                        <button type="button" class="detail-risk btn btn-sm btn-primary mr-2" data-form-url="{% url 'risk-detail' project_id object.pk risk.pk %}">
                                            <span class="fa fa-pencil">Detail</span>
                                        </button>
                                        {% endif %}
                                        {% comment %} {% if perms.risk.change_risk %}
                                        <button type="button" class="update-risk btn btn-sm btn-warning mr-2" data-form-url="{% url 'risk-update-phase' project_id object.pk risk.pk %}">
                                            <span class="fa fa-pencil">Edit</span>
                                        </button>
                                        {% endif %}
                                        {% if perms.risk.delete_risk %}
                                        <button type="button" class="delete-risk btn btn-sm btn-danger" data-form-url="{% url 'risk-delete' project_id object.pk risk.pk %}">
                                            <span class="fa fa-pencil">Delete</span>
                                        </button>
                                        {% endif %} {% endcomment %}
                                    </div>
                                </td>
                            </tr>
                       {% endfor %}
                        </tbody>
                </table>
            </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
{{block.super}}
<script type="text/javascript">
    $(document).ready(function() {

        $("#update-phase").modalForm({
            formURL: "{% url 'project-phase-update' project_id object.pk %}"
        });

        $("#delete-phase").modalForm({
            formURL: "{% url 'project-phase-delete' project_id object.pk  %}"
        });
        
        $("#create-task").modalForm({
            formURL: "{% url 'create-task-phase' project_id object.pk %}"
        });

        $(".detail-task").each(function () {
            $(this).modalForm({
            formURL: $(this).data("form-url"),
            });
        });

        $(".update-task").each(function () {
            $(this).modalForm({
            formURL: $(this).data("form-url"),
            });
        });

        $(".delete-task").each(function () {
            $(this).modalForm({
              formURL: $(this).data("form-url"),
            });
          });


        $(".detail-risk").each(function () {
            $(this).modalForm({
            formURL: $(this).data("form-url"),
            });
        });

        $("#create-risk").modalForm({
            formURL: "{% url 'risk-create' project_id object.pk %}"
        });

        $(".update-risk").each(function () {
          $(this).modalForm({
            formURL: $(this).data("form-url"),
          });
        });

        $(".delete-risk").each(function () {
          $(this).modalForm({
            formURL: $(this).data("form-url"),
          });
        });

        $(".table td.clickable-row").each(function() {
            $(this).css("cursor","pointer").click(function() {
              document.location = $(this).parent().data("href");
            })
        });

    });

    </script>

{% endblock js %}