@extends(backpack_view('blank'))

@section('after_styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endSection
    
@php
  $breadcrumbs = [
      trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
      trans('backpack::base.my_account') => false,
  ];

@endphp

@section('header')
    <section class="content-header">
        <div class="container-fluid mb-3">
            <h1>Chloe AI Setting</h1>
        </div>
    </section>
@endsection

@section('content')

    @php
        $isChecked =  !empty($holidayHour) ? true : false;
    @endphp    

    <div class="col-md-12 ai-settings">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/pharmacy/save-ai-settings') }}">
                    @csrf

                    <div class="form-group mb-3 border border-1 p-2">
                        <div>
                            <label class="fw-bold">Language Setting</label>
                        </div>
                        <div class="d-flex">
                            <div class="input-group">


                                @foreach ($supportLanguages as $key => $language)
                                    @if ( $key != "en-NZ")
                                        @php
                                            $checked = "";
                                            if ( in_array($key, $enabledLanguages) ) {
                                                $checked = "checked";
                                            }
                                        @endphp
                                        <input type="checkbox" class='chkbox-enable-languages' id="enable-{{ $key }}" name="enabledLanguages[]" value="{{ $key }}" {{ $checked }}/>
                                        <label for="enable-{{ $key }}" class="ms-2">{{ $language }}</label>
                                    @endif
                                @endforeach
                            </div>
                            <div class="input-group d-none" id="sel-language-container">
                                <label for="sel-language" class="me-2">Select Language</label>
                                <select id="sel-language" class="form-select">

                                    @foreach ($supportLanguages as $key => $language)
                                       <option value="{{ $key }}">{{ $language }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <input type="hidden" name="pharmacy_id" value="{{ $pharmacyId }}">
                    {{-- <input type="hidden" name="language" value="en-NZ"> --}}
                    
                    <div class="form-group col-md-12 mb-3 language-from-group-container language-en-NZ">
                        <label>Greeting <span class="language-label">(English)</span></label> 
                        <textarea oninput="updateDataEnglish(this)" data-attribute="greeting" id="greeting-en-NZ" name="greeting[en-NZ]" class="form-control">{{ old('greeting-en-NZ', $greeting["en-NZ"] ?? '') }}</textarea>
                    </div>

                    @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group col-md-12 mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>Greeting <span class="language-label">({{ $supportLanguages[$language] }})</span></label> 
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="greeting" data-en-NZ="{{ old('greeting-en-NZ', $greeting["en-NZ"] ?? '') }}">Translate</button>
                                <textarea
                                    id="greeting-{{ $language }}"
                                    name="greeting[{{ $language }}]"
                                    class="form-control">{{ old('greeting.' . $language, $greeting[$language] ?? '') }}</textarea>
                            </div>
                        @endif
                    @endforeach

                    <div class="input-group">
                        <input type="checkbox" name="enable-holiday-hour" id="enable-holiday-hour" {{ $isChecked ? 'checked' : '' }}>
                        <label for="enable-holiday-hour" class="ms-2">Enable Holiday Hours</label>
                    </div>


                    <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>Holiday Hour Message <span class="language-label">(English)</span></label>

                        <textarea
                            id="holiday-hour-message-en-NZ"
                            name="holiday-hour-message[en-NZ]"
                            class="form-control" oninput="updateDataEnglish(this)" data-attribute="holiday-hour-message" 
                            placeholder="Add your holiday hour message">{{ old('holiday-hour-message-en-NZ', $holidayHour['en-NZ'] ?? '') }}</textarea>
                    </div>

                     @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>Holiday Hour Message <span class="language-label">({{ $supportLanguages[$language] }})</span></label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="holiday-hour-message" data-en-NZ="{{ old('holiday-hour-message-en-NZ', $holidayHour["en-NZ"] ?? '') }}">Translate</button>
                                <textarea
                                    id="holiday-hour-message-{{ $language }}"
                                    name="holiday-hour-message[{{ $language }}]"
                                    class="form-control"
                                    placeholder="Add your holiday hour message">{{ old('holiday-hour-message-'.$language, $holidayHour[$language] ?? '') }}</textarea>
                            </div>
                        @endif
                    @endforeach

                    <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>After Hour Message <span class="language-label">(English)</span></label>

                        <textarea
                            id="after-hour-message-en-NZ"
                            name="after-hour-message[en-NZ]"
                            class="form-control" oninput="updateDataEnglish(this)" data-attribute="after-hour-message" 
                            placeholder="Add your after hour message">{{ old('after-hour-message-en-NZ', $afterHourMessage['en-NZ'] ?? '') }}</textarea>
                    </div>

                     @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>After Hour Message <span class="language-label">({{ $supportLanguages[$language] }})</span></label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="after-hour-message" data-en-NZ="{{ old('after-hour-message-en-NZ', $afterHourMessage["en-NZ"] ?? '') }}">Translate</button>
                                <textarea
                                    id="after-hour-message-{{ $language }}"
                                    name="after-hour-message[{{ $language }}]"
                                    class="form-control"
                                    placeholder="Add your holiday hour message">{{ old('after-hour-message-'.$language, $afterHourMessage[$language] ?? '') }}</textarea>
                            </div>
                        @endif
                    @endforeach

                    <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>High Urgency Level<span class="language-label">(English)</span></label>
                        <div class='mb-1'>
                            <small class="text-muted">
                                These are the keywords that, when mentioned by a caller, will cause Chloe AI to classify the call as a High Urgency.
                            </small>
                        </div>
                        <input oninput="updateDataEnglish(this)" data-attribute="urgency-4"  id="urgency-4-en-NZ" class="form-control urgency-4 tom-select" value="{{ $urgency4['en-NZ'] ?? "" }}" autocomplete="off" name="urgency4[en-NZ]" placeholder="Enter High Urgency Level">
                    </div>

                    @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>High Urgency Level<span class="language-label">({{ $supportLanguages[$language]  }})</span></label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="urgency-4" data-en-NZ="{{  $urgency4['en-NZ'] ?? "" }}">Translate</button>
                                <div class='mb-1'>
                                    <small class="text-muted">
                                        These are the keywords that, when mentioned by a caller, will cause Chloe AI to classify the call as a High Urgency.
                                    </small>
                                </div>
                                <input id="urgency-4-{{ $language }}" class="form-control urgency-4 tom-select" value="{{ $urgency4[$language] ?? ''}}" autocomplete="off" name="urgency4[{{ $language }}]" placeholder="Enter High Urgency Level">
                            </div>
                        @endif
                    @endforeach

                    <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>Critical Urgency Level<span class="language-label">(English)</span></label>
                        <div class='mb-1'>
                            <small class="text-muted">
                                These are the keywords that, when mentioned by a caller, will cause Chloe AI to classify the call as a Critical Call.
                            </small>
                        </div>
                        <input oninput="updateDataEnglish(this)" data-attribute="urgency-5"  id="urgency-5-en-NZ" class="form-control urgency-4 tom-select" value="{{ $urgency5['en-NZ'] ?? "" }}" autocomplete="off" name="urgency5[en-NZ]" placeholder="Enter Critical Urgency Level">
                    </div>

                    @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>Critical Urgency Level<span class="language-label">({{ $supportLanguages[$language]  }})</span></label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="urgency-5" data-en-NZ="{{  $urgency5['en-NZ'] ?? "" }}">Translate</button>
                                <div class='mb-1'>
                                    <small class="text-muted">
                                        These are the keywords that, when mentioned by a caller, will cause Chloe AI to classify the call as a Critical Call.
                                    </small>
                                </div><input id="urgency-5-{{ $language }}" class="form-control urgency-5 tom-select" value="{{ $urgency5[$language] ?? ''}}" autocomplete="off" name="urgency5[{{ $language }}]" placeholder="Enter Critical Urgency Level">
                            </div>
                        @endif
                    @endforeach

                    
                    {{-- <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>Location Instruction (English)</label>
                        <textarea
                            id="location_description-en-NZ"
                            name="location_description[en-NZ]"
                            class="form-control"  oninput="updateDataEnglish(this)" data-attribute="location-description" 
                            placeholder="Add your location description">{{ old('location_description-en-NZ', $locationInstruction['en-NZ'] ?? '') }}</textarea>
                    </div>

                    @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>Location Instruction ({{ $supportLanguages[$language] }})</label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="location-description"  data-en-NZ="{{ old('location_description-en-NZ', $locationInstruction['en-NZ'] ?? '') }}">Translate</button>
                                <textarea
                                    id="location_description-{{ $language }}"
                                    name="location_description[{{ $language }}]"
                                    class="form-control"
                                    placeholder="Add your location description">{{ old('location_description-'.$language, $locationInstruction[$language] ?? '') }}</textarea>
                            </div>
                        @endif
                    @endforeach --}}


                    <div class="form-group mb-3 language-from-group-container language-en-NZ">
                        <label>Keywords Require Verification <span class="language-label">(English)</span></label>
                        <input oninput="updateDataEnglish(this)" data-attribute="location-keywords"  id="keywords-en-NZ" class="form-control keywords tom-select" value="{{ $keywords['en-NZ'] ?? "" }}" autocomplete="off" name="keywords[en-NZ]" placeholder="Verify Keywords">
                    </div>

                    @foreach ($enabledLanguages as $key => $language)
                        @if ( $language != "en-NZ")
                            <div class="form-group mb-3 language-from-group-container language-{{ $language }} d-none">
                                <label>Keywords Require Verification <span class="language-label">({{ $supportLanguages[$language]  }})</span></label>
                                <button type="button" class="btn btn-primary btn-translate mb-1" data-attribute="location-keywords" data-en-NZ="{{  $keywords['en-NZ'] ?? "" }}">Translate</button>
                                <input id="keywords-{{ $language }}" class="form-control keywords tom-select" value="{{ $keywords[$language] ?? ''}}" autocomplete="off" name="keywords[{{ $language }}]" placeholder="Verify Keywords">
                            </div>
                        @endif
                    @endforeach
                    
                    
                    <div class="form-group mb-3 border border-1 p-2">
                        <div class="mb-3">
                            <label>
                                AI Response Wait Time: <strong><span id="gracePeriodValue">{{ old('grace-period', $gracePeriod) }}</span> seconds</strong>
                            </label>
                            <br />
                            <small class="text-muted">
                                The amount of time the AI waits after the patient stops speaking before processing their response.
                            </small>
                        </div>
                        <div class="">
                            <div id="sliderValue" 
                                class="position-relative bg-success text-white rounded px-2 py-1 small"
                                style="top:-5px; width:fit-content; transform:translateX(-50%);">
                                {{ old('grace-period', $gracePeriod) }}s
                            </div>
                            <span class="me-2 fw-bold" style="position:relative; bottom:5px;">1s</span>
                            <input 
                                id="gracePeriodSlider"
                                type="range" 
                                name="grace-period"
                                class="form-range"
                                min="1"
                                max="10"
                                value="{{ old('grace-period', $gracePeriod) }}"
                                oninput="gracePeriodValue.innerHTML=this.value"
                                style="width: 50%;"
                            >
                            <span class="ms-2 fw-bold" style="position:relative; bottom:5px;">10s</span>

                        </div>
                    </div>

                    <div class="form-group mb-3 border border-1 p-2">
                        <div class="mb-3">
                            <label>
                                Phone Ring Duration Before AI Takes Over: <strong><span id="ringTimeoutValue">{{ old('ringTimeout', $ringTimeout) }}</span> seconds</strong>
                            </label>
                            <br />
                            <small class="text-muted">
                                Set how long the pharmacy phone will ring before the call is automatically transferred to the AI receptionist.
                            </small>
                        </div>
                        <div class="">
                            <div id="ringTimeoutSliderValue" 
                                class="position-relative bg-success text-white rounded px-2 py-1 small"
                                style="top:-5px; width:fit-content; transform:translateX(-50%);">
                                {{ old('ring-timeout', $ringTimeout) }}s
                            </div>
                            <span class="me-2 fw-bold" style="position:relative; bottom:5px;">0s</span>
                            <input 
                                id="ringTimeoutSlider"
                                type="range" 
                                name="ring-timeout"
                                class="form-range"
                                min="0"
                                max="30"
                                value="{{ old('ring-timeout', $ringTimeout) }}"
                                oninput="ringTimeoutValue.innerHTML=this.value"
                                style="width: 50%;"
                            >
                            <span class="ms-2 fw-bold" style="position:relative; bottom:5px;">30s</span>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success">
                        Save Changes
                    </button>
                </form>
            </div>
        </div>
    </div>      

@endSection

@push('after_scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const enableHolidayHour = document.getElementById('enable-holiday-hour');
            enableHolidayHour.addEventListener("change", (e) => {
                const holidayHourMessage = document.getElementById('holiday-hour-message');
                holidayHourMessage.disabled = !e.target.checked;
                if ( !e.target.checked ) {
                    holidayHourMessage.value = "";
                    holidayHourMessage.disabled = true;
                }
                else {
                    holidayHourMessage.disabled = false;;
                }
            });

        });
    </script>
@endpush

@push('after_scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const keywordsElements = document.querySelectorAll('.tom-select');
        keywordsElements.forEach((element) => {

            new TomSelect(element, {
                create: true,
                sortField: {
                    field: "text",
                    direction: "asc"
                },
                createOnBlur: true,
            });
        });
    });
</script>
@endpush

@push('after_scripts')
<script>
    const ringTimeoutSlider = document.getElementById('ringTimeoutSlider');
    const ringTimeoutSliderValue = document.getElementById('ringTimeoutSliderValue');

    function updateRingTimeoutSliderValue() {
        const min = ringTimeoutSlider.min;
        const max = ringTimeoutSlider.max;
        const value = ringTimeoutSlider.value;

        const percent = ((value - min) / (max - min)) * 50 + 1.5;

        ringTimeoutSliderValue.style.left = `calc(${percent}% + (${8 - percent * 0.15}px))`;
        ringTimeoutSliderValue.innerHTML = `${value}s`;
    }

    ringTimeoutSlider.addEventListener('input', updateRingTimeoutSliderValue);

    updateRingTimeoutSliderValue();
    const slider = document.getElementById('gracePeriodSlider');
    const sliderValue = document.getElementById('sliderValue');

    function updateSliderValue() {
        console.log("updateSliderValue");
        const min = slider.min;
        const max = slider.max;
        const value = slider.value;

        const percent = ((value - min) / (max - min)) * 50 + 1.5;

        sliderValue.style.left = `calc(${percent}% + (${8 - percent * 0.15}px))`;
        sliderValue.innerHTML = `${value}s`;
    }

    slider.addEventListener('input', updateSliderValue);

    updateSliderValue();

    const enablelanguageCheckbox = document.getElementById('enable-chinese');
    const chkboxEnableLanguages = document.querySelectorAll('.chkbox-enable-languages');
    const selectLanguageDropdownContainer = document.getElementById('sel-language-container');
    const selectLanguageDropdown = document.getElementById('sel-language');

    function showLanguageDropDown() {
        selectLanguageDropdownContainer.classList.add('d-none');
        chkboxEnableLanguages.forEach( (chkboc) => {

            selectLanguageDropdown.value = "en-NZ";
            selectLanguageDropdown.dispatchEvent(new Event('change'));
            if (chkboc.checked) {
                selectLanguageDropdownContainer.classList.remove('d-none');
                return;
            } 
        })
    }
    
    // const languageLabels = document.querySelectorAll('.language-label');
    const translateButtons = document.querySelectorAll('.btn-translate');
    selectLanguageDropdown.addEventListener('change', (event) => {
        const selectedLanguage = event.target.value;

        // languageLabels.forEach((label) => {
        //     label.innerHTML = "(" + selectedLanguage + ")";
        // });

        const languageContainers = document.querySelectorAll('.language-from-group-container');
        languageContainers.forEach((container) => {
            console.log(".language-" + selectedLanguage)
            container.classList.add("d-none");

            if (container.classList.contains("language-" + selectedLanguage )) {
                container.classList.remove("d-none");
            }
        });
 
    });

    translateButtons.forEach((button) => {
        button.addEventListener("click", async(e) => {
            // Find the closest form group
            const formGroup = button.closest('.form-group');

            if (!formGroup) {
                return;
            }

            // Find textarea or input inside the same form group
            const field = formGroup.querySelector('textarea, input:not([type="hidden"])');

            if (!field) {
                return;
            }

            const text = button.dataset.enNz;
            const targetLanguage = selectLanguageDropdown.value;


            
            // Nothing to translate
            if (!text) {
                alert('Please enter some text before translating.');
                return;
            }

            // Prevent multiple requests
            button.disabled = true;

            const originalButtonText = button.innerHTML;
            button.innerHTML = 'Translating...';
            try {

                const response = await fetch('{{ route('translate-text') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        text: text,
                        language: targetLanguage
                    })
                });
                const data = await response.json();
                if (!response.ok) {
                    throw new Error(data.message || 'Translation failed.');
                }
                if (data.translated_text !== undefined) {
                    field.value = data.translated_text;
                    /*
                    * Tom Select
                    */
                    if (field.tomselect) {

                        field.tomselect.clear();

                        // If translatedText is a comma-separated list
                        const values = data.translated_text
                        .split(/[,，]/)
                        .map(value => value.trim())
                        .filter(value => value !== '');

                        values.forEach(value => {

                            field.tomselect.addOption({
                                value: value,
                                text: value
                            });

                            field.tomselect.addItem(value);

                        });
                    }
                } else {
                    throw new Error('No translated text was returned.');
                }

            } catch (error) {
                console.error('Translation error:', error);
                alert(
                    error.message || 
                    'Unable to translate the text. Please try again.'
                );
            } finally {
                button.disabled = false;
                button.innerHTML = originalButtonText;
            }
        });
    });
    
    chkboxEnableLanguages.forEach( (chkbox) => {
        chkbox.addEventListener('change', function () {
            showLanguageDropDown();
        });
    })

    showLanguageDropDown();


    function updateDataEnglish(element) {

        const attribute = element.dataset.attribute;
        const englishValue = element.value;

        const translateButtons = document.querySelectorAll(
            '.btn-translate[data-attribute="' + attribute + '"]'
        );

        translateButtons.forEach((button) => {
            button.dataset.enNz = englishValue;
        });

    }
</script>
@endpush