{% extends 'base.html' %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1300px;">

  <!-- Header + month selector -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-pc-display me-2"></i>
        DeskTime – {{ employee.full_name }} ({{ employee.employee_code }})
      </h4>
      <small class="text-muted">
        Dept: {{ employee.department.name if employee.department else '-' }} |
        Desktime ID: {{ employee.desktime_id or '-' }}
      </small>
    </div>
    <form method="get" class="d-flex align-items-center">
      <label class="me-2 mb-0 small text-muted">Month</label>
      <input type="month" name="month"
             class="form-control form-control-sm me-2"
             value="{{ selected_month }}">
      {% if selected_day %}
        <input type="hidden" name="day" value="{{ selected_day }}">
      {% endif %}
      <button class="btn btn-sm btn-primary">
        <i class="bi bi-arrow-repeat me-1"></i> Go
      </button>
    </form>
  </div>

  <!-- Summary cards -->
  <div class="row g-3 mb-3">
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">Avg Arrival</div>
          <div class="fw-bold fs-5">{{ overall.avg_arrival_str }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">Avg Left</div>
          <div class="fw-bold fs-5">{{ overall.avg_left_str }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">Total Productive</div>
          <div class="fw-bold fs-5">{{ overall.total_productive_str }}</div>
          <div class="small text-muted">Avg {{ overall.avg_productive_str }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">DeskTime</div>
          <div class="fw-bold fs-5">{{ overall.total_desktime_str }}</div>
          <div class="small text-muted">Avg {{ overall.avg_desktime_str }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">Time at work</div>
          <div class="fw-bold fs-5">{{ overall.total_at_work_str }}</div>
          <div class="small text-muted">Avg {{ overall.avg_at_work_str }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 col-xl-2">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="small text-muted">Productivity</div>
          <div class="fw-bold fs-5">
            {% if overall.avg_productivity is not none %}
              {{ overall.avg_productivity }}%
            {% else %}-{% endif %}
          </div>
          <div class="small text-muted">
            Eff:
            {% if overall.avg_efficiency is not none %}
              {{ overall.avg_efficiency }}%
            {% else %}-{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Day view -->
  {% if day_view %}
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>Day View – {{ day_view.date.strftime('%d-%m-%Y') }} ({{ day_view.date.strftime('%a') }})</strong>
      </div>
      <a href="{{ url_for('desktime_logs.desktime_employee_dashboard',
                          employee_id=employee.id,
                          month=selected_month) }}"
         class="btn btn-sm btn-outline-secondary">
        Clear
      </a>
    </div>

    <div class="card-body">
      <div class="row g-3 mb-3">
        {% for label, value in [
          ('Arrival', day_view.arrival or '-'),
          ('Left', day_view.left or '-'),
          ('Productive', day_view.productive_str),
          ('DeskTime', day_view.desktime_str),
          ('Time at work', day_view.at_work_str),
        ] %}
        <div class="col-6 col-md-3 col-xl-2">
          <div class="card border-0 shadow-sm">
            <div class="card-body py-2">
              <div class="small text-muted">{{ label }}</div>
              <div class="fw-bold fs-5">{{ value }}</div>
            </div>
          </div>
        </div>
        {% endfor %}

        <div class="col-6 col-md-3 col-xl-2">
          <div class="card border-0 shadow-sm">
            <div class="card-body py-2">
              <div class="small text-muted">Prod / Eff</div>
              <div class="fw-bold fs-6">
                {% if day_view.productivity is not none %}
                  {{ '%.2f'|format(day_view.productivity) }}%
                {% else %}-{% endif %}
              </div>
              <div class="small text-muted">
                Eff:
                {% if day_view.efficiency is not none %}
                  {{ '%.2f'|format(day_view.efficiency) }}%
                {% else %}-{% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Day apps -->
      <div class="row g-3">
        {% for title, apps, color in [
          ('Productive apps – day', day_productive_apps, 'bg-success'),
          ('Unproductive apps – day', day_unproductive_apps, 'bg-danger'),
        ] %}
        <div class="col-lg-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header {{ color }} text-white py-2">
              <strong>{{ title }}</strong>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive" style="max-height:220px;">
                <table class="table table-sm mb-0 align-middle">
                  <thead><tr><th>App / Site</th><th class="text-end">Time</th></tr></thead>
                  <tbody>
                    {% if apps %}
                      {% for a in apps %}
                        <tr>
                          <td>{{ a.name }}</td>
                          <td class="text-end">{{ a.duration_str }}</td>
                        </tr>
                      {% endfor %}
                    {% else %}
                      <tr><td colspan="2" class="text-center text-muted py-3">No data</td></tr>
                    {% endif %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

    </div>
  </div>
  {% endif %}

  <!-- Productivity bar (month) -->
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white">
      <strong>Productivity bar</strong>
      <small class="text-muted ms-2">(per day – green = productive%)</small>
    </div>
    <div class="card-body">

      {% if daily_rows %}
      <div class="d-flex align-items-end" style="height:160px; gap:8px; overflow-x:auto;">

        {% for d in daily_rows %}
        <div class="text-center d-flex flex-column justify-content-end align-items-center"
             style="flex:0 0 30px; height:100%; cursor:pointer;"
             title="Date: {{ d.date.strftime('%d-%m-%Y (%a)') }} | Productive: {{ d.productive_str }} | DeskTime: {{ d.desktime_str }} | Eff: {% if d.efficiency %}{{ '%.2f'|format(d.efficiency) }}%{% else %}-{% endif %}">

          <div class="mx-auto bg-success rounded-top"
               style="width: 14px; height: {{ d.bar_ratio|round|int }}%;">
          </div>

          <div class="small text-muted mt-1"
               style="font-size:10px; height:26px; line-height:1.1;">
            {{ d.date.day }}<br>
            <small>{{ d.date.strftime('%a') }}</small>
          </div>
        </div>
        {% endfor %}

      </div>
      {% else %}
      <span class="text-muted">No data for this month.</span>
      {% endif %}

    </div>
  </div>

  <!-- Monthly Apps -->
  <div class="row g-3 mb-3">
    <div class="col-lg-6">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-header bg-success text-white py-2">
          <strong>Productive apps – month</strong>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive" style="max-height:260px;">
            <table class="table table-sm mb-0 align-middle">
              <thead><tr><th>App / Site</th><th class="text-end">Time</th></tr></thead>
              <tbody>
                {% if productive_apps %}
                  {% for a in productive_apps %}
                  <tr>
                    <td>{{ a.name }}</td>
                    <td class="text-end">{{ a.duration_str }}</td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr><td colspan="2" class="text-center text-muted py-3">No data</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-header bg-danger text-white py-2">
          <strong>Unproductive apps – month</strong>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive" style="max-height:260px;">
            <table class="table table-sm mb-0 align-middle">
              <thead><tr><th>App / Site</th><th class="text-end">Time</th></tr></thead>
              <tbody>
                {% if unproductive_apps %}
                  {% for a in unproductive_apps %}
                  <tr>
                    <td>{{ a.name }}</td>
                    <td class="text-end">{{ a.duration_str }}</td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr><td colspan="2" class="text-center text-muted py-3">No data</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Daily breakdown -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white">
      <strong>Daily breakdown</strong>
      <small class="text-muted ms-2">(click a date for Day View)</small>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:40px;">#</th>
              <th>Date</th>
              <th>Arrival</th>
              <th>Left</th>
              <th>Productive</th>
              <th>DeskTime</th>
              <th>Time at work</th>
              <th>Productivity</th>
              <th>Efficiency</th>
            </tr>
          </thead>
          <tbody>
            {% if daily_rows %}
              {% for d in daily_rows %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>
                  <a href="{{ url_for('desktime_logs.desktime_employee_dashboard',
                                       employee_id=employee.id,
                                       month=selected_month,
                                       day=d.date.strftime('%Y-%m-%d')) }}"
                     class="text-decoration-none {% if selected_day == d.date.strftime('%Y-%m-%d') %}fw-bold{% endif %}">
                    {{ d.date.strftime('%d-%m-%Y') }} ({{ d.date.strftime('%a') }})
                  </a>
                </td>
                <td>{{ d.arrival or '-' }}</td>
                <td>{{ d.left or '-' }}</td>
                <td>{{ d.productive_str }}</td>
                <td>{{ d.desktime_str }}</td>
                <td>{{ d.at_work_str }}</td>
                <td>
                  {% if d.productivity is not none %}
                    {{ '%.2f'|format(d.productivity) }}%
                  {% else %}-{% endif %}
                </td>
                <td>
                  {% if d.efficiency is not none %}
                    {{ '%.2f'|format(d.efficiency) }}%
                  {% else %}-{% endif %}
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="9" class="text-center text-muted py-3">
                  No data for this month.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}