{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-end align-items-start" style="margin: 65px 10px -35px 0px;">
    <form action="{{ url_for('main.logout') }}" method="POST">
        <button type="submit" class="btn btn-danger">Logout</button>
    </form>
</div>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Add Video</h2>
                    <form id="videoForm" method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="title" class="form-label">Title:</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Description:</label>
                            <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="category" class="form-label">Category:</label>
                            <select class="form-select" name="category" id="category" required>
                                {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="video" class="form-label">Video File:</label>
                            <input type="file" class="form-control" name="video" id="video" accept="video/*" required>
                        </div>
                        <div class="mb-3">
                            <label for="preview" class="form-label">Preview Image:</label>
                            <input type="file" class="form-control" name="preview" id="preview" accept="image/*" required>
                            <img id="previewImage" src="" style="max-width: 100%; display: none;">
                        </div>
                        <button type="submit" class="btn btn-success w-100">Upload Video</button>
                    </form>
                </div>
            </div>
        </div>

        <style>
            #previewImage {
                width: 100%;
                margin-top: 30px;
                aspect-ratio: 16 / 9;
                object-fit: contain;
                background-color: black;
                border-radius: 20px;
            }
        </style>

        <script>
            document.getElementById('preview').addEventListener('change', function(event) {
                var previewFile = event.target.files[0];
                var previewImage = document.getElementById('previewImage');
                
                if (previewFile) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        previewImage.style.display = 'block';
                    };
                    reader.readAsDataURL(previewFile);
                } else {
                    previewImage.style.display = 'none';
                }
            });
        </script>

        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Add Category</h2>
                    <form method="POST">
                        <div class="mb-3">
                            <label for="category_name" class="form-label">Category Name:</label>
                            <input type="text" class="form-control" id="category_name" name="category_name" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Add Category</button>
                    </form>

                    <h3 class="mt-5">Existing Categories</h3>
                    <div class="row">
                        {% for category in categories %}
                        <div class="col-12 mb-3 d-flex justify-content-between align-items-center">
                            <span>{{ category.name }}</span>
                            <div>
                                <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal{{ category.id }}">
                                    <i class="fas fa-trash-alt"></i>
                                </button>

                                <div class="modal fade" id="deleteModal{{ category.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ category.id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel{{ category.id }}">Confirm Deletion</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p class="text-danger">
                                                    Удаление этой категории также удалит все связанные с ней видео. Вы уверены, что хотите продолжить?
                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <form method="POST" action="{{ url_for('main.delete_category', category_id=category.id) }}">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}