{% extends "base_page.html" %}

{% block title %}Employees{% endblock %}
{% block page_title %}Employees{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-users me-2"></i>Employee Categories</h3>
            <a href="{{ url_for('export_employees') }}" class="btn btn-success">
                <i class="fas fa-file-export me-2"></i>Export CSV
            </a>
        </div>
    </div>
</div>

<!-- Category Tabs -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-pills nav-fill category-tabs" id="categoryTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="active-tab" data-bs-toggle="pill" 
                                data-bs-target="#active-employees" type="button" role="tab" 
                                aria-controls="active-employees" aria-selected="true">
                            <i class="fas fa-clock me-2"></i>Administrative
                            <span class="badge bg-primary ms-2" id="active-count">0</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="school-tab" data-bs-toggle="pill" 
                                data-bs-target="#school-employees" type="button" role="tab" 
                                aria-controls="school-employees" aria-selected="false">
                            <i class="fas fa-school me-2"></i>School Department
                            <span class="badge bg-info ms-2" id="school-count">0</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="teachers-tab" data-bs-toggle="pill" 
                                data-bs-target="#teacher-employees" type="button" role="tab" 
                                aria-controls="teacher-employees" aria-selected="false">
                            <i class="fas fa-chalkboard-teacher me-2"></i>Teachers
                            <span class="badge bg-success ms-2" id="teachers-count">0</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Search Section -->
<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-search me-2"></i>Search Employees
                        </label>
                        <input type="text" 
                               id="employee-search" 
                               class="form-control" 
                               placeholder="Search by name, position, email..."
                               value="{{ request.args.get('search', '') }}">
                    </div>
                    <div class="col-md-4">
                        <button id="search-button" class="btn btn-primary w-100">
                            <i class="fas fa-search me-2"></i>Search
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tab Content -->
<div class="tab-content" id="categoryTabContent">
    <!-- Currently Active Employees -->
    <div class="tab-pane fade show active" id="active-employees" role="tabpanel" aria-labelledby="active-tab">
        <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"><i class="fas fa-clock me-2"></i>Administrative</h5>
                        <div class="badge bg-primary fs-6">
                            Total: <span id="active-employee-count">0</span> employees
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <!-- Loading Spinner -->
                        <div id="active-loading-spinner" class="text-center py-5" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading active employees...</p>
                        </div>

                        <!-- Employee Cards Grid -->
                        <div id="active-employees-grid" class="row g-4" style="display: none;">
                            <!-- Employee cards will be populated here by JavaScript -->
                        </div>

                        <!-- Pagination -->
                        <div id="active-pagination-container" class="d-flex justify-content-center mt-4" style="display: none;">
                            <nav aria-label="Active employee pagination">
                                <ul class="pagination pagination-lg" id="active-pagination-list">
                                    <!-- Pagination buttons will be populated here -->
                                </ul>
                            </nav>
                        </div>

                        <!-- No Results -->
                        <div id="active-no-results" class="text-center py-5" style="display: none;">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No active employees found</h5>
                            <p class="text-muted">No active employees match your search criteria</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- School Department Employees -->
    <div class="tab-pane fade" id="school-employees" role="tabpanel" aria-labelledby="school-tab">
        <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"><i class="fas fa-school me-2"></i>School Department Employees</h5>
                        <div class="badge bg-info fs-6">
                            Total: <span id="school-employee-count">0</span> employees
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <!-- Loading Spinner -->
                        <div id="school-loading-spinner" class="text-center py-5" style="display: none;">
                            <div class="spinner-border text-info" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading school employees...</p>
                        </div>

                        <!-- Employee Cards Grid -->
                        <div id="school-employees-grid" class="row g-4" style="display: none;">
                            <!-- Employee cards will be populated here by JavaScript -->
                        </div>

                        <!-- Pagination -->
                        <div id="school-pagination-container" class="d-flex justify-content-center mt-4" style="display: none;">
                            <nav aria-label="School employee pagination">
                                <ul class="pagination pagination-lg" id="school-pagination-list">
                                    <!-- Pagination buttons will be populated here -->
                                </ul>
                            </nav>
                        </div>

                        <!-- No Results -->
                        <div id="school-no-results" class="text-center py-5" style="display: none;">
                            <i class="fas fa-school fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No school employees found</h5>
                            <p class="text-muted">No school department employees match your search criteria</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Teacher Employees -->
    <div class="tab-pane fade" id="teacher-employees" role="tabpanel" aria-labelledby="teachers-tab">
        <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"><i class="fas fa-chalkboard-teacher me-2"></i>Teacher Employees</h5>
                        <div class="badge bg-success fs-6">
                            Total: <span id="teacher-employee-count">0</span> employees
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <!-- Loading Spinner -->
                        <div id="teacher-loading-spinner" class="text-center py-5" style="display: none;">
                            <div class="spinner-border text-success" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading teachers...</p>
                        </div>

                        <!-- Employee Cards Grid -->
                        <div id="teacher-employees-grid" class="row g-4" style="display: none;">
                            <!-- Employee cards will be populated here by JavaScript -->
                        </div>

                        <!-- Pagination -->
                        <div id="teacher-pagination-container" class="d-flex justify-content-center mt-4" style="display: none;">
                            <nav aria-label="Teacher employee pagination">
                                <ul class="pagination pagination-lg" id="teacher-pagination-list">
                                    <!-- Pagination buttons will be populated here -->
                                </ul>
                            </nav>
                        </div>

                        <!-- No Results -->
                        <div id="teacher-no-results" class="text-center py-5" style="display: none;">
                            <i class="fas fa-chalkboard-teacher fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No teachers found</h5>
                            <p class="text-muted">No teachers match your search criteria</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let allEmployees = [];
let currentPage = 1;
let totalPages = 1;
let currentSearchTerm = '';
let currentCategory = 'active'; // active, school, teachers

function normalizeAzerbaijani(text) {
    if (!text) return '';
    const replacements = {
        'ə': 'e', 'ü': 'u', 'ö': 'o', 'ğ': 'g', 'ş': 's', 'ç': 'c', 'ı': 'i',
        'Ə': 'E', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G', 'Ş': 'S', 'Ç': 'C', 'I': 'I'
    };
    return text.toLowerCase().replace(/[əüöğşçıƏÜÖĞŞÇI]/g, char => replacements[char] || char);
}

function fetchEmployees(category = 'active', searchTerm = '', page = 1) {
    const loadingSpinner = document.getElementById(`${category}-loading-spinner`);
    const employeesGrid = document.getElementById(`${category}-employees-grid`);
    const noResults = document.getElementById(`${category}-no-results`);
    const paginationContainer = document.getElementById(`${category}-pagination-container`);

    loadingSpinner.style.display = 'block';
    employeesGrid.style.display = 'none';
    noResults.style.display = 'none';
    paginationContainer.style.display = 'none';

    currentSearchTerm = searchTerm;
    currentPage = page;
    currentCategory = category;

    console.log(`🔍 Fetching ${category} employees - term: '${searchTerm}', page: ${page}`);

    fetch(`/api/employees_list?category=${category}&search=${encodeURIComponent(searchTerm)}&page=${page}`)
        .then(response => response.json())
        .then(data => {
            allEmployees = data.employees || [];
            totalPages = data.pagination?.total_pages || 1;
            currentPage = data.pagination?.current_page || 1;
            
            // Pagination bilgisini global olarak sakla
            window.currentPaginationData = data.pagination;
            
            displayEmployees(category);
            displayPagination(category, data.pagination);
            loadingSpinner.style.display = 'none';
            
            // Update category badge counts
            updateCategoryBadges(data.category_counts || {});
        })
        .catch(error => {
            console.error('Error:', error);
            loadingSpinner.style.display = 'none';
            employeesGrid.innerHTML = '<div class="col-12"><div class="alert alert-danger text-center">Error loading employees</div></div>';
            employeesGrid.style.display = '';
        });
}

function updateCategoryBadges(counts) {
    document.getElementById('active-count').textContent = counts.active || 0;
    document.getElementById('school-count').textContent = counts.school || 0;
    document.getElementById('teachers-count').textContent = counts.teachers || 0;
}

function displayEmployees(category) {
    const employeesGrid = document.getElementById(`${category}-employees-grid`);
    const noResults = document.getElementById(`${category}-no-results`);
    const employeeCount = document.getElementById(`${category}-employee-count`);

    // Toplam çalışan sayısını göster (pagination bilgisinden)
    const totalEmployees = window.currentPaginationData?.total_items || allEmployees.length;
    employeeCount.textContent = totalEmployees;

    if (allEmployees.length === 0) {
        employeesGrid.style.display = 'none';
        noResults.style.display = 'block';
        return;
    }

    employeesGrid.innerHTML = '';
    allEmployees.forEach((employee, index) => {
        const card = document.createElement('div');
        card.className = 'col-lg-4 col-md-6 col-sm-12';
        card.style.animationDelay = `${index * 0.1}s`;

        // Email linki - Outlook web ile
        const emailCell = (employee.email && employee.email !== 'N/A') ?
            `<div class="contact-item" onclick="sendEmail('${employee.email}', '${employee.name} ${employee.last_name}', event);">
                <i class="fas fa-envelope me-1 text-primary"></i>
                <span class="text-primary" style="cursor: pointer;">${employee.email}</span>
            </div>` : 
            `<div class="contact-item">
                <i class="fas fa-envelope-slash me-1 text-muted"></i>
                <span class="text-muted">No email</span>
            </div>`;

        const phoneCell = (employee.mobile_phone && employee.mobile_phone !== 'N/A') ?
            `<div class="contact-item" onclick="callPhone('${employee.mobile_phone}', event);">
                <i class="fas fa-phone me-1 text-success"></i>
                <span class="text-success" style="cursor: pointer;">${employee.mobile_phone}</span>
            </div>` : 
            `<div class="contact-item">
                <i class="fas fa-phone-slash me-1 text-muted"></i>
                <span class="text-muted">No phone</span>
            </div>`;

        // Department info for display
        const departmentInfo = employee.department ? 
            `<div class="contact-item">
                <i class="fas fa-building me-1 text-info"></i>
                <span class="text-info">${employee.department}</span>
            </div>` : '';

        card.innerHTML = `
            <div class="employee-card" onclick="navigateToEmployee('${employee.name} ${employee.last_name}')">
                <div class="employee-card-header">
                    <div class="employee-photo-container">
                        ${employee.photo_path ? 
                            `<img src="${employee.photo_path}" 
                                 alt="${employee.name} Photo" 
                                 class="employee-photo-large"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                             <div class="employee-avatar-large" style="display: none;">
                                 ${employee.name[0].toUpperCase()}
                             </div>` :
                            `<div class="employee-avatar-large">
                                 ${employee.name[0].toUpperCase()}
                             </div>`
                        }
                    </div>
                    <div class="employee-status">
                        <span class="badge bg-info position-badge">${employee.position}</span>
                    </div>
                </div>
                <div class="employee-card-body">
                    <h5 class="employee-name">${employee.name} ${employee.last_name}</h5>
                    <div class="employee-contacts">
                        ${departmentInfo}
                        ${emailCell}
                        ${phoneCell}
                    </div>
                </div>
                <div class="employee-card-footer">
                    <small class="text-muted">
                        <i class="fas fa-calendar-plus me-1"></i>
                        Joined ${employee.hire_date}
                    </small>
                </div>
            </div>
        `;

        employeesGrid.appendChild(card);
    });

    employeesGrid.style.display = '';
    noResults.style.display = 'none';
}

function displayPagination(category, pagination) {
    const paginationContainer = document.getElementById(`${category}-pagination-container`);
    const paginationList = document.getElementById(`${category}-pagination-list`);
    
    if (!pagination || pagination.total_pages <= 1) {
        paginationContainer.style.display = 'none';
        return;
    }

    paginationList.innerHTML = '';
    
    const currentPage = pagination.current_page;
    const totalPages = pagination.total_pages;
    
    // Previous button
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPage <= 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `
        <a class="page-link" href="#" onclick="changePage('${category}', ${currentPage - 1}); return false;">
            <i class="fas fa-chevron-left"></i> Previous
        </a>
    `;
    paginationList.appendChild(prevLi);
    
    // Page numbers
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, currentPage + 2);
    
    if (startPage > 1) {
        const firstLi = document.createElement('li');
        firstLi.className = 'page-item';
        firstLi.innerHTML = `<a class="page-link" href="#" onclick="changePage('${category}', 1); return false;">1</a>`;
        paginationList.appendChild(firstLi);
        
        if (startPage > 2) {
            const dotsLi = document.createElement('li');
            dotsLi.className = 'page-item disabled';
            dotsLi.innerHTML = `<span class="page-link">...</span>`;
            paginationList.appendChild(dotsLi);
        }
    }
    
    for (let i = startPage; i <= endPage; i++) {
        const pageLi = document.createElement('li');
        pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
        pageLi.innerHTML = `<a class="page-link" href="#" onclick="changePage('${category}', ${i}); return false;">${i}</a>`;
        paginationList.appendChild(pageLi);
    }
    
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            const dotsLi = document.createElement('li');
            dotsLi.className = 'page-item disabled';
            dotsLi.innerHTML = `<span class="page-link">...</span>`;
            paginationList.appendChild(dotsLi);
        }
        
        const lastLi = document.createElement('li');
        lastLi.className = 'page-item';
        lastLi.innerHTML = `<a class="page-link" href="#" onclick="changePage('${category}', ${totalPages}); return false;">${totalPages}</a>`;
        paginationList.appendChild(lastLi);
    }
    
    // Next button
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPage >= totalPages ? 'disabled' : ''}`;
    nextLi.innerHTML = `
        <a class="page-link" href="#" onclick="changePage('${category}', ${currentPage + 1}); return false;">
            Next <i class="fas fa-chevron-right"></i>
        </a>
    `;
    paginationList.appendChild(nextLi);
    
    paginationContainer.style.display = 'flex';
}

function changePage(category, page) {
    if (page < 1 || page > totalPages) return;
    fetchEmployees(category, currentSearchTerm, page);
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function navigateToEmployee(employeeName) {
    window.location.href = `/employee_logs?employee_search=${encodeURIComponent(employeeName)}`;
}

function sendEmail(email, employeeName, event) {
    event.stopPropagation();
    console.log('Opening Outlook for email:', email);
    
    // Subject ve body parametreleri
    const subject = encodeURIComponent(`HR System - ${employeeName}`);
    const body = encodeURIComponent(`Hello ${employeeName},\n\n\n\nBest regards,\nHR Team`);
    
    // Outlook web compose sayfasına git
    const outlookUrl = `https://outlook.live.com/mail/0/deeplink/compose?to=${encodeURIComponent(email)}&subject=${subject}&body=${body}`;
    window.open(outlookUrl, '_blank');
}

function callPhone(phone, event) {
    event.stopPropagation();
    console.log('Calling phone:', phone);
    
    try {
        window.location.href = `tel:${phone}`;
    } catch (e) {
        try {
            window.open(`tel:${phone}`, '_self');
        } catch (e2) {
            alert(`Please call: ${phone}`);
        }
    }
}

function performSearch() {
    const searchInput = document.getElementById('employee-search');
    const searchTerm = searchInput.value;

    const url = new URL(window.location);
    if (searchTerm) {
        url.searchParams.set('search', searchTerm);
    } else {
        url.searchParams.delete('search');
    }
    url.searchParams.delete('page'); // Reset page when searching
    window.history.replaceState({}, '', url);

    // Current active category'de arama yap
    fetchEmployees(currentCategory, searchTerm, 1);
}

// Tab change handler
function handleTabChange(category) {
    currentCategory = category;
    const searchInput = document.getElementById('employee-search');
    fetchEmployees(category, searchInput.value, 1);
}

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('employee-search');
    const searchButton = document.getElementById('search-button');

    const urlParams = new URLSearchParams(window.location.search);
    const searchParam = urlParams.get('search');
    const pageParam = parseInt(urlParams.get('page')) || 1;

    // Initialize with active employees
    if (searchParam && searchParam.trim() !== '') {
        searchInput.value = searchParam;
        fetchEmployees('active', searchParam, pageParam);
    } else {
        fetchEmployees('active', '', pageParam);
    }

    // Search event handlers
    searchButton.addEventListener('click', performSearch);
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            performSearch();
        }
    });

    // Tab change event handlers
    document.getElementById('active-tab').addEventListener('click', () => handleTabChange('active'));
    document.getElementById('school-tab').addEventListener('click', () => handleTabChange('school'));
    document.getElementById('teachers-tab').addEventListener('click', () => handleTabChange('teacher'));

    searchInput.focus();
});
</script>

<style>
/* Category Tabs */
.category-tabs .nav-link {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 92, 246, 0.1);
    color: #6B7280;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 15px;
    margin: 0 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.category-tabs .nav-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.category-tabs .nav-link.active {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-color: #8B5CF6;
    color: white;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.category-tabs .nav-link .badge {
    margin-left: 8px;
    font-size: 12px;
    padding: 4px 8px;
}

.category-tabs .nav-link.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Modern Employee Cards */
.employee-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.employee-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

.employee-card-header {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px 20px 20px;
    text-align: center;
}

.employee-photo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.employee-photo-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.employee-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 28px;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.employee-status {
    position: absolute;
    top: 15px;
    right: 15px;
}

.position-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1F2937 !important;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.employee-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.employee-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.3;
}

.employee-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 10px;
    transition: all 0.2s ease;
    font-size: 14px;
    margin-bottom: 8px;
}

.contact-item:hover {
    background: rgba(139, 92, 246, 0.1);
    transform: translateX(5px);
}

.contact-item:last-child {
    margin-bottom: 0;
}

.employee-contact-link {
    color: inherit !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    width: 100%;
}

.employee-contact-link:hover {
    color: #8B5CF6 !important;
}

.employee-card-footer {
    padding: 15px 20px;
    background: rgba(139, 92, 246, 0.03);
    border-top: 1px solid rgba(139, 92, 246, 0.1);
    text-align: center;
}

/* Loading and No Results */
[id$="-loading-spinner"] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[id$="-no-results"] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Search and Filter Cards */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-tabs .nav-link {
        padding: 12px 15px;
        margin: 0 2px;
        font-size: 14px;
        min-height: 50px;
    }
    
    .employee-card-header {
        padding: 20px 15px 15px;
    }
    
    .employee-photo-large,
    .employee-avatar-large {
        width: 60px;
        height: 60px;
    }
    
    .employee-avatar-large {
        font-size: 20px;
    }
    
    .employee-name {
        font-size: 1.1rem;
    }
    
    .employee-card-body {
        padding: 15px;
    }
    
    .contact-item {
        font-size: 13px;
        padding: 6px 10px;
    }
}

@media (max-width: 576px) {
    .category-tabs .nav-link {
        padding: 10px 12px;
        font-size: 12px;
        min-height: 45px;
    }
    
    .category-tabs .nav-link i {
        display: none;
    }
    
    .employee-photo-large,
    .employee-avatar-large {
        width: 50px;
        height: 50px;
    }
    
    .employee-avatar-large {
        font-size: 18px;
    }
    
    .employee-name {
        font-size: 1rem;
    }
}

/* Animation */
.employee-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for cards */
.employee-card:nth-child(1) { animation-delay: 0.1s; }
.employee-card:nth-child(2) { animation-delay: 0.2s; }
.employee-card:nth-child(3) { animation-delay: 0.3s; }
.employee-card:nth-child(4) { animation-delay: 0.4s; }
.employee-card:nth-child(5) { animation-delay: 0.5s; }
.employee-card:nth-child(6) { animation-delay: 0.6s; }

/* Pagination Styles */
.pagination {
    margin: 0;
}

.pagination .page-link {
    color: #8B5CF6;
    border: 2px solid rgba(139, 92, 246, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    margin: 0 4px;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pagination .page-link:hover {
    color: white;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-color: #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.pagination .page-item.active .page-link {
    color: white;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-color: #8B5CF6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background: rgba(248, 249, 250, 0.8);
    border-color: rgba(139, 92, 246, 0.1);
    cursor: not-allowed;
}

.pagination .page-item.disabled .page-link:hover {
    transform: none;
    box-shadow: none;
}

[id$="-pagination-container"] {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 16px;
}
</style>
{% endblock %}