000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Voice Command Report</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

.swal2-toast .swal2-icon {
    width: 30px; /* Smaller icon */
    height: 30px;
    margin-right: 10px;
}

.swal2-title {
    font-weight: bold; /* Bold title */
    color: #ff6f61; /* Custom color for the title */
}
.swal2-timer-progress-bar {
    background: #007bff; /* Blue progress bar */
}
    </style>
</head>
<body>
    <div class="animation">
        <div id="instruction">Click on the microphone to give a command!</div>
        <button id="speech" class="btn">
            <div class="pulse-ring"></div>
            <i class="fa fa-microphone" aria-hidden="true"></i>
        </button>
        <div id="listening-animation">Listening...</div>
        <div id="analyzing-animation">Analyzing...</div>
    </div>
    <p id="command-output"></p>
    <table id="result-table">
        <thead></thead>
        <tbody></tbody>
    </table>

const recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        if (recognition) {
            const recognitionInstance = new recognition();
            recognitionInstance.lang = 'en-US';
            recognitionInstance.interimResults = false;
            recognitionInstance.maxAlternatives = 1;

speechButton.addEventListener('click', () => {
                speechButton.classList.add('active'); // Activate microphone visual
                listeningAnimation.classList.add('active'); // Show Listening animation
                recognitionInstance.start();
            });

recognitionInstance.onresult = (event) => {
                const command = event.results[0][0].transcript;
                output.textContent = `Command: ${command}`;
                listeningAnimation.classList.remove('active'); // Hide Listening animation
                analyzingAnimation.classList.add('active'); // Show Analyzing animation
                setTimeout(() => {
                    analyzingAnimation.classList.remove('active'); // Hide Analyzing animation
                    handleCommand(command);
                }, 2000);  // Show "Analyzing..." for 2 seconds before sending the command
            };

recognitionInstance.onend = () => {
                speechButton.classList.remove('active'); // Deactivate microphone visual when recognition ends
            };

recognitionInstance.onerror = (event) => {
                console.error('Speech Recognition Error', event.error);
                output.textContent = 'An error occurred while processing your command.';
                speechButton.classList.remove('active');
                listeningAnimation.classList.remove('active'); // Hide Listening animation on error
                analyzingAnimation.classList.remove('active'); // Hide Analyzing animation on error
            };
        } else {
            output.textContent = 'Speech Recognition API not supported.';
        }

function handleCommand(command) {
    // Convert command to lowercase for easier matching
    const lowerCaseCommand = command.toLowerCase();

if (lowerCaseCommand.includes('total member report') || lowerCaseCommand.includes('total member')) {
        fetchTotalMembers(csrfToken);
    } else if (lowerCaseCommand.includes('total stock') || lowerCaseCommand.includes('show me the stock')) {
        fetchTotalStock(csrfToken, command);
    } else if (lowerCaseCommand.includes('get sale data')) {
        fetchSaleData(csrfToken, command);
    } else {
        output.textContent = 'Command not recognized. Please try again.';
            Swal.fire({
            icon: 'warning',
            title: 'No Record Found!',
            text: 'Sorry, no record found as per given command! Try after some time again!',
            toast: true,
            position: 'top', // Position the toast at the top-center
            showConfirmButton: false,
            timer: 5000, // The popup will disappear after 5 seconds
            timerProgressBar: true,
            customClass: {
                popup: 'gradient-toast' // Optional custom class for additional styles
            }
        });
    }
}

function displayTable(data, columns) {
            resultTable.style.display = 'table';
            const thead = resultTable.querySelector('thead');
            const tbody = resultTable.querySelector('tbody');
            thead.innerHTML = '';
            tbody.innerHTML = '';

// Generate table headers
            const headerRow = document.createElement('tr');
            columns.forEach(column => {
                const th = document.createElement('th');
                th.textContent = column.label;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);

// Generate table rows
            data.forEach(item => {
                const row = document.createElement('tr');
                columns.forEach(column => {
                    const td = document.createElement('td');
                    td.textContent = item[column.key];
                    row.appendChild(td);
                });
                tbody.appendChild(row);
            });
        }
    </script>
</body>
</html>
<?php /**PATH /home3/pmmsanvp/public_html/sarojMain/resources/views/dashboard/microphone/microphone.blade.php ENDPATH**/ ?>