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

{% block title %}Documents - 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;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f1f1f1;
}
</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-file-earmark"></i> 
                    Documents
                </h1>
                <p class="mb-0 opacity-75">
                    Manage employee documents and files
                </p>
            </div>
            <div class="col-auto">
                <a href="{% url 'hr:document_create' %}" class="btn btn-light">
                    <i class="bi bi-plus"></i> Upload Document
                </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">Employee Documents</h5>
                    <a href="{% url 'hr:document_create' %}" class="btn btn-primary">
                        <i class="bi bi-plus"></i> Upload Document
                    </a>
                </div>
                <div class="card-body">
                    {% if documents %}
                        <div class="table-responsive">
                            <table class="table table-hover" id="documentsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th class="sortable" data-sort="employee">
                                            Employee
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="type">
                                            Type
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="title">
                                            Title
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="date">
                                            Upload Date
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th class="sortable" data-sort="uploader">
                                            Uploaded By
                                            <i class="bi bi-arrow-down-up ms-1"></i>
                                        </th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for document in documents %}
                                    <tr class="clickable-row" data-href="{% url 'hr:document_download' document.pk %}">
                                        <td>{{ document.employee.full_name }}</td>
                                        <td>
                                            <span class="badge bg-info">{{ document.get_document_type_display }}</span>
                                        </td>
                                        <td>{{ document.title }}</td>
                                        <td>{{ document.uploaded_at|date:"M d, Y H:i" }}</td>
                                        <td>{{ document.uploaded_by.get_full_name }}</td>
                                        <td onclick="event.stopPropagation();">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'hr:document_delete' document.pk %}" 
                                                   class="btn btn-outline-danger" title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-file-earmark fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No documents found</h5>
                            <p class="text-muted">Upload employee documents to get started.</p>
                            <a href="{% url 'hr:document_create' %}" class="btn btn-primary">
                                <i class="bi bi-plus"></i> Upload Document
                            </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.href = this.getAttribute('data-href');
        });
    });

    // Sortable table headers
    const sortableHeaders = document.querySelectorAll('.sortable');
    sortableHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const table = this.closest('table');
            const columnIndex = Array.from(this.parentNode.children).indexOf(this);
            const sortOrder = this.classList.contains('asc') ? 'desc' : 'asc';

            // Remove existing sort indicators
            table.querySelectorAll('.sortable').forEach(th => {
                th.classList.remove('asc', 'desc');
                const icon = th.querySelector('i');
                if (icon) {
                    icon.classList.remove('bi-arrow-down', 'bi-arrow-up');
                    icon.classList.add('bi-arrow-down-up');
                }
            });

            // Add new sort indicator
            this.classList.add(sortOrder);
            const icon = this.querySelector('i');
            if (icon) {
                icon.classList.remove('bi-arrow-down-up');
                icon.classList.add(sortOrder === 'asc' ? 'bi-arrow-up' : 'bi-arrow-down');
            }

            // Sort table data
            const tbody = table.tBodies[0];
            const rows = Array.from(tbody.querySelectorAll('tr'));

            rows.sort((a, b) => {
                const cellA = a.children[columnIndex].textContent.trim();
                const cellB = b.children[columnIndex].textContent.trim();

                let comparison = 0;
                if (sortOrder === 'asc') {
                    if (cellA > cellB) comparison = 1;
                    if (cellA < cellB) comparison = -1;
                } else {
                    if (cellA < cellB) comparison = 1;
                    if (cellA > cellB) comparison = -1;
                }
                return comparison;
            });

            // Re-render table rows
            tbody.innerHTML = '';
            rows.forEach(row => tbody.appendChild(row));
        });
    });
});
</script>
{% endblock %}