{% extends 'admin/layout.twig' %}

{% block title %}{{ video ? 'Edit' : 'Add New' }} Adult Video - Admin Panel - MediaLib{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{{ video ? 'Edit' : 'Add New' }} Adult Video</h1>
            <p class="text-muted mb-0">{{ video ? 'Update the video details' : 'Add a new video to your library' }}</p>
        </div>
        <a href="{{ path_for('admin.adult.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Back to List
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            {% if flash.getMessage('error') %}
                <div class="alert alert-danger">
                    {{ flash.getMessage('error') | first }}
                </div>
            {% endif %}

            <form method="post" action="{{ video ? path_for('admin.adult.edit', {id: video.id}) : path_for('admin.adult.create') }}" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    {% if video and video.poster_url %}
                                        <img id="poster-preview" src="{{ video.poster_url }}" class="img-fluid rounded" alt="Poster" style="max-height: 400px;">
                                    {% else %}
                                        <div id="poster-preview" class="bg-light d-flex align-items-center justify-content-center" style="height: 400px;">
                                            <i class="bi bi-image text-muted" style="font-size: 4rem;"></i>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="mb-3">
                                    <label for="poster" class="form-label">Poster Image</label>
                                    <input class="form-control" type="file" id="poster" name="poster" accept="image/*">
                                </div>
                                {% if video and video.poster_url %}
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" id="remove_poster" name="remove_poster">
                                        <label class="form-check-label" for="remove_poster">Remove poster</label>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ video.title ?? '' }}" required>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="release_date" class="form-label">Release Date</label>
                                    <input type="date" class="form-control" id="release_date" name="release_date" value="{{ video.release_date ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="runtime_minutes" class="form-label">Runtime (minutes)</label>
                                    <input type="number" class="form-control" id="runtime_minutes" name="runtime_minutes" min="0" value="{{ video.runtime_minutes ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="director" class="form-label">Director</label>
                                    <input type="text" class="form-control" id="director" name="director" value="{{ video.director ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="genre" class="form-label">Genre</label>
                                    <input type="text" class="form-control" id="genre" name="genre" value="{{ video.genre ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="overview" class="form-label">Overview</label>
                            <textarea class="form-control" id="overview" name="overview" rows="5">{{ video.overview ?? '' }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="rating" class="form-label">Rating (0-10)</label>
                                    <input type="number" class="form-control" id="rating" name="rating" min="0" max="10" step="0.1" value="{{ video.rating ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="external_id" class="form-label">External ID</label>
                                    <input type="text" class="form-control" id="external_id" name="external_id" value="{{ video.external_id ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="is_favorite" name="is_favorite" {{ video and video.is_favorite ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_favorite">Mark as favorite</label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="watched" name="watched" {{ video and video.watched ? 'checked' : '' }}>
                            <label class="form-check-label" for="watched">Mark as watched</label>
                        </div>

                        <!-- Actor Management Section -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">Actors</h5>
                            </div>
                            <div class="card-body">
                                <!-- Hidden input for video ID -->
                                <input type="hidden" id="video-id" value="{{ video.id }}">
                                
                                <!-- Actor Search -->
                                <div class="mb-3">
                                    <label for="actor-search" class="form-label">Search and Add Actors</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="actor-search" placeholder="Search for actors...">
                                        <button class="btn btn-outline-secondary" type="button" id="add-actor-btn">
                                            <i class="bi bi-plus-lg"></i> Add
                                        </button>
                                    </div>
                                    <div id="actor-results" class="list-group position-absolute d-none" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
                                        <!-- Search results will appear here -->
                                    </div>
                                </div>
                                
                                <!-- Current Actors -->
                                <div class="mb-3">
                                    <label class="form-label">Current Actors</label>
                                    <div id="actors-list" class="list-group">
                                        <!-- Actors will be added here dynamically -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save me-2"></i>Save Changes
                                </button>
                                <a href="{{ path_for('admin.adult.index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg me-2"></i>Cancel
                                </a>
                            </div>
                            {% if video %}
                                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                    <i class="bi bi-trash me-2"></i>Delete Video
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {% if video %}
        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this video? This action cannot be undone.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ path_for('admin.adult.delete', {id: video.id}) }}" method="post" class="d-inline">
                            <input type="hidden" name="_METHOD" value="DELETE">
                            <button type="submit" class="btn btn-danger">
                                <i class="bi bi-trash me-2"></i>Delete Video
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block styles %}
    <style>
        #actor-results {
            width: 100%;
            max-width: 100%;
        }
        #actor-results .list-group-item {
            cursor: pointer;
        }
        #actor-results .list-group-item:hover {
            background-color: #f8f9fa;
        }
        #actors-list .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script src="{{ base_url() }}/js/adult-video-actors.js"></script>
    <script>
        // Preview image before upload
        document.getElementById('poster').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('poster-preview');
                    preview.innerHTML = `<img src="${e.target.result}" class="img-fluid rounded" alt="Poster" style="max-height: 400px;">`;
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
{% endblock %}