{% extends "base.html" %}
{% block title %}Capture Photos{% endblock %}

{% block content %}
<style>
    .card-custom {
        width: 800px;
        margin: auto;
    }
    .loading-card {
        display: none;
        width: 300px;
        text-align: center;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        position: absolute;
        right: -170px;
        top: 50%;
        transform: translateY(-50%);
    }
    .loading-container {
        position: relative;
    }
    .success-tick {
        display: none;
        font-size: 2em;
        color: green;
    }
</style>

<div class="container mt-5 d-flex justify-content-center loading-container">
    <div class="card card-custom text-center">
        <div class="card-body">
            <h5 class="card-title">Capture Photos</h5>
            <br>
            <p>Ensure your face is clearly visible to the camera.</p>
            <div>
                <video id="video" width="640" height="480" autoplay></video>
                <canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
            </div>
            <br>
            <button type="button" class="btn btn-primary" id="startCapture" disabled>Start Capture</button>
            <button type="button" class="btn btn-secondary" onclick="window.history.back()">Back</button>
        </div>
    </div>
    <div class="loading-card" id="loadingCard">
        <div id="loadingSpinner" class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <div id="successTick" class="success-tick">&#10004;</div>
        <p id="loadingMessage">Taking your photos...Please wait</p>
    </div>
</div>

<!-- Custom Alert Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="alertModalLabel">Alert</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="alertModalBody">
                <!-- Alert message will be inserted here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    console.log('Script loaded');

    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const startCaptureButton = document.getElementById('startCapture');
    const loadingCard = document.getElementById('loadingCard');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const successTick = document.getElementById('successTick');
    const loadingMessage = document.getElementById('loadingMessage');
    const student_id = "{{ student_id }}";
    let count = 0;
    const maxPhotos = 20;
    const images = [];
    let videoStream = null;

    function startVideo() {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
                videoStream = stream;
                console.log('Video stream started');
                startCaptureButton.disabled = false;
            })
            .catch(err => {
                console.error('Error accessing webcam: ', err);
                showAlert("Error accessing webcam. Please check your camera and try again.");
            });
    }

    function stopVideo() {
        if (videoStream) {
            let tracks = videoStream.getTracks();
            tracks.forEach(track => track.stop());
            videoStream = null;
            console.log('Video stream stopped');
        }
    }

    function capturePhoto() {
        const context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const photoData = canvas.toDataURL('image/jpeg');
        console.log('Captured photo:', photoData);
        return photoData;
    }

    function sendPhotos() {
        console.log('Sending photos to server...');
        fetch("/start_capture", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ student_id: student_id, images: images })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Response from server:', data);
            if (data.success) {
                stopVideo();  // Stop the video stream
                loadingSpinner.style.display = 'none';
                successTick.style.display = 'block';
                loadingMessage.innerText = 'Successfully taken photos';
                setTimeout(() => {
                    loadingSpinner.style.display = 'block'; // Show loading spinner
                    successTick.style.display = 'none'; // Hide success tick
                    loadingMessage.innerText = 'Training the model...Please wait';
                    
                    // Start model training
                    fetch("/model_training", {
                        method: "POST"
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.location.href = "/";
                        } else {
                            showAlert('Model training failed. Please try again.');
                        }
                    })
                    .catch(error => console.error('Error:', error));
                }, 2000);
            } else {
                showAlert("Failed to capture photos. Please try again.");
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert("An error occurred while capturing photos. Please try again.");
        });
    }

    function showAlert(message) {
        document.getElementById('alertModalBody').innerText = message;
        $('#alertModal').modal('show');
    }

    startCaptureButton.addEventListener('click', () => {
        startCaptureButton.disabled = true;
        startCaptureButton.classList.add('btn-secondary');
        startCaptureButton.classList.remove('btn-primary');
        loadingCard.style.display = 'block';

        const interval = setInterval(() => {
            if (count >= maxPhotos) {
                clearInterval(interval);
                sendPhotos();
                return;
            }
            const photo = capturePhoto();
            console.log('Captured photo', count + 1);
            images.push(photo);
            count++;
        }, 1000); // Capture a photo every second
    });

    console.log('Starting video...');
    startVideo();
</script>
{% endblock %}