{% extends "users/base.html" %}
{% block title %}My Domain{% endblock title %}
{% block content %}


<div id="responseContainer" style="position: relative; display: none;"> <!-- Container for the response -->
        <nav aria-label="breadcrumb">
                  <ol class="breadcrumb breadcrumb-inverse">
                   
           <li class="breadcrumb-item active" aria-current="page" style="margin-top:10px">SSL Installing, please wait.....</li> 
			<li> <div class="sk-wave">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
          
        </div>
</li> 
       </ol>
                </nav>
    </div>
	
	

<div id="alertContainer" class="alert alert-success alert-dismissible fade show" role="alert" style="display: none;">
    <div id="message"></div>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
</div>	

 <div class="card card-default">
      <div class="card-header">
        <h2>List of Domains</h2>
		
        

      </div>
    
   <div class="card-body">
  
   
   
   
   
   
   <div class="row">
   <div class="col-xl-6">
   <a class="mb-1 btn btn-pill btn-success" href="{% url 'users-domain' %}" role="button" style="text-transform: none;">+ Add Domain</a>
</div>
<div class="col-xl-6 d-flex justify-content-end">
    <form action="{% url 'domain_list' %}" method="post" class="form-inline mb-3">
        <div class="form-group mr-2">
            <input type="text" id="search" name="search" class="form-control" placeholder="Search for domains...">
        </div>
        {% csrf_token %}
        <button type="submit" class="btn btn-danger">Filter</button>
    </form>
	</div>
	</div>
	
	 <div class="p-6">
            
    <ul class="nav nav-tabs" id="typeTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-type="" href="#" role="tab">All Domain</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-type="domain" href="#" role="tab">Domain</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-type="subdomain" href="#" role="tab">Subdomain</a>
        </li>
    
    </ul>
	</div>
	
<div class="table-responsive">
    <table class="table table-bordered">
        <thead class="thead-light">
            <tr>
                <th>Domain</th>
				 <th>Type</th>
                <th>php</th>
                <th>Path</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="domainTable">
            {% for domain in domains %}
            <tr data-name="{{ domain.type }}" data-type="{{ domain.type }}">
                <td><a href="http://{{ domain.domain }}" target="_blank" rel="noopener noreferrer">{{ domain.domain }}</a></td>
				 <td>
  {% if domain.type == 'domain' %}
    <span class="badge badge-success">Domain</span>
  {% elif domain.type == 'subdomain' %}
    <span class="badge badge-primary">Subdomain</span>
  {% else %}
    <span class="badge badge-secondary">{{ domain.type }}</span>
  {% endif %}
</td>

                <td>{{ domain.php }}</td>
                <td><a href="{% url 'file_manager_home' %}" target="_blank"><span class="mdi mdi-home" style="font-size:20px"></span><span id="domainPath_{{ forloop.counter }}">{{ domain.path }}</span></a></td>
                <td>
                    <a href="{% url 'domain_edit' domain.id %}" class="btn btn-primary btn-sm">Manage</a>

                     <a href="{% url 'domain_preview' domain.id %}" class="btn btn-success btn-sm" target="_blank">Preview</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">No domains found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
    <!-- No Results Message -->
    <div id="noResults" class="text-center text-danger" style="display:none;">No results found.</div>

</div>
</div>



<script>
document.addEventListener("DOMContentLoaded", function () {
    const pathElements = document.querySelectorAll("[id^='domainPath_']");

    pathElements.forEach(element => {
        const originalPath = element.textContent;
        const updatedPath = removeHomePrefix(originalPath);
        element.textContent = updatedPath;
    });
});

function removeHomePrefix(path) {
    return path.replace(/^\/home\/{{ user.username }}/, "");
}

window.onload = function() {
const responseDisplay = document.getElementById('responseContainer');
  const alertContainer = document.getElementById('alertContainer');
        const messageDisplay = document.getElementById('message');
    var currentUrl = window.location.href;

    // Use URLSearchParams to check if the 'id' parameter is present
    var urlParams = new URLSearchParams(window.location.search);

    if (urlParams.has('id')) {
        // Retrieve the value of the 'id' parameter
        var idValue = urlParams.get('id');
        console.log('ID found:', idValue);
 setTimeout(function() {
 responseDisplay.style.display = 'inline-block';
            // Call the URL (replace '/your-url' with your actual URL)
            fetch('/domain_list_ssl_first/' + idValue, {
                method: 'GET', // or 'POST' depending on your requirement
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.text(); // Retrieve response as plain text
            })
            .then(data => {
                console.log('Response:', data);
                responseDisplay.style.display = 'none';
				if (data.includes('success')) {
            // Set alert for success
            alertContainer.className = "alert alert-success alert-dismissible fade show";
            messageDisplay.innerText = data; // Displaying success message
        } else {
            // Set alert for error
            alertContainer.className = "alert alert-danger alert-dismissible fade show";
            messageDisplay.innerText = data; // Displaying error message
        }
		
		alertContainer.style.display = "block";
		 setTimeout(function() {
            window.location.href = '/domain_list'; // Change this to your desired URL
        }, 5000); // 5000 milliseconds = 5 seconds
		
		
		
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }, 1000); // 5000 milliseconds = 5 seconds

    } else {
        console.log('No ID parameter found.');
    }
    
}

    document.addEventListener("DOMContentLoaded", function() {
        
        const typeTabs = document.querySelectorAll('#typeTabs .nav-link');
        const tableRows = document.querySelectorAll('#domainTable tr');
       const noResults = document.getElementById('noResults');
        let selectedType = '';

       function filterTable() {
           
            let visibleRows = 0;

            tableRows.forEach(row => {
                const name = row.getAttribute('data-name').toLowerCase();
                const type = row.getAttribute('data-type');

                
                const matchesType = !selectedType || type === selectedType;

                if (matchesType) {
                    row.style.display = '';
                    visibleRows++;
                } else {
                    row.style.display = 'none';
                }
            });

            // Show or hide the "No results" message
            noResults.style.display = visibleRows === 0 ? 'block' : 'none';
        }

        // Add click event listener to tabs
        typeTabs.forEach(tab => {
            tab.addEventListener('click', function(event) {
                event.preventDefault();
                selectedType = this.getAttribute('data-type');

                // Remove 'active' class from all tabs and add to the clicked tab
                typeTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                filterTable(); // Filter table on tab click
            });
        });

       
    });
</script>


{% endblock content %}

{% include "users/footer.html" %}