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

{% block title %}Employees - HR - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
.hr-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.hr-nav {
    background-color: #f8f9fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e3e6f0;
}

.hr-nav .nav-pills .nav-link {
    color: #5a5c69;
    padding: 0.75rem 1rem;
    margin: 0.25rem;
    border-radius: 0.35rem;
    transition: all 0.3s ease;
}

.hr-nav .nav-pills .nav-link:hover {
    color: #3a3b45;
    background-color: #eaecf4;
}

.hr-nav .nav-pills .nav-link.active {
    color: #fff;
    background-color: #667eea;
}

.hr-nav .nav-pills .nav-link i {
    margin-right: 0.5rem;
    width: 1rem;
}

.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable:hover {
    background-color: #f8f9fa;
}

.sortable.asc .bi-arrow-down-up:before {
    content: "\f145"; /* bi-arrow-up */
}

.sortable.desc .bi-arrow-down-up:before {
    content: "\f149"; /* bi-arrow-down */
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f8f9fa;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- HR Header -->
    <div class="hr-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-0">
                    <i class="bi bi-people-fill"></i> 
                    Employees
                </h1>
                <p class="mb-0 opacity-75">
                    Manage employee information and records
                </p>
            </div>
            <div class="col-auto">
                <a href="{% url 'hr:employee_create' %}" class="btn btn-light">
                    <i class="bi bi-person-plus"></i> Add Employee
                </a>
            </div>
        </div>
    </div>

    <!-- HR Navigation -->
    {% include 'hr/hr_nav.html' %}

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">All Employees</h5>
                    <a href="{% url 'hr:employee_create' %}" class="btn btn-primary">
                        <i class="bi bi-person-plus"></i> Add Employee
                    </a>
                </div>
                <div class="card-body">
                    {% if employees %}
                        <div class="table-responsive">
                            <table class="table table-hover" id="employeeTable">
                                <thead class="table-light">
                                    <tr>
                                        <th class="sortable" data-sort="name">
                                            Employee Details
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="email">
                                            Contact Info
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="department">
                                            Department
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="hire_date">
                                            Employment Dates
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="status">
                                            Status
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for employee in employees %}
                                    <tr class="clickable-row" data-href="{% url 'hr:employee_detail' employee.employee_id %}">
                                        <td>
                                            <strong>{{ employee.full_name }}</strong><br>
                                            <small class="text-muted">{{ employee.employee_id }}</small><br>
                                            <small class="text-info">{{ employee.get_employment_type_display }}</small>
                                        </td>
                                        <td>
                                            {{ employee.email }}<br>
                                            <small class="text-muted">{{ employee.phone }}</small>
                                        </td>
                                        <td>
                                            {{ employee.department.name|default:"N/A" }}<br>
                                            <small class="text-muted">{{ employee.job_title }}</small>
                                        </td>
                                        <td>
                                            {{ employee.hire_date|date:"M d, Y" }}<br>
                                            {% if employee.probation_end_date %}
                                            <small class="text-warning">Probation ends: {{ employee.probation_end_date|date:"M d, Y" }}</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if employee.employment_status == 'active' %}success{% elif employee.employment_status == 'on_leave' %}warning{% else %}danger{% endif %}">
                                                {{ employee.get_employment_status_display }}
                                            </span>
                                            {% if employee.termination_date %}
                                            <br><small class="text-danger">Terminated: {{ employee.termination_date|date:"M d, Y" }}</small>
                                            {% endif %}
                                        </td>
                                        <td onclick="event.stopPropagation();">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'hr:employee_edit' employee.employee_id %}" 
                                                   class="btn btn-outline-secondary" title="Edit">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-people fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No employees found</h5>
                            <p class="text-muted">Add your first employee to get started.</p>
                            <a href="{% url 'hr:employee_create' %}" class="btn btn-primary">
                                <i class="bi bi-person-plus"></i> Add Employee
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Make table rows clickable
    const clickableRows = document.querySelectorAll('.clickable-row');
    clickableRows.forEach(row => {
        row.addEventListener('click', function() {
            window.location = this.dataset.href;
        });
    });

    // Add sorting functionality
    const table = document.getElementById('employeeTable');
    const headers = table.querySelectorAll('.sortable');
    
    headers.forEach(header => {
        header.addEventListener('click', function() {
            const column = this.dataset.sort;
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            
            // Determine sort direction
            const currentDirection = this.classList.contains('asc') ? 'asc' : 'desc';
            const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
            
            // Remove sorting classes from all headers
            headers.forEach(h => h.classList.remove('asc', 'desc'));
            
            // Add new sorting class
            this.classList.add(newDirection);
            
            // Sort rows
            rows.sort((a, b) => {
                let aVal, bVal;
                
                switch(column) {
                    case 'name':
                        aVal = a.cells[0].querySelector('strong').textContent.trim();
                        bVal = b.cells[0].querySelector('strong').textContent.trim();
                        break;
                    case 'email':
                        aVal = a.cells[1].textContent.split('\n')[0].trim();
                        bVal = b.cells[1].textContent.split('\n')[0].trim();
                        break;
                    case 'department':
                        aVal = a.cells[2].textContent.split('\n')[0].trim();
                        bVal = b.cells[2].textContent.split('\n')[0].trim();
                        break;
                    case 'hire_date':
                        aVal = new Date(a.cells[3].textContent.split('\n')[0].trim());
                        bVal = new Date(b.cells[3].textContent.split('\n')[0].trim());
                        break;
                    case 'status':
                        aVal = a.cells[4].querySelector('.badge').textContent.trim();
                        bVal = b.cells[4].querySelector('.badge').textContent.trim();
                        break;
                    default:
                        aVal = a.cells[0].textContent.trim();
                        bVal = b.cells[0].textContent.trim();
                }
                
                if (aVal < bVal) return newDirection === 'asc' ? -1 : 1;
                if (aVal > bVal) return newDirection === 'asc' ? 1 : -1;
                return 0;
            });
            
            // Re-append sorted rows
            rows.forEach(row => tbody.appendChild(row));
        });
    });
});
</script>
{% endblock %}