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

{% block page_title %}{% translate "Leave of Absence" %}{% endblock page_title %}

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

    {% if perms.aa_loa.manage_loa %}
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-12 text-right">
            <a href="{% url 'aa_loa:hr_dashboard' %}" class="btn btn-warning">Go to HR Dashboard</a>
        </div>
    </div>
    {% endif %}

    <div class="row">
        <!-- New LOA Form -->
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Submit LOA</h3>
                </div>
                <div class="panel-body">
                    <form method="post" action="{% url 'aa_loa:index' %}">
                        {% csrf_token %}
                        {% bootstrap_form form %}
                        <br>
                        <button type="submit" class="btn btn-success btn-block">Submit</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Existing LOAs -->
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Your LOAs</h3>
                </div>
                <div class="panel-body">
                    {% if loas %}
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Reason</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loa in loas %}
                            <tr>
                                <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:"-"|truncatechars:50 }}</td>
                                <td>
                                    {% if loa.is_active or loa.is_future %}
                                        <!-- Trigger Modal -->
                                        <button type="button" class="btn btn-xs btn-danger" data-bs-toggle="modal" data-bs-target="#revokeModal{{ loa.id }}">
                                            Return Early / Cancel
                                        </button>

                                        <!-- Modal -->
                                        <div class="modal fade" id="revokeModal{{ loa.id }}" tabindex="-1" aria-labelledby="revokeModalLabel{{ loa.id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="revokeModalLabel{{ 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 return early and cancel this Leave of Absence?
                                                    </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:revoke' loa.id %}" style="display:inline;">
                                                            {% csrf_token %}
                                                            <button type="submit" class="btn btn-danger">Yes, Cancel LOA</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">You have no active or historical LOAs.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
<script>
    $(document).ready(function() {
        // 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 extra_javascript %}