{% 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-cog"></i> Initialize Database
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Warning: This operation will reset the database</strong>
                        <ul class="mb-0 mt-2">
                            <li>All existing data will be permanently deleted</li>
                            <li>Database schema will be recreated from migrations</li>
                            <li>Default data will be loaded</li>
                            <li>This action cannot be undone</li>
                        </ul>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Initialization Process:</strong>
                        <ol class="mb-0 mt-2">
                            <li>Create backup of current database</li>
                            <li>Drop all tables</li>
                            <li>Run all migrations</li>
                            <li>Load initial data</li>
                            <li>Create default admin user</li>
                        </ol>
                    </div>

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

                        <div class="mb-4">
                            <h5>Initialization Options</h5>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="create-backup" name="create_backup" checked>
                                    <label class="form-check-label" for="create-backup">
                                        Create backup before initialization
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="load-sample-data" name="load_sample_data" checked>
                                    <label class="form-check-label" for="load-sample-data">
                                        Load sample data after initialization
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="confirm-initialize" required>
                                    <label class="form-check-label" for="confirm-initialize">
                                        <strong>I understand that this will delete all data and cannot be undone.</strong>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-warning">
                            <i class="fas fa-clock"></i>
                            <strong>Estimated Time:</strong> This process may take several minutes depending on the amount of data and number of migrations.
                        </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-danger" id="initialize-btn">
                                <i class="fas fa-cog"></i> Initialize Database
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Initialization Progress Modal -->
<div class="modal fade" id="initProgressModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Initializing Database</h5>
            </div>
            <div class="modal-body">
                <div class="progress mb-3">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                </div>
                <div id="init-status">
                    <p class="text-center mb-0">Starting database initialization...</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('initialize-form');
    const initializeBtn = document.getElementById('initialize-btn');
    const confirmCheckbox = document.getElementById('confirm-initialize');

    // Enable/disable initialize button based on confirmation checkbox
    confirmCheckbox.addEventListener('change', function() {
        initializeBtn.disabled = !this.checked;
    });

    form.addEventListener('submit', function(e) {
        if (!confirmCheckbox.checked) {
            e.preventDefault();
            alert('Please confirm that you understand the initialization process.');
            return;
        }

        // Show confirmation dialog
        const createBackup = document.getElementById('create-backup').checked;
        const loadSampleData = document.getElementById('load-sample-data').checked;

        let message = 'Are you sure you want to initialize the database?\n\n';
        message += 'This will:\n';
        message += '- Delete all existing data\n';

        if (createBackup) {
            message += '- Create a backup before initialization\n';
        }

        if (loadSampleData) {
            message += '- Load sample data after initialization\n';
        }

        message += '\nThis action cannot be undone!';

        if (!confirm(message)) {
            e.preventDefault();
            return;
        }

        // Show progress modal
        const progressModal = new bootstrap.Modal(document.getElementById('initProgressModal'));
        progressModal.show();

        initializeBtn.disabled = true;
        initializeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Initializing...';

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