{% extends 'base.html' %}

{% block title %}Submit Your Research | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <h1 class="section-title">Submit Your Research</h1>
        <p class="text-muted">Share your research with the global scientific community</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-paper-plane me-2"></i>Submission Form</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('submission.submit') }}" method="POST" enctype="multipart/form-data" data-autosave="submission">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <!-- Title -->
                            <div class="mb-4">
                                <label for="title" class="form-label">Article Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required 
                                       placeholder="Enter the full title of your research">
                                <div class="form-text">Provide a clear and descriptive title for your research.</div>
                            </div>
                            
                            <!-- Authors -->
                            <div class="mb-4">
                                <label for="authors" class="form-label">Author(s) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="authors" name="authors" required
                                       placeholder="e.g., John Smith, Jane Doe, Robert Johnson">
                                <div class="form-text">Enter all author names separated by commas.</div>
                            </div>
                            
                            <!-- Contact Email -->
                            <div class="mb-4">
                                <label for="contact_email" class="form-label">Contact Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="contact_email" name="contact_email" required
                                       placeholder="your.email@institution.edu">
                                <div class="form-text">This email will receive status updates about your submission.</div>
                            </div>
                            
                            <!-- Affiliation -->
                            <div class="mb-4">
                                <label for="affiliation" class="form-label">Affiliation</label>
                                <input type="text" class="form-control" id="affiliation" name="affiliation"
                                       placeholder="e.g., Department of Physics, University of Oxford">
                                <div class="form-text">Your institutional affiliation (optional).</div>
                            </div>
                            
                            <!-- ORCID ID -->
                            <div class="mb-4">
                                <label for="orcid" class="form-label">ORCID ID</label>
                                <input type="text" class="form-control" id="orcid" name="orcid"
                                       placeholder="e.g., 0000-0002-1825-0097">
                                <div class="form-text">Your ORCID identifier (optional). <a href="https://orcid.org" target="_blank">Get an ORCID</a></div>
                            </div>
                            
                            <!-- Journal Selection -->
                            <div class="mb-4">
                                <label for="journal_id" class="form-label">Select Journal <span class="text-danger">*</span></label>
                                <select class="form-select" id="journal_id" name="journal_id" required>
                                    <option value="">Choose a journal...</option>
                                    {% for journal in journals %}
                                    <option value="{{ journal.id }}">{{ journal.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">Select the most appropriate journal for your research.</div>
                            </div>
                            
                            <!-- Abstract -->
                            <div class="mb-4">
                                <label for="abstract" class="form-label">Abstract <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="abstract" name="abstract" rows="6" required
                                          data-max-length="3000"
                                          placeholder="Provide a comprehensive abstract of your research..."></textarea>
                                <div class="form-text">A clear and concise summary of your research (max 3000 characters).</div>
                            </div>
                            
                            <!-- Tags -->
                            {% if all_tags %}
                            <div class="mb-4">
                                <label class="form-label">Research Tags</label>
                                <div class="row g-2 tag-selection">
                                    {% for tag in all_tags %}
                                    <div class="col-auto">
                                        <label class="btn btn-outline-secondary btn-sm">
                                            <input type="checkbox" name="tags" value="{{ tag.id }}" class="d-none">
                                            {{ tag.name }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                                <div class="form-text">Select relevant tags for your research (optional).</div>
                            </div>
                            {% endif %}
                            
                            <!-- File Upload -->
                            <div class="mb-4">
                                <label for="manuscript" class="form-label">Upload Manuscript <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" id="manuscript" name="manuscript" required
                                       accept=".pdf,.docx,.doc,.txt" data-max-size="16777216">
                                <div class="form-text">
                                    Accepted formats: PDF, DOCX, DOC, TXT (max 16MB)
                                </div>
                            </div>
                            
                            <!-- Terms Agreement -->
                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="terms" required>
                                    <label class="form-check-label" for="terms">
                                        I confirm that this submission is original work and has not been published elsewhere. 
                                        I agree to the <a href="{{ url_for('main.terms') }}" target="_blank">Terms of Service</a> 
                                        and <a href="{{ url_for('main.privacy_policy') }}" target="_blank">Privacy Policy</a>.
                                    </label>
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i>Submit Research
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-info-circle me-2"></i>Submission Guidelines
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-3">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>Original Research</strong>
                                <p class="text-muted small mb-0">Submit only original, unpublished work.</p>
                            </li>
                            <li class="mb-3">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>Complete Information</strong>
                                <p class="text-muted small mb-0">Provide all author details and affiliations.</p>
                            </li>
                            <li class="mb-3">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>Proper Formatting</strong>
                                <p class="text-muted small mb-0">Follow standard academic formatting guidelines.</p>
                            </li>
                            <li>
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>Clear Abstract</strong>
                                <p class="text-muted small mb-0">Write a concise summary of your research.</p>
                            </li>
                        </ul>
                        <hr>
                        <a href="{{ url_for('submission.guidelines') }}" class="btn btn-outline-primary btn-sm w-100">
                            <i class="fas fa-book me-2"></i>Full Guidelines
                        </a>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-clock me-2"></i>Review Process
                    </div>
                    <div class="card-body">
                        <ol class="list-unstyled mb-0">
                            <li class="mb-3 d-flex">
                                <span class="badge bg-primary me-3">1</span>
                                <div>
                                    <strong>Submission</strong>
                                    <p class="text-muted small mb-0">Submit your manuscript</p>
                                </div>
                            </li>
                            <li class="mb-3 d-flex">
                                <span class="badge bg-secondary me-3">2</span>
                                <div>
                                    <strong>Initial Review</strong>
                                    <p class="text-muted small mb-0">Editorial assessment</p>
                                </div>
                            </li>
                            <li class="mb-3 d-flex">
                                <span class="badge bg-secondary me-3">3</span>
                                <div>
                                    <strong>Peer Review</strong>
                                    <p class="text-muted small mb-0">Expert evaluation</p>
                                </div>
                            </li>
                            <li class="d-flex">
                                <span class="badge bg-secondary me-3">4</span>
                                <div>
                                    <strong>Decision</strong>
                                    <p class="text-muted small mb-0">Accept/Revise/Decline</p>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-search me-2"></i>Track Submission
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">Already submitted? Track your submission status.</p>
                        <a href="{{ url_for('submission.track') }}" class="btn btn-outline-primary btn-sm w-100">
                            <i class="fas fa-search me-2"></i>Track Status
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}