{% 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">Designation 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 %}

    <!-- Form -->
    <form method="POST" class="row g-3 mb-4">
        <input type="hidden" name="id" id="desg_id">
        <div class="col-md-6">
            <label for="desg_title" class="form-label">Designation Title</label>
            <input type="text" class="form-control" name="title" id="desg_title" required placeholder="Enter Designation">
        </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">Designation</th>
                    <th scope="col" style="width: 180px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for desg in designations.items %}
                <tr>
                    <td>{{ desg.title }}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary me-2" onclick="editDesg('{{ desg.id }}', '{{ desg.title }}')">Edit</button>
                        <form method="POST" action="{{ url_for('master.delete_designation', id=desg.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 designations.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('master.manage_designations', page=designations.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 designations.iter_pages() %}
                {% if page_num %}
                    {% if page_num == designations.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_designations', 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 designations.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('master.manage_designations', page=designations.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 editDesg(id, title) {
    document.getElementById('desg_id').value = id;
    document.getElementById('desg_title').value = title;
}
function resetForm() {
    document.getElementById('desg_id').value = '';
    document.getElementById('desg_title').value = '';
}
</script>
{% endblock %}