{% extends 'base.html' %}

{% block title %}Ingest Document{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header">
                <h2>Ingest Document</h2>
            </div>
            <div class="card-body">
                <p>Parse documents (PDF, HTML, YouTube, DOCX, PPT, TXT) into clean text that can be used for content generation.</p>
                
                <form method="POST" class="mt-4 loading-form" enctype="multipart/form-data" data-loading-message="Parsing document... Please wait">
                    {{ form.csrf_token }}
                    
                    <div class="mb-3">
                        <label for="input_type" class="form-label">{{ form.input_type.label }}</label>
                        {{ form.input_type(class="form-select", id="input_type_selector") }}
                        <div class="form-text">Select how you want to provide your document.</div>
                    </div>
                    
                    <div id="upload_file_div" class="mb-3">
                        <label for="upload_file" class="form-label">{{ form.upload_file.label }}</label>
                        {{ form.upload_file(class="form-control") }}
                        {% if form.upload_file.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.upload_file.errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}
                        <div class="form-text">Supported formats: PDF, HTML, DOCX, PPT, TXT.</div>
                    </div>
                    
                    <div id="input_path_div" class="mb-3" style="display: none;">
                        <label for="input_path" class="form-label">{{ form.input_path.label }}</label>
                        {{ form.input_path(class="form-control", placeholder="Enter file path or URL") }}
                        {% if form.input_path.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.input_path.errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}
                        <div id="path_help_text" class="form-text">Enter the path to a local file or URL to parse.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="output_name" class="form-label">{{ form.output_name.label }}</label>
                        {{ form.output_name(class="form-control", placeholder="Leave blank to use original name") }}
                        {% if form.output_name.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.output_name.errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}
                        <div class="form-text">Optional. Specify a custom filename for the output text file.</div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
                
                <div class="mt-5">
                    <h4>Supported Document Types</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header">File Types</div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>PDF Files</strong>
                                            <div class="text-muted small">Extract text from PDF documents</div>
                                        </div>
                                        <span class="badge bg-primary rounded-pill">.pdf</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>Word Documents</strong>
                                            <div class="text-muted small">Parse Microsoft Word documents</div>
                                        </div>
                                        <span class="badge bg-primary rounded-pill">.docx</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>PowerPoint</strong>
                                            <div class="text-muted small">Extract text from presentations</div>
                                        </div>
                                        <span class="badge bg-primary rounded-pill">.pptx</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>Text Files</strong>
                                            <div class="text-muted small">Plain text documents</div>
                                        </div>
                                        <span class="badge bg-primary rounded-pill">.txt</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header">Web Content</div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>Web Pages</strong>
                                            <div class="text-muted small">Extract content from HTML web pages</div>
                                        </div>
                                        <span class="badge bg-success rounded-pill">URL</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                        <div>
                                            <strong>YouTube Videos</strong>
                                            <div class="text-muted small">Extract transcript from YouTube videos</div>
                                        </div>
                                        <span class="badge bg-danger rounded-pill">YouTube</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">Example URLs</div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>YouTube:</strong> <code>https://www.youtube.com/watch?v=example</code></li>
                                    <li class="list-group-item"><strong>Web Page:</strong> <code>https://example.com/article</code></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get form elements
        const inputTypeSelector = document.getElementById('input_type_selector');
        const uploadFileDiv = document.getElementById('upload_file_div');
        const inputPathDiv = document.getElementById('input_path_div');
        const pathHelpText = document.getElementById('path_help_text');
        
        // Function to update form display based on selected input type
        function updateFormDisplay() {
            const selectedValue = inputTypeSelector.value;
            
            // Hide/show appropriate fields based on selection
            if (selectedValue === 'file') {
                uploadFileDiv.style.display = 'block';
                inputPathDiv.style.display = 'none';
            } else {
                uploadFileDiv.style.display = 'none';
                inputPathDiv.style.display = 'block';
                
                // Update help text based on URL or path selection
                if (selectedValue === 'url') {
                    pathHelpText.textContent = 'Enter a URL to parse. Supports web pages and YouTube videos.';
                } else {
                    pathHelpText.textContent = 'Enter the path to a local file. Supported formats: PDF, HTML, DOCX, PPT, TXT.';
                }
            }
        }
        
        // Initial setup
        updateFormDisplay();
        
        // Add event listener for changes
        inputTypeSelector.addEventListener('change', updateFormDisplay);
    });
</script>
{% endblock %}
