{% extends "base.html" %}
{% block title %}Leave Management{% endblock %}
{% block content %}
<h2>📋 Leave Management</h2>
<p style="color:#666; margin-bottom:20px;">View and manage employee leave and WFH requests.</p>

{% if summaries %}
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin-bottom:30px;">
    {% for summary in summaries %}
    <div style="background:white; padding:20px; border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,0.05);">
        <h3 style="margin-bottom:10px;">{{ summary.employee_name }}</h3>
        <p style="margin:0 0 5px; color:#666;">{{ summary.team }} · {{ summary.status }}</p>
        <p style="margin:8px 0; font-weight:bold;">Allowed: {{ summary.max_allowed }}</p>
        <p style="margin:4px 0;">Total Requests: {{ summary.total_requests }}</p>
        <p style="margin:4px 0;">Leaves: {{ summary.leave_requests }}</p>
        <p style="margin:4px 0;">WFH: {{ summary.wfh_requests }}</p>
        <p style="margin:4px 0;">Short Leaves: {{ summary.short_leave_requests }}</p>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Employee summary data table -->
{% if summaries %}
<div class="table-container" style="background:white; padding:20px; border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,0.05); margin-bottom:20px;">
    <h3 style="margin-top:0;">Employee Leave Summary</h3>
    <table style="width:100%; border-collapse:collapse;">
        <thead>
            <tr>
                <th>Employee</th>
                <th>Team</th>
                <th>Status</th>
                <th>Allowed</th>
                <th>Total Leave</th>
                <th>Remaining</th>
                <th>Total WFH</th>
                <th>Total Short Leave</th>
            </tr>
        </thead>
        <tbody>
            {% for s in summaries %}
            {% set remaining = (s.max_allowed or 0) - (s.leave_requests or 0) %}
            <tr>
                <td>{{ s.employee_name or '-' }}</td>
                <td>{{ s.team or '-' }}</td>
                <td>{{ s.status or '-' }}</td>
                <td>{{ s.max_allowed or 0 }}</td>
                <td>{{ s.leave_requests or 0 }}</td>
                <td>{{ remaining if remaining >=0 else 0 }}</td>
                <td>{{ s.wfh_requests or 0 }}</td>
                <td>{{ s.short_leave_requests or 0 }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<div class="table-container" style="background:white; padding:20px; border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,0.05);">
    <table class="attendance-table" style="width:100%; border-collapse:collapse;">
        <thead>
            <tr>
                <th>Employee</th>
                <th>Team</th>
                <th>Type</th>
                <th>From</th>
                <th>To</th>
                <th>Reason</th>
                <th>Status</th>
                <th>Applied On</th>
                <th>Approved By</th>
                <th>Approved On</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if leaves %}
                {% for leave in leaves %}
                <tr>
                    <td>{{ leave.employee_name or '-' }}</td>
                    <td>{{ leave.team or '-' }}</td>
                    <td>{{ leave.leave_type or '-' }}</td>
                    <td>{{ leave.from_date or '-' }}</td>
                    <td>{{ leave.to_date or '-' }}</td>
                    <td>{{ leave.reason or '-' }}</td>
                    <td>
                        {% if leave.status and leave.status|lower == 'approved' %}
                            <span style="color:#28a745; font-weight:bold;">✅ Approved</span>
                        {% elif leave.status and leave.status|lower == 'rejected' %}
                            <span style="color:#dc3545; font-weight:bold;">❌ Rejected</span>
                        {% else %}
                            <span style="color:#ffc107; font-weight:bold;">⏳ Pending</span>
                        {% endif %}
                    </td>
                    <td>{{ leave.applied_on or '-' }}</td>
                    <td>{{ leave.approved_by or '-' }}</td>
                    <td>{{ leave.approved_on or '-' }}</td>
                    <td>
                        {% if leave.status and leave.status|lower == 'pending' %}
                            {% set role = session.get('role', 'Employee') %}
                            {% if role == 'Admin' or role == 'HR' %}
                                <a href="/leave-requests/{{ leave.id }}/approve-hr" style="margin-right:8px; color:#007bff;">Approve (HR)</a>
                            {% endif %}
                            {% if role == 'Admin' or role == 'CTO' %}
                                <a href="/leave-requests/{{ leave.id }}/approve-cto" style="margin-right:8px; color:#28a745;">Approve (CTO)</a>
                            {% endif %}
                            {% if role in ['Admin', 'HR', 'CTO'] %}
                                <a href="/leave-requests/{{ leave.id }}/reject" style="color:#dc3545;">Reject</a>
                            {% endif %}
                        {% else %}
                            <span style="color:#666;">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="11" style="text-align:center; padding:20px; color:#666;">No leave requests found.</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}