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



 <div class="card card-default">
      <div class="card-header">
        <h2>List of backup schedule</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 'new_backup' %}"  role="button" style="text-transform: none;">+ Add Backup</a>
</div>
 
<div class="col-xl-6 d-flex align-items-center">
      <label for="maxBackup" class="mr-2 mb-0">Keep Maximum Backups:</label>
      <select id="maxBackup" name="maximum" class="form-control w-auto">
       <option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
<option value="90">90</option>
<option value="95">95</option>
<option value="100">100</option>
<option value="105">105</option>
<option value="110">110</option>
<option value="115">115</option>
<option value="120">120</option>
<option value="125">125</option>
<option value="130">130</option>
<option value="135">135</option>
<option value="140">140</option>
<option value="145">145</option>
<option value="150">150</option>
<option value="155">155</option>
<option value="160">160</option>
<option value="165">165</option>
<option value="170">170</option>
<option value="175">175</option>
<option value="180">180</option>
<option value="185">185</option>
<option value="190">190</option>
<option value="195">195</option>
<option value="200">200</option>
      </select>
    </div>
  

<div id="alert-container" style="display:none;">
    <span id="message-display"></span>
</div>

	</div>
	</div>
	
	
	
	
	<div class="card-body">
<div class="table-responsive">
    <table class="table table-bordered">
        <thead class="thead-light">
            <tr>
                <th>schedule</th>
                <th>type</th>
				<th>Format</th>
                <th>location</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="domainTable">
		 <tr>
                <td>All</td>
                <td>ALL</td>
				<td>All</td>
                <td><span id="domainPath_{{ forloop.counter }}">Local</span></td>
                <td>
				<a href="{% url 'backup_lists' %}" class="btn btn-success btn-sm" >View Backup</a>
                  
                    
                </td>
            </tr>
		
            {% for backupp in backups %}
            <tr>
                <td>Every {{ backupp.schedule }}</td>
                <td>{{ backupp.type }}</td>
				<td>{{ backupp.category }}</td>
                <td><span id="domainPath_{{ forloop.counter }}">{{ backupp.path }}</span></td>
                <td>
				<a href="{% url 'backup_list' backupp.id %}" class="btn btn-success btn-sm" >View Backup</a>
                    <a href="{% url 'backup_delete' backupp.id %}" class="btn btn-primary btn-sm" onclick="return confirm('Are you sure you want to delete this backup schedule ?');">Delete</a>

                    
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">No backup schedule 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', () => {
    const csrfToken = "{{ csrf_token }}";
    const maximumSelect = document.querySelector('[name="maximum"]');
    const alertContainer = document.getElementById('alert-container'); // Alert box container
    const messageDisplay = document.getElementById('message-display'); // Message span/div

    // Fetch current setting and select the matching option
    function fetchCurrentSetting() {
        fetch("{% url 'backup_settings' %}", {
            method: 'GET',
            headers: {
                "X-CSRFToken": csrfToken,
                "Accept": "application/json"
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.maximum_backup !== undefined) {
			     maximumSelect.value = data.maximum_backup.toString();
            }
        })
        .catch(error => console.error('Fetch error:', error));
    }

    // Update setting on server when select changes
    function updateSetting(newValue) {
        const formData = new FormData();
        formData.append('maximum_backup', newValue);

        fetch("{% url 'backup_settings' %}", {
            method: 'POST',
            headers: {
                "X-CSRFToken": csrfToken,
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alertContainer.className = "alert alert-success";
                messageDisplay.innerText = `Maximum backup set to ${data.maximum_backup}`;
            } else {
                alertContainer.className = "alert alert-danger";
                messageDisplay.innerText = data.message || 'Error updating setting.';
            }
            alertContainer.style.display = 'block';
            setTimeout(() => alertContainer.style.display = 'none', 4000);
        })
        .catch(error => {
            console.error('Update error:', error);
            alertContainer.className = "alert alert-danger";
            messageDisplay.innerText = 'Network error.';
            alertContainer.style.display = 'block';
            setTimeout(() => alertContainer.style.display = 'none', 4000);
        });
    }

    // Initial load
    fetchCurrentSetting();

    // On change event
    maximumSelect.addEventListener('change', (e) => {
        const val = e.target.value;
        if (val && !isNaN(val) && val > 0) {
            updateSetting(val);
        } else {
            alertContainer.className = "alert alert-warning";
            messageDisplay.innerText = 'Please select a valid option.';
            alertContainer.style.display = 'block';
            setTimeout(() => alertContainer.style.display = 'none', 4000);
            fetchCurrentSetting(); // reset to last valid
        }
    });
});
</script>


{% endblock content %}

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