{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Employee Management</h2>
    <a href="{{ url_for('admin_employee_new') }}" class="btn-primary">➕ Add New Employee</a>
  </div>

  <!-- Summary Cards -->
  <div class="grid cols-4" style="gap: 20px; margin-bottom: 20px;">
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #059669;">👥 Total</h3>
      <div style="font-size: 2em; font-weight: bold; color: #059669;">
        {{ employees|length }}
      </div>
      <small style="color: #666;">All employees</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #10b981;">✅ Active</h3>
      <div style="font-size: 2em; font-weight: bold; color: #10b981;">
        {{ employees|selectattr('status', 'equalto', 'active')|list|length }}
      </div>
      <small style="color: #666;">Currently working</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #7c3aed;">🏪 Meat Shop</h3>
      <div style="font-size: 2em; font-weight: bold; color: #7c3aed;">
        {{ employees|selectattr('employee_type', 'equalto', 'meat_shop')|list|length }}
      </div>
      <small style="color: #666;">Shop staff</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #dc2626;">❌ Inactive</h3>
      <div style="font-size: 2em; font-weight: bold; color: #dc2626;">
        {{ employees|selectattr('status', 'equalto', 'inactive')|list|length }}
      </div>
      <small style="color: #666;">Not working</small>
    </div>
  </div>

  <!-- Employees List -->
  <div class="card">
    <h3>All Employees</h3>
    {% if employees %}
      <div class="table-responsive">
        <table class="table">
                     <thead>
             <tr>
               <th>Employee ID</th>
               <th>Name</th>
               <th>Type</th>
               <th>Designation</th>
               <th>Department</th>
               <th>Joining Date</th>
               <th>Salary</th>
               <th>Status</th>
               <th>Actions</th>
             </tr>
           </thead>
           <tbody>
             {% for employee in employees %}
               <tr style="background-color: {% if employee.status == 'active' %}#f0fdf4{% elif employee.status == 'inactive' %}#fef2f2{% else %}#fffbeb{% endif %};">
                 <td><strong>{{ employee.employee_id }}</strong></td>
                 <td>
                   <strong>{{ employee.full_name }}</strong><br>
                   <small style="color: #666;">{{ employee.phone or 'No phone' }}</small>
                 </td>
                 <td>
                   {% if employee.employee_type == 'meat_shop' %}
                     <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🏪 Shop</span>
                   {% elif employee.employee_type == 'delivery' %}
                     <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🚚 Delivery</span>
                   {% elif employee.employee_type == 'office' %}
                     <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🏢 Office</span>
                   {% elif employee.employee_type == 'production' %}
                     <span style="background: #f0f9ff; color: #0369a1; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🏭 Production</span>
                   {% elif employee.employee_type == 'management' %}
                     <span style="background: #f3e8ff; color: #7c3aed; padding: 4px 8px; border-radius: 12px; font-size: 12px;">👔 Management</span>
                   {% else %}
                     <span style="background: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 12px; font-size: 12px;">{{ employee.employee_type|title }}</span>
                   {% endif %}
                 </td>
                 <td>
                   <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                     {{ employee.designation }}
                   </span>
                 </td>
                 <td>{{ employee.department }}</td>
                 <td>{{ employee.joining_date|date_format }}</td>
                 <td>
                   <strong>{{ employee.salary|currency }}</strong><br>
                   <small style="color: #666;">{{ employee.salary_type|title }}</small>
                 </td>
                 <td>
                   {% if employee.status == 'active' %}
                     <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Active</span>
                   {% elif employee.status == 'inactive' %}
                     <span style="background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 12px; font-size: 12px;">❌ Inactive</span>
                   {% else %}
                     <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⚠️ {{ employee.status|title }}</span>
                   {% endif %}
                 </td>
                 <td>
                   <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                     <a href="{{ url_for('admin_employee_view', employee_id=employee.id) }}" class="btn-outline" style="font-size: 12px;">👁️ View</a>
                     <a href="{{ url_for('admin_employee_edit', employee_id=employee.id) }}" class="btn-outline" style="font-size: 12px;">✏️ Edit</a>
                   </div>
                 </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 employees yet</p>
        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Add your first employee to get started</p>
        <a href="{{ url_for('admin_employee_new') }}" class="btn-primary" style="margin-top: 16px;">Add First Employee</a>
      </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_attendance') }}" class="btn-outline">📅 Manage Attendance</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>Employee Management Tips</h3>
      <div style="color: #666; font-size: 14px; line-height: 1.6;">
        <p style="margin: 0 0 8px 0;"><strong>📋 Employee Records:</strong> Keep complete information including emergency contacts</p>
        <p style="margin: 0 0 8px 0;"><strong>⏰ Attendance:</strong> Track daily check-ins and working hours</p>
        <p style="margin: 0 0 8px 0;"><strong>💰 Expenses:</strong> Approve and track employee expense claims</p>
        <p style="margin: 0;"><strong>💳 Payments:</strong> Process salaries, bonuses, and reimbursements</p>
      </div>
    </div>
  </div>
{% endblock %}
