{% extends "admin_base.html" %}
{% import "macros/user_cell.html" as user_cell %}

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

{% block extra_head %}
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
{% endblock %}

{% block admin_content %}
<div class="attendance-page">
    <div class="attendance-toolbar">
        <h1>Employees</h1>
        <button class="blocks-button blocks-button-primary" type="button" data-open-modal="employee-create-modal">+ Create Employee</button>
    </div>

    <div id="employee-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Create Employee</h3>
                <button class="close-btn" type="button" data-close-modal>&times;</button>
            </div>
            <div class="modal-body">
        <form id="employee-create-form" data-form="employee-create" class="attendance-form-grid">
            <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-employees-create">
            <label>Employee Code <input name="employee_code" required class="blocks-input"></label>
            <label>Full Name <input name="full_name" required class="blocks-input"></label>
            <label>Phone <input name="phone" class="blocks-input"></label>
            <label>Email <input name="email" class="blocks-input"></label>
            <label>Team
                <input name="team_name" list="team-master-list" class="blocks-input">
            </label>
            <label>Designation
                <input name="designation" list="designation-master-list" class="blocks-input">
            </label>
            <label>Linked User
                <select name="linked_user_id" class="blocks-input">
                    <option value="">Not linked</option>
                    {% for u in users %}
                    <option value="{{ u.id }}">{{ u.name | default(value="User " ~ u.id) }}{% if u.email %} ({{ u.email }}){% endif %}</option>
                    {% endfor %}
                </select>
            </label>
            <label>Entitlement Profile
                <select name="entitlement_profile_id" class="blocks-input">
                    <option value="">Not assigned</option>
                    {% for p in entitlement_profiles %}
                    <option value="{{ p.id }}">{{ p.name }}</option>
                    {% endfor %}
                </select>
            </label>
            <label><input name="is_active" type="checkbox" checked> Active</label>
        </form>
            </div>
            <div class="modal-footer">
                <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                <button class="blocks-button blocks-button-primary" type="submit" form="employee-create-form">Create Employee</button>
            </div>
        </div>
    </div>

    <div class="attendance-table-wrap">
        <table class="blocks-admin-table responsive-table">
            <thead><tr><th>Code</th><th>Name</th><th>User</th><th>Team</th><th>Designation</th><th>Entitlement</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td data-label="Code">{{ item.employee_code }}</td>
                    <td data-label="Name">{{ item.full_name }}</td>
                    <td data-label="User">
                        {% if item.linked_user_id %}
                        {{ user_cell::render(name=item.linked_user_name, email=item.linked_user_email, avatar=item.linked_user_avatar | default(value="")) }}
                        {% else %}
                        <span class="text-muted">Not linked</span>
                        {% endif %}
                    </td>
                    <td data-label="Team">{{ item.team_name }}</td>
                    <td data-label="Designation">{{ item.designation }}</td>
                    <td data-label="Entitlement">{{ item.entitlement_profile_name | default(value="-") }}</td>
                    <td data-label="Status">
                        {% if item.is_active == 1 %}
                        <span class="status-pill ok">Active</span>
                        {% else %}
                        <span class="status-pill bad">Inactive</span>
                        {% endif %}
                    </td>
                    <td data-label="Actions">
                        <div class="attendance-toolbar">
                            <button class="blocks-button blocks-button-secondary" type="button" 
                                    data-open-modal="employee-edit-modal"
                                    data-id="{{ item.id }}"
                                    data-employee_code="{{ item.employee_code }}"
                                    data-full_name="{{ item.full_name }}"
                                    data-phone="{{ item.phone }}"
                                    data-email="{{ item.email }}"
                                    data-team_name="{{ item.team_name }}"
                                    data-designation="{{ item.designation }}"
                                    data-linked_user_id="{{ item.linked_user_id | default(value='') }}"
                                    data-entitlement_profile_id="{{ item.entitlement_profile_id | default(value='') }}"
                                    data-is_active="{{ item.is_active == 1 }}">Edit</button>

                            <form data-form="employee-delete">
                                <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-employees-delete/{{ item.id }}">
                                <button class="blocks-button blocks-button-danger" type="submit">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="employee-edit-modal" class="crud-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Employee</h3>
            <button class="close-btn" type="button" data-close-modal>&times;</button>
        </div>
        <div class="modal-body">
            <form id="employee-edit-form" data-form="employee-update" class="attendance-form-grid">
                <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-employees-update">
                <label>Employee Code <input name="employee_code" required class="blocks-input"></label>
                <label>Full Name <input name="full_name" required class="blocks-input"></label>
                <label>Phone <input name="phone" class="blocks-input"></label>
                <label>Email <input name="email" class="blocks-input"></label>
                <label>Team
                    <input name="team_name" list="team-master-list" class="blocks-input">
                </label>
                <label>Designation
                    <input name="designation" list="designation-master-list" class="blocks-input">
                </label>
                <label>Linked User
                    <select name="linked_user_id" class="blocks-input">
                        <option value="">Not linked</option>
                        {% for u in users %}
                        <option value="{{ u.id }}">{{ u.name | default(value="User " ~ u.id) }}{% if u.email %} ({{ u.email }}){% endif %}</option>
                        {% endfor %}
                    </select>
                </label>
                <label>Entitlement Profile
                    <select name="entitlement_profile_id" class="blocks-input">
                        <option value="">Not assigned</option>
                        {% for p in entitlement_profiles %}
                        <option value="{{ p.id }}">{{ p.name }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label><input name="is_active" type="checkbox"> Active</label>
            </form>
        </div>
        <div class="modal-footer">
            <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
            <button class="blocks-button blocks-button-primary" type="submit" form="employee-edit-form">Save Changes</button>
        </div>
    </div>
</div>

<datalist id="team-master-list">
    {% for row in teams %}
    <option value="{{ row.name }}"></option>
    {% endfor %}
</datalist>
<datalist id="designation-master-list">
    {% for row in designations %}
    <option value="{{ row.name }}"></option>
    {% endfor %}
</datalist>
{% endblock %}

{% block scripts %}
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endblock %}