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

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

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock %}

{% block content %}
<div class="col-lg-12">
    <h1 class="page-header text-center">Leave of Absence - HR Dashboard</h1>

    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-12 text-right">
            <a href="{% url 'aa_loa:index' %}" class="btn btn-primary">Go to Player Dashboard</a>
        </div>
    </div>

    <div class="row">
        <!-- Proxy Submit -->
        <div class="col-md-4">
            <div class="panel panel-warning">
                <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">Submit Proxy LOA</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- All LOAs -->
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">All LOAs</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped 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="label label-default">Cancelled</span>
                                    {% elif loa.is_active %}
                                        <span class="label label-success">Active</span>
                                    {% elif loa.is_future %}
                                        <span class="label label-info">Upcoming</span>
                                    {% else %}
                                        <span class="label label-default">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>>"
        });

        // 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 %}