{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load django_bootstrap5 %}
{% load static %}

{% block page_title %}{% translate "LOA HR Dashboard" %}{% endblock page_title %}

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
    <link rel="stylesheet" href="{% static 'aa_loa/css/aa_loa.css' %}?v=0.0.4">
{% endblock %}

{% block content %}
<div class="col-lg-12">
    <h3 class="text-center" style="margin-top: 20px; margin-bottom: 20px;">Leave of Absence - HR Dashboard</h3>

    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <div class="panel panel-default metric-card text-center" style="cursor: pointer; border-bottom: 4px solid #28a745;" onclick="filterTable('Active')">
                <div class="panel-heading">
                    <h3 class="panel-title">Active</h3>
                </div>
                <div class="panel-body">
                    <h2 style="margin:0;">{{ active_count }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default metric-card text-center" style="cursor: pointer; border-bottom: 4px solid #17a2b8;" onclick="filterTable('Upcoming')">
                <div class="panel-heading">
                    <h3 class="panel-title">Upcoming</h3>
                </div>
                <div class="panel-body">
                    <h2 style="margin:0;">{{ future_count }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default metric-card text-center" style="cursor: pointer; border-bottom: 4px solid #007bff;" onclick="filterTable('')">
                <div class="panel-heading">
                    <h3 class="panel-title">Total Processed</h3>
                </div>
                <div class="panel-body">
                    <h2 style="margin:0;">{{ total_count }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3 text-right">
            <a href="{% url 'aa_loa:index' %}" class="btn btn-primary btn-lg" style="margin-top: 15px;">Go to Player Dashboard</a>
        </div>
    </div>

    <div class="row">
        <!-- Proxy Submit -->
        <div class="col-md-4">
            <div class="panel panel-default modern-card">
                <div class="panel-heading">
                    <h3 class="panel-title">Proxy Submit LOA</h3>
                </div>
                <div class="panel-body">
                    <form method="post" action="{% url 'aa_loa:hr_dashboard' %}">
                        {% csrf_token %}
                        {% bootstrap_form form %}
                        <br>
                        <button type="submit" class="btn btn-warning btn-block btn-modern">Submit Proxy LOA</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- All LOAs -->
        <div class="col-md-8">
            <div class="panel panel-default modern-card">
                <div class="panel-heading">
                    <h3 class="panel-title">All LOAs</h3>
                </div>
                <div class="panel-body">
                    <table class="table modern-table table-hover" id="loaTable">
                        <thead>
                            <tr>
                                <th>Player</th>
                                <th>Status</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Reason</th>
                                <th>Proxy</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loa in loas %}
                            <tr>
                                <td>{{ loa.user.username }}</td>
                                <td>
                                    {% if loa.is_revoked %}
                                        <span class="status-badge status-cancelled">Cancelled</span>
                                    {% elif loa.is_active %}
                                        <span class="status-badge status-active">Active</span>
                                    {% elif loa.is_future %}
                                        <span class="status-badge status-upcoming">Upcoming</span>
                                    {% else %}
                                        <span class="status-badge status-past">Past</span>
                                    {% endif %}
                                </td>
                                <td>{{ loa.start_date }}</td>
                                <td>{{ loa.end_date }}</td>
                                <td>{{ loa.reason|default:"-" }}</td>
                                <td>{{ loa.submitted_by.username|default:"-" }}</td>
                                <td>
                                    {% if not loa.is_revoked and not loa.is_past %}
                                    <!-- Trigger Modal -->
                                    <button type="button" class="btn btn-xs btn-danger" data-bs-toggle="modal" data-bs-target="#hrRevokeModal{{ loa.id }}">
                                        Cancel
                                    </button>

                                    <!-- Modal -->
                                    <div class="modal fade" id="hrRevokeModal{{ loa.id }}" tabindex="-1" aria-labelledby="hrRevokeModalLabel{{ loa.id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="hrRevokeModalLabel{{ loa.id }}">Confirm Cancellation</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Are you sure you want to cancel the Leave of Absence for <strong>{{ loa.user.username }}</strong>?
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Go Back</button>
                                                    <form method="post" action="{% url 'aa_loa:hr_revoke' loa.id %}" style="display:inline;">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-danger">Yes, Cancel LOA</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
<script>
    $(document).ready(function() {
        $('#loaTable').DataTable({
            "order": [[ 2, "desc" ]],
            "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12 mb-2'p>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
        });

        // Function to filter the table based on the metric cards
        window.filterTable = function(status) {
            var table = $('#loaTable').DataTable();
            table.search(status).draw();
        };

        // When start_date changes, update the min attribute of end_date
        $('#id_start_date').on('change', function() {
            var startDate = $(this).val();
            if (startDate) {
                $('#id_end_date').attr('min', startDate);

                // If end_date is now before start_date, clear it
                var endDate = $('#id_end_date').val();
                if (endDate && endDate < startDate) {
                    $('#id_end_date').val('');
                }
            }
        });
    });
</script>
{% endblock %}