{% extends 'base.html' %}
{% block title %}Project Detail{% endblock title %}
{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 offset-md-1  row">
            <div class="col-2">
                <nav class="navbar  bg-light ">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-detail' project_id %}">Project details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-logframe' project_id %}">LFA</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-timesheet-view' project_id %}" >Time sheet</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-tasks' project_id%}">Tasks</a> 
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-issues' project_id%}">Issues</a> 
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-risk-register' project_id%}">Risk register</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'project-workers' project_id %}">Company members</a>
                        </li>
                    </ul>
                </nav>
            </div>
        {% block projekt-div %}
            <div class="bg-light col-10">
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Project details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <dl class="col-sm-6 row">
                                <dt class="col-sm-4">Project name</dt>
                                <dd class="col-sm-8">{{ object.name }}</dd>
                                <dt class="col-sm-4">Stav</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">{{ project.start_date }}</dd>
                                <dt class="col-sm-4">Description</dt>
                                <dd class="col-sm-8">{{ project.description }} </dd>
                            </dl>
                            <dl class="col-sm-6 row">
                                <dt class="col-sm-4">Project manager</dt>
                                <dd class="col-sm-8">{{ project.project_manager }}</dd>
                                <dt class="col-sm-4">End date</dt>
                                <dd class="col-sm-8">{{ project.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" role="document">
                                  <div class="modal-content"></div>
                                </div>
                            </div>
                            {% if perms.risk.change_project and object.is_active %}
                                <button type="button" class="update-project btn btn-warning">Edit</button>
                            {% endif %}
                            {% if perms.risk.delete_project and object.is_active %}
                                <button type="button" class="delete-project 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">Phases </h5>
                            <div class="col-9  ">
                                <div class="float-right">
                                    <button class="btn btn-outline-info dropdown-toggle mr-2" type="button" id="dropdownPhases" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                                        State
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownPhases">
                                        <a class="dropdown-item" type="button" href="?active">All</a>
                                        <a class="dropdown-item" type="button" href="?active=true">Active</a>
                                        <a class="dropdown-item" type="button" href="?active=false">Inactive</a>
                                    </div>
                                    {% if perms.risk.add_projectphase and object.is_active %}
                                        <button class="create-phase btn btn-success float-right" type="button" name="button">Create Phase</button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive">
                            <tr>
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">Phase name</th>
                                        <th scope="col">Phase manager</th>
                                        <th scope="col">Start date</th>
                                        <th scope="col">End date</th>
                                        <th scope="col">State</th>
                                        <th scope="col"> </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for phase in phases %}
                                    <tr  data-href="{% url 'project-phase-detail' project_id phase.pk %}">
                                        <td class="clickable-row">{{ phase.name }}</td>
                                        <td class="clickable-row">{{ phase.phase_manager }}</td>
                                        <td class="clickable-row">{{ phase.start_date }}</td>
                                        <td class="clickable-row">{{ phase.estimated_end_date|default_if_none:"-" }}</td>
                                        <td class="clickable-row">{{ phase.is_active|yesno:"active,inactive" }}</td>
                                        <td>
                                            <div class="d-flex">
                                            {% if perms.risk.change_projectphase and phase.is_active %}
                                                <button type="button" class="update-phase btn btn-sm btn-warning mr-2" data-form-url="{% url 'project-phase-update' project_id phase.pk %}">
                                                    <span class="fa fa-pencil">Edit</span>
                                                </button>
                                            {% endif %}
                                            {% if perms.risk.delete_projectphase and phase.is_active %}
                                                <button type="button" class="delete-phase btn btn-sm btn-danger" data-form-url="{% url 'project-phase-delete' project_id phase.pk  %}">
                                                    <span class="fa fa-pencil">Deactivate</span>
                                                </button>
                                            {% endif %}
                                            </div>
                                        </td>
                                    </tr>

                                    {% endfor %}

                                </tbody>
                        </table>

                    </div>
                </div>
            </div> 
        {% endblock projekt-div %}
        </div>

    </div>
</div>

{% endblock content %}

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

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

        $(".delete-project").modalForm({
            formURL: "{% url 'project-delete' project_id %}"
        });

        $(".create-phase").modalForm({
            formURL: "{% url 'project-phase-create' project_id %}"
        });

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

        $(".delete-phase").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 %}