{% extends "base.html" %}

{% block title %}Upload Content - SKE Digital Signage{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col">
            <h1><i class="bi bi-cloud-upload"></i> Upload Content</h1>
            <p class="text-muted">Upload images, videos, or documents to your players and groups</p>
        </div>
        <div class="col-auto">
            <a href="{{ return_url }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- Upload Form -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-upload"></i> Upload Files</h5>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <!-- Target Selection -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="target_type" class="form-label">Target Type</label>
                                <select class="form-select" id="target_type" name="target_type" required>
                                    <option value="">Select target type...</option>
                                    <option value="player" {% if target_type == 'player' %}selected{% endif %}>Player</option>
                                    <option value="group" {% if target_type == 'group' %}selected{% endif %}>Group</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="target_id" class="form-label">Target</label>
                                <select class="form-select" id="target_id" name="target_id" required>
                                    <option value="">Select target...</option>
                                    {% if target_type == 'player' and target_id %}
                                        {% for player in players %}
                                            <option value="{{ player.id }}" 
                                                {% if player.id|string == target_id|string %}selected{% endif %}>
                                                {{ player.username }} ({{ player.hostname }})
                                            </option>
                                        {% endfor %}
                                    {% elif target_type == 'group' and target_id %}
                                        {% for group in groups %}
                                            <option value="{{ group.id }}" 
                                                {% if group.id|string == target_id|string %}selected{% endif %}>
                                                {{ group.name }} ({{ group.player_count }} players)
                                            </option>
                                        {% endfor %}
                                    {% endif %}
                                </select>
                            </div>
                        </div>

                        <!-- File Selection -->
                        <div class="mb-3">
                            <label for="files" class="form-label">Files</label>
                            <input type="file" class="form-control" id="files" name="files" multiple required
                                accept="image/*,video/*,.pdf,.ppt,.pptx">
                            <div class="form-text">
                                Supported formats: Images (PNG, JPG, GIF), Videos (MP4, AVI, MOV), Documents (PDF, PowerPoint)
                            </div>
                        </div>

                        <!-- Duration Setting -->
                        <div class="mb-3">
                            <label for="duration" class="form-label">Display Duration (seconds)</label>
                            <input type="number" class="form-control" id="duration" name="duration" 
                                value="10" min="1" max="3600" required>
                            <div class="form-text">
                                How long each item should be displayed (for images and documents)
                            </div>
                        </div>

                        <!-- Hidden fields -->
                        <input type="hidden" name="return_url" value="{{ return_url }}">

                        <!-- Submit Button -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-cloud-upload"></i> Upload Files
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Upload Guidelines -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6><i class="bi bi-info-circle"></i> Upload Guidelines</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h6>Images</h6>
                            <ul class="small">
                                <li>PNG, JPG, GIF, BMP, WebP</li>
                                <li>Will be optimized automatically</li>
                                <li>Best: 1920x1080 resolution</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6>Videos</h6>
                            <ul class="small">
                                <li>MP4, AVI, MOV, WMV, WebM</li>
                                <li>Converted to web-compatible MP4</li>
                                <li>Duration setting is ignored</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6>Documents</h6>
                            <ul class="small">
                                <li>PDF, PowerPoint (PPT/PPTX)</li>
                                <li>Converted to images per page/slide</li>
                                <li>Each page uses duration setting</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const targetTypeSelect = document.getElementById('target_type');
    const targetIdSelect = document.getElementById('target_id');
    
    // Players and groups data
    const players = {{ players|tojson }};
    const groups = {{ groups|tojson }};
    
    function updateTargetOptions() {
        const targetType = targetTypeSelect.value;
        targetIdSelect.innerHTML = '<option value="">Select target...</option>';
        
        if (targetType === 'player') {
            players.forEach(player => {
                const option = document.createElement('option');
                option.value = player.id;
                option.textContent = `${player.username} (${player.hostname})`;
                targetIdSelect.appendChild(option);
            });
        } else if (targetType === 'group') {
            groups.forEach(group => {
                const option = document.createElement('option');
                option.value = group.id;
                option.textContent = `${group.name} (${group.player_count} players)`;
                targetIdSelect.appendChild(option);
            });
        }
    }
    
    targetTypeSelect.addEventListener('change', updateTargetOptions);
    
    // Initialize if target_type is already selected
    if (targetTypeSelect.value) {
        updateTargetOptions();
    }
});
</script>
{% endblock %}