{% extends 'base.html' %}

{% block title %}Track Your Submission | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <h1 class="section-title">Track Your Submission</h1>
        <p class="text-muted">Check the status of your research submission</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Search Form -->
                <div class="card mb-4">
                    <div class="card-body">
                        <form action="{{ url_for('submission.track') }}" method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <div class="input-group input-group-lg">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" name="tracking_id" 
                                       value="{{ tracking_id or '' }}"
                                       placeholder="Enter your tracking ID (e.g., SP-202401-ABC123)"
                                       required>
                                <button type="submit" class="btn btn-primary">Track</button>
                            </div>
                        </form>
                    </div>
                </div>
                
                {% if submission %}
                <!-- Submission Details -->
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-file-alt me-2"></i>Submission Details</span>
                        <span class="status-badge status-{{ submission.status }}">
                            {{ submission.status.replace('_', ' ').title() }}
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <p class="mb-1 text-muted">Tracking ID</p>
                                <h5 class="mb-3">{{ submission.tracking_id }}</h5>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1 text-muted">Submitted On</p>
                                <h5 class="mb-3">{{ submission.created_at.strftime('%B %d, %Y') }}</h5>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <p class="mb-1 text-muted">Title</p>
                            <h4>{{ submission.title }}</h4>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <p class="mb-1 text-muted">Authors</p>
                                <p>{{ submission.authors }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1 text-muted">Journal</p>
                                <p>{{ submission.journal.name }}</p>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <p class="mb-1 text-muted">Abstract</p>
                            <p class="text-secondary">{{ submission.abstract }}</p>
                        </div>
                        
                        {% if submission.tags %}
                        <div class="mb-4">
                            <p class="mb-1 text-muted">Tags</p>
                            {% for tag in submission.tags %}
                            <span class="badge bg-secondary">{{ tag.name }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Status Timeline -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fas fa-history me-2"></i>Status History
                    </div>
                    <div class="card-body">
                        <div class="tracking-timeline">
                            <!-- Current Status -->
                            <div class="timeline-item active">
                                <strong>{{ submission.status.replace('_', ' ').title() }}</strong>
                                <p class="text-muted mb-0">Current Status</p>
                            </div>
                            
                            <!-- Status Updates -->
                            {% for update in submission.status_updates.all() %}
                            <div class="timeline-item {% if update.new_status == 'accepted' %}completed{% elif update.new_status == 'published' %}completed{% elif update.new_status == 'rejected' %}declined{% endif %}">
                                <strong>{{ update.new_status.replace('_', ' ').title() }}</strong>
                                <p class="text-muted mb-1">{{ update.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
                                {% if update.notes %}
                                <p class="small bg-light p-2 rounded">{{ update.notes }}</p>
                                {% endif %}
                            </div>
                            {% endfor %}
                            
                            <!-- Initial Submission -->
                            <div class="timeline-item completed">
                                <strong>Submitted</strong>
                                <p class="text-muted mb-0">{{ submission.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Status Explanation -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fas fa-info-circle me-2"></i>What Does This Mean?
                    </div>
                    <div class="card-body">
                        {% if submission.status == 'pending' %}
                        <p class="mb-0">Your submission has been received and is awaiting initial review by our editorial team. You will be notified when the review begins.</p>
                        {% elif submission.status == 'under_review' %}
                        <p class="mb-0">Your submission is currently being reviewed by our expert reviewers. This process typically takes 2-4 weeks. You will be notified of the outcome.</p>
                        {% elif submission.status == 'revision_requested' %}
                        <p class="mb-0 text-warning"><i class="fas fa-edit me-2"></i>Our reviewers have requested revisions to your submission. Please review the feedback provided and resubmit your revised manuscript.</p>
                        {% elif submission.status == 'accepted' %}
                        <p class="mb-0 text-success"><i class="fas fa-check-circle me-2"></i><strong>Congratulations!</strong> Your submission has been accepted for publication. Our team will contact you with further details.</p>
                        {% elif submission.status == 'rejected' %}
                        <p class="mb-0 text-danger"><i class="fas fa-times-circle me-2"></i>Unfortunately, your submission was not accepted for publication. Please review any feedback provided and consider resubmitting after revisions.</p>
                        {% elif submission.status == 'published' %}
                        <p class="mb-0 text-primary"><i class="fas fa-book-open me-2"></i><strong>Published!</strong> Your submission has been published. Thank you for your contribution to the scientific community.</p>
                        {% endif %}
                    </div>
                </div>
                
                {% elif tracking_id %}
                <!-- Not Found -->
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    No submission found with tracking ID: <strong>{{ tracking_id }}</strong>
                    <p class="mb-0 mt-2">Please check the tracking ID and try again.</p>
                </div>
                {% else %}
                <!-- Instructions -->
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-search fa-4x text-muted mb-4"></i>
                        <h4>Enter Your Tracking ID</h4>
                        <p class="text-muted">
                            Your tracking ID was sent to your email when you submitted your research.<br>
                            It looks like: <code>SP-202401-XXXXXXXX</code>
                        </p>
                    </div>
                </div>
                {% endif %}
                
                <!-- Help Section -->
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h5>Need Help?</h5>
                                <p class="text-muted mb-md-0">Can't find your tracking ID? Contact us for assistance.</p>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <a href="{{ url_for('contact.contact') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-envelope me-2"></i>Contact Us
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}