{% extends "base.html" %}

{% block title %}{{ saved_name }} - Timetable Generator{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-calendar-check me-2"></i>{{ saved_name }}
    </h2>
    <div>
        {% if timetables %}
        <a href="{{ url_for('edit_timetable') }}" class="btn btn-primary me-2">
            <i class="fas fa-edit me-1"></i>Edit Mode
        </a>
        <a href="{{ url_for('regenerate_saved_timetable', saved_id=saved_id) }}" class="btn btn-warning me-2">
            <i class="fas fa-sync-alt me-1"></i>Regenerate
        </a>
        {% endif %}
        <button class="btn btn-secondary" onclick="window.print()">
            <i class="fas fa-print me-1"></i>Print
        </button>
        <a href="{{ url_for('saved_timetables') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Back to Saved
        </a>
    </div>
</div>

{% if has_conflicts %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-warning">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    ⚠️ Teacher Scheduling Conflicts Detected ({{ conflicts|length }})
                </h5>
            </div>
            <div class="card-body">
                <p class="mb-3">
                    <strong>Some teachers are scheduled in multiple sections at the same time.</strong>
                    This may be due to changes in teacher or subject data since this timetable was saved.
                    Use Edit Mode to resolve these conflicts or Regenerate to create a new conflict-free timetable.
                </p>
                
                <div class="accordion" id="conflictAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#conflictDetails">
                                View Conflict Details
                            </button>
                        </h2>
                        <div id="conflictDetails" class="accordion-collapse collapse" data-bs-parent="#conflictAccordion">
                            <div class="accordion-body">
                                {% for conflict in conflicts %}
                                <div class="alert alert-warning mb-2">
                                    <i class="fas fa-user-times me-2"></i>
                                    <strong>{{ conflict.teacher }}</strong> is scheduled at 
                                    <strong>{{ conflict.time }}</strong> in:
                                    <ul class="mb-0 mt-2">
                                        {% for i in range(conflict.sections|length) %}
                                        <li><strong>{{ conflict.sections[i] }}</strong> - {{ conflict.subjects[i] }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endfor %}
                                
                                <div class="mt-3">
                                    <a href="{{ url_for('edit_timetable') }}" class="btn btn-warning me-2">
                                        <i class="fas fa-edit me-1"></i>Resolve in Edit Mode
                                    </a>
                                    <a href="{{ url_for('regenerate_saved_timetable', saved_id=saved_id) }}" class="btn btn-primary">
                                        <i class="fas fa-sync-alt me-1"></i>Regenerate Timetable
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if timetables %}
    {% for timetable in timetables %}
    <div class="card mb-4">
        <div class="card-header">
            <h4 class="mb-0">
                <i class="fas fa-users me-2"></i>{{ timetable.section_name }} ({{ timetable.section_year }})
            </h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered timetable-grid">
                    <thead>
                        <tr class="table-dark">
                            <th class="text-center">Day</th>
                            {% for period in timetable.periods %}
                            <th class="text-center">{{ period }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for day_index in range(6) %}
                        <tr>
                            <td class="fw-bold text-center table-secondary">{{ timetable.days[day_index] }}</td>
                            {% set skip_cells = [] %}
                            {% for period_index in range(8) %}
                                {% if period_index not in skip_cells %}
                                    {% set subject = timetable.schedule[day_index][period_index] %}
                                    {% if subject %}
                                        <td class="timetable-cell text-center" {% if subject.get('colspan', 1) > 1 %}colspan="{{ subject.colspan }}"{% endif %}>
                                            {% if subject.is_lunch %}
                                                <div class="lunch-cell">
                                                    <div class="fw-bold"><i class="fas fa-utensils me-1"></i>LUNCH</div>
                                                    <small>Break Time</small>
                                                </div>
                                            {% elif subject.get('is_merged_lab', False) %}
                                                <div class="subject-cell lab-cell merged-lab-cell">
                                                    <div class="fw-bold">{{ subject.name }}</div>
                                                    <small>{{ subject.teacher }}</small>
                                                    <div><small><i class="fas fa-flask"></i> {{ subject.block_size }}-Period Lab Block</small></div>
                                                </div>
                                                {% for span_index in range(1, subject.colspan) %}
                                                    {% set _ = skip_cells.append(period_index + span_index) %}
                                                {% endfor %}
                                            {% else %}
                                                <div class="subject-cell {% if subject.is_lab %}lab-cell{% endif %}">
                                                    <div class="fw-bold">{{ subject.name }}</div>
                                                    <small>{{ subject.teacher }}</small>
                                                    {% if subject.is_lab %}
                                                        <div><small><i class="fas fa-flask"></i> Lab</small></div>
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                        </td>
                                    {% else %}
                                        <td class="timetable-cell text-center">
                                            <div class="empty-cell p-2">
                                                <small class="text-muted">Free</small>
                                            </div>
                                        </td>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Subject Summary -->
            <div class="mt-4">
                <h6>Subject Summary:</h6>
                <div class="row">
                    {% set subject_data = {} %}
                    {% for day in timetable.schedule %}
                        {% for period in day %}
                            {% if period and not period.is_lunch %}
                                {% set _ = subject_data.update({period.name: {'count': subject_data.get(period.name, {}).get('count', 0) + 1, 'is_lab': period.is_lab}}) %}
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                    {% for subject_name, data in subject_data.items() %}
                        <div class="col-md-3 mb-2">
                            <span class="badge {% if data.is_lab %}bg-warning text-dark{% else %}bg-primary{% endif %} me-1">
                                {{ data.count }}
                            </span>
                            <i class="fas {% if data.is_lab %}fa-flask{% else %}fa-book{% endif %} me-1"></i>
                            {{ subject_name }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% else %}
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No Timetables</h5>
            <p class="text-muted">This saved timetable has no data to display.</p>
            <a href="{{ url_for('saved_timetables') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back to Saved Timetables
            </a>
        </div>
    </div>
{% endif %}

<style>
@media print {
    .btn, .navbar, .alert {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 2rem !important;
    }
    
    .timetable-grid {
        font-size: 12px;
    }
    
    .subject-cell {
        background-color: #f8f9fa !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .lab-cell {
        background-color: #fff3cd !important;
        color: #000 !important;
    }
    
    .merged-lab-cell {
        background-color: #ffeaa7 !important;
        border: 2px solid #fdcb6e !important;
        font-weight: bold !important;
    }
}
</style>
{% endblock %}