{% extends 'base.html' %}

{% block title %}{{ module_title }} - Manufacturing App{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-download"></i> Create Database Backup
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Database Backup Information:</strong>
                        <ul class="mb-0 mt-2">
                            <li>Creates a complete backup of the current database</li>
                            <li>Backup files are stored in the media/database_backups directory</li>
                            <li>All data including users, inventory, sales, and manufacturing records will be backed up</li>
                            <li>Backup process is quick and doesn't affect system performance</li>
                        </ul>
                    </div>

                    <form method="post" id="backup-form">
                        {% csrf_token %}

                        <div class="mb-4">
                            <h5>Backup Details</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Database Type</label>
                                        <input type="text" class="form-control" value="SQLite3" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Current Date/Time</label>
                                        <input type="text" class="form-control" value="{% now 'Y-m-d H:i:s' %}" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Backup Filename</label>
                                <input type="text" class="form-control" value="backup_{% now 'Ymd_His' %}.db" readonly>
                                <div class="form-text">Filename will be generated automatically</div>
                            </div>
                        </div>

                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Important:</strong> It's recommended to create regular backups to prevent data loss.
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'database_management:dashboard' %}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="create-backup-btn">
                                <i class="fas fa-download"></i> Create Backup
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('backup-form');
    const submitBtn = document.getElementById('create-backup-btn');

    form.addEventListener('submit', function(e) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Backup...';

        // Allow form to submit normally
    });
});
</script>
{% endblock %}