{% extends "base.html" %}

{% block title %}Home - Mini SpecsComply Pro{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Upload Document for Compliance Analysis</h4>
            </div>
            <div class="card-body">
                <form id="uploadForm" action="/upload-document" method="post" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="documentType" class="form-label">Document Type</label>
                        <select class="form-select" id="documentType" name="document_type" required>
                            <option value="" selected disabled>Select document type</option>
                            <option value="technical_specification">Technical Specification</option>
                            <option value="requirement_document">Requirement Document</option>
                            <option value="design_document">Design Document</option>
                            <option value="test_document">Test Document</option>
                            <option value="user_manual">User Manual</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="documentFile" class="form-label">Document File</label>
                        <input class="form-control" type="file" id="documentFile" name="file" required>
                        <div class="form-text">Supported formats: PDF, DOCX, TXT, MD</div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary" id="uploadButton">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Upload and analyze
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">How It Works</h5>
            </div>
            <div class="card-body">
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item">Upload your document and select its type</li>
                    <li class="list-group-item">Our AI analyzes the document for compliance issues</li>
                    <li class="list-group-item">Receive a detailed report with issues and recommendations</li>
                    <li class="list-group-item">Make necessary changes and resubmit if needed</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const uploadButton = document.getElementById('uploadButton');
        const spinner = uploadButton.querySelector('.spinner-border');
        
        // Show loading state
        uploadButton.disabled = true;
        spinner.classList.remove('d-none');
        
        // Create FormData object
        const formData = new FormData(this);
        
        // Send the form data
        fetch('/upload-document', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.ok) {
                // Redirect to /documents route on success
                window.location.href = '/documents';
            } else {
                throw new Error('Failed to upload document');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error uploading document. Please try again.');
        })
        .finally(() => {
            // Reset button state
            uploadButton.disabled = false;
            spinner.classList.add('d-none');
        });
    });
</script>
{% endblock %}