{% extends 'base.html.twig' %}

{% block title %}Capture Photo{% endblock %}

{% block body %}
<style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .container {
        max-width: 600px;
        width: 100%;
        text-align: center;
    }
    .preview {
        margin-top: 20px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
</style>

<div class="container">
    <h1>Capture Photo</h1>
    <button id="capture-button">Prendre une photo</button>
    <div class="preview">
        <img id="photo-preview" alt="Preview" />
    </div>
    <button id="upload-button" class="hidden">Envoyer</button>
</div>

<script>
    let capturedFile;

    document.getElementById('capture-button').addEventListener('click', () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.capture = 'environment';

        input.addEventListener('change', () => {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    document.getElementById('photo-preview').src = e.target.result;
                    capturedFile = file;
                    document.getElementById('upload-button').classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });

        input.click();
    });

    document.getElementById('upload-button').addEventListener('click', () => {
        if (capturedFile) {
            uploadPhoto(capturedFile);
        } else {
            alert("Aucune photo sélectionnée à envoyer.");
        }
    });

    function uploadPhoto(file) {
        const formData = new FormData();
        formData.append('photo', file);

        fetch('/upload-photo', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
            alert("Photo envoyée avec succès!");
        })
        .catch((error) => {
            console.error('Error:', error);
            alert("Une erreur est survenue lors de l'envoi de la photo.");
        });
    }
</script>
{% endblock %}