{% extends "payroll/base.html" %}
{% block content %}
<style>
.department-page {
    padding: 1.2rem 1.2rem 2rem;
}
.department-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.department-toolbar h1 {
    font-size: 2.4rem;
    margin: 0;
}
.department-actions {
    display: flex;
    gap: .45rem;
    align-items: center;
    flex-wrap: wrap;
}
.department-table-wrap {
    overflow-x: auto;
}
.department-table {
    width: 100%;
    border-collapse: collapse;
}
.department-table th {
    background: #505b63;
    color: #fff;
    padding: .65rem .5rem;
    white-space: nowrap;
}
.department-table td {
    padding: .55rem .5rem;
    border-bottom: 1px solid #dce0e3;
}
.department-table tbody tr:nth-child(odd) {
    background: #f1f1f1;
}
.department-table tbody tr:nth-child(even) {
    background: #fff;
}
.department-table .action-cell {
    white-space: nowrap;
}
.department-modal .modal-dialog {
    max-width: 650px;
}
.department-modal label {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .3rem;
}
.department-modal .form-control {
    border-radius: 0;
}
.department-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .9rem 0;
}
</style>

<div class="department-page">
    <div class="department-toolbar">
        <h1>Department</h1>

        <div class="department-actions">
            <form method="get" class="d-flex gap-2">
                <input
                    class="form-control"
                    type="search"
                    name="q"
                    value="{{ q }}"
                    placeholder="Search department or manager..."
                    style="min-width:260px"
                >
                <button class="btn btn-secondary" type="submit">
                    Search
                </button>
            </form>

            <button
                class="btn btn-secondary"
                type="button"
                onclick="openDepartmentModal()"
            >
                Add Department
            </button>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div
                class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show"
                role="alert"
            >
                {{ message }}
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close"
                ></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="department-table-wrap">
        <table class="department-table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Department Name</th>
                    <th>Manager</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                {% for row in page_obj %}
                    <tr>
                        <td>
                            {{ page_obj.start_index|add:forloop.counter0 }}
                        </td>

                        <td>{{ row.dept_name|default:"-" }}</td>

                        <td>{{ row.manager|default:"-" }}</td>

                        <td class="action-cell">
                            <button
                                class="btn btn-sm btn-secondary js-edit-department"
                                type="button"
                                title="Edit"
                                data-id="{{ row.id }}"
                                data-dept-name="{{ row.dept_name|default_if_none:'' }}"
                                data-manager="{{ row.manager|default_if_none:'' }}"
                            >
                                <i class="bi bi-pencil-square"></i>
                            </button>

                            <form
                                method="post"
                                class="d-inline"
                                onsubmit="return confirm('Delete this department?')"
                            >
                                {% csrf_token %}

                                <input
                                    type="hidden"
                                    name="action"
                                    value="delete"
                                >

                                <input
                                    type="hidden"
                                    name="record_id"
                                    value="{{ row.id }}"
                                >

                                <button
                                    class="btn btn-sm btn-danger"
                                    type="submit"
                                    title="Delete"
                                >
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>

                {% empty %}
                    <tr>
                        <td colspan="4" class="text-center py-4">
                            No department data found.
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="department-pagination">
        <span>
            Showing {{ page_obj.start_index|default:0 }}–{{ page_obj.end_index|default:0 }}
            of {{ total_records }}
        </span>

        <nav aria-label="Department pagination">
            <ul class="pagination pagination-sm mb-0">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?q={{ q|urlencode }}&page=1">
                            First
                        </a>
                    </li>

                    <li class="page-item">
                        <a
                            class="page-link"
                            href="?q={{ q|urlencode }}&page={{ page_obj.previous_page_number }}"
                        >
                            Prev
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">First</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">Prev</span>
                    </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link">
                        {{ page_obj.number|default:1 }}
                    </span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a
                            class="page-link"
                            href="?q={{ q|urlencode }}&page={{ page_obj.next_page_number }}"
                        >
                            Next
                        </a>
                    </li>

                    <li class="page-item">
                        <a
                            class="page-link"
                            href="?q={{ q|urlencode }}&page={{ page_obj.paginator.num_pages }}"
                        >
                            Last
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">Next</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">Last</span>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- Add / Edit Department Modal -->
<div
    class="modal fade department-modal"
    id="departmentModal"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form
                method="post"
                action="{% url 'payroll:payroll_department' %}"
                id="departmentForm"
            >
                {% csrf_token %}

                <input
                    type="hidden"
                    name="record_id"
                    id="department_record_id"
                >

                <input
                    type="hidden"
                    name="action"
                    value="save"
                >

                <div class="modal-header">
                    <h5
                        class="modal-title"
                        id="departmentModalTitle"
                    >
                        Add Department
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                    ></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="dept_name">
                            Department Name *
                        </label>

                        <input
                            class="form-control"
                            id="dept_name"
                            name="dept_name"
                            required
                        >
                    </div>

                    <div class="mb-3">
                        <label for="manager">
                            Manager
                        </label>

                        <input
                            class="form-control"
                            id="manager"
                            name="manager"
                        >
                    </div>
                </div>

                <div class="modal-footer">
                    <button
                        type="button"
                        class="btn btn-outline-secondary"
                        data-bs-dismiss="modal"
                    >
                        Cancel
                    </button>

                    <button
                        type="submit"
                        class="btn btn-primary"
                    >
                        Save
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
function getDepartmentModal() {
    return bootstrap.Modal.getOrCreateInstance(
        document.getElementById('departmentModal')
    );
}

function openDepartmentModal() {
    document.getElementById('departmentForm').reset();

    document.getElementById('department_record_id').value = '';

    document.getElementById('departmentModalTitle').textContent =
        'Add Department';

    getDepartmentModal().show();
}

function editDepartmentFromButton(button) {
    document.getElementById('departmentForm').reset();

    document.getElementById('department_record_id').value =
        button.dataset.id || '';

    document.getElementById('dept_name').value =
        button.dataset.deptName || '';

    document.getElementById('manager').value =
        button.dataset.manager || '';

    document.getElementById('departmentModalTitle').textContent =
        'Edit Department';

    getDepartmentModal().show();
}

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.js-edit-department').forEach(
        function (button) {
            button.addEventListener('click', function () {
                editDepartmentFromButton(button);
            });
        }
    );
});
</script>

{% endblock %}