{% extends "base.html" %}
{% block title %}Nuevo Empleado{% endblock %}
{% block page_title %}➕ Nuevo Empleado{% endblock %}

{% block content %}
<div class="card" style="max-width:700px;">
  <div class="card-header">
    <div class="card-title">Datos del Empleado</div>
    <a href="{{ url_for('empleados') }}" class="btn btn-secondary btn-sm">← Volver</a>
  </div>

  <form method="POST" action="{{ url_for('nuevo_empleado') }}">
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
      <div class="form-group" style="grid-column:1/-1;">
        <label>👤 Nombre Completo *</label>
        <input type="text" name="nombre" required placeholder="Ej: María González Torres">
      </div>
      <div class="form-group">
        <label>🪪 RUT *</label>
        <input type="text" name="rut" required placeholder="12.345.678-9">
      </div>
      <div class="form-group">
        <label>💼 Cargo *</label>
        <select name="cargo" required>
          <option value="">— Seleccionar —</option>
          <option value="Vendedora">Vendedora</option>
          <option value="Vendedor">Vendedor</option>
          <option value="Supervisora">Supervisora</option>
          <option value="Supervisor">Supervisor</option>
          <option value="Encargada">Encargada de local</option>
          <option value="Cajera">Cajera</option>
          <option value="Asistente">Asistente</option>
        </select>
      </div>
      <div class="form-group">
        <label>🏪 Local *</label>
        <select name="local" required>
          <option value="">— Seleccionar —</option>
          {% for key, cfg in locales.items() %}
          <option value="{{ key }}">{{ cfg.icono }} {{ cfg.nombre }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label>💰 Salario Base ($)</label>
        <input type="number" name="salario_base" min="0" step="1000" value="0" placeholder="500000">
      </div>
      <div class="form-group">
        <label>📱 Teléfono</label>
        <input type="text" name="telefono" placeholder="+56 9 1234 5678">
      </div>
      <div class="form-group" style="grid-column:1/-1;">
        <label>📧 Email</label>
        <input type="email" name="email" placeholder="empleado@perfumados.cl">
      </div>
    </div>

    <div style="display:flex; gap:12px; margin-top:8px;">
      <button type="submit" class="btn btn-primary">💾 Guardar Empleado</button>
      <a href="{{ url_for('empleados') }}" class="btn btn-secondary">Cancelar</a>
    </div>
  </form>
</div>
{% endblock %}