{% extends "tenant/layouts/base.html" %}
{% block title %}Staff Portal{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold mb-0">
    <i class="bi bi-person-badge me-2"></i>Welcome, {{ staff.name }}
  </h4>
  <span class="text-muted small">{{ today.strftime('%A, %B %d') }}</span>
</div>

<!-- Clock in/out -->
<div class="card shadow-sm mb-3 {{ 'border-success' if current_clocking else '' }}">
  <div class="card-body d-flex align-items-center justify-content-between">
    <div>
      {% if current_clocking %}
      <span class="badge bg-success fs-6 me-2">On Shift</span>
      <span class="text-muted small">Since {{ current_clocking.clocked_in_at.strftime('%I:%M %p') }}</span>
      {% else %}
      <span class="badge bg-secondary fs-6">Off Shift</span>
      {% endif %}
    </div>
    <div>
      {% if current_clocking %}
      <form method="POST" action="{{ url_for('staff_portal.clock_out') }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-outline-danger">Clock Out</button>
      </form>
      {% else %}
      <form method="POST" action="{{ url_for('staff_portal.clock_in') }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-success">Clock In</button>
      </form>
      {% endif %}
    </div>
  </div>
</div>

<!-- Today's appointments -->
<div class="card shadow-sm mb-3">
  <div class="card-header fw-semibold">
    Today's Appointments
    <a href="{{ url_for('staff_portal.schedule') }}" class="btn btn-outline-secondary btn-sm float-end">Full Schedule</a>
  </div>
  {% if todays_appointments %}
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light"><tr><th>Time</th><th>Customer</th><th>Service</th><th>Status</th></tr></thead>
      <tbody>
        {% for a in todays_appointments %}
        <tr>
          <td class="fw-semibold">{{ a.start_time.strftime('%I:%M %p') }}</td>
          <td>{{ a.customer.name if a.customer else 'Walk-in' }}</td>
          <td class="small">{{ a.service.name if a.service else '—' }}</td>
          <td><span class="badge bg-{{ {'confirmed':'primary','in_progress':'info','pending':'warning'}.get(a.status,'secondary') }}">{{ a.status }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="card-body text-muted small">No appointments scheduled for today.</div>
  {% endif %}
</div>

<div class="row g-2">
  <div class="col-6"><a href="{{ url_for('staff_portal.commission') }}" class="btn btn-outline-primary w-100">Commission & Pay</a></div>
  <div class="col-6"><a href="{{ url_for('staff_portal.profile') }}" class="btn btn-outline-secondary w-100">My Profile</a></div>
</div>
{% endblock %}