{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
  <h2>Add New Employee</h2>
  <form method="POST" enctype="multipart/form-data">
    <!-- Basic Info -->
    <div class="mb-3">
      <label for="employee_code" class="form-label">Employee Code</label>
      <input type="text" class="form-control" name="employee_code" required>
    </div>
    <div class="mb-3">
      <label for="full_name" class="form-label">Full Name</label>
      <input type="text" class="form-control" name="full_name" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email</label>
      <input type="email" class="form-control" name="email" required>
    </div>
    <div class="mb-3">
      <label for="phone" class="form-label">Phone</label>
      <input type="text" class="form-control" name="phone" required>
    </div>

    <!-- Professional Info -->
    <div class="mb-3">
      <label for="department_id" class="form-label">Department</label>
      <select class="form-control" id="department_id" name="department_id" required>
        <option value="">-- Select Department --</option>
        {% for dept in departments %}
          <option value="{{ dept.id }}">{{ dept.name }}</option>
          
        {% endfor %}
      </select>
    </div>
    <div class="mb-3">
      <label for="designation_id" class="form-label">Designation</label>
      <select class="form-control" name="designation_id" required>
        <option value="">-- Select Designation --</option>
        {% for desg in designations %}
          <option value="{{ desg.id }}">{{ desg.title }}</option>

        {% endfor %}
      </select>
    </div>
    <div class="mb-3">
      <label for="reporting_manager_id" class="form-label">Reporting Manager</label>
      <select class="form-control" name="reporting_manager_id">
        <option value="">-- None --</option>
        {% for mgr in managers %}
          <option value="{{ mgr.id }}">{{ mgr.full_name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="mb-3">
      <label for="doj" class="form-label">Date of Joining</label>
      <input type="date" class="form-control" name="doj" required>
    </div>
    <div class="form-group">
      <label for="uan">UAN</label>
      <input type="text" class="form-control" name="uan" id="uan" value="{{ request.form.uan or '' }}">
    </div>
    <div class="row mb-3">
    <label for="work_mode" class="col-sm-2 col-form-label">Work Mode</label>
    <div class="col-sm-10">
        <select name="work_mode" id="work_mode" class="form-control" onchange="toggleShiftFields()">
            <option value="">-- Select Work Mode --</option>
            <option value="WFO" {% if employee and employee.work_mode == 'WFO' %}selected{% endif %}>WFO</option>
            <option value="WFH" {% if employee and employee.work_mode == 'WFH' %}selected{% endif %}>WFH</option>
            <option value="Hybrid" {% if employee and employee.work_mode == 'Hybrid' %}selected{% endif %}>Hybrid</option>
        </select>
    </div>
    </div>

    <div class="row mb-3" id="shift-row" style="display: none;">
        <label class="col-sm-2 col-form-label">Shift Time</label>
        <div class="col-sm-5">
            <input type="time" class="form-control" name="shift_start"
                  value="{{ employee.shift_start if employee and employee.shift_start else '' }}">
        </div>
        <div class="col-sm-5">
            <input type="time" class="form-control" name="shift_end"
                  value="{{ employee.shift_end if employee and employee.shift_end else '' }}">
        </div>
        <small class="text-muted mt-1">Applicable for WFO and Hybrid employees.</small>
    </div>

    <div class="mb-3">
        <label for="desktime_id" class="form-label">Desktime Employee ID</label>
        <input type="text" class="form-control" name="desktime_id" id="desktime_id" value="{{ employee.desktime_id if employee else '' }}">
        <div class="form-text">Used for fetching productive hours when punch data is missing</div>
    </div>
   
    <!-- Education -->
    <div class="mb-3">
      <label for="qualification" class="form-label">Qualification</label>
      <input type="text" class="form-control" name="qualification">
    </div>
    <div class="mb-3">
      <label for="institute" class="form-label">Institute</label>
      <input type="text" class="form-control" name="institute">
    </div>

    <!-- Uploads -->
    <div class="mb-3">
      <label for="resume" class="form-label">Resume</label>
      <input type="file" class="form-control" name="resume">
    </div>
    <div class="mb-3">
      <label for="id_proof" class="form-label">ID Proof</label>
      <input type="file" class="form-control" name="id_proof">
    </div>

    <button type="submit" class="btn btn-primary">Add Employee</button>
  </form>
</div>

<script>
    function toggleShiftFields() {
        const workMode = document.getElementById('work_mode').value;
        const shiftRow = document.getElementById('shift-row');
        if (workMode === 'WFO' || workMode === 'Hybrid') {
            shiftRow.style.display = 'flex';
        } else {
            shiftRow.style.display = 'none';
        }
    }
    document.addEventListener('DOMContentLoaded', toggleShiftFields);
</script>
{% endblock %}