{% extends "base.html" %}
{% load static %}

{% block title %}{% if object %}Edit Employee{% else %}Add Employee{% endif %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                {% if object %}
                    <i class="fas fa-edit me-2"></i>Edit Employee
                {% else %}
                    <i class="fas fa-user-plus me-2"></i>Add Employee
                {% endif %}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'hr:employee_list' %}">Employees</a></li>
                    {% if object %}
                        <li class="breadcrumb-item"><a href="{% url 'hr:employee_detail' object.pk %}">{{ object.get_full_name }}</a></li>
                        <li class="breadcrumb-item active">Edit</li>
                    {% else %}
                        <li class="breadcrumb-item active">Add</li>
                    {% endif %}
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{% if object %}{% url 'hr:employee_detail' object.pk %}{% else %}{% url 'hr:employee_list' %}{% endif %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <form method="post" novalidate>
        {% csrf_token %}
        
        <div class="row">
            <!-- Main Form -->
            <div class="col-lg-8">
                <!-- Personal Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-user me-2"></i>Personal Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.first_name.id_for_label }}" class="form-label">
                                        First Name <span class="text-danger">*</span>
                                    </label>
                                    {{ form.first_name }}
                                    {% if form.first_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.first_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.middle_name.id_for_label }}" class="form-label">
                                        Middle Name
                                    </label>
                                    {{ form.middle_name }}
                                    {% if form.middle_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.middle_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.last_name.id_for_label }}" class="form-label">
                                        Last Name <span class="text-danger">*</span>
                                    </label>
                                    {{ form.last_name }}
                                    {% if form.last_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.last_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.preferred_name.id_for_label }}" class="form-label">
                                        Preferred Name
                                    </label>
                                    {{ form.preferred_name }}
                                    {% if form.preferred_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.preferred_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Name the employee prefers to be called</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.employee_number.id_for_label }}" class="form-label">
                                        Employee Number <span class="text-danger">*</span>
                                    </label>
                                    {{ form.employee_number }}
                                    {% if form.employee_number.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.employee_number.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Unique identifier for the employee</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Employment Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-briefcase me-2"></i>Employment Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.department.id_for_label }}" class="form-label">
                                        Department
                                    </label>
                                    {{ form.department }}
                                    {% if form.department.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.department.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.job_title.id_for_label }}" class="form-label">
                                        Job Title
                                    </label>
                                    {{ form.job_title }}
                                    {% if form.job_title.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.job_title.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.hire_date.id_for_label }}" class="form-label">
                                        Hire Date <span class="text-danger">*</span>
                                    </label>
                                    {{ form.hire_date }}
                                    {% if form.hire_date.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.hire_date.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.employment_status.id_for_label }}" class="form-label">
                                        Employment Status <span class="text-danger">*</span>
                                    </label>
                                    {{ form.employment_status }}
                                    {% if form.employment_status.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.employment_status.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.employment_type.id_for_label }}" class="form-label">
                                        Employment Type
                                    </label>
                                    {{ form.employment_type }}
                                    {% if form.employment_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.employment_type.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.supervisor.id_for_label }}" class="form-label">
                                        Supervisor
                                    </label>
                                    {{ form.supervisor }}
                                    {% if form.supervisor.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.supervisor.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.salary.id_for_label }}" class="form-label">
                                        Salary
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        {{ form.salary }}
                                    </div>
                                    {% if form.salary.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.salary.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Annual salary amount</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-address-book me-2"></i>Contact Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.email.id_for_label }}" class="form-label">
                                        Email Address
                                    </label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.email.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.phone.id_for_label }}" class="form-label">
                                        Phone Number
                                    </label>
                                    {{ form.phone }}
                                    {% if form.phone.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.phone.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.mobile_phone.id_for_label }}" class="form-label">
                                        Mobile Phone
                                    </label>
                                    {{ form.mobile_phone }}
                                    {% if form.mobile_phone.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.mobile_phone.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.address_line_1.id_for_label }}" class="form-label">
                                        Address Line 1
                                    </label>
                                    {{ form.address_line_1 }}
                                    {% if form.address_line_1.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.address_line_1.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.address_line_2.id_for_label }}" class="form-label">
                                        Address Line 2
                                    </label>
                                    {{ form.address_line_2 }}
                                    {% if form.address_line_2.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.address_line_2.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.city.id_for_label }}" class="form-label">
                                        City
                                    </label>
                                    {{ form.city }}
                                    {% if form.city.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.city.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.state.id_for_label }}" class="form-label">
                                        State/Province
                                    </label>
                                    {{ form.state }}
                                    {% if form.state.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.state.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.postal_code.id_for_label }}" class="form-label">
                                        Postal Code
                                    </label>
                                    {{ form.postal_code }}
                                    {% if form.postal_code.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.postal_code.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.country.id_for_label }}" class="form-label">
                                        Country
                                    </label>
                                    {{ form.country }}
                                    {% if form.country.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.country.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Emergency Contact -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>Emergency Contact
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.emergency_contact_name.id_for_label }}" class="form-label">
                                        Contact Name
                                    </label>
                                    {{ form.emergency_contact_name }}
                                    {% if form.emergency_contact_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.emergency_contact_name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.emergency_contact_relationship.id_for_label }}" class="form-label">
                                        Relationship
                                    </label>
                                    {{ form.emergency_contact_relationship }}
                                    {% if form.emergency_contact_relationship.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.emergency_contact_relationship.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.emergency_contact_phone.id_for_label }}" class="form-label">
                                        Contact Phone
                                    </label>
                                    {{ form.emergency_contact_phone }}
                                    {% if form.emergency_contact_phone.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.emergency_contact_phone.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Form Actions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cog me-2"></i>Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>
                                {% if object %}Update Employee{% else %}Create Employee{% endif %}
                            </button>
                            <a href="{% if object %}{% url 'hr:employee_detail' object.pk %}{% else %}{% url 'hr:employee_list' %}{% endif %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-outline-info" onclick="clearForm()">
                                <i class="fas fa-eraser me-2"></i>Clear Form
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Form Help -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-question-circle me-2"></i>Help
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="helpAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#personalInfo">
                                        Personal Information
                                    </button>
                                </h2>
                                <div id="personalInfo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled mb-0">
                                            <li><strong>Employee Number:</strong> Must be unique across the organization</li>
                                            <li><strong>Preferred Name:</strong> Optional name the employee prefers to be called</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#employmentInfo">
                                        Employment Information
                                    </button>
                                </h2>
                                <div id="employmentInfo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled mb-0">
                                            <li><strong>Department:</strong> Select the employee's primary department</li>
                                            <li><strong>Supervisor:</strong> Choose the employee's direct supervisor</li>
                                            <li><strong>Employment Status:</strong> Current status of employment</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contactInfo">
                                        Contact Information
                                    </button>
                                </h2>
                                <div id="contactInfo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled mb-0">
                                            <li><strong>Email:</strong> Primary work email address</li>
                                            <li><strong>Phone:</strong> Work phone number</li>
                                            <li><strong>Mobile:</strong> Personal mobile number for emergencies</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Required Fields -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-asterisk me-2"></i>Required Fields
                        </h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li><span class="text-danger">*</span> First Name</li>
                            <li><span class="text-danger">*</span> Last Name</li>
                            <li><span class="text-danger">*</span> Employee Number</li>
                            <li><span class="text-danger">*</span> Hire Date</li>
                            <li><span class="text-danger">*</span> Employment Status</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
// Employee form functionality
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap classes to form elements
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        if (!input.classList.contains('form-control') && !input.classList.contains('form-select')) {
            if (input.tagName === 'SELECT') {
                input.classList.add('form-select');
            } else {
                input.classList.add('form-control');
            }
        }
    });
    
    // Set default hire date to today if creating new employee
    {% if not object %}
    const hireDateInput = document.getElementById('{{ form.hire_date.id_for_label }}');
    if (hireDateInput && !hireDateInput.value) {
        const today = new Date().toISOString().split('T')[0];
        hireDateInput.value = today;
    }
    {% endif %}
    
    // Auto-generate employee number if empty
    {% if not object %}
    const employeeNumberInput = document.getElementById('{{ form.employee_number.id_for_label }}');
    if (employeeNumberInput && !employeeNumberInput.value) {
        generateEmployeeNumber();
    }
    {% endif %}
});

function generateEmployeeNumber() {
    // Generate a simple employee number based on timestamp
    const timestamp = Date.now().toString().slice(-6);
    const employeeNumberInput = document.getElementById('{{ form.employee_number.id_for_label }}');
    if (employeeNumberInput) {
        employeeNumberInput.value = 'EMP' + timestamp;
    }
}

function clearForm() {
    if (confirm('Are you sure you want to clear all form data?')) {
        const form = document.querySelector('form');
        const inputs = form.querySelectorAll('input, select, textarea');
        
        inputs.forEach(input => {
            if (input.type !== 'hidden' && input.name !== 'csrfmiddlewaretoken') {
                if (input.type === 'checkbox') {
                    input.checked = false;
                } else {
                    input.value = '';
                }
            }
        });
        
        // Reset default values
        {% if not object %}
        const hireDateInput = document.getElementById('{{ form.hire_date.id_for_label }}');
        if (hireDateInput) {
            const today = new Date().toISOString().split('T')[0];
            hireDateInput.value = today;
        }
        
        generateEmployeeNumber();
        {% endif %}
    }
}

// Form submission with loading state
document.querySelector('form').addEventListener('submit', function() {
    const submitBtn = document.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
    submitBtn.disabled = true;
    
    // Re-enable if form validation fails
    setTimeout(() => {
        if (document.querySelector('.is-invalid')) {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    }, 100);
});

// Real-time validation
document.querySelectorAll('input[required], select[required]').forEach(input => {
    input.addEventListener('blur', function() {
        if (this.value.trim() === '') {
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });
    
    input.addEventListener('input', function() {
        if (this.classList.contains('is-invalid') && this.value.trim() !== '') {
            this.classList.remove('is-invalid');
        }
    });
});
</script>

<style>
.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #0d6efd;
}

.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

.text-danger {
    color: #dc3545 !important;
}

@media (max-width: 768px) {
    .row.mb-4 .col-md-3,
    .row.mb-4 .col-md-4,
    .row.mb-4 .col-md-6 {
        margin-bottom: 1rem;
    }
}
</style>
{% endblock %}