{% extends "/base.html" %}

{% block title %} UI Tables {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<style>
/* Base styling for the overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Make sure the overlay is above other elements */
}

/* Loader styling */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Spinner animation keyframes */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
{% endblock stylesheets %}

{% block content %}
{% with messages = flash_messages %}
    {% for message in messages %}
        {% set category, message_text = message %}
        <div class="alert alert-{{ category }}">
            {{ message_text }}
        </div>
    {% endfor %}
{% endwith %}
    <input type="hidden" id="data-source" value="{{ data_source }}">
    <!-- [ Main Content ] start -->
    <section class="pcoded-main-container">
        <div class="pcoded-wrapper">

            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-0"></h5>
                                    </div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="/file_display">File List</a></li>
                                        <li class="breadcrumb-item"><a href="">Edit File </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> 
                                <div class="col-xl-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Edit Excel</h5>
                                        <div class="card-block table-border-style">
                                            <label for="row-count">Rows to Display:</label>
                                            <select id="row-count" onchange="updateButtonHref()">
                                                <option value="{row_count}" {% if row_count != 5 %}style="display:none;"{% endif %}>{{row_count}}</option>
                                                <option value="10" {% if row_count == 10 %}style="display:none;"{% endif %}>10</option>
                                                <option value="20" {% if row_count == 20 %}style="display:none;"{% endif %}>20</option>
                                                <option value="50" {% if row_count == 50 %}style="display:none;"{% endif %}>50</option>
                                                <option value="100" {% if row_count == 100 %}style="display:none;"{% endif %}>100</option>
                                            </select>
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            {% for column in page_data[0].keys() %}
                                                            <th>{{ column }}</th>
                                                            {% endfor %}
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for row in page_data %}
                                                        <tr>
                                                            {% for column, cell_value in row.items() %}
                                                            <td contenteditable="false" data-column="{{ column }}">{{ cell_value }}</td>
                                                            {% endfor %}
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                                            <!-- <div colspan="{{ page_data.columns|length }}" class="text-center mt-3">
                                                                    <button id="saveBtn" title="Save changes" class="btn btn-primary">Save changes</button>
                                                                    <button id="completedfinalchange" class="btn btn-primary">Final Save</button>
                                                                    <button id="uploadBtn" class="btn btn-primary">Upload to Database</button>
                                                             </div>    -->
                                                        <div colspan="{{ page_data.columns|length }}" class="text-center">
                                                                <div>
                                                                    {% if current_page > 1 %}
                                                                    <a href="{{ url_for('users_blueprint.show_data', item_id=item_id, page=current_page - 1, row_count=row_count) }}" class="btn-arrow btn-primary">
                                                                        <i class="fas fa-arrow-left"></i>
                                                                    </a>
                                                                    {% endif %}
                                                                    
                                                                    {% set start_page = current_page - 1 %}
                                                                    {% set end_page = current_page + 1 %}
                                                                    {% set pages_diff = end_page - start_page + 1 %}
                                                                    
                                                                    {% if start_page <= 1 %}
                                                                        {% set end_page = end_page + (2 - start_page) %}
                                                                        {% set start_page = 1 %}
                                                                    {% endif %}
                                                                    
                                                                    {% if end_page > num_pages %}
                                                                        {% set start_page = max(start_page - (end_page - num_pages), 1) %}
                                                                        {% set end_page = num_pages %}
                                                                    {% endif %}
                                                                    
                                                                    {% if start_page > 1 %}
                                                                        <a href="{{ url_for('users_blueprint.show_data', item_id=item_id, page=1, row_count=row_count) }}" class="btn btn-page">1</a>
                                                                        {% if start_page > 2 %}
                                                                            <span class="btn current-page">...</span>
                                                                        {% endif %}
                                                                    {% endif %}
                                                                    
                                                                    {% for page_num in range(start_page, start_page + pages_diff) %}
                                                                        {% if page_num == current_page %}
                                                                            <span class="btn current-page">{{ page_num }}</span>
                                                                        {% else %}
                                                                            <a href="{{ url_for('users_blueprint.show_data', item_id=item_id, page=page_num, row_count=row_count) }}" class="btn btn-page">{{ page_num }}</a>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                    
                                                                    {% if end_page < num_pages %}
                                                                        {% if end_page < num_pages - 1 %}
                                                                            <span class="btn current-page">...</span>
                                                                        {% endif %}
                                                                        <a href="{{ url_for('users_blueprint.show_data', item_id=item_id, page=num_pages, row_count=row_count) }}" class="btn btn-page">{{ num_pages }}</a>
                                                                    {% endif %}
                                                                    
                                                                    {% if current_page < num_pages %}
                                                                    <a href="{{ url_for('users_blueprint.show_data', item_id=item_id, page=current_page + 1, row_count=row_count) }}" class="btn-arrow btn-primary">
                                                                        <i class="fas fa-arrow-right"></i>
                                                                    </a>
                                                                    {% endif %}
                                                                </div>
                                                            </div>

                                                <div class="overlay" id="loadingGif" style="display: none;">
                                                    <div class="loader"></div>
                                                </div>     
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    </section>


    
    <!-- [ Main Content ] end -->

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
    function toggleLoader(show) {
        if (show) {
            $('#loadingGif').show();
        } else {
            $('#loadingGif').hide();
        }
    }

    function updateButtonHref() {
        // Get the selected value from the dropdown
        var selectedValue = document.getElementById("row-count").value;
        
        // Update the href attribute of the button using the selected value
        var editExcelBtn = document.getElementById("edit-excel-btn");
        var item_id = document.getElementById("item_id").value;
        var current_page = document.getElementById("current_page").value;
        window.location.href = "{{ url_for('users_blueprint.show_data', item_id=item_id, page=current_page) }}&row_count=" + selectedValue;
    }
</script>
{% endblock javascripts %}