@include('header')
<style>
    .voice-page-wrap {
        max-width: 1200px;
    }

    .voice-page-header {
        margin-bottom: 18px;
    }

    .voice-page-header h4 {
        color: #650812;
        margin-bottom: 6px;
    }

    .voice-panel {
        background: #fff;
        border: 1px solid #4FAFB8;
        border-radius: 6px;
        position: relative;
        padding: 18px 16px 14px;
        margin-bottom: 16px;
        height: 100%;
    }

    .voice-panel legend {
        background: #fff;
        color: #650812;
        font-size: 15px;
        font-weight: 600;
        left: 12px;
        padding: 0 10px;
        position: absolute;
        top: -12px;
        width: auto;
        border: none;
        margin: 0;
    }

    .voice-controls-block {
        text-align: center;
        padding: 18px 12px 10px;
        background: #f8fbfc;
        border: 1px dashed #b8dde1;
        border-radius: 6px;
        margin-top: 8px;
    }

    .voice-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 13px;
        background: #eef1f3;
        color: #495057;
        margin-top: 12px;
        min-width: 140px;
    }

    .voice-status.listening {
        background: #e8f7f8;
        color: #2a8f98;
    }

    .voice-status.error {
        background: #fff5f5;
        color: #c0392b;
    }

    .voice-mic-btn {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        font-size: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .voice-mic-btn.active {
        animation: voice-pulse 1.2s infinite;
    }

    @keyframes voice-pulse {
        0% { box-shadow: 0 0 0 0 rgba(79, 175, 184, 0.55); }
        70% { box-shadow: 0 0 0 12px rgba(79, 175, 184, 0); }
        100% { box-shadow: 0 0 0 0 rgba(79, 175, 184, 0); }
    }

    .voice-tip-list {
        margin: 14px 0 0;
        padding-left: 18px;
        font-size: 13px;
        color: #6c757d;
    }

    .voice-tip-list li {
        margin-bottom: 4px;
    }

    #voiceTranscript {
        width: 100%;
        min-height: 320px;
        height: 320px;
        resize: vertical;
        font-size: 15px;
        line-height: 1.6;
        padding: 12px 14px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        background: #fff;
        box-sizing: border-box;
    }

    #voiceTranscript:focus {
        border-color: #4FAFB8;
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(79, 175, 184, 0.25);
    }

    .voice-transcript-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .voice-word-count {
        font-size: 13px;
        color: #6c757d;
    }

    .voice-action-btns .btn {
        min-width: 110px;
    }
</style>

<div class="container-fluid flex-grow-1 container-p-y voice-page-wrap">
    <div class="voice-page-header">
        <h4 class="font-weight-bold">Voice Recognition</h4>
        <p class="text-muted small mb-0">
            Dictate clinical notes using your microphone. Best supported in Chrome and Edge with microphone permission enabled.
        </p>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-5">
            <fieldset class="voice-panel">
                <legend>Settings &amp; Controls</legend>

                <div class="form-group mb-3">
                    <label class="form-label font-weight-bold">Language</label>
                    <select class="form-control" id="voiceLanguage">
                        <option value="en-IN">English (India)</option>
                        <option value="en-US">English (US)</option>
                        <option value="hi-IN">Hindi (India)</option>
                        <option value="mr-IN">Marathi (India)</option>
                    </select>
                </div>

                <div class="form-group mb-0">
                    <label class="form-label font-weight-bold">Dictation Mode</label>
                    <select class="form-control" id="voiceContinuous">
                        <option value="0">Single phrase</option>
                        <option value="1" selected>Continuous dictation</option>
                    </select>
                </div>

                <div class="voice-controls-block">
                    <div>
                        <button type="button" class="btn btn-primary voice-mic-btn" id="btnVoiceStart" title="Start listening">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <button type="button" class="btn btn-danger voice-mic-btn ml-2" id="btnVoiceStop" title="Stop listening" disabled>
                            <i class="fas fa-stop"></i>
                        </button>
                    </div>
                    <div class="voice-status" id="voiceStatus">
                        <i class="fas fa-info-circle"></i> Ready
                    </div>
                </div>

                <ul class="voice-tip-list">
                    <li>Click the mic button and speak clearly.</li>
                    <li>Use <strong>Stop</strong> when dictation is complete.</li>
                    <li>Copy text to paste into OPD or consultant forms.</li>
                </ul>
            </fieldset>
        </div>

        <div class="col-lg-8 col-md-7">
            <fieldset class="voice-panel">
                <legend>Transcript</legend>

                <textarea id="voiceTranscript" placeholder="Your dictated text will appear here..."></textarea>

                <div class="voice-transcript-toolbar">
                    <span class="voice-word-count"><span id="voiceWordCount">0</span> words</span>
                    <div class="voice-action-btns">
                        <button type="button" class="btn btn-primary" id="btnVoiceCopy">
                            <i class="fas fa-copy"></i> Copy Text
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="btnVoiceClear">
                            <i class="fas fa-eraser"></i> Clear
                        </button>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>

@include('footerscript')
<script type="text/javascript">
(function() {
    var recognition = null;
    var isListening = false;
    var sessionStartText = '';
    var committedText = '';

    function setStatus(text, type) {
        var $status = $('#voiceStatus');
        $status.removeClass('listening error');
        if (type) {
            $status.addClass(type);
        }
        $status.html(text);
    }

    function updateWordCount() {
        var text = $.trim($('#voiceTranscript').val());
        var count = text ? text.split(/\s+/).length : 0;
        $('#voiceWordCount').text(count);
    }

    function speechSupported() {
        return !!(window.SpeechRecognition || window.webkitSpeechRecognition);
    }

    function applyTranscript(interim) {
        var prefix = sessionStartText;
        var body = committedText + (interim || '');
        if (prefix && body) {
            $('#voiceTranscript').val(prefix + (prefix.slice(-1) === ' ' ? '' : ' ') + body);
        } else {
            $('#voiceTranscript').val(prefix + body);
        }
        updateWordCount();
    }

    function createRecognition() {
        var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        var instance = new SpeechRecognition();
        instance.lang = $('#voiceLanguage').val();
        instance.interimResults = true;
        instance.continuous = $('#voiceContinuous').val() === '1';

        instance.onstart = function() {
            isListening = true;
            sessionStartText = $('#voiceTranscript').val();
            committedText = '';
            $('#btnVoiceStart').prop('disabled', true).addClass('active');
            $('#btnVoiceStop').prop('disabled', false);
            setStatus('<i class="fas fa-microphone"></i> Listening...', 'listening');
        };

        instance.onresult = function(event) {
            var interim = '';
            for (var i = event.resultIndex; i < event.results.length; i++) {
                var transcript = event.results[i][0].transcript;
                if (event.results[i].isFinal) {
                    committedText += transcript + ' ';
                } else {
                    interim += transcript;
                }
            }
            applyTranscript(interim);
        };

        instance.onerror = function(event) {
            var message = event.error || 'Unknown error';
            if (message === 'not-allowed') {
                message = 'Microphone permission denied';
            } else if (message === 'no-speech') {
                message = 'No speech detected';
            }
            setStatus('<i class="fas fa-exclamation-circle"></i> ' + message, 'error');
            stopListening(false);
        };

        instance.onend = function() {
            if (isListening && $('#voiceContinuous').val() === '1') {
                try {
                    instance.start();
                } catch (e) {
                    stopListening(true);
                }
            } else {
                stopListening(true);
            }
        };

        return instance;
    }

    function stopListening(finished) {
        isListening = false;
        $('#btnVoiceStart').prop('disabled', false).removeClass('active');
        $('#btnVoiceStop').prop('disabled', true);
        if (recognition) {
            try {
                recognition.stop();
            } catch (e) {}
        }
        applyTranscript('');
        if (finished) {
            setStatus('<i class="fas fa-check-circle"></i> Stopped', 'listening');
            setTimeout(function() {
                setStatus('<i class="fas fa-info-circle"></i> Ready');
            }, 1200);
        } else {
            setStatus('<i class="fas fa-info-circle"></i> Ready');
        }
    }

    $(document).ready(function() {
        updateWordCount();

        if (!speechSupported()) {
            setStatus('<i class="fas fa-exclamation-circle"></i> Not supported in this browser', 'error');
            $('#btnVoiceStart, #btnVoiceStop').prop('disabled', true);
            return;
        }

        $('#btnVoiceStart').on('click', function() {
            recognition = createRecognition();
            try {
                recognition.start();
            } catch (e) {
                setStatus('<i class="fas fa-exclamation-circle"></i> Unable to start microphone', 'error');
            }
        });

        $('#btnVoiceStop').on('click', function() {
            stopListening(true);
        });

        $('#voiceLanguage, #voiceContinuous').on('change', function() {
            if (isListening) {
                stopListening(true);
            }
        });

        $('#voiceTranscript').on('input', updateWordCount);

        $('#btnVoiceCopy').on('click', function() {
            var text = $('#voiceTranscript').val();
            if (!text) {
                return;
            }
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text);
            } else {
                $('#voiceTranscript').select();
                document.execCommand('copy');
            }
            setStatus('<i class="fas fa-check"></i> Copied', 'listening');
            setTimeout(function() {
                setStatus('<i class="fas fa-info-circle"></i> Ready');
            }, 1500);
        });

        $('#btnVoiceClear').on('click', function() {
            $('#voiceTranscript').val('');
            sessionStartText = '';
            committedText = '';
            updateWordCount();
        });
    });
})();
</script>