{% extends 'base.html' %}
{% block content %}
<head>
    <title>Add District</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='js/district.js') }}"></script>
    <script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
</head>
<body>

<!-- Button Container to Center Buttons -->
<div class="button-container">
    <button id="addButton" class="action-button">Add</button>
    <button id="displayButton" class="action-button">Display</button>
</div>

<div id="addForm" style="display: none;">
    <h2>Add District</h2>
    <form id="districtForm" method="POST">
        <label for="state_Id">State :</label>
        <select name="state_Id" id="state_Id" required>
            <option value="" disabled selected>Select State</option>
            {% for state in states %}
            <option value="{{ state[0] }}">{{ state[1] }}</option>
            {% endfor %}
        </select>

        <label>Enter District :</label>
        <input type="text" id="district_Name" name="district_Name" placeholder="District Name" required>
        <span id="districtMessage"></span>

        <button type="submit" id="submitButton" disabled>Add District</button>
    </form>
</div>

<div id="addTable" style="display: none;">
    <div class="search-container">
        <h2>Display Districts</h2>
        <input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()">
    </div>

   <table id="sortableTable" border="1">
        <tr>
            <th>District ID</th>
            <th class="sortable-header">
                District Name
                <span class="sort-buttons">
                        <span class="sort-asc">⬆️</span>
                        <span class="sort-desc">⬇️</span>
                    </span></th>
            <th class="sortable-header">
                State Name
                <span class="sort-buttons">
                        <span class="sort-asc">⬆️</span>
                        <span class="sort-desc">⬇️</span>
                    </span></th>

            <th>Edit District</th>
            <th>Delete District</th>
        </tr>
        {% for district in districtdata %}
        <tr>
            <td>{{ district[0] }}</td>
            <td>{{ district[1] }}</td>
            <td>{{ district[2] }}</td>
            <td>
                <a href="{{ url_for('district.edit_district', district_id=district[0]) }}">
                    <img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" alt="Edit"
                         class="icon">
                </a>
            </td>
            <td>
                <a href="{{ url_for('district.delete_district', district_id=district[0]) }}"
                   onclick="return confirm('Are you sure you want to delete this district?')">
                    <img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" alt="Delete"
                         class="icon">
                </a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

</body>
{% endblock %}