{% extends 'base.html' %}

{% block title %}Boycott List Dot Info{% endblock %}

{% block content %}

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-success mt-3 text-center">{{ message }}</div>
    {% endfor %}
{% endif %}



<!-- Search Bar -->
<form id="search-form" style="text-align: center; margin-bottom: 20px;">
    {% csrf_token %}
    <input type="text" name="search" id="search" placeholder="Search products..." style="padding: 10px; width: 300px; border-radius: 6px; border: 1px solid #ccc;">
</form>

<!-- Scan Button -->
<div style="text-align: center;">
    <button id="scan-btn" type="button">📷 Scan Product</button>
</div>

<!-- Display Captured Image as Card -->
<div id="captured-image-container" class="card-container">
    <div class="card" id="captured-card" style="display: none;">
        <img id="captured-image" src="" alt="Captured Image" />
        <div class="card-body">
            <p>Scanned Image</p>
        </div>
    </div>
</div>

<!-- Dynamic Product List -->
<div class="product-container" id="product-list">
    {% include 'items/item_cards.html' %}
</div>

<style>
    #scan-btn {
        margin: 20px auto;
        padding: 12px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #scan-btn:hover {
        background-color: #0056b3;
    }

    .card-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .card {
        border: 1px solid #ddd;
        border-radius: 10px;
        width: 300px; /* Fixed width for consistency */
        height: 380px; /* Fixed height for consistency */
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        background-color: #fff;
        transition: transform 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card:hover {
        transform: scale(1.02);
    }

    .card img {
        width: 100%;
        height: 200px; /* Set a fixed height for images */
        object-fit: cover;
    }

    .card-body {
        padding: 15px;
        text-align: center;
        font-weight: bold;
        color: #333;
        flex-grow: 1; /* Ensure the content fills the remaining space */
    }

    .product-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 30px;
        padding: 0 20px;
    }

    /* For smaller screens */
    @media screen and (max-width: 768px) {
        .product-card {
            width: 100%;
            max-width: 280px;
            height: auto; /* Adjust height for smaller screens */
        }

        .item-logo {
            width: 100px;
            height: 100px;
        }

        .product-details h3 {
            font-size: 16px;
        }

        .item-description, .item-reason {
            font-size: 13px;
        }
    }
</style>

<div style="height: 80px;"></div>

{% endblock %}

{% block javascript %}
    <script>
        // Search Functionality with Auto-Update on Typing
        document.getElementById('search').addEventListener('input', function () {
            const query = this.value;

            if (query.trim() !== '') {
                fetch('/search-items/?search=' + query)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('product-list').innerHTML = data.html;
                    })
                    .catch(error => console.error('Error:', error));
            } else {
                // Show all items if query is empty
                fetch('/search-items/?search=')
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('product-list').innerHTML = data.html;
                    })
                    .catch(error => console.error('Error:', error));
            }
        });

        // Scan Button Function
        document.getElementById('scan-btn').addEventListener('click', function () {
            const constraints = { video: { facingMode: 'environment' } };

            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (stream) {
                    const video = document.createElement('video');
                    video.srcObject = stream;
                    video.play();

                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');

                    video.onloadedmetadata = function () {
                        setTimeout(() => {
                            canvas.width = video.videoWidth;
                            canvas.height = video.videoHeight;
                            context.drawImage(video, 0, 0, canvas.width, canvas.height);

                            const imageData = canvas.toDataURL('image/png');
                            stream.getTracks().forEach(track => track.stop());

                            // Show captured image as card
                            const capturedCard = document.getElementById('captured-card');
                            const imgElement = document.getElementById('captured-image');
                            imgElement.src = imageData;
                            capturedCard.style.display = 'block';

                            // Upload image for OCR
                            uploadImage(imageData);
                        }, 700); // delay to let camera settle
                    };
                })
                .catch(function (err) {
                    console.log('Error accessing camera: ', err);
                    alert('Unable to access camera. Please check your permissions.');
                });
        });

        // Upload image and trigger OCR + product search
        function uploadImage(imageData) {
            fetch('/extract-text/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({ image_data: imageData })
            })
            .then(response => response.json())
            .then(data => {
                const extractedText = data.extracted_text;
                document.getElementById('search').value = extractedText;

                // Auto-search after OCR text extraction
                fetch('/search-items/?search=' + extractedText)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('product-list').innerHTML = data.html;
                    })
                    .catch(error => console.error('Error:', error));
            })
            .catch(error => console.error('Error uploading image:', error));
        }
    </script>
{% endblock %}