{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<style>
	.select-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  font-size: 16px;
}

.upload-btn {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  font-size: 16px;
}

.file-input-container {
  display: inline-block;
  position: relative;
}

.file-input-container input[type="file"] {
  position: absolute;
  left: -9999px;
}

#selectedFile {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

</style>
<!-- html code -->
<title>Seer | Advisiors Compatibility</title>
<div class="main-content pt-0">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h2 class="topHead">Advisiors Compatibility</h2>
                        <p class="mb-0">Welcome to Lorem Ipsum Admin Dashboard</p>
                    </div>
                    <form action="import-advisor-compatibility" id="import-user-compatibility" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="active_tab" id="activeTabInput" value="">
                        <div class="file-input-container">
                            <input type="file" id="myFileInput" name="myFileInput" style="display: none;" accept=".csv" onchange="handleFileSelect(event)" />
                            <label class="select-btn" for="myFileInput" id="selectCsvBtn">Select CSV</label>
                            <span id="selectedFileName" style="display: none;"></span>
                            <button class="remove-btn" onclick="removeFile(event)" id="removeFileBtn" style="display: none;">&#x2716;</button>
                        </div>
                          <button class="upload-btn" type="submit" id="uploadCsvBtn" style="display: none;">Upload CSV</button>	
                        </form>		
                </div>
            </div>
            <div class="col-12 database-tab py-4">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="horoscope-tab"
                            name="horoscope-tab" data-bs-toggle="tab"
                            data-bs-target="#horoscope" type="button" role="tab"
                            aria-controls="horoscope" aria-selected="true">Horoscope</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="mbti-tab" name="mbti-tab"
                            data-bs-toggle="tab" data-bs-target="#mbti"
                            type="button" role="tab" aria-controls="mbti"
                            aria-selected="false">MBTI</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row new-user-table bookings mt-3">
            <div class="col-12 col-md-12">
                <div class="card dashboard-card">
                    <div class="top-card">
                        <p class="f-18">Advisiors Compatibility</p>
                    </div>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="horoscope"
                            role="tabpanel" aria-labelledby="horoscope-tab">
                            <div class="table-users advisor-compatibl">
                                <div class="table-responsive w-100">
                                    <table class="table w-100">
                                        <thead>
                                            <tr>
                                                <th>Advisiors</th>
                                                <th>User</th>
                                                <th>Score</th>
                                                <th>Tagline</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                
                                            {% for horoscope in all_horoscope_obj%}
                                            <tr>
                                                <td>{{horoscope.advisor}}</td>
                                                <td>{{horoscope.user}}</td>
                                                <td>{{horoscope.compatibility_score}}</td>
                                                <td>{{horoscope.tagline}}</td>
                                                <td>
                                                    <div class="action-btns">
                                                      <a href="edit-advisor-compatibility/{{horoscope.id}}/?advisor=horoscope" class="block-icon" data-toggle="tooltip" data-placement="top" title="Edit"><img src="{% static 'admin/images/edit.png' %}"></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}	
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% if all_horoscope_obj %}
								<!-- Pagination Controls for All Tab -->
								<div class="demo-inline-spacing pagi">
									<div class="pagination justify-content-center">
										<nav aria-label="Page navigation">
											<ul class="pagination">
												{% if all_horoscope_obj.has_previous %}
												<li><a href="?horoscope={{ all_horoscope_obj.previous_page_number }}">&laquo;</a></li>
												{% else %}
												<li class="disabled"><a class="page-link" href="#"><i
															class="bx bx-chevron-left"></i></a></li>
												{% endif %}

                                                {% if all_horoscope_obj.number > 3 %}
                                                <li><a href="?horoscope=1">1</a></li>
                                                <li class="disabled"><span>...</span></li>
                                                {% endif %}
                                          
												{% for i in all_horoscope_obj.paginator.page_range %}
                                                {% if i >= all_horoscope_obj.number|add:-2 and i <= all_horoscope_obj.number|add:10 %}
												{% if all_horoscope_obj.number == i %}
												<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
												{% else %}
												<li><a class="page-link" href="?horoscope={{ i }}">{{ i }}</a></li>
												{% endif %}
                                                {% endif %}
												{% endfor %}

                                                {% if all_horoscope_obj.paginator.num_pages > all_horoscope_obj.number|add:2 %}
                                                <li class="disabled"><span>...</span></li>
                                                <li><a href="?horoscope={{ all_horoscope_obj.paginator.num_pages }}">{{ all_horoscope_obj.paginator.num_pages }}</a></li>
                                                {% endif %}

												{% if all_horoscope_obj.has_next %}
												<li><a class="page-link" href="?horoscope={{ all_horoscope_obj.next_page_number }}">&raquo;</a>
												</li>
												{% else %}
												<li class="disabled"><a href="#" class="page-link"><i
															class="bx bx-chevron-right"></i></a></li>
												{% endif %}
											</ul>
										</nav>
									</div>
								</div>
								{% endif %}
                        </div>
                        <div class="tab-pane fade" id="mbti" role="tabpanel"
                            aria-labelledby="mbti-tab">
                            <div class="table-users advisor-compatibl">
                                <div class="table-responsive w-100">
                                    <table class="table w-100">
                                        <thead>
                                            <tr>
                                                <th>Advisiors</th>
                                                <th>User</th>
                                                <th>Score</th>
                                                <th>Tagline</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                
                                            {% for mbti in all_mbti_obj%}
                                            <tr>
                                                <td>{{mbti.advisor}}</td>
                                                <td>{{mbti.user}}</td>
                                                <td>{{mbti.compatibility_score}}</td>
                                                <td>{{mbti.tagline_for_relationship}}</td>
                                                <td>
                                                    <div class="action-btns">
                                                      <a href="edit-advisor-compatibility/{{mbti.id}}/?advisor=mbti" class="block-icon" data-toggle="tooltip" data-placement="top" title="Edit"><img src="{% static 'admin/images/edit.png' %}"></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}	
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% if all_mbti_obj %}
								<!-- Pagination Controls for All Tab -->
								<div class="demo-inline-spacing pagi">
									<div class="pagination justify-content-center">
										<nav aria-label="Page navigation">
											<ul class="pagination">
												{% if all_mbti_obj.has_previous %}
												<li><a href="?mbti={{ all_mbti_obj.previous_page_number }}">&laquo;</a></li>
												{% else %}
												<li class="disabled"><a class="page-link" href="#"><i
															class="bx bx-chevron-left"></i></a></li>
												{% endif %}

                                                {% if all_mbti_obj.number > 3 %}
                                                <li><a href="?mbti=1">1</a></li>
                                                <li class="disabled"><span>...</span></li>
                                                {% endif %}

												{% for i in all_mbti_obj.paginator.page_range %}
                                                {% if i >= all_mbti_obj.number|add:-2 and i <= all_mbti_obj.number|add:10 %}
												{% if all_mbti_obj.number == i %}
												<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
												{% else %}
												<li><a class="page-link" href="?mbti={{ i }}">{{ i }}</a></li>
												{% endif %}
                                                {% endif %}
												{% endfor %}

                                                {% if all_mbti_obj.paginator.num_pages > all_mbti_obj.number|add:2 %}
                                                <li class="disabled"><span>...</span></li>
                                                <li><a href="?mbti={{ all_mbti_obj.paginator.num_pages }}">{{ all_mbti_obj.paginator.num_pages }}</a></li>
                                                {% endif %}

												{% if all_mbti_obj.has_next %}
												<li><a class="page-link" href="?mbti={{ all_mbti_obj.next_page_number }}">&raquo;</a>
												</li>
												{% else %}
												<li class="disabled"><a href="#" class="page-link"><i
															class="bx bx-chevron-right"></i></a></li>
												{% endif %}
											</ul>
										</nav>
									</div>
								</div>
								{% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->
<script>
function handleFileSelect(event) {
  var fileInput = event.target;
  var selectedFileName = document.getElementById('selectedFileName');
  var removeFileBtn = document.getElementById('removeFileBtn');
  var uploadButton = document.getElementById('uploadCsvBtn');
  var selectButton = document.getElementById('selectCsvBtn');
  var tabName = document.querySelector('.nav-link.active').getAttribute('id');
  document.getElementById('activeTabInput').value = tabName;
  if (fileInput.files.length > 0) {
    var file = fileInput.files[0];
    selectedFileName.textContent = file.name;
    selectedFileName.style.display = 'inline-block';
    removeFileBtn.style.display = 'inline-block';
    uploadButton.style.display = 'block';
    selectButton.style.display = 'none';
  } else {
    selectedFileName.textContent = '';
    selectedFileName.style.display = 'none';
    removeFileBtn.style.display = 'none';
    uploadButton.style.display = 'none';
    selectButton.style.display = 'inline-block';
  }
}
// This function is used when select tab on click
// function setActiveTabInput(tabId) {
//   var activeTabInput = document.getElementById('activeTabInput');
//   activeTabInput.value = tabId;
// }

function removeFile() {
  event.preventDefault();
  var fileInput = document.getElementById('myFileInput');
  var selectedFileName = document.getElementById('selectedFileName');
  var removeFileBtn = document.getElementById('removeFileBtn');
  var uploadButton = document.getElementById('uploadCsvBtn');
  var selectButton = document.getElementById('selectCsvBtn');

  fileInput.value = '';
  selectedFileName.textContent = '';
  selectedFileName.style.display = 'none';
  removeFileBtn.style.display = 'none';
  uploadButton.style.display = 'none';
  selectButton.style.display = 'inline-block';
}

document.addEventListener('DOMContentLoaded', function () {
        // Store the currently active tab in sessionStorage
        const tabButtons = document.querySelectorAll('.nav-link');
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                sessionStorage.setItem('activeTab', button.id);
            });
        });

        // Set the active tab when the page loads
        const activeTabId = sessionStorage.getItem('activeTab') || 'horoscope-tab';
        const activeTabButton = document.getElementById(activeTabId);
        if (activeTabButton) {
            activeTabButton.click();
        }
    });

</script>

<!-- end of js -->
{% endblock %}