{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="text-primary">Department Master</h3>
    </div>

    <!-- Flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <!-- Add/Edit Form -->
    <form method="POST" class="row g-3 mb-4">
        <input type="hidden" name="id" id="dept_id">
        <div class="col-md-6">
            <label for="dept_name" class="form-label">Department Name</label>
            <input type="text" class="form-control" name="name" id="dept_name" required placeholder="Enter department">
        </div>
        <div class="col-md-6 align-self-end">
            <button type="submit" class="btn btn-success">Save</button>
            <button type="reset" class="btn btn-secondary" onclick="resetForm()">Reset</button>
        </div>
    </form>

    <!-- Filter -->
    <form method="GET" class="row g-2 mb-3">
        <div class="col-md-4">
            <input type="text" name="search" class="form-control" placeholder="Search..." value="{{ request.args.get('search', '') }}">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
    </form>

    <!-- Table -->
    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th scope="col">Department Name</th>
                    <th scope="col" style="width: 180px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for dept in departments.items %}
                <tr>
                    <td>{{ dept.name }}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="editDept('{{ dept.id }}', '{{ dept.name }}')">Edit</button>
                        <form method="POST" action="{{ url_for('master.delete_department', id=dept.id) }}" style="display:inline;">
                            <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if departments.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('master.manage_departments', page=departments.prev_num, search=request.args.get('search')) }}">Previous</a>
            </li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">Previous</span></li>
            {% endif %}

            {% for page_num in departments.iter_pages() %}
                {% if page_num %}
                    {% if page_num == departments.page %}
                        <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                    {% else %}
                        <li class="page-item"><a class="page-link" href="{{ url_for('master.manage_departments', page=page_num, search=request.args.get('search')) }}">{{ page_num }}</a></li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled"><span class="page-link">…</span></li>
                {% endif %}
            {% endfor %}

            {% if departments.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('master.manage_departments', page=departments.next_num, search=request.args.get('search')) }}">Next</a>
            </li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">Next</span></li>
            {% endif %}
        </ul>
    </nav>
</div>

<script>
function editDept(id, name) {
    document.getElementById('dept_id').value = id;
    document.getElementById('dept_name').value = name;
}
function resetForm() {
    document.getElementById('dept_id').value = '';
    document.getElementById('dept_name').value = '';
}
</script>
{% endblock %}