{% extends 'base.html' %}

{% block title %}Convert Submission | Admin | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin.submissions') }}">Submissions</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin.view_submission', id=submission.id) }}">{{ submission.tracking_id }}</a></li>
                <li class="breadcrumb-item active">Convert to Article</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Convert Submission to Article</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <form action="{{ url_for('admin.convert_to_article', id=submission.id) }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- Original Submission Info -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Original Submission</h5>
                        </div>
                        <div class="card-body bg-light">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Title:</strong></p>
                                    <p class="text-muted">{{ submission.title }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Author:</strong></p>
                                    <p class="text-muted">{{ submission.authors }} ({{ submission.contact_email }})</p>
                                </div>
                                <div class="col-12">
                                    <p class="mb-1"><strong>Abstract:</strong></p>
                                    <p class="text-muted">{{ submission.abstract|truncate(300) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Article Details -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-newspaper me-2"></i>Article Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required
                                           value="{{ submission.title }}">
                                </div>
                                <div class="col-12">
                                    <label for="slug" class="form-label">URL Slug</label>
                                    <input type="text" class="form-control" id="slug" name="slug"
                                           placeholder="auto-generated-from-title">
                                    <div class="form-text">Leave empty to auto-generate</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="journal_id" class="form-label">Journal <span class="text-danger">*</span></label>
                                    <select class="form-select" id="journal_id" name="journal_id" required>
                                        <option value="">Select journal...</option>
                                        {% for journal in journals %}
                                        <option value="{{ journal.id }}" {{ 'selected' if submission.journal_id == journal.id }}>
                                            {{ journal.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="article_type" class="form-label">Article Type</label>
                                    <select class="form-select" id="article_type" name="article_type">
                                        <option value="research" {{ 'selected' if submission.article_type == 'research' }}>Research Article</option>
                                        <option value="review" {{ 'selected' if submission.article_type == 'review' }}>Review Article</option>
                                        <option value="case_study" {{ 'selected' if submission.article_type == 'case_study' }}>Case Study</option>
                                        <option value="commentary" {{ 'selected' if submission.article_type == 'commentary' }}>Commentary</option>
                                        <option value="editorial" {{ 'selected' if submission.article_type == 'editorial' }}>Editorial</option>
                                        <option value="letter" {{ 'selected' if submission.article_type == 'letter' }}>Letter</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="authors" class="form-label">Authors <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="authors" name="authors" required
                                           value="{{ submission.authors }}"
                                           placeholder="John Doe, Jane Smith, ...">
                                    <div class="form-text">Comma-separated list of authors</div>
                                </div>
                                <div class="col-12">
                                    <label for="abstract" class="form-label">Abstract <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="abstract" name="abstract" rows="5" required>{{ submission.abstract }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label for="keywords" class="form-label">Keywords</label>
                                    <input type="text" class="form-control" id="keywords" name="keywords"
                                           value="{{ submission.keywords or '' }}"
                                           placeholder="keyword1, keyword2, keyword3">
                                    <div class="form-text">Comma-separated keywords for search</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Article Content -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-file-code me-2"></i>Content</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="content" class="form-label">Article Content (HTML)</label>
                                <textarea class="form-control font-monospace" id="content" name="content" rows="15"
                                          placeholder="<h2>Introduction</h2>
<p>Your article content here...</p>

<h2>Methods</h2>
<p>...</p>

<h2>Results</h2>
<p>...</p>

<h2>Conclusion</h2>
<p>...</p>"></textarea>
                                <div class="form-text">Full HTML content of the article</div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Uploaded Manuscript</label>
                                {% if submission.file_path %}
                                <div class="alert alert-info d-flex align-items-center">
                                    <i class="fas fa-file-pdf me-2"></i>
                                    <span>Original manuscript available for reference</span>
                                    <a href="{{ url_for('main.uploaded_file', filename= submission.file_path) }}" 
                                       class="btn btn-sm btn-outline-primary ms-auto" target="_blank">
                                        <i class="fas fa-download me-1"></i>Download
                                    </a>
                                </div>
                                {% else %}
                                <p class="text-muted">No manuscript file was uploaded</p>
                                {% endif %}
                            </div>
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="pdf_file" class="form-label">PDF Version</label>
                                    <input type="file" class="form-control" id="pdf_file" name="pdf_file" accept=".pdf">
                                    <div class="form-text">Upload final PDF for download</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="featured_image" class="form-label">Featured Image</label>
                                    <input type="file" class="form-control" id="featured_image" name="featured_image" 
                                           accept="image/*">
                                    <div class="form-text">Thumbnail for article listings</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tags -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Tags</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-2">
                                {% for tag in tags %}
                                <div class="col-auto">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="tags" 
                                               value="{{ tag.id }}" id="tag_{{ tag.id }}">
                                        <label class="form-check-label" for="tag_{{ tag.id }}">{{ tag.name }}</label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% if not tags %}
                            <p class="text-muted mb-0">No tags available. <a href="{{ url_for('admin.tags') }}">Create tags</a></p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Actions -->
                    <div class="card border-0 shadow-sm mb-4 sticky-top" style="top: 100px;">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" name="status" value="published" class="btn btn-success py-2">
                                    <i class="fas fa-globe me-2"></i>Create & Publish
                                </button>
                                <button type="submit" name="status" value="draft" class="btn btn-primary py-2">
                                    <i class="fas fa-save me-2"></i>Create as Draft
                                </button>
                                <a href="{{ url_for('admin.view_submission', id=submission.id) }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Publication Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Publication Settings</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="published_date" class="form-label">Publication Date</label>
                                <input type="date" class="form-control" id="published_date" name="published_date"
                                       value="{{ now().strftime('%Y-%m-%d') }}">
                            </div>
                            <div class="mb-3">
                                <label for="volume" class="form-label">Volume</label>
                                <input type="text" class="form-control" id="volume" name="volume" placeholder="e.g., 15">
                            </div>
                            <div class="mb-3">
                                <label for="issue" class="form-label">Issue</label>
                                <input type="text" class="form-control" id="issue" name="issue" placeholder="e.g., 3">
                            </div>
                            <div class="mb-3">
                                <label for="pages" class="form-label">Pages</label>
                                <input type="text" class="form-control" id="pages" name="pages" placeholder="e.g., 123-145">
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_open_access" name="is_open_access" checked>
                                <label class="form-check-label" for="is_open_access">Open Access</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured">
                                <label class="form-check-label" for="is_featured">Featured Article</label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- DOI -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-fingerprint me-2"></i>DOI</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="doi" class="form-label">DOI</label>
                                <input type="text" class="form-control" id="doi" name="doi"
                                       placeholder="Auto-generated on publish">
                                <div class="form-text">Leave empty to auto-generate</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Auto-generate slug from title
document.getElementById('title').addEventListener('input', function() {
    const slugInput = document.getElementById('slug');
    if (!slugInput.value) {
        const slug = this.value.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
        slugInput.placeholder = slug || 'auto-generated-from-title';
    }
});
</script>
{% endblock %}