{% extends '_include/base.html.twig' %}
{% set currency = display_currency() %}

{% block title %}HR Management{% endblock %}

{% block content %}
<div class="forms">
    <h2 class="title1">HR Management Dashboard</h2>
    <div class="card">
        <div class="card__header">
            <ul class="breadcrumb breadcrumb__list">
                <li><a href="{{ path('dashboard') }}">Home</a></li>
                <li class="active">HR Management</li>
            </ul>
        </div>
        <div class="card__body">
            
            <!-- HR Statistics -->
    <div class="row">
        <div class="col-md-3">
            <div class="card p-3">
                <div class="metric-card">
                    <h2 class="dymo-label metric-card__label">Pending Absences</h2>
                    <p class="metric-card__value">{{ stats.pending_absences ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3">
                <div class="metric-card">
                    <h2 class="dymo-label metric-card__label">Active Suspensions</h2>
                    <p class="metric-card__value">{{ stats.active_suspensions ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3">
                <div class="metric-card">
                    <h2 class="dymo-label metric-card__label">Ongoing Trainings</h2>
                    <p class="metric-card__value">{{ stats.ongoing_trainings ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3">
                <div class="metric-card">
                    <h2 class="dymo-label metric-card__label">Pending Advances</h2>
                    <p class="metric-card__value">{{ stats.pending_advances ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

            <div class="clearfix"></div>
            <hr>

            <!-- Quick Actions -->
            <div class="row">
                <div class="col-md-12">
                    <h4>Quick Actions</h4>
                    <div class="row">
                        <div class="col-md-3">
                            <a href="{{ path('app_hr_management_absences') }}" class="btn btn-lg btn-block btn-primary">
                                <i class="fa fa-calendar-times-o" aria-hidden="true"></i><br>
                                Manage Absences
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ path('app_hr_management_suspensions') }}" class="btn btn-lg btn-block btn-secondary">
                                <i class="fa fa-pause" aria-hidden="true"></i><br>
                                Manage Suspensions
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ path('app_hr_management_training') }}" class="btn btn-lg btn-block btn-primary">
                                <i class="fa fa-graduation-cap" aria-hidden="true"></i><br>
                                Training Management
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ path('app_hr_management_advances') }}" class="btn btn-lg btn-block btn-secondary">
                                <i class="fa fa-money" aria-hidden="true"></i><br>
                                Employee Advances
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
            <hr>

            <!-- Recent Activities -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card__header">
                            <h4><i class="fa fa-clock-o" aria-hidden="true"></i> Recent Absence Requests</h4>
                        </div>
                        <div class="card__body">
                            {% if recent_absences is defined and recent_absences|length > 0 %}
                                <div class="table-responsive">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Employee</th>
                                                <th>Type</th>
                                                <th>Duration</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for absence in recent_absences %}
                                                <tr>
                                                    <td>
                                                        {{ absence.employee.firstName }} {{ absence.employee.lastName }}
                                                    </td>
                                                    <td>
                                                        <span class="status-pill" data-status="info">{{ absence.type }}</span>
                                                    </td>
                                                    <td>
                                                        {{ absence.startDate|date('m/d') }} - {{ absence.endDate|date('m/d') }}
                                                    </td>
                                                    <td>
                                                        {% if absence.isApproved is null %}
                                                            <span class="status-pill" data-status="warning">Pending</span>
                                                        {% elseif absence.isApproved %}
                                                            <span class="status-pill" data-status="success">Approved</span>
                                                        {% else %}
                                                            <span class="status-pill" data-status="danger">Rejected</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if absence.isApproved is null %}
                                                            <a href="{{ path('app_employee_absence_edit', {'id': absence.id}) }}" class="btn btn-sm btn-primary">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </a>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="tone-muted">No recent absence requests</p>
                            {% endif %}
                        </div>
                        <div class="card__footer">
                            <a href="{{ path('app_hr_management_absences') }}" class="btn btn-sm btn-primary">View All Absences</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card__header">
                            <h4><i class="fa fa-graduation-cap" aria-hidden="true"></i> Upcoming Trainings</h4>
                        </div>
                        <div class="card__body">
                            {% if upcoming_trainings is defined and upcoming_trainings|length > 0 %}
                                <div class="table-responsive">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Program</th>
                                                <th>Start Date</th>
                                                <th>Participants</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for training in upcoming_trainings %}
                                                <tr>
                                                    <td>
                                                        {{ training.title }}
                                                    </td>
                                                    <td>
                                                        {{ training.startDate|date('Y-m-d') }}
                                                    </td>
                                                    <td>
                                                        <span class="status-pill" data-status="info">{{ training.enrollments|length }}</span>
                                                    </td>
                                                    <td>
                                                        <span class="status-pill" data-status="{{ training.isActive ? 'success' : 'info' }}">
                                                            {{ training.isActive ? 'Active' : 'Inactive' }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <a href="{{ path('app_training_program_show', {'id': training.id}) }}" class="btn btn-sm btn-secondary">
                                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="tone-muted">No upcoming trainings</p>
                            {% endif %}
                        </div>
                        <div class="card__footer">
                            <a href="{{ path('app_hr_management_training') }}" class="btn btn-sm btn-primary">Manage Training Programs</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Employee Advances and Suspensions -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card__header">
                            <h4><i class="fa fa-money" aria-hidden="true"></i> Recent Advance Requests</h4>
                        </div>
                        <div class="card__body">
                            {% if recent_advances is defined and recent_advances|length > 0 %}
                                <div class="table-responsive">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Employee</th>
                                                <th>Amount</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for advance in recent_advances %}
                                                <tr>
                                                    <td>
                                                        {{ advance.employee.firstName }} {{ advance.employee.lastName }}
                                                    </td>
                                                    <td>
                                                        <strong>{{ advance.amount|format_currency(currency) }}</strong>
                                                    </td>
                                                    <td>
                                                        {{ advance.requestDate|date('Y-m-d') }}
                                                    </td>
                                                    <td>
                                                        {% if advance.isApproved is null %}
                                                            <span class="status-pill" data-status="warning">Pending</span>
                                                        {% elseif advance.isApproved %}
                                                            <span class="status-pill" data-status="success">Approved</span>
                                                        {% else %}
                                                            <span class="status-pill" data-status="danger">Rejected</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if advance.isApproved is null %}
                                                            <a href="{{ path('app_employee_advance_edit', {'id': advance.id}) }}" class="btn btn-sm btn-primary">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </a>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="tone-muted">No recent advance requests</p>
                            {% endif %}
                        </div>
                        <div class="card__footer">
                            <a href="{{ path('app_hr_management_advances') }}" class="btn btn-sm btn-secondary">View All Advances</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card__header">
                            <h4><i class="fa fa-pause" aria-hidden="true"></i> Active Suspensions</h4>
                        </div>
                        <div class="card__body">
                            {% if active_suspensions is defined and active_suspensions|length > 0 %}
                                <div class="table-responsive">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Employee</th>
                                                <th>Reason</th>
                                                <th>Period</th>
                                                <th>Type</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for suspension in active_suspensions %}
                                                <tr>
                                                    <td>
                                                        {{ suspension.employee.firstName }} {{ suspension.employee.lastName }}
                                                    </td>
                                                    <td>
                                                        {{ suspension.reason|slice(0, 30) }}{% if suspension.reason|length > 30 %}...{% endif %}
                                                    </td>
                                                    <td>
                                                        {{ suspension.startDate|date('m/d') }} - {{ suspension.endDate|date('m/d') }}
                                                    </td>
                                                    <td>
                                                        <span class="status-pill" data-status="{{ suspension.isPaid ? 'info' : 'warning' }}">
                                                            {{ suspension.isPaid ? 'Paid' : 'Unpaid' }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <a href="{{ path('app_employee_suspension_show', {'id': suspension.id}) }}" class="btn btn-sm btn-secondary">
                                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="tone-muted">No active suspensions</p>
                            {% endif %}
                        </div>
                        <div class="card__footer">
                            <a href="{{ path('app_hr_management_suspensions') }}" class="btn btn-sm btn-secondary">Manage Suspensions</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Auto-refresh dashboard every 30 seconds
        setInterval(function() {
            // Only refresh if user is still on the page
            if (document.visibilityState === 'visible') {
                location.reload();
            }
        }, 30000);
    </script>
{% endblock %}