{% extends 'base.html' %}
{% block content %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Village Management</title>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='js/village.js') }}"></script>
    <script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
</head>

<body>

<!-- ===================== BUTTONS ===================== -->
<div class="button-container">
    <button id="addButton" class="action-button">Add</button>
    <button id="displayButton" class="action-button">Display</button>
</div>

<!-- ===================== ADD FORM ===================== -->
<div id="addForm" style="display: none;">
    <div class="container">
        <div class="form-block">
            <h2>Add a New Village</h2>
            <form id="villageForm" method="POST">
                <label for="state_Id">State:</label>
                <select id="state_Id" name="state_Id" required>
                    <option value="" disabled selected>Select State</option>
                    {% for state in states %}
                        <option value="{{ state[0] }}">{{ state[1] }}</option>
                    {% endfor %}
                </select>

                <label for="district_Id">District:</label>
                <select id="district_Id" name="district_Id" required disabled>
                    <option value="" disabled selected>Select District</option>
                </select>

                <label for="block_Id">Block:</label>
                <select id="block_Id" name="block_Id" required disabled>
                    <option value="" disabled selected>Select Block</option>
                </select>

                <label for="Village_Name">Village Name:</label>
                <input type="text" id="Village_Name" name="Village_Name" placeholder="Enter Village Name" required>
                <span id="villageMessage"></span>

                <button type="submit" id="submitVillage" disabled>Add Village</button>
            </form>
        </div>
    </div>
</div>

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

    <table id="sortableTable" border="1">
        <tr>
            <th>Village Sr No</th>
            <th class="sortable-header">
                Village Name
                <span class="sort-buttons">
                    <span class="sort-asc">⬆️</span>
                    <span class="sort-desc">⬇️</span>
                </span>
            </th>
            <th class="sortable-header">
                Block Name
                <span class="sort-buttons">
                    <span class="sort-asc">⬆️</span>
                    <span class="sort-desc">⬇️</span>
                </span>
            </th>
            <th>Update</th>
            <th>Delete</th>
        </tr>

        {% for village in villages %}
        <tr>
            <td>{{ village[0] }}</td>
            <td>{{ village[1] }}</td>
            <td>{{ village[2] }}</td>

            <td>
                <a href="{{ url_for('village.edit_village', village_id=village[0]) }}">
                    <img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" class="icon">
                </a>
            </td>

            <td>
                <a href="{{ url_for('village.delete_village', village_id=village[0]) }}"
                   onclick="return confirm('Are you sure you want to delete this village?');">
                    <img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" class="icon">
                </a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

<!-- ===================== BROWSER ALERT FLASH ===================== -->
<script>
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            alert({{ message|tojson|safe }});
        {% endfor %}
    {% endif %}
{% endwith %}
</script>

</body>
{% endblock %}