{% extends "base.html" %}
{% load i18n static %}

{% block title %}
    {% if LANGUAGE_CODE == 'ar' %}{{ subject.name_ar }}{% else %}{{ subject.name_en }}{% endif %} | EduPlatform
{% endblock %}

{% block content %}
<div class="container py-5">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">{% trans "Home" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if LANGUAGE_CODE == 'ar' %}{{ subject.classroom.name_ar }}{% else %}{{ subject.classroom.name_en }}{% endif %}
            </li>
        </ol>
    </nav>

    <div class="row g-5">
        <div class="col-lg-8">
            <div class="glass-card mb-4 overflow-hidden p-0">
                <div style="height: 300px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; position: relative;">
                    {% if subject.image %}
                    <img src="{{ subject.image.url }}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ subject.name_en }}">
                    {% else %}
                    <span class="display-1" style="opacity: 0.1;">📚</span>
                    {% endif %}
                    <div class="position-absolute top-0 end-0 m-4">
                        <span class="badge bg-primary fs-6 px-3 py-2 shadow-sm">
                            {% if LANGUAGE_CODE == 'ar' %}{{ subject.classroom.name_ar }}{% else %}{{ subject.classroom.name_en }}{% endif %}
                        </span>
                    </div>
                </div>
                <div class="p-4 p-md-5">
                    <h1 class="fw-bold mb-4">
                        {% if LANGUAGE_CODE == 'ar' %}{{ subject.name_ar }}{% else %}{{ subject.name_en }}{% endif %}
                    </h1>
                    
                    {% for teacher in subject.teachers.all %}
                    <div class="d-flex align-items-center mb-3 p-3 rounded-3 bg-light">
                        <div class="avatar-placeholder me-3" style="width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">
                            {{ teacher.user.username|first|upper }}
                        </div>
                        <div>
                            <p class="mb-0 text-muted small">{% trans "Teacher" %}</p>
                            <h6 class="fw-bold mb-0">{{ teacher }}</h6>
                        </div>
                    </div>
                    {% empty %}
                     <div class="d-flex align-items-center mb-3 p-3 rounded-3 bg-light">
                        <div>
                            <p class="mb-0 text-muted small">{% trans "Teacher" %}</p>
                            <h6 class="fw-bold mb-0">{% trans "Not Assigned" %}</h6>
                        </div>
                    </div>
                    {% endfor %}

                    <h4 class="fw-bold mb-3 mt-4">{% trans "About this Subject" %}</h4>
                    <div class="lead text-muted mb-5">
                        {% if LANGUAGE_CODE == 'ar' %}
                            {{ subject.description_ar|linebreaks }}
                        {% else %}
                            {{ subject.description_en|linebreaks }}
                        {% endif %}
                    </div>

                    <!-- Resources Section -->
                    <div class="mb-5">
                        <div class="d-flex align-items-center mb-4">
                            <h4 class="fw-bold mb-0">{% trans "Course Resources" %}</h4>
                            <span class="badge bg-light text-primary ms-3 border rounded-pill px-3">{{ subject.resources.count }}</span>
                        </div>

                        {% if subject.resources.all %}
                        <div class="list-group list-group-flush border rounded-4 overflow-hidden">
                            {% for resource in subject.resources.all %}
                            <div class="list-group-item p-3 d-flex align-items-center justify-content-between hover-bg-light transition-all">
                                <div class="d-flex align-items-center">
                                    <div class="me-3 p-2 rounded-3 
                                        {% if resource.resource_type == 'VIDEO' %}bg-danger-subtle text-danger
                                        {% elif resource.resource_type == 'FILE' %}bg-primary-subtle text-primary
                                        {% else %}bg-success-subtle text-success{% endif %}">
                                        {% if resource.resource_type == 'VIDEO' %}
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
                                              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
                                            </svg>
                                        {% elif resource.resource_type == 'FILE' %}
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-text-fill" viewBox="0 0 16 16">
                                              <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.793 4L10 0.207A1.5 1.5 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"/>
                                            </svg>
                                        {% else %}
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
                                              <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                                              <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                                            </svg>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-semibold">
                                            {% if LANGUAGE_CODE == 'ar' %}{{ resource.title_ar }}{% else %}{{ resource.title_en }}{% endif %}
                                        </h6>
                                        <small class="text-muted">
                                            {{ resource.get_resource_type_display }}
                                        </small>
                                    </div>
                                </div>
                                <button class="btn btn-sm btn-outline-primary rounded-pill px-3 view-resource-btn" 
                                        data-type="{{ resource.resource_type }}"
                                        data-title="{% if LANGUAGE_CODE == 'ar' %}{{ resource.title_ar }}{% else %}{{ resource.title_en }}{% endif %}"
                                        data-file-url="{% if resource.file %}{{ resource.file.url }}{% endif %}"
                                        data-link="{% if resource.link %}{{ resource.link }}{% endif %}"
                                        data-youtube-id="{{ resource.get_youtube_id|default:'' }}">
                                    {% trans "View" %}
                                </button>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="text-center p-5 bg-light rounded-4">
                            <div class="display-6 mb-3">📂</div>
                            <h6 class="text-muted">{% trans "No resources available yet." %}</h6>
                        </div>
                        {% endif %}
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sticky-top" style="top: 2rem; z-index: 10;">
                <div class="glass-card shadow-lg border-primary border-top border-4">
                    <div class="p-4">
                        <h3 class="fw-bold text-primary mb-4">${{ subject.price }}</h3>
                        
                        <ul class="list-unstyled mb-4">
                            <li class="mb-3 d-flex align-items-center">
                                <span class="text-success me-2">✓</span> {% trans "Full lifetime access" %}
                            </li>
                            <li class="mb-3 d-flex align-items-center">
                                <span class="text-success me-2">✓</span> {% trans "Access on mobile and desktop" %}
                            </li>
                            <li class="mb-3 d-flex align-items-center">
                                <span class="text-success me-2">✓</span> {% trans "Certificate of completion" %}
                            </li>
                        </ul>

                        <button class="btn btn-primary btn-lg w-100 py-3 fw-bold mb-3 shadow-sm">
                            {% trans "Enroll Now" %}
                        </button>
                        <p class="text-center text-muted small mb-0">
                            {% trans "30-Day Money-Back Guarantee" %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Resource Modal -->
<div class="modal fade" id="resourceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow-lg">
      <div class="modal-header border-0 pb-0">
        <h5 class="modal-title fw-bold" id="resourceModalTitle">{% trans "Resource" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4" id="resourceModalBody">
        <!-- Content injected via JS -->
      </div>
      <div class="modal-footer border-0 pt-0">
         <a href="#" target="_blank" id="openNewTabBtn" class="btn btn-primary rounded-pill">
            {% trans "Open in New Tab" %} <i class="bi bi-box-arrow-up-right ms-2"></i>
         </a>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const resourceModal = new bootstrap.Modal(document.getElementById('resourceModal'));
    const modalTitle = document.getElementById('resourceModalTitle');
    const modalBody = document.getElementById('resourceModalBody');
    const openNewTabBtn = document.getElementById('openNewTabBtn');

    document.querySelectorAll('.view-resource-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const type = this.dataset.type;
            const title = this.dataset.title;
            const fileUrl = this.dataset.fileUrl;
            const link = this.dataset.link;
            const youtubeId = this.dataset.youtubeId;

            modalTitle.textContent = title;
            openNewTabBtn.style.display = 'inline-block'; // Default to showing it

            if (type === 'VIDEO' && youtubeId) {
                modalBody.innerHTML = `
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/${youtubeId}?autoplay=1" title="${title}" allowfullscreen></iframe>
                    </div>
                `;
                openNewTabBtn.href = link;
            } else if (type === 'FILE' && fileUrl) {
                // Check if it's an image or PDF for preview
                const ext = fileUrl.split('.').pop().toLowerCase();
                if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
                     modalBody.innerHTML = `<img src="${fileUrl}" class="img-fluid rounded" alt="${title}">`;
                } else if (ext === 'pdf') {
                     modalBody.innerHTML = `
                        <div class="ratio ratio-4x3">
                            <iframe src="${fileUrl}" title="${title}"></iframe>
                        </div>
                     `;
                } else {
                    // Other files: no preview, just download button
                    modalBody.innerHTML = `
                        <div class="text-center py-5">
                            <div class="mb-3 display-4">📄</div>
                            <p class="mb-3">{% trans "This file type cannot be previewed directly." %}</p>
                            <a href="${fileUrl}" class="btn btn-primary rounded-pill" download>{% trans "Download File" %}</a>
                        </div>
                    `;
                    openNewTabBtn.style.display = 'none'; // Use the internal download button instead
                }
                openNewTabBtn.href = fileUrl;
                
            } else if (type === 'LINK' && link) {
                modalBody.innerHTML = `
                    <div class="text-center py-5">
                        <div class="mb-3 display-4">🔗</div>
                        <p class="mb-3">{% trans "You are about to visit an external link." %}</p>
                        <p class="text-primary fw-bold text-break">${link}</p>
                    </div>
                `;
                openNewTabBtn.href = link;
            }

            resourceModal.show();
        });
    });

    // Stop video when modal closes
    document.getElementById('resourceModal').addEventListener('hidden.bs.modal', function () {
        modalBody.innerHTML = '';
    });
});
</script>
{% endblock %}