{% extends '_include/base.html.twig' %}

{% block title %}Employees · ERP Starz{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb__item" aria-current="page">Employees</li>
        </ul>
    </nav>
{% endblock %}

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

{% block page_actions %}
    <a href="{{ path('app_employee_info_new') }}" class="btn btn--primary">
        <i class="fa fa-plus" aria-hidden="true"></i> New Employee
    </a>
    <a href="{{ path('app_employee_info_export_excel') }}" class="btn btn--secondary">
        <i class="fa fa-file-excel-o" aria-hidden="true"></i> Export Excel
    </a>
    <a href="{{ path('app_employee_info_export_csv') }}" class="btn btn--secondary">
        <i class="fa fa-file-text-o" aria-hidden="true"></i> Export CSV
    </a>
{% endblock %}

{% block content %}
{% set currency = display_currency() %}
    <div class="card">
        <div class="card__header">
            <h3 class="card__title">Employee List</h3>
            <p class="tone-muted">Active Employees: {{ activeEmp }}/{{ employee_infos|length }}</p>
        </div>
        <div class="card__body">
            <table id="employeesTable" class="data-table table-full">
                <thead>
                <tr>
                    <th scope="col">Photo</th>
                    <th scope="col">Registration N°</th>
                    <th scope="col">Full Name</th>
                    <th scope="col">Birth Date</th>
                    <th scope="col">Gender</th>
                    <th scope="col">Gov. ID</th>
                    <th scope="col">Category</th>
                    <th scope="col">Salary Type</th>
                    <th scope="col" class="text-right">Salary Base</th>
                    <th scope="col">Active</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
                </thead>
                <tbody>
                    {% for employee_info in employee_infos %}
                    <tr>
                        <td>
                            {% if employee_info.photo is null %}
                                <i class="fa fa-user fa-2x tone-muted" aria-hidden="true"></i>
                            {% else %}
                                <img src="{{ asset(HR_photo~'/'~employee_info.photo ) }}" alt="{{ employee_info.firstName }}" class="avatar-sm" loading="lazy">
                            {% endif %}
                        </td>
                            <td>{{ employee_info.registrationNbr }}</td>
                            <td>{{ employee_info.firstName }} {{ employee_info.lastName }}</td>
                            <td>{{ employee_info.birthDate ? employee_info.birthDate|date('Y-m-d') : '' }}</td>
                            <td>{{ employee_info.gender }}</td>
                            <td>{{ employee_info.govIdNbr|slice(-3) }}</td>
                            <td>{{ employee_info.category }}</td>
                            <td>
                                {% if employee_info.salaryType=='F' %}
                                    Fix-Transfer
                                {% elseif employee_info.salaryType=='FC' %}
                                    Fix-Cache
                                {% elseif employee_info.salaryType=='VV' %}
                                    Variable-Transfer
                                {% elseif employee_info.salaryType=='V' %}
                                    Variable-Cache
                                {% else %}
                                    Other
                                {% endif %}
                            </td>
                            <td class="text-right mono">{{ employee_info.salaryBase|format_currency(currency) }}</td>
                        <td>
                            <button type="button"
                                    class="toggle-status status-dot"
                                    data-id="{{ employee_info.id }}"
                                    data-status="{{ employee_info.isActive ? 'active' : 'inactive' }}"
                                    title="{{ employee_info.isActive ? 'Active' : 'Inactive' }}"
                                    aria-label="Toggle employee status">
                            </button>
                        </td>
                            <td class="text-center">
                                <div class="action-inline">
                                    <a href="{{ path('app_employee_info_show', {'id': employee_info.id}) }}" class="btn btn--secondary btn--sm" title="View" aria-label="View employee"><i class="fa fa-search" aria-hidden="true"></i></a>
                                    <a href="{{ path('app_employee_paie', {'id': employee_info.id}) }}" class="btn btn--secondary btn--sm js-pdf-export" title="Print" aria-label="Print payslip" target="_blank"><i class="fa fa-print" aria-hidden="true"></i></a>
                                    <a href="{{ path('app_employee_info_edit', {'id': employee_info.id}) }}" class="btn btn--secondary btn--sm" title="Edit" aria-label="Edit employee"><i class="fa fa-edit" aria-hidden="true"></i></a>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn--secondary btn--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Actions" aria-label="Employee actions">
                                            <i class="fa fa-cogs" aria-hidden="true"></i>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="{{ path('app_employee_leave_new', {'employeeId': employee_info.id}) }}"> <i class="fa fa-plus" aria-hidden="true"> </i> Add Leave</a>
                                            <a class="dropdown-item" href="{{ path('app_employee_contract_new', {'employeeId': employee_info.id}) }}"> <i class="fa fa-plus" aria-hidden="true"> </i> Add Contract</a>
                                            <a class="dropdown-item" href="{{ path('app_employee_cnss_new', {'employeeId': employee_info.id}) }}"><i class="fa fa-plus" aria-hidden="true"> </i> Add Tax Info</a>
                                            <a class="dropdown-item" href="{{ path('app_employee_note_new', {'employeeId': employee_info.id}) }}"><i class="fa fa-plus" aria-hidden="true"> </i> Add Note</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="11" class="align-center tone-muted">No employees found</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if pagination is defined %}
            {% include '_include/_pagination.html.twig' %}
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {#datatable#}
    <link href="{{ asset('assets/lib/DataTables/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/lib/DataTables/datatables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#employeesTable').DataTable({
                pageLength: 25,
                order: [[1, 'asc']],
                responsive: true
            });
        });
    </script>
    {#end datatable#}

    <script>
        {# Change status script #}
        document.querySelectorAll('.toggle-status').forEach(function(element) {
            element.addEventListener('click', function(event) {
                event.preventDefault();

                var id = this.getAttribute('data-id');
                var status = this.getAttribute('data-status');

                // Toggle the status (active -> inactive or inactive -> active)
                var newStatus = status === 'active' ? 'inactive' : 'active';

                var xhr = new XMLHttpRequest();
                xhr.open('GET', '/HR_module/employee/toggle-status/' + id, true);

                // Add the CSRF token to the request headers
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token("toggle_status") }}');

                var btn = this;
                xhr.onload = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // Update the status and background color
                        btn.setAttribute('data-status', newStatus);
                        btn.title = newStatus === 'active' ? 'Active' : 'Inactive';
                    }
                };
                xhr.send();
            });
        });
    </script>

{% endblock %}