{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Employee Attendance</h2>
  </div>

  <!-- Attendance Form -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Record Attendance</h3>
    
    {% if not employees %}
      <div style="background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 16px; border-radius: 8px; margin-bottom: 20px;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 20px;">⚠️</span>
          <div>
            <strong>No Employees Available</strong><br>
            <small>You need to add employees first before you can record attendance.</small>
          </div>
        </div>
        <div style="margin-top: 12px;">
          <a href="{{ url_for('admin_employees') }}" class="btn-outline" style="font-size: 14px;">👥 Go to Employees</a>
          <a href="{{ url_for('admin_employee_new') }}" class="btn-primary" style="font-size: 14px; margin-left: 8px;">➕ Add First Employee</a>
        </div>
      </div>
    {% endif %}
    
    <form method="post" class="form" {% if not employees %}style="opacity: 0.5; pointer-events: none;"{% endif %}>
      {{ form.hidden_tag() }}
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Employee <span style="color: #dc2626;">*</span></label>
          {% if employees %}
            {{ form.employee_id() }}
          {% else %}
            <select disabled style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #f3f4f6; color: #9ca3af;">
              <option>No employees available</option>
            </select>
          {% endif %}
        </div>
        
        <div class="field">
          <label class="label">Date <span style="color: #dc2626;">*</span></label>
          {{ form.date(type='date') }}
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Check In</label>
          {{ form.check_in(type='datetime-local') }}
          <small style="color: #666;">Optional - when employee started work</small>
        </div>
        
        <div class="field">
          <label class="label">Check Out</label>
          {{ form.check_out(type='datetime-local') }}
          <small style="color: #666;">Optional - when employee finished work</small>
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Status <span style="color: #dc2626;">*</span></label>
          {{ form.status() }}
        </div>
        
        <div class="field">
          <label class="label">Note</label>
          {{ form.note(placeholder='Any additional notes...') }}
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>

  <!-- Current Month Attendance -->
  <div class="card">
    <h3>Current Month Attendance</h3>
    {% if attendances %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Employee</th>
              <th>Check In</th>
              <th>Check Out</th>
              <th>Working Hours</th>
              <th>Status</th>
              <th>Note</th>
            </tr>
          </thead>
          <tbody>
            {% for attendance in attendances %}
              <tr style="background-color: {% if attendance.status == 'present' %}#f0fdf4{% elif attendance.status == 'absent' %}#fef2f2{% elif attendance.status == 'late' %}#fffbeb{% elif attendance.status == 'half_day' %}#fef3c7{% else %}#f0f9ff{% endif %};">
                <td><strong>{{ attendance.date|date_format }}</strong></td>
                <td>
                  <strong>{{ attendance.employee.full_name }}</strong><br>
                  <small style="color: #666;">{{ attendance.employee.employee_id }}</small>
                </td>
                <td>
                  {% if attendance.check_in %}
                    {{ attendance.check_in.strftime('%H:%M') }}
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  {% if attendance.check_out %}
                    {{ attendance.check_out.strftime('%H:%M') }}
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  {% if attendance.working_hours > 0 %}
                    <strong>{{ "%.1f"|format(attendance.working_hours) }} hrs</strong>
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  {% if attendance.status == 'present' %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Present</span>
                  {% elif attendance.status == 'absent' %}
                    <span style="background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 12px; font-size: 12px;">❌ Absent</span>
                  {% elif attendance.status == 'late' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⚠️ Late</span>
                  {% elif attendance.status == 'half_day' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏰ Half Day</span>
                  {% elif attendance.status == 'leave' %}
                    <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🏖️ Leave</span>
                  {% else %}
                    <span style="background: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 12px; font-size: 12px;">{{ attendance.status|title }}</span>
                  {% endif %}
                </td>
                <td>
                  {% if attendance.note %}
                    <span style="color: #666;">{{ attendance.note[:50] }}{% if attendance.note|length > 50 %}...{% endif %}</span>
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div style="text-align: center; padding: 40px 20px;">
        <div style="font-size: 48px; color: #d1d5db; margin-bottom: 16px;">📅</div>
        <p style="color: #666; margin: 0 0 8px 0; font-size: 16px;">No attendance records yet</p>
        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Start recording daily attendance above</p>
      </div>
    {% endif %}
  </div>

  <!-- Quick Actions -->
  <div class="grid cols-2" style="gap: 20px; margin-top: 20px;">
    <div class="card">
      <h3>Quick Actions</h3>
      <div style="display: flex; flex-direction: column; gap: 12px;">
        <a href="{{ url_for('admin_employees') }}" class="btn-outline">👥 Manage Employees</a>
        <a href="{{ url_for('admin_expenses') }}" class="btn-outline">💰 Manage Expenses</a>
        <a href="{{ url_for('admin_payments') }}" class="btn-outline">💳 Process Payments</a>
      </div>
    </div>
    
    <div class="card">
      <h3>Attendance Management Tips</h3>
      <div style="color: #666; font-size: 14px; line-height: 1.6;">
        <p style="margin: 0 0 8px 0;"><strong>📅 Daily Tracking:</strong> Record attendance for each employee daily</p>
        <p style="margin: 0 0 8px 0;"><strong>⏰ Time Tracking:</strong> Use check-in/check-out for accurate working hours</p>
        <p style="margin: 0 0 8px 0;"><strong>📊 Status Types:</strong> Present, Absent, Late, Half Day, Leave</p>
        <p style="margin: 0;"><strong>📝 Notes:</strong> Add important information about attendance</p>
      </div>
    </div>
  </div>
{% endblock %}