{% extends "bootstrap/base.html" %}

{% block title %}Database Setup - MOTM Admin{% endblock %}

{% block head %}
{{ super() }}
<style>
    .database-section {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    
    .database-section h3 {
        margin-top: 0;
        color: #333;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .btn-group {
        margin-top: 20px;
    }
    
    .btn {
        margin-right: 10px;
    }
    
    .alert {
        margin-top: 20px;
    }
    
    .hidden {
        display: none;
    }
    
    .current-config {
        background-color: #e8f4f8;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .current-config h4 {
        margin-top: 0;
        color: #2c3e50;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Database Setup & Configuration</h1>
            <p class="lead">Configure and initialize the database for the MOTM application.</p>
            
            <!-- Current Configuration Display -->
            <div class="current-config">
                <h4>Current Configuration</h4>
                <p><strong>Database Type:</strong> {{ current_config.database_type|title }}</p>
                {% if current_config.database_type == 'sqlite' %}
                    <p><strong>Database File:</strong> {{ current_config.sqlite_database_path }}</p>
                {% elif current_config.database_type == 'mysql' %}
                    <p><strong>Host:</strong> {{ current_config.mysql_host }}:{{ current_config.mysql_port }}</p>
                    <p><strong>Database:</strong> {{ current_config.mysql_database }}</p>
                    <p><strong>Username:</strong> {{ current_config.mysql_username }}</p>
                {% elif current_config.database_type == 'postgresql' %}
                    <p><strong>Host:</strong> {{ current_config.postgres_host }}:{{ current_config.postgres_port }}</p>
                    <p><strong>Database:</strong> {{ current_config.postgres_database }}</p>
                    <p><strong>Username:</strong> {{ current_config.postgres_username }}</p>
                {% endif %}
            </div>
            
            <!-- Flash Messages -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <!-- Database Setup Form -->
            <form method="POST" action="{{ url_for('database_setup') }}">
                {{ form.hidden_tag() }}
                
                <!-- Database Type Selection -->
                <div class="database-section">
                    <h3>Database Type</h3>
                    <div class="form-group">
                        {{ form.database_type.label(class="control-label") }}
                        {{ form.database_type(class="form-control") }}
                    </div>
                </div>
                
                <!-- SQLite Configuration -->
                <div class="database-section" id="sqlite-config">
                    <h3>SQLite Configuration</h3>
                    <div class="form-group">
                        {{ form.sqlite_database_path.label(class="control-label") }}
                        {{ form.sqlite_database_path(class="form-control") }}
                        <small class="form-text text-muted">Path to the SQLite database file</small>
                    </div>
                </div>
                
                <!-- MySQL Configuration -->
                <div class="database-section" id="mysql-config">
                    <h3>MySQL/MariaDB Configuration</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.mysql_host.label(class="control-label") }}
                                {{ form.mysql_host(class="form-control") }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.mysql_port.label(class="control-label") }}
                                {{ form.mysql_port(class="form-control") }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        {{ form.mysql_database.label(class="control-label") }}
                        {{ form.mysql_database(class="form-control") }}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.mysql_username.label(class="control-label") }}
                                {{ form.mysql_username(class="form-control") }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.mysql_password.label(class="control-label") }}
                                {{ form.mysql_password(class="form-control") }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        {{ form.mysql_charset.label(class="control-label") }}
                        {{ form.mysql_charset(class="form-control") }}
                    </div>
                </div>
                
                <!-- PostgreSQL Configuration -->
                <div class="database-section" id="postgresql-config">
                    <h3>PostgreSQL Configuration</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.postgres_host.label(class="control-label") }}
                                {{ form.postgres_host(class="form-control") }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.postgres_port.label(class="control-label") }}
                                {{ form.postgres_port(class="form-control") }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        {{ form.postgres_database.label(class="control-label") }}
                        {{ form.postgres_database(class="form-control") }}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.postgres_username.label(class="control-label") }}
                                {{ form.postgres_username(class="form-control") }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form.postgres_password.label(class="control-label") }}
                                {{ form.postgres_password(class="form-control") }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Setup Options -->
                <div class="database-section">
                    <h3>Setup Options</h3>
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                {{ form.initialize_tables() }} {{ form.initialize_tables.label.text }}
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                {{ form.create_sample_data() }} {{ form.create_sample_data.label.text }}
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="btn-group">
                    {{ form.test_connection(class="btn btn-info") }}
                    {{ form.save_config(class="btn btn-primary") }}
                    {{ form.initialize_database(class="btn btn-success") }}
                </div>
            </form>
            
            <!-- Navigation -->
            <div class="row" style="margin-top: 30px;">
                <div class="col-md-12">
                    <a href="{{ url_for('database_status') }}" class="btn btn-default">View Database Status</a>
                    <a href="{{ url_for('motm_admin') }}" class="btn btn-default">Back to MOTM Admin</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Show/hide database configuration sections based on selected type
function toggleDatabaseConfig() {
    var dbType = document.getElementById('database_type').value;
    
    // Hide all config sections
    document.getElementById('sqlite-config').style.display = 'none';
    document.getElementById('mysql-config').style.display = 'none';
    document.getElementById('postgresql-config').style.display = 'none';
    
    // Show relevant config section
    if (dbType === 'sqlite') {
        document.getElementById('sqlite-config').style.display = 'block';
    } else if (dbType === 'mysql') {
        document.getElementById('mysql-config').style.display = 'block';
    } else if (dbType === 'postgresql') {
        document.getElementById('postgresql-config').style.display = 'block';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleDatabaseConfig();
    
    // Add event listener for database type changes
    document.getElementById('database_type').addEventListener('change', toggleDatabaseConfig);
});
</script>
{% endblock %}