{% extends 'base.html' %}

{% block title %}Submission Confirmed | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-check-circle fa-5x text-success"></i>
                        </div>
                        
                        <h1 class="mb-3">Submission Received!</h1>
                        <p class="lead text-muted mb-4">
                            Thank you for submitting your research to {{ settings.site_name if settings else 'ScholarPress' }}.
                        </p>
                        
                        <div class="bg-light p-4 rounded mb-4">
                            <p class="text-muted mb-2">Your Tracking ID</p>
                            <h2 class="text-primary mb-3">{{ submission.tracking_id }}</h2>
                            <button class="btn btn-outline-primary btn-sm" data-copy="{{ submission.tracking_id }}">
                                <i class="fas fa-copy me-1"></i>Copy Tracking ID
                            </button>
                        </div>
                        
                        <div class="text-start bg-light p-4 rounded mb-4">
                            <h5 class="mb-3">Submission Details</h5>
                            <p><strong>Title:</strong> {{ submission.title }}</p>
                            <p><strong>Journal:</strong> {{ submission.journal.name }}</p>
                            <p><strong>Authors:</strong> {{ submission.authors }}</p>
                            <p class="mb-0"><strong>Contact Email:</strong> {{ submission.contact_email }}</p>
                        </div>
                        
                        <div class="alert alert-info text-start">
                            <i class="fas fa-envelope me-2"></i>
                            <strong>Check Your Email!</strong>
                            <p class="mb-0 mt-2">
                                A confirmation email has been sent to <strong>{{ submission.contact_email }}</strong> 
                                with your tracking ID and a link to check your submission status.
                            </p>
                        </div>
                        
                        <div class="mt-4">
                            <a href="{{ url_for('submission.track', tracking_id=submission.tracking_id) }}" class="btn btn-primary me-2">
                                <i class="fas fa-search me-2"></i>Track Submission
                            </a>
                            <a href="{{ url_for('main.home') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-home me-2"></i>Back to Home
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fas fa-info-circle me-2"></i>What Happens Next?
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                        <i class="fas fa-user-check text-white fa-lg"></i>
                                    </div>
                                    <h6>1. Initial Review</h6>
                                    <p class="small text-muted">Our editorial team will review your submission for completeness and fit.</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-secondary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                        <i class="fas fa-users text-white fa-lg"></i>
                                    </div>
                                    <h6>2. Peer Review</h6>
                                    <p class="small text-muted">Expert reviewers will evaluate the quality and significance of your research.</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                        <i class="fas fa-envelope-open-text text-white fa-lg"></i>
                                    </div>
                                    <h6>3. Decision</h6>
                                    <p class="small text-muted">You'll receive an email notification with our decision and feedback.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}