{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}{{ action }} Material — {{ course.name }}{% endblock %}
{% if user.is_teacher %}{% block nav_teacher_courses %}active{% endblock %}
{% else %}{% block nav_courses %}active{% endblock %}{% endif %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'content:course_content' course_pk=course.pk %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> {{ course.name }} — Content
        </a>
        <h2><i class="fa-solid fa-photo-film me-2"></i>{{ action }} Material</h2>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="portal-card">
            <div class="portal-card-body">
                <form method="post" enctype="multipart/form-data" id="materialForm">
                    {% csrf_token %}
                    {% crispy form %}
                </form>
            </div>
        </div>

        {% if material and material.file %}
        <div class="portal-card mt-3">
            <div class="portal-card-body">
                <p class="text-muted small mb-1 fw-semibold">Current file:</p>
                <a href="{{ material.file.url }}" target="_blank" class="small">
                    <i class="fa-solid fa-file me-1"></i>{{ material.file.name|cut:"course_materials/" }}
                </a>
                <p class="text-muted small mb-0 mt-1">Upload a new file to replace it, or leave blank to keep the current one.</p>
            </div>
        </div>
        {% endif %}

        <!-- YouTube URL guidance — shown/hidden by JS when type = youtube -->
        <div id="yt-url-guide" class="portal-card mt-3" style="display:none;border-left:4px solid #ff0000;">
            <div class="portal-card-body">
                <p class="fw-semibold mb-2" style="color:#cc0000;">
                    <i class="fa-brands fa-youtube me-2"></i>How to add a YouTube video
                </p>

                <p class="small text-muted mb-2"><strong>Step 1 — Get the video URL</strong></p>
                <p class="small mb-3">
                    Open the video on YouTube, then copy the URL from your browser's address bar.
                    Any of these formats work:
                </p>
                <div style="background:#f8f9fa;border-radius:6px;padding:.75rem 1rem;font-family:monospace;font-size:.82rem;margin-bottom:1rem;">
                    <div class="mb-1"><span class="badge bg-success me-2">✓</span>https://www.youtube.com/watch?v=<strong>VIDEO_ID</strong></div>
                    <div class="mb-1"><span class="badge bg-success me-2">✓</span>https://youtu.be/<strong>VIDEO_ID</strong></div>
                    <div><span class="badge bg-danger me-2">✗</span>https://www.youtube.com/embed/VIDEO_ID &nbsp;<span class="text-muted">(don't use embed links)</span></div>
                </div>

                <p class="small text-muted mb-2"><strong>Step 2 — Enable embedding on the video</strong></p>
                <p class="small mb-0">
                    The video must have <strong>embedding allowed</strong>, otherwise it will fail to play on this portal.
                    To check or enable it:
                </p>
                <ol class="small mb-3 mt-1 ps-4" style="line-height:1.9;">
                    <li>Go to <strong>YouTube Studio</strong> (studio.youtube.com)</li>
                    <li>Click <strong>Content</strong>, then click the video</li>
                    <li>Click <strong>More options</strong> (below the description)</li>
                    <li>Under <em>Distribution</em>, make sure <strong>"Allow embedding"</strong> is <strong>ON</strong></li>
                    <li>Save &amp; wait a few minutes for changes to take effect</li>
                </ol>

                <div class="alert alert-warning py-2 small mb-0">
                    <i class="fa-solid fa-triangle-exclamation me-1"></i>
                    If a student sees <strong>"Video player configuration error"</strong> or <strong>Error 153</strong>,
                    the video does not have embedding enabled. Go to YouTube Studio and follow Step 2 above.
                </div>
            </div>
        </div>

        <div class="portal-card mt-3">
            <div class="portal-card-body">
                <p class="text-muted small mb-1">
                    <i class="fa-solid fa-circle-info me-1" style="color:var(--color-secondary);"></i>
                    <strong>File uploads:</strong> Maximum {{ max_file_size_mb }} MB per file.
                    For videos, we recommend using a <strong>YouTube link</strong> instead — it loads faster and saves storage.
                </p>
                {% if action == 'Edit' %}
                <p class="text-muted small mb-0 mt-2">
                    <i class="fa-solid fa-sort me-1" style="color:var(--color-secondary);"></i>
                    <strong>Order:</strong> Lower numbers appear first in the student view.
                    Change this number to reposition this material in the list.
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const typeField = document.querySelector('[name="material_type"]');
    const fields = {
        youtube: document.querySelector('[name="youtube_url"]')?.closest('.mb-3'),
        link:    document.querySelector('[name="external_url"]')?.closest('.mb-3'),
        upload:  document.querySelector('[name="file"]')?.closest('.mb-3'),
        note:    document.querySelector('[name="text_content"]')?.closest('.mb-3'),
    };

    const ytGuide = document.getElementById('yt-url-guide');

    function updateFields() {
        const val = typeField?.value;
        Object.entries(fields).forEach(([key, el]) => {
            if (el) el.style.display = (key === val) ? '' : 'none';
        });
        if (ytGuide) ytGuide.style.display = (val === 'youtube') ? '' : 'none';
    }

    typeField?.addEventListener('change', updateFields);
    updateFields();
});
</script>
{% endblock %}