{% extends "users/base.html" %}
{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
          Leave Balance
        </div>
        <div class="card-body">
            <p><strong>Annual Leave:</strong> {{ leave_balance.annual_leave }} days</p>
            <p><strong>Sick Leave:</strong> {{ leave_balance.sick_leave }} days</p>
            <p><strong>Other Leave:</strong> {{ leave_balance.other_leave }} days</p>

            <!-- Placeholder for pie chart/bar graph -->
            <div id="leaveChart" class="my-4">
                <canvas id="leaveChartCanvas"></canvas>
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
          Recent Leave Transactions
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for leave in recent_leaves %}
                    <tr>
                        <td>{{ leave.start_date }}</td>
                        <td>{{ leave.leave_type.name }}</td>
                        <td>{{ leave.end_date|date:"Y-m-d" }}</td>
                        <td>{{ leave.status }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4">No recent leave transactions.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Include Chart.js for the pie chart -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var ctx = document.getElementById('leaveChartCanvas').getContext('2d');
    var leaveChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Annual Leave', 'Sick Leave', 'Other Leave'],
            datasets: [{
                data: [
                    {{ leave_balance.annual_leave }},
                    {{ leave_balance.sick_leave }},
                    {{ leave_balance.other_leave }}
                ],
                backgroundColor: ['#007bff', '#28a745', '#ffc107'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
</script>
{% endblock %}