<!-- templates/movie_request.html -->
{% extends 'base.html' %}
{% block title %}Request a Movie - BlickBox{% endblock %}
{% block content %}
<div class="content-box">
    <div class="movie-request-container">
        <h2>Request a Movie</h2>
        <div class="form-group">
            <label for="title">Movie Title</label>
            <input type="text" id="title" placeholder="Enter movie or series title">
        </div>
        <div class="form-group">
            <label for="email">Your Email</label>
            <input type="email" id="email" placeholder="Enter your email">
        </div>
        <button id="submit-button">OK</button>
        <p class="error" id="error-message" style="display: none;"></p>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    async function submitRequest() {
        const title = document.getElementById('title').value;
        const email = document.getElementById('email').value;
        const errorMessage = document.getElementById('error-message');

        if (!title || !email) {
            errorMessage.textContent = 'Please fill in all fields';
            errorMessage.style.display = 'block';
            return;
        }

        document.getElementById('submit-button').disabled = true;
        errorMessage.style.display = 'none';

        try {
            const response = await fetch('/api/movie-request/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    title: title,
                    user_email: email
                })
            });

            if (response.ok) {
                alert('Request submitted successfully!');
                document.getElementById('title').value = '';
                document.getElementById('email').value = '';
            } else {
                const errorData = await response.json();
                errorMessage.textContent = errorData.error || 'Failed to submit request';
                errorMessage.style.display = 'block';
            }
        } catch (err) {
            errorMessage.textContent = 'Error: ' + err.message;
            errorMessage.style.display = 'block';
        } finally {
            document.getElementById('submit-button').disabled = false;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('submit-button').addEventListener('click', submitRequest);
    });
</script>
{% endblock %}