{% extends 'base.html' %}

{% block title %}{{ 'Edit' if journal else 'Create' }} Journal | 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.journals') }}">Journals</a></li>
                <li class="breadcrumb-item active">{{ 'Edit' if journal else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">{{ 'Edit Journal' if journal else 'Create Journal' }}</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <form action="{{ url_for('admin.edit_journal', id=journal.id) if journal else url_for('admin.add_journal') }}" 
                              method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <div class="mb-3">
                                <label for="name" class="form-label">Journal Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required
                                       value="{{ journal.name if journal else '' }}"
                                       placeholder="e.g., Journal of Scientific Research">
                            </div>
                            
                            <div class="mb-3">
                                <label for="slug" class="form-label">URL Slug</label>
                                <div class="input-group">
                                    <span class="input-group-text">/journals/</span>
                                    <input type="text" class="form-control" id="slug" name="slug"
                                           value="{{ journal.slug if journal else '' }}"
                                           placeholder="journal-of-scientific-research">
                                </div>
                                <div class="form-text">Leave blank to auto-generate from name</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="4"
                                          placeholder="Describe the journal's scope and focus">{{ journal.description if journal else '' }}</textarea>
                            </div>
                            
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="issn" class="form-label">ISSN</label>
                                    <input type="text" class="form-control" id="issn" name="issn"
                                           value="{{ journal.issn if journal else '' }}"
                                           placeholder="0000-0000">
                                </div>
                                <div class="col-md-6">
                                    <label for="founded_year" class="form-label">Founded Year</label>
                                    <input type="number" class="form-control" id="founded_year" name="founded_year"
                                           value="{{ journal.founded_year if journal and journal.founded_year else '' }}"
                                           placeholder="e.g., 2005" min="1800" max="2100">
                                    <div class="form-text">Year the journal was established</div>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="impact_factor" class="form-label">Impact Factor</label>
                                    <input type="text" class="form-control" id="impact_factor" name="impact_factor"
                                           value="{{ journal.impact_factor if journal else '' }}"
                                           placeholder="e.g., 3.45">
                                </div>
                            </div>
                            
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="frequency" class="form-label">Publication Frequency</label>
                                    <select class="form-select" id="frequency" name="frequency">
                                        <option value="">Select frequency</option>
                                        <option value="Weekly" {% if journal and journal.frequency == 'Weekly' %}selected{% endif %}>Weekly</option>
                                        <option value="Bi-weekly" {% if journal and journal.frequency == 'Bi-weekly' %}selected{% endif %}>Bi-weekly</option>
                                        <option value="Monthly" {% if journal and journal.frequency == 'Monthly' %}selected{% endif %}>Monthly</option>
                                        <option value="Bi-monthly" {% if journal and journal.frequency == 'Bi-monthly' %}selected{% endif %}>Bi-monthly</option>
                                        <option value="Quarterly" {% if journal and journal.frequency == 'Quarterly' %}selected{% endif %}>Quarterly</option>
                                        <option value="Semi-annually" {% if journal and journal.frequency == 'Semi-annually' %}selected{% endif %}>Semi-annually</option>
                                        <option value="Annually" {% if journal and journal.frequency == 'Annually' %}selected{% endif %}>Annually</option>
                                        <option value="Continuous" {% if journal and journal.frequency == 'Continuous' %}selected{% endif %}>Continuous</option>
                                    </select>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="editor" class="form-label">Editor-in-Chief</label>
                                    <input type="text" class="form-control" id="editor" name="editor"
                                           value="{{ journal.editor if journal else '' }}"
                                           placeholder="Dr. Jane Smith">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="cover_image" class="form-label">Cover Image</label>
                                {% if journal and journal.cover_image %}
                                <div class="mb-2">
                                    <img src="{{ url_for('main.uploaded_file', filename=journal.cover_image) }}" 
                                         alt="Current cover" class="img-thumbnail" style="max-height: 150px;">
                                </div>
                                {% endif %}
                                <input type="file" class="form-control" id="cover_image" name="cover_image"
                                       accept="image/*">
                                <div class="form-text">Recommended size: 600x800px. Max 5MB.</div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                           {% if not journal or journal.is_active %}checked{% endif %}>
                                    <label class="form-check-label" for="is_active">
                                        <i class="fas fa-eye text-primary me-1"></i>
                                        Active (visible on the site)
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_open_access" name="is_open_access"
                                           {% if journal and journal.is_open_access %}checked{% endif %}>
                                    <label class="form-check-label" for="is_open_access">
                                        <i class="fas fa-unlock-alt text-success me-1"></i>
                                        This is an Open Access journal
                                    </label>
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>{{ 'Update' if journal else 'Create' }} Journal
                                </button>
                                <a href="{{ url_for('admin.journals') }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- Preview Card -->
                <div class="card border-0 shadow-sm sticky-top" style="top: 100px;">
                    <div class="card-header bg-transparent">
                        <h6 class="mb-0"><i class="fas fa-eye me-2"></i>Preview</h6>
                    </div>
                    <div class="card-body text-center py-4">
                        <div class="rounded bg-light d-flex align-items-center justify-content-center mx-auto mb-3" 
                             style="width: 120px; height: 160px;" id="preview-image">
                            <i class="fas fa-book-open fa-2x text-muted"></i>
                        </div>
                        <h6 id="preview-name">Journal Name</h6>
                        <p class="text-muted small mb-0" id="preview-description">Description will appear here</p>
                    </div>
                </div>
                
                {% if journal %}
                <!-- Stats Card -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-transparent">
                        <h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Statistics</h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Published Articles</span>
                                <strong>{{ journal.articles.count() }}</strong>
                            </li>
                            <li class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Created</span>
                                <strong>{{ journal.created_at.strftime('%b %d, %Y') }}</strong>
                            </li>
                            <li class="d-flex justify-content-between">
                                <span class="text-muted">Last Updated</span>
                                <strong>{{ journal.updated_at.strftime('%b %d, %Y') if journal.updated_at else 'Never' }}</strong>
                            </li>
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
// Live preview
document.getElementById('name').addEventListener('input', function() {
    document.getElementById('preview-name').textContent = this.value || 'Journal Name';
});

document.getElementById('description').addEventListener('input', function() {
    document.getElementById('preview-description').textContent = 
        this.value ? this.value.substring(0, 100) + '...' : 'Description will appear here';
});

document.getElementById('cover_image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('preview-image');
            preview.innerHTML = `<img src="${e.target.result}" class="img-fluid rounded" style="max-height: 160px;">`;
        };
        reader.readAsDataURL(file);
    }
});
</script>
{% endblock %}