{% 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>
<title>Seer | User Compatibility</title>
<!-- html code -->

	    <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">User Compatibility</h2>
		    					<p class="mb-0">Welcome to Lorem Ipsum Admin Dashboard</p>
	    					</div>
							<form action="import-user-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="zodiac-tab" name="zodiac-tab" data-bs-toggle="tab" data-bs-target="#zodiac" type="button" role="tab" aria-controls="zodiac" aria-selected="false">Chinese Zodiac</button>
						  </li>
						  <li class="nav-item" role="presentation">
						    <button class="nav-link" id="element-tab" name="element-tab" data-bs-toggle="tab" data-bs-target="#element" type="button" role="tab" aria-controls="zodiac" aria-selected="false">5 Elements</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">User 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">
									<div class="table-responsive w-100">          
								      <table class="table w-100">
								        <thead>
								          <tr>
								            <th>Female</th>
                                            <th>Male</th>
                                            <th>Compatibility Score</th>
								            <th>Tagline</th>
								            <th>Description</th>
											<th>Action</th>
								          </tr>
								        </thead>
								        <tbody>
										{% for horoscope in all_horoscope_obj%}
								        <tr>
								            <td>{{horoscope.female_horoscope}}</td>
                                            <td>{{horoscope.male_horoscope}}</td>
                                            <td>{{horoscope.compatibility_score}}</td>
								            <td>{{horoscope.tagline}}</td>
								            <td>{{horoscope.description}}</td>
											<td>
												<div class="action-btns">
												  <a href="edit-user-compatibility/{{horoscope.id}}/?compatibility=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="zodiac" role="tabpanel" aria-labelledby="zodiac-tab">
								<div class="table-users">
									<div class="table-responsive w-100">          
								      <table class="table w-100">
								        <thead>
								          <tr>
								            <th>Female</th>
                                            <th>Male</th>
                                            <th>Compatibility Score</th>
								            <th>Tagline</th>
								            <th>Description</th>
											<th>Action</th>
								          </tr>
								        </thead>
								        <tbody>
										{% for chinese in all_chinese_obj%}
								        <tr>
								            <td>{{chinese.female_chinese_zodiac}}</td>
                                            <td>{{chinese.male_chinese_zodiac}}</td>
                                            <td>{{chinese.compatibility_score}}</td>
								            <td>{{chinese.tagline}}</td>
								            <td>{{chinese.description}}</td>
											<td>
												<div class="action-btns">
												  <a href="edit-user-compatibility/{{chinese.id}}/?compatibility=chinese_zodiac" 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_chinese_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_chinese_obj.has_previous %}
												<li><a href="?chinese_zodiac={{ all_chinese_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_chinese_obj.number > 3 %}
                                                <li><a href="?chinese_zodiac=1">1</a></li>
                                                <li class="disabled"><span>...</span></li>
                                                {% endif %}
                                          
												{% for i in all_chinese_obj.paginator.page_range %}
                                                {% if i >= all_chinese_obj.number|add:-2 and i <= all_chinese_obj.number|add:10 %}
												{% if all_chinese_obj.number == i %}
												<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
												{% else %}
												<li><a class="page-link" href="?chinese_zodiac={{ i }}">{{ i }}</a></li>
												{% endif %}
                                                {% endif %}
												{% endfor %}

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

												{% if all_chinese_obj.has_next %}
												<li><a class="page-link" href="?chinese_zodiac={{ all_chinese_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="element" role="tabpanel" aria-labelledby="element-tab">
								<div class="table-users">
									<div class="table-responsive w-100">          
								      <table class="table w-100">
								        <thead>
								          <tr>
								            <th>Female</th>
                                            <th>Male</th>
                                            <th>Compatibility Score</th>
								            <th>Tagline</th>
								            <th>Description</th>
											<th>Action</th>
								          </tr>
								        </thead>
								        <tbody>
										{% for elements in all_five_element_obj%}
								        <tr>
								            <td>{{elements.female_element_name}}</td>
                                            <td>{{elements.male_element_name}}</td>
                                            <td>{{elements.compatibility_score}}</td>
								            <td>{{elements.tagline}}</td>
								            <td>{{elements.description}}</td>
											<td>
												<div class="action-btns">
												  <a href="edit-user-compatibility/{{elements.id}}/?compatibility=five_element" 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_five_element_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_five_element_obj.has_previous %}
												<li><a href="?five_element={{ all_five_element_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_five_element_obj.number > 3 %}
                                                <li><a href="?five_element=1">1</a></li>
                                                <li class="disabled"><span>...</span></li>
                                                {% endif %}
                                          
												{% for i in all_five_element_obj.paginator.page_range %}
                                                {% if i >= all_five_element_obj.number|add:-2 and i <= all_five_element_obj.number|add:10 %}
												{% if all_five_element_obj.number == i %}
												<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
												{% else %}
												<li><a class="page-link" href="?five_element={{ i }}">{{ i }}</a></li>
												{% endif %}
                                                {% endif %}
												{% endfor %}

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

												{% if all_five_element_obj.has_next %}
												<li><a class="page-link" href="?five_element={{ all_five_element_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">
									<div class="table-responsive w-100">          
								      <table class="table w-100">
								        <thead>
								          <tr>
								            <th>Female</th>
                                            <th>Male</th>
                                            <th>Compatibility Score</th>
								            <th>Tagline</th>
								            <th>Description</th>
											<th>Action</th>
								          </tr>
								        </thead>
								        <tbody>
										{% for mbti in all_mbti_obj%}
								        <tr>
								            <td>{{mbti.female_mbti_name}}</td>
                                            <td>{{mbti.male_mbti_name}}</td>
                                            <td>{{mbti.compatibility_score}}</td>
								            <td>{{mbti.tagline}}</td>
								            <td>{{mbti.description}}</td>
											<td>
												<div class="action-btns">
												  <a href="edit-user-compatibility/{{mbti.id}}/?compatibility=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 %}