{% extends "base.html" %}
{% block title %}Employees Record{% endblock %}
{% block page_title %}Employees Record{% endblock %}
{% block content %}
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.3s;
    }
    .stat-card:hover {
        transform: translateY(-3px);
    }
    .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #FF6B35;
    }
    .stat-label {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
    }
    .filter-bar {
        background: white;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }
    .filter-bar input, .filter-bar select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        flex: 1;
        min-width: 140px;
        font-size: 13px;
    }
    .btn-primary {
        background: linear-gradient(135deg, #FF6B35, #F7C948);
        color: white;
        padding: 8px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
    }
    .btn-add {
        background: #28a745;
        color: white;
        padding: 8px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 20px;
        font-size: 13px;
    }
    .table-container {
        background: white;
        border-radius: 15px;
        overflow-x: auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .employees-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        min-width: 900px;
    }
    .employees-table th, .employees-table td {
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .employees-table th {
        background: #FF6B35;
        color: white;
        font-weight: 600;
        font-size: 12px;
        position: sticky;
        top: 0;
    }
    .employees-table tr:hover {
        background: #f8f9fa;
    }
    .status-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }
    .status-Permanent { background: #28a745; color: white; }
    .status-Probation { background: #ffc107; color: #333; }
    .status-Intern { background: #17a2b8; color: white; }
    .status-Notice { background: #fd7e14; color: white; }
    .status-Left { background: #dc3545; color: white; }
    .action-btn {
        padding: 4px 8px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 11px;
        margin: 2px;
        display: inline-block;
    }
    .btn-edit { background: #ffc107; color: #333; }
    .btn-delete { background: #dc3545; color: white; }
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        overflow-y: auto;
    }
    .modal-content {
        background: white;
        max-width: 550px;
        margin: 50px auto;
        padding: 25px;
        border-radius: 15px;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #eee;
    }
    .close {
        font-size: 24px;
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #333;
    }
    .form-group input, .form-group select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
    }
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .btn-submit {
        background: #28a745;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 6px;
        width: 100%;
        cursor: pointer;
        font-size: 14px;
        margin-top: 10px;
    }
    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: 1fr 1fr; }
        .filter-bar { flex-direction: column; }
        .filter-bar input, .filter-bar select, .filter-bar button { width: 100%; }
        .form-row { grid-template-columns: 1fr; }
        .employees-table th, .employees-table td { padding: 8px; font-size: 11px; }
    }
</style>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-number" id="totalCount">{{ total }}</div>
        <div class="stat-label">Total Employees</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="permanentCount">{{ permanent }}</div>
        <div class="stat-label">Permanent</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="probationCount">{{ probation }}</div>
        <div class="stat-label">Probation</div>
    </div>
    <div class="stat-card">
        <div class="stat-number" id="internCount">{{ intern }}</div>
        <div class="stat-label">Intern</div>
    </div>
</div>

<div class="filter-bar">
    <input type="text" id="searchInput" placeholder="🔍 Search by name, CNIC, position..." onkeyup="filterTable()">
    <select id="teamFilter" onchange="filterTable()">
        <option value="all">🏢 All Teams</option>
        <option value="Webbuggs">Webbuggs</option>
        <option value="Simpli Plugin">Simpli Plugin</option>
        <option value="BuggByte Studios">BuggByte Studios</option>
    </select>
    <select id="statusFilter" onchange="filterTable()">
        <option value="all">📊 All Status</option>
        <option value="Permanent">✅ Permanent</option>
        <option value="Probation">📋 Probation</option>
        <option value="Intern">🎓 Intern</option>
        <option value="Notice Period">⚠️ Notice Period</option>
        <option value="Left">❌ Left</option>
    </select>
    <button class="btn-primary" onclick="clearFilters()">🗑️ Clear</button>
</div>

<button class="btn-add" onclick="openAddModal()">➕ Add New Employee</button>

<div class="table-container">
    <table class="employees-table" id="employeeTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Team</th>
                <th>Position</th>
                <th>DOJ</th>
                <th>Status</th>
                <th>CNIC</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="employeeTableBody">
            {% if employees and employees|length > 0 %}
                {% for e in employees %}
                <tr class="employee-row" 
                    data-name="{{ e[1].lower() }}" 
                    data-cnic="{{ e[13].lower() if e[13] else '' }}" 
                    data-team="{{ e[5].lower() if e[5] else '' }}" 
                    data-status="{{ e[11].lower() if e[11] else 'probation' }}">
                    <td style="width: 45px;">{{ e[0] }}</td>
                    <td><strong>{{ e[1] }}</strong></td>
                    <td><span style="background:#e8f4f8; padding:3px 10px; border-radius:15px; font-size:11px;">🏢 {{ e[5] if e[5] else '-' }}</span></td>
                    <td>{{ e[4] if e[4] else '-' }}</td>
                    <td style="font-size: 12px;">{{ e[6] if e[6] else '-' }}</td>
                    <td>
                        {% set emp_type = e[11] if e[11] else 'Probation' %}
                        {% if emp_type == 'Permanent' %}
                            <span class="status-badge status-Permanent">✅ Permanent</span>
                        {% elif emp_type == 'Probation' %}
                            <span class="status-badge status-Probation">📋 Probation</span>
                        {% elif emp_type == 'Intern' %}
                            <span class="status-badge status-Intern">🎓 Intern</span>
                        {% elif emp_type == 'Notice Period' %}
                            <span class="status-badge status-Notice">⚠️ Notice Period</span>
                        {% elif emp_type == 'Left' %}
                            <span class="status-badge status-Left">❌ Left</span>
                        {% else %}
                            <span class="status-badge">{{ emp_type }}</span>
                        {% endif %}
                    </td>
                    <td style="font-family: monospace; font-size: 11px;">{{ e[13] if e[13] else '-' }}</td>
                    <td style="font-size: 12px;">{{ e[2] if e[2] else '-' }}</td>
                    <td style="font-size: 12px;">{{ e[3] if e[3] else '-' }}</td>
                    <td>
                        <a href="/edit-employee/{{ e[0] }}" class="action-btn btn-edit">✏️ Edit</a>
                        <a href="/delete-employee/{{ e[0] }}" class="action-btn btn-delete" onclick="return confirm('Delete this employee?')">🗑️ Del</a>
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr><td colspan="10" style="text-align:center; padding:40px;">👥 No employees yet. Add employees or hire from ATS!</td></tr>
            {% endif %}
        </tbody>
    </table>
</div>

<!-- Add Employee Modal -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>➕ Add New Employee</h3>
            <span class="close" onclick="closeAddModal()">&times;</span>
        </div>
        <form method="post" action="/add-employee">
            <div class="form-row">
                <div class="form-group"><label>Full Name *</label><input type="text" name="name" required></div>
                <div class="form-group"><label>Email</label><input type="email" name="email"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Phone</label><input type="text" name="phone"></div>
                <div class="form-group"><label>Position *</label><input type="text" name="position" required></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Team/Department</label>
                    <select name="department">
                        <option value="">-- Select Team --</option>
                        <option value="Webbuggs">🏢 Webbuggs</option>
                        <option value="Simpli Plugin">🚀 Simpli Plugin</option>
                        <option value="BuggByte Studios">🎮 BuggByte Studios</option>
                    </select>
                </div>
                <div class="form-group"><label>Date of Joining *</label><input type="date" name="joining_date" required></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Basic Salary</label><input type="number" name="salary" step="0.01"></div>
                <div class="form-group"><label>Petrol Allowance</label><input type="number" name="petrol_allowance" step="0.01" value="0"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Location</label><input type="text" name="location"></div>
                <div class="form-group"><label>CNIC</label><input type="text" name="cnic" placeholder="12345-1234567-1"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Bank Name</label><input type="text" name="bank_name"></div>
                <div class="form-group"><label>Account Number</label><input type="text" name="account_number"></div>
            </div>
            <div class="form-group"><label>Employee Type</label>
                <select name="employee_type">
                    <option value="Permanent">✅ Permanent</option>
                    <option value="Probation">📋 Probation</option>
                    <option value="Intern">🎓 Intern</option>
                    <option value="Notice Period">⚠️ Notice Period</option>
                    <option value="Left">❌ Left</option>
                </select>
            </div>
            <button type="submit" class="btn-submit">✅ Add Employee</button>
        </form>
    </div>
</div>

<script>
    function filterTable() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const teamFilter = document.getElementById('teamFilter').value.toLowerCase();
        const statusFilter = document.getElementById('statusFilter').value.toLowerCase();
        const rows = document.querySelectorAll('.employee-row');
        let visibleCount = 0;
        let permanentCount = 0;
        let probationCount = 0;
        let internCount = 0;
        
        rows.forEach(row => {
            const name = row.getAttribute('data-name') || '';
            const cnic = row.getAttribute('data-cnic') || '';
            const team = row.getAttribute('data-team') || '';
            const status = row.getAttribute('data-status') || '';
            
            let matchesSearch = searchTerm === '' || name.includes(searchTerm) || cnic.includes(searchTerm);
            let matchesTeam = teamFilter === 'all' || team === teamFilter;
            let matchesStatus = statusFilter === 'all' || status === statusFilter;
            
            if (matchesSearch && matchesTeam && matchesStatus) {
                row.style.display = '';
                visibleCount++;
                if (status === 'permanent') permanentCount++;
                if (status === 'probation') probationCount++;
                if (status === 'intern') internCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        document.getElementById('totalCount').innerText = visibleCount;
        document.getElementById('permanentCount').innerText = permanentCount;
        document.getElementById('probationCount').innerText = probationCount;
        document.getElementById('internCount').innerText = internCount;
        
        const noDataRow = document.querySelector('#employeeTableBody tr:last-child');
        if (visibleCount === 0 && rows.length > 0) {
            if (!document.getElementById('noDataRow')) {
                const tbody = document.getElementById('employeeTableBody');
                const newRow = document.createElement('tr');
                newRow.id = 'noDataRow';
                newRow.innerHTML = '<td colspan="10" style="text-align:center; padding:40px;">🔍 No employees match your search criteria!</td>';
                tbody.appendChild(newRow);
            }
        } else {
            const noData = document.getElementById('noDataRow');
            if (noData) noData.remove();
        }
    }
    
    function clearFilters() {
        document.getElementById('searchInput').value = '';
        document.getElementById('teamFilter').value = 'all';
        document.getElementById('statusFilter').value = 'all';
        filterTable();
    }
    
    function openAddModal() { document.getElementById('addModal').style.display = 'block'; }
    function closeAddModal() { document.getElementById('addModal').style.display = 'none'; }
    
    window.onclick = function(e) { if (e.target == document.getElementById('addModal')) closeAddModal(); }
    
    // ✅ Page load pe stats update karne ke liye
    document.addEventListener('DOMContentLoaded', function() {
        filterTable();
    });
</script>
{% endblock %}