{% extends "users/base.html" %}
{% block content %}
<div class="container mt-5">
    <form method="post" action="{% url 'apply' %}">
        {% csrf_token %}
        <div class="dropdown mt-3 mb-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              Select Leave Type
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#" data-value="Sick Leave">Sick Leave</a></li>
              <li><a class="dropdown-item" href="#" data-value="Annual Leave">Annual Leave</a></li>
              <li><a class="dropdown-item" href="#" data-value="Maternity Leave">Maternity Leave</a></li>
              <li><a class="dropdown-item" href="#" data-value="Paternity Leave">Paternity Leave</a></li>
            </ul>
            <input type="hidden" id="leaveType" name="leave_type">
        </div>

        <div class="row mb-3">
            <div class="col-md-6">
              <label for="startDate" class="form-label">Start Date and Time</label>
              <input type="date" id="startDate" name="startDate" class="form-control">
            </div>
            <div class="col-md-6">
              <label for="endDate" class="form-label">End Date and Time</label>
              <input type="date" id="endDate" name="endDate" class="form-control">
            </div>
        </div>

        <div class="mb-3">
            <label for="message" class="form-label">Reason:</label>
            <textarea id="message" name="message" class="form-control" rows="4"></textarea>
        </div>
        
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-danger ms-4" aria-label="Cancel">Cancel</button>
    </form>
</div>

<script>
    // JavaScript to update hidden input when dropdown item is selected
    document.querySelectorAll('.dropdown-item').forEach(function(item) {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            var leaveType = this.getAttribute('data-value');
            document.getElementById('dropdownMenuButton').innerText = leaveType;
            document.getElementById('leaveType').value = leaveType;
        });
    });
</script>
{% endblock %}