{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Add New Employee</h2>
    <a href="{{ url_for('admin_employees') }}" class="btn-outline">← Back to Employees</a>
  </div>

  <div class="card">
    <h3>Employee Information</h3>
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      
             <div class="grid cols-2" style="gap: 20px;">
         <div class="field">
           <label class="label">Full Name <span style="color: #dc2626;">*</span></label>
           {{ form.name(placeholder="Employee's full name") }}
         </div>
         
         <div class="field">
           <label class="label">Employee ID</label>
           {{ form.employee_id(placeholder="Auto-generated", style="background-color: #f3f4f6; color: #6b7280;") }}
           <small style="color: #666;">Auto-generated (EMP001, EMP002, EMP003...)</small>
         </div>
       </div>
       
       <div class="grid cols-2" style="gap: 20px;">
         <div class="field">
           <label class="label">Employee Type <span style="color: #dc2626;">*</span></label>
           {{ form.employee_type() }}
           <small style="color: #666;">Select the category this employee belongs to</small>
         </div>
         
         <div class="field">
           <label class="label">Designation <span style="color: #dc2626;">*</span></label>
           {{ form.designation(placeholder="e.g., Cashier, Driver, Manager") }}
         </div>
       </div>
       
       <div class="field">
         <label class="label">Department <span style="color: #dc2626;">*</span></label>
         {{ form.department() }}
       </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Joining Date <span style="color: #dc2626;">*</span></label>
          {{ form.joining_date(type='date') }}
        </div>
        
        <div class="field">
          <label class="label">Salary <span style="color: #dc2626;">*</span></label>
          {{ form.salary(step='0.01', placeholder='0.00') }}
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Salary Type <span style="color: #dc2626;">*</span></label>
          {{ form.salary_type() }}
        </div>
        
        <div class="field">
          <label class="label">Phone</label>
          {{ form.phone(placeholder='+91 98765 43210') }}
        </div>
      </div>
      
      <div class="field">
        <label class="label">Address</label>
        {{ form.address(rows='3', placeholder='Full address...') }}
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Emergency Contact</label>
          {{ form.emergency_contact(placeholder='+91 98765 43210') }}
        </div>
        
        <div class="field">
          <label class="label">Emergency Contact Name</label>
          {{ form.emergency_contact_name(placeholder='Full name') }}
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        {{ form.submit(class_='btn-primary') }}
        <a href="{{ url_for('admin_employees') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

     <!-- Instructions -->
   <div class="card" style="margin-top: 20px;">
     <h3>How to Add an Employee</h3>
     <div style="color: #666; font-size: 14px; line-height: 1.6;">
       <p style="margin: 0 0 8px 0;"><strong>1. Employee Type:</strong> Choose the category (Meat Shop, Delivery, Office, etc.)</p>
       <p style="margin: 0 0 8px 0;"><strong>2. Employee Details:</strong> Fill in name, designation, and department</p>
       <p style="margin: 0 0 8px 0;"><strong>3. Auto-Generation:</strong> Employee ID will be automatically generated</p>
       <p style="margin: 0 0 8px 0;"><strong>4. Complete Profile:</strong> Add contact and emergency information</p>
       <p style="margin: 0;"><strong>5. Management:</strong> After creation, manage attendance, expenses, and payments</p>
     </div>
   </div>
{% endblock %}