{% extends "adminpanel/base.html" %}
{% load money %}
{% block title %}{{ project.name }} — admin{% endblock %}
{% block heading %}{{ project.name }}{% endblock %}

{% block content %}
<div class="pane">
  <a class="back" href="{% url 'admin_projects' %}">&larr; All projects</a>
  <div class="split">
    <div>
      <div class="panel">
        <div class="panel-h"><h2>{{ project.name }}</h2>
          <span class="status {{ project.get_status_display|status_class }} act">{{ project.get_status_display }}</span></div>
        <div class="panel-b">
          <div class="bar-row" style="margin-bottom:18px"><div class="bar"><i style="width:{{ project.progress }}%"></i></div><span>{{ project.progress }}%</span></div>
          <dl class="dl">
            <dt>Reference</dt><dd class="mono">{{ project.reference }}</dd>
            <dt>Client</dt><dd><a href="{% url 'admin_client' project.client.pk %}" style="color:var(--gold)">{{ project.client }}</a></dd>
            <dt>Type</dt><dd>{{ project.project_type }}</dd>
            <dt>Started</dt><dd>{{ project.start_date|date:"j M Y"|default:"—" }}</dd>
            <dt>Deadline</dt><dd>{{ project.deadline|date:"j M Y"|default:"—" }}</dd>
            <dt>Budget</dt><dd>{{ project.budget|naira }}</dd>
            <dt>Paid</dt><dd>{{ project.amount_paid|naira }}</dd>
            <dt>Balance</dt><dd>{{ project.balance|naira }}</dd>
          </dl>
        </div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Milestones</h2>
          <a href="{% url 'admin_project_edit' project.slug %}" class="btn btn-sm act">Edit project</a></div>
        <div class="panel-b"><ul class="mile">
          {% for m in milestones %}
          <li class="{% if m.status == 'done' %}done{% elif m.status == 'in_progress' %}now{% endif %}">
            <div class="mk">{% if m.status == 'done' %}&#10003;{% endif %}</div>
            <div><div class="mt">{{ m.title }}</div><div class="md">{{ m.detail|default:m.get_status_display }}</div></div></li>
          {% empty %}<p class="muted" style="margin:0">No milestones set.</p>{% endfor %}
        </ul>
        <form method="post" action="{% url 'admin_project_milestone' project.slug %}"
              style="margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px">{% csrf_token %}
          <div class="two">
            <div class="field"><label for="ms-title">Milestone</label>
              <input id="ms-title" name="title" placeholder="Testing"></div>
            <div class="field"><label for="ms-detail">Detail</label>
              <input id="ms-detail" name="detail" placeholder="Starts 12 Sep"></div>
          </div>
          <div class="two">
            <div class="field"><label for="ms-status">Status</label>
              <select id="ms-status" name="status">
                <option value="not_started">Not started</option>
                <option value="in_progress">In progress</option>
                <option value="done">Completed</option>
              </select></div>
            <div class="field"><label for="ms-due">Due</label>
              <input id="ms-due" name="due_date" type="date"></div>
          </div>
          <button class="btn btn-primary">Add milestone</button>
        </form></div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Tasks</h2><a href="{% url 'admin_tasks' %}" class="btn btn-sm act">Task board</a></div>
        <div class="panel-b">
          {% for t in tasks %}
          <div style="padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15px">{{ t.name }}
            <span class="status" style="margin-left:8px">{{ t.get_priority_display }}</span></div>
          {% empty %}<p class="muted" style="margin:0">No open tasks.</p>{% endfor %}
          <form method="post" action="{% url 'admin_project_task' project.slug %}"
                style="margin-top:16px;border-top:1px solid var(--line-soft);padding-top:16px">{% csrf_token %}
            <div class="two">
              <div class="field"><label for="task-name">Add a task</label>
                <input id="task-name" name="name" placeholder="Fix the careers form mailer"></div>
              <div class="field"><label for="task-due">Due</label>
                <input id="task-due" name="due_date" type="date"></div>
            </div>
            <div class="field"><label for="task-priority">Priority</label>
              <select id="task-priority" name="priority">
                <option value="low">Low</option>
                <option value="normal" selected>Normal</option>
                <option value="high">High</option>
                <option value="critical">Critical</option>
              </select></div>
            <button class="btn btn-primary">Add task</button>
          </form>
        </div>
      </div>

      <div class="panel">
        <div class="panel-h"><h2>Updates</h2>
          </div>
        <div class="panel-b"><ul class="feed">
          {% for u in updates %}<li><div class="ft">{{ u.created_at|date:"j M Y" }}{% if not u.client_visible %} · internal{% endif %}</div>
            <p><b>{{ u.title }}.</b> {{ u.body }}</p></li>
          {% empty %}<p class="muted" style="margin:0">No updates posted.</p>{% endfor %}
        </ul>
        <form method="post" action="{% url 'admin_project_update' project.slug %}"
              style="margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px">{% csrf_token %}
          <div class="field"><label for="up-title">Update title</label>
            <input id="up-title" name="title" placeholder="Content dashboard"></div>
          <div class="field"><label for="up-body">What happened</label>
            <textarea id="up-body" name="body" style="min-height:90px"></textarea></div>
          <label style="display:flex;align-items:center;gap:10px;padding:4px 0 12px">
            <input type="checkbox" name="client_visible" style="width:auto" checked>
            <span>Show this to the client and email them</span></label>
          <button class="btn btn-primary">Post update</button>
        </form></div>
      </div>
    </div>

    <div>
      <div class="panel">
        <div class="panel-h"><h2>Update status</h2></div>
        <div class="panel-b">
          <form method="post" novalidate>{% csrf_token %}
            <div class="field"><label for="status">Status</label>
              <select id="status" name="status">
                {% for value, label in statuses %}
                  <option value="{{ value }}" {% if project.status == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select></div>
            <div class="field"><label for="progress">Progress — <span id="pv">{{ project.progress }}</span>%</label>
              <input id="progress" name="progress" type="range" min="0" max="100" value="{{ project.progress }}"
                     style="padding:0" oninput="document.getElementById('pv').textContent=this.value"></div>
            <div class="field"><label for="deadline">Deadline</label>
              <input id="deadline" name="deadline" type="date" value="{{ project.deadline|date:'Y-m-d' }}"></div>
            <div class="field"><label for="internal_notes">Internal notes</label>
              <textarea id="internal_notes" name="internal_notes" style="min-height:110px">{{ project.internal_notes }}</textarea></div>
            <button class="btn btn-primary btn-block">Save</button>
            <p class="hint">Saving notifies the client of the new status. Internal notes stay private.</p>
          </form>
        </div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Files</h2></div>
        <div class="panel-b">
          {% for f in files %}
          <div style="display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)">
            <div style="min-width:0"><div style="font-size:14px">{{ f.name }}</div>
              <div class="mono">{{ f.get_folder_display }} · {% if f.client_visible %}shared{% else %}private{% endif %}</div></div>
            <a href="{{ f.file.url }}" class="btn btn-sm" style="margin-left:auto">Get</a>
          </div>
          {% empty %}<p class="muted" style="margin:0;font-size:15px">No files yet.</p>{% endfor %}
          <form method="post" enctype="multipart/form-data" action="{% url 'admin_project_file' project.slug %}"
                style="margin-top:16px;border-top:1px solid var(--line-soft);padding-top:16px">{% csrf_token %}
            <div class="field"><label for="pf-file">Upload a file</label>
              <input id="pf-file" name="file" type="file"></div>
            <div class="field"><label for="pf-folder">Folder</label>
              <select id="pf-folder" name="folder">
                <option value="design">Designs</option>
                <option value="document">Documents</option>
                <option value="deliverable">Deliverables</option>
                <option value="contract">Contracts</option>
              </select></div>
            <label style="display:flex;align-items:center;gap:10px;padding:4px 0 12px">
              <input type="checkbox" name="client_visible" style="width:auto" checked>
              <span>Client can see it</span></label>
            <button class="btn btn-primary btn-block">Upload</button>
          </form>
        </div>
      </div>
      <div class="panel">
        <div class="panel-h"><h2>Actions</h2></div>
        <div class="panel-b">
          <a href="{% url 'admin_invoices' %}" class="btn btn-block" style="margin-bottom:10px">Invoices</a>
          <a href="{% url 'admin_messages' %}?client={{ project.client.pk }}" class="btn btn-block" style="margin-bottom:10px">Message client</a>
          <a href="{% url 'admin_files' %}?client={{ project.client.pk }}" class="btn btn-block">Project files</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}