{% extends 'base.html' %}

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

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">{{ module_title }}</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="refreshDatabaseInfo()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                </div>
            </div>

            <!-- Database Information Cards -->
            <div class="row">
                <div class="col-md-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-database fa-2x text-primary mb-3"></i>
                            <h5 class="card-title">Database Size</h5>
                            <p class="card-text" id="db-size">Loading...</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-table fa-2x text-success mb-3"></i>
                            <h5 class="card-title">Tables</h5>
                            <p class="card-text" id="table-count">Loading...</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <i class="fas fa-clock fa-2x text-warning mb-3"></i>
                            <h5 class="card-title">Last Backup</h5>
                            <p class="card-text" id="last-backup">Loading...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Database Management Actions -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Database Management Actions</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% if perms.database_management.add_database %}
                                <div class="col-md-4 mb-3">
                                    <a href="{% url 'database_management:backup' %}" class="btn btn-primary w-100">
                                        <i class="fas fa-download"></i> Create Backup
                                    </a>
                                </div>
                                {% endif %}

                                {% if perms.database_management.view_database %}
                                <div class="col-md-4 mb-3">
                                    <a href="{% url 'database_management:backup_list' %}" class="btn btn-info w-100">
                                        <i class="fas fa-list"></i> View Backups
                                    </a>
                                </div>
                                {% endif %}

                                {% if perms.database_management.change_database %}
                                <div class="col-md-4 mb-3">
                                    <button class="btn btn-warning w-100" onclick="showRestoreModal()">
                                        <i class="fas fa-upload"></i> Restore Database
                                    </button>
                                </div>
                                {% endif %}
                            </div>

                            <div class="row mt-3">
                                {% if perms.database_management.add_database %}
                                <div class="col-md-6 mb-3">
                                    <button class="btn btn-success w-100" onclick="initializeDatabase()">
                                        <i class="fas fa-cog"></i> Initialize Database
                                    </button>
                                </div>
                                {% endif %}

                                {% if perms.database_management.delete_database %}
                                <div class="col-md-6 mb-3">
                                    <button class="btn btn-danger w-100" onclick="showCleanupModal()">
                                        <i class="fas fa-trash"></i> Cleanup Old Backups
                                    </button>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Backups -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Recent Backups</h5>
                        </div>
                        <div class="card-body">
                            <div id="recent-backups">
                                <p class="text-muted">Loading recent backups...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Restore Modal -->
<div class="modal fade" id="restoreModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Restore Database</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>This action will restore the database from a backup file. All current data will be lost.</p>
                <div class="mb-3">
                    <label for="backupFile" class="form-label">Select Backup File</label>
                    <input type="file" class="form-control" id="backupFile" accept=".sql,.dump">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" onclick="restoreDatabase()">Restore</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
function refreshDatabaseInfo() {
    // Simulate refreshing database information
    document.getElementById('db-size').textContent = 'Loading...';
    document.getElementById('table-count').textContent = 'Loading...';
    document.getElementById('last-backup').textContent = 'Loading...';

    setTimeout(() => {
        document.getElementById('db-size').textContent = '15.2 MB';
        document.getElementById('table-count').textContent = '25 tables';
        document.getElementById('last-backup').textContent = '2024-01-15 10:30 AM';
    }, 1000);
}

function showRestoreModal() {
    const modal = new bootstrap.Modal(document.getElementById('restoreModal'));
    modal.show();
}

function restoreDatabase() {
    const fileInput = document.getElementById('backupFile');
    if (!fileInput.files[0]) {
        alert('Please select a backup file first.');
        return;
    }

    // Simulate restore process
    alert('Database restore functionality would be implemented here.');

    // Close modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('restoreModal'));
    modal.hide();
}

function initializeDatabase() {
    if (confirm('Are you sure you want to initialize the database? This will reset all data.')) {
        alert('Database initialization functionality would be implemented here.');
    }
}

function showCleanupModal() {
    if (confirm('Are you sure you want to delete old backup files? This action cannot be undone.')) {
        alert('Backup cleanup functionality would be implemented here.');
    }
}

// Load initial data
document.addEventListener('DOMContentLoaded', function() {
    refreshDatabaseInfo();
});
</script>
{% endblock %}