@extends(backpack_view('layouts.auth'))
@vite(['resources/css/app.scss'])


@section('content')
<div class="page page-center reply-sms-page">
    <div class="container py-4">
        <div class="card">

            <div class="card-body text-left ">

                <div class="mb-3">
                    <h2 class="h2 text-center my-4">Reply SMS</h2>
                </div>
                <div class="sms-message-container">
                    <select class="select-send-sms form-control form-select mb-1" data-call-id="{{ $call->id }}" onchange="updateSendSMSDropdown(this)">
                        <option>-- Select message --</option
                        @foreach ($smsMessages as $message)
                            <option value="{!! str_replace("{PATIENT_NAME}", $call->caller_name, e($message->sms_message)) !!}" {{ $message->id == $messageId ? "selected" : "" }}>
                                {!! str_replace("{PATIENT_NAME}", $call->caller_name, e($message->sms_message)) !!}
                            </option>
                        @endforeach
                        <option value="AI_GENERATED">AI Generated Message</option>
                        <option value="CUSTOMER_MESSAGE">Custom SMS Message</option>
                    </select>
                    

                    <textarea id="message" class="actual-sms-content sms-text w-100" cols="50" rows="5" maxlength="{{ config('services.2talk.max_sms_length') }}">{{ $defaultMessage }}</textarea>
                    <div class="message-footer">
                        <button
                            id="micBtn"
                            type="button"
                            class="btn"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top">🎤</button>
                        <small class="text-muted sms-counter">0 / {{ config('services.2talk.max_sms_length') }}</small>
                        <div ><small class="mic-no-support" id="mic-no-support"><small></div>
                    </div>
                    
                    <div class="mb-2">                        
                        <label>Contact Number</label>
                        <input type="text" class="input-contact-number" value="{{ $contactNumber }}" />
                        <div class="fw-bold">{{ $sendSmsMessage }}</div>
                    </div>
                    
                    <button class="btn btn-primary" style="width: fit-content" type="button" class="send-custom-sms mt-1" onclick="sendCustomSMS(this)" data-call-id="{{ $call->id }}">Send SMS</button>
                    <button class="btn btn-secondary btn-close-sms-window" onclick="window.close();">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('after_scripts')
    {{-- @vite(['resources/js/app.js']) --}}

    <script>
        function updateCounter(textarea) {
            console.log("update Counter");
            let counter = textarea.parentElement.querySelector('.sms-counter');
            if (!counter) return;

            let length = textarea.value.length;
            counter.textContent = `${length} / {{ config('services.2talk.max_sms_length') }}`;

            if (length > {{ config('services.2talk.max_sms_length') }}) {
                textarea.value = textarea.value.substring(0, {{ config('services.2talk.max_sms_length') }});
                counter.textContent = `{{ config('services.2talk.max_sms_length') }} / {{ config('services.2talk.max_sms_length') }}`;
            }
        }

        // initial bind
        function bindCounters() {
            console.log("bindCounters");
            document.querySelectorAll('.sms-text').forEach(textarea => {
                console.log(textarea);
                updateCounter(textarea);

                textarea.removeEventListener('input', textarea._counterHandler);

                textarea._counterHandler = function () {
                    updateCounter(this);
                };

                textarea.addEventListener('input', textarea._counterHandler);
            });
        }

        // call on load
        bindCounters();


        const SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;

        const micBtn = document.getElementById('micBtn');

        let recognition = null;
        const textarea = document.getElementById('message');;
        let listening = false;
        let finalText = '';
        let silenceTimer = null;
        // Disable microphone button for Firefox or unsupported browsers
        if (!SpeechRecognition) {
            micBtn.disabled = true;
            document.getElementById('mic-no-support').innerHTML = 'Speech recognition is not supported in your browser. Please use Google Chrome or Microsoft Edge.';


        }
        else {

            recognition = new SpeechRecognition();

            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'en-NZ';

            listening = false;
            finalText = '';
            silenceTimer = null;

             // 1 seconds pause

        }
        const silenceDelay = 1000;

        micBtn.addEventListener('click', () => {

            if (!listening) {
                recognition.start();
                listening = true;
                micBtn.innerHTML = '🛑';
                textarea.value = "";
                finalText = "";
            } else {
                recognition.stop();
                listening = false;
                micBtn.innerHTML = '🎤';
            }

        });

        if (recognition) {
            recognition.onresult = function(event) {

                clearTimeout(silenceTimer);

                let interimTranscript = '';

                for (let i = event.resultIndex; i < event.results.length; i++) {

                    const transcript = event.results[i][0].transcript;

                    if (event.results[i].isFinal) {
                        finalText += transcript.trim() + ' ';
                    } else {
                        interimTranscript += transcript;
                    }
                }

                updateText(finalText + interimTranscript);


                // Start pause detection timer
                silenceTimer = setTimeout(() => {

                    if (finalText.trim() !== '') {

                        let lastChar = finalText.trim().slice(-1);

                        // Add full stop if sentence does not already have punctuation
                        if (!['.', '?', '!'].includes(lastChar)) {
                            finalText = finalText.trim() + '. ';
                        }

                        updateText(finalText);
                    }

                }, silenceDelay);
            };
        }

        function updateText(text) {

            // Capitalise first letter of sentences
            text = text.replace(/(^\s*\w|[.!?]\s+\w)/g, function(match) {
                return match.toUpperCase();
            });

            textarea.value = text;
        }

        if ( recognition ) {
            recognition.onend = function() {

                if (listening) {
                    recognition.start();
                }

            };
        }
    </script>



@endsection