@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">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/pharmacy/save-ai-settings') }}">
                    @csrf
                    <input type="hidden" name="pharmacy_id" value="{{ $pharmacyId }}">
                <div class="form-group col-md-12 mb-3">
                    <label>Greeting</label>
                    <textarea id="greeting" name="greeting" class="form-control">{{ old('greeting', $greeting ?? '') }}</textarea>
                </div>

                <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">
                    <textarea
                        id="holiday-hour-message"
                        name="holiday-hour-message"
                        class="form-control"
                        placeholder="Add your holiday hour message">{{ $holidayHour }}</textarea>
                </div>

                <div class="form-group mb-3">
                    <label>Location Instruction</label>
                    <textarea
                        id="location_description"
                        name="location_description"
                        class="form-control"
                        placeholder="Add your location description">{{ old('location_description', $locationInstruction ?? '') }}</textarea>
                </div>
                <div class="form-group mb-3">
                    <label>Keywords Require Verification</label>
                    <input id="keywords" class="form-control" value="{{ $keywords }}" autocomplete="off" name="keywords" placeholder="Verify Keywords">
                </div>
                
                <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>
            </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 () {
        new TomSelect("#keywords",{
            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();
</script>
@endpush