@foreach($beneficiaries as $index => $beneficiary)
<div class="mt-4">
    <h3 class="text-lg font-medium text-gray-900">Prendre une photo avec la caméra pour {{ $beneficiary->name }}</h3>

    <!-- Bouton pour activer la caméra -->
    <x-secondary-button class="mt-2 me-2" type="button" id="activateCamera-{{ $index }}">
        {{ __('Activer la caméra') }}
    </x-secondary-button>

    <!-- Zone vidéo/prévisualisation avec cadre défini, cachée par défaut -->
    <div class="relative mt-2 hidden" id="video-container-{{ $index }}" style="width: 400px; height: 300px; border: 2px solid #ccc; border-radius: 8px; overflow: hidden;">
        <video id="video-{{ $index }}" class="absolute top-0 left-0 w-full h-full object-cover" autoplay></video>
        <img id="preview-{{ $index }}" class="absolute top-0 left-0 w-full h-full object-cover hidden" />
    </div>

    <x-secondary-button class="mt-2 me-2 hidden" type="button" id="capture-{{ $index }}">
        {{ __('Prendre une photo') }}
    </x-secondary-button>

    <x-secondary-button class="mt-2 me-2 hidden" type="button" id="retry-{{ $index }}">
        {{ __('Reprendre') }}
    </x-secondary-button>

    <x-secondary-button class="mt-2 me-2 hidden" type="button" id="cancel-{{ $index }}">
        {{ __('Annuler') }}
    </x-secondary-button>

    <canvas id="canvas-{{ $index }}" class="hidden"></canvas>

    <form method="POST" action="{{ route('profile.photo-camera.store') }}" enctype="multipart/form-data" id="photoForm-{{ $index }}">
        @csrf
        <input type="hidden" name="photo" id="photoInput-{{ $index }}">
        <x-secondary-button type="submit" class="hidden px-4 py-2 mt-4 bg-green-500 rounded text-blue" id="uploadButton-{{ $index }}">
            Envoyer la photo
        </x-secondary-button>
        <x-input-error for="photo" class="mt-2" />
    </form>
</div>
@endforeach
<script>
    document.addEventListener('DOMContentLoaded', () => {
        @foreach($beneficiaries as $index => $beneficiary)
        const activateCameraButton{{ $index }} = document.getElementById('activateCamera-{{ $index }}');
        const video{{ $index }} = document.getElementById('video-{{ $index }}');
        const previewImage{{ $index }} = document.getElementById('preview-{{ $index }}');
        const videoContainer{{ $index }} = document.getElementById('video-container-{{ $index }}');
        const canvas{{ $index }} = document.getElementById('canvas-{{ $index }}');
        const captureButton{{ $index }} = document.getElementById('capture-{{ $index }}');
        const retryButton{{ $index }} = document.getElementById('retry-{{ $index }}');
        const cancelButton{{ $index }} = document.getElementById('cancel-{{ $index }}');
        const photoInput{{ $index }} = document.getElementById('photoInput-{{ $index }}');
        const uploadButton{{ $index }} = document.getElementById('uploadButton-{{ $index }}');

        const startCamera{{ $index }} = () => {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then((stream) => {
                    video{{ $index }}.srcObject = stream;
                    videoContainer{{ $index }}.classList.remove('hidden');
                    captureButton{{ $index }}.classList.remove('hidden');
                })
                .catch((error) => {
                    console.error('Erreur d\'accès à la caméra :', error);
                });
        };

        const resetInterface{{ $index }} = () => {
            previewImage{{ $index }}.classList.add('hidden');
            video{{ $index }}.classList.add('hidden');
            uploadButton{{ $index }}.classList.add('hidden');
            retryButton{{ $index }}.classList.add('hidden');
            cancelButton{{ $index }}.classList.add('hidden');
            captureButton{{ $index }}.classList.add('hidden');
            videoContainer{{ $index }}.classList.add('hidden');
            activateCameraButton{{ $index }}.classList.remove('hidden');
            const stream = video{{ $index }}.srcObject;
            if (stream) {
                const tracks = stream.getTracks();
                tracks.forEach(track => track.stop());
            }
        };

        activateCameraButton{{ $index }}.addEventListener('click', () => {
            activateCameraButton{{ $index }}.classList.add('hidden');
            startCamera{{ $index }}();
        });

        captureButton{{ $index }}.addEventListener('click', () => {
            const context = canvas{{ $index }}.getContext('2d');
            canvas{{ $index }}.width = video{{ $index }}.videoWidth;
            canvas{{ $index }}.height = video{{ $index }}.videoHeight;
            context.drawImage(video{{ $index }}, 0, 0, canvas{{ $index }}.width, canvas{{ $index }}.height);

            const dataURL = canvas{{ $index }}.toDataURL('image/png');
            photoInput{{ $index }}.value = dataURL;
            previewImage{{ $index }}.src = dataURL;

            video{{ $index }}.classList.add('hidden');
            previewImage{{ $index }}.classList.remove('hidden');
            uploadButton{{ $index }}.classList.remove('hidden');
            retryButton{{ $index }}.classList.remove('hidden');
            cancelButton{{ $index }}.classList.remove('hidden');
            captureButton{{ $index }}.classList.add('hidden');
        });

        retryButton{{ $index }}.addEventListener('click', () => {
            previewImage{{ $index }}.classList.add('hidden');
            video{{ $index }}.classList.remove('hidden');
            captureButton{{ $index }}.classList.remove('hidden');
            uploadButton{{ $index }}.classList.add('hidden');
            retryButton{{ $index }}.classList.add('hidden');
            cancelButton{{ $index }}.classList.remove('hidden');
        });

        cancelButton{{ $index }}.addEventListener('click', () => {
            resetInterface{{ $index }}();
            photoInput{{ $index }}.value = '';
        });
        @endforeach
    });
</script>