Kundesone/resources/views/chat-setting.blade.php

@extends('layouts.setting')

<title>Inbox Setting</title>

@section('content')

<div class="content-wrapper">
    <div class="dev-chat-tabs">
        <div class="dev-tabs">
            <button type="button" id="defaultOpenTab">Flow Setting</button>
            <button type="button">Display</button>
            <button type="button">Text</button>
            <button type="button">Style</button>
            <button type="button">Abuse</button>
            <button type="button">Canned Responses</button>
            <button type="button">Personal Data & Policy</button>
            <!--<button type="button">Tags</button>-->
            <button type="button">Chat Button</button>
        </div>

        <div class="dev-tabcontent dev-tabcontent-flow">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Settings for chat flow</h2>
                    <p>General settings for the chat flow.</p>
                </div>
                <div class="dev-content-inner">
                    <h2>When do you want to have notifications via email?</h2>
                    <form method="POST" action="{{ route('store.flow.setting') }}">
                        @csrf
                        <div class="col col-left">
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Show profile image of editors
                                    @php
                                    $show_profile_image_of_editors = getChatSetting('show_profile_image_of_editors')
                                    @endphp
                                    <input type="checkbox" name="show_profile_image_of_editors" @if($show_profile_image_of_editors) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Show profile image for users in the chat</span>
                                </div>
                            </div>

                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Allow users to join the queue
                                    @php
                                    $allow_users_to_join_queue = getChatSetting('allow_users_to_join_queue')
                                    @endphp
                                    <input type="checkbox" name="allow_users_to_join_queue" @if($allow_users_to_join_queue) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Users can enter the queue to easily join the chat.</span>
                                </div>
                            </div>

                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Show the chat button even when no
                                    editor is
                                    available.
                                    @php
                                    $show_chat_button = getChatSetting('show_chat_button')
                                    @endphp
                                    <input type="checkbox" name="show_chat_button" @if($show_chat_button) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>When no editor is available, visitors can still send
                                        messages.</span>
                                </div>
                            </div>

                            <!-- <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Allow visitors to send messages
                                    @php
                                    $allow_visitor_to_send_messages = getChatSetting('allow_visitor_to_send_messages')
                                    @endphp
                                    <input type="checkbox" name="allow_visitor_to_send_messages" @if($allow_visitor_to_send_messages) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>When no editor is available, visitors can still send
                                        messages.</span>
                                </div>
                            </div> -->
                            <div class="dev-input-group">
                                <label>Email address that messages should be sent to
                                @php
                                $message_sent_to = getChatSetting('message_sent_to')
                                @endphp
                                <input type="email" name="message_sent_to" placeholder="Please enter your email" value="{{$message_sent_to->value ?? ''}}">
                                </label>
                                
                            </div>



                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Max number of chats per editor</label>
                                @php
                                $max_number_of_chats_per_editor = getChatSetting('max_number_of_chats_per_editor')
                                @endphp
                                <input type="text" name="max_number_of_chats_per_editor" placeholder="Type here..." value="{{$max_number_of_chats_per_editor->value ?? ''}}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Editors can always send images and files.Editors can always
                                        send
                                        images and files.Editors can always send images and
                                        files.</span>
                                </div>
                            </div>



                            <!-- <div class="dev-input-group dev-input-group-input-info">
                                <label>Log everyone out automatically</label>
                                @php
                                $logout_everyone_automatically = getChatSetting('logout_everyone_automatically')
                                @endphp
                                <div class="dev-custom-select">
                                    <select name="logout_everyone_automatically">
                                        <option value="Yes" @if($logout_everyone_automatically?->value == 'Yes') selected @endif>Yes</option>
                                        <option value="No" @if($logout_everyone_automatically?->value == 'No') selected @endif>No</option> 
                                    </select>
                                </div>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>The "Available" editor in this chat is set as "Busy" at this
                                        time
                                        of
                                        day.</span>
                                </div>
                            </div> -->
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Log out editor who has missed a
                                    chat
                                    @php
                                    $logout_editor_who_missed_chat = getChatSetting('logout_editor_who_missed_chat')
                                    @endphp
                                    <input type="checkbox" name="logout_editor_who_missed_chat" @if($logout_editor_who_missed_chat) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Editor who is "Available" in the chat is marked as "Busy"
                                        after
                                        they
                                        have missed a chat.</span>
                                </div>
                            </div>
                        </div>
                        <div class="col col-right">
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Vistors can send images and files
                                    @php
                                    $visitor_can_send_images = getChatSetting('visitor_can_send_images')
                                    @endphp
                                    <input type="checkbox" name="visitor_can_send_images"  @if($visitor_can_send_images) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Editors can always send images and files.</span>
                                </div>
                            </div>
                            <!-- <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Guest must write Name and Email to
                                    chat
                                    @php
                                    $guest_must_write_name_and_email_to_chat = getChatSetting('guest_must_write_name_and_email_to_chat')
                                    @endphp
                                    <input type="checkbox" name="guest_must_write_name_and_email_to_chat" @if($guest_must_write_name_and_email_to_chat) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Choose whether you want to require Name and Email or if guests
                                        may
                                        chat
                                        anonymously. Cross this out if the chat will be started
                                        automatically.</span>
                                </div>
                            </div> -->
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Save email address for anonymous
                                    chats
                                    @php
                                    $save_email_address_for_anonymous_chat = getChatSetting('save_email_address_for_anonymous_chat')
                                    @endphp
                                    <input type="checkbox" name="save_email_address_for_anonymous_chat" @if($save_email_address_for_anonymous_chat) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>When the user in an anonymous chat opts to have the chat sent
                                        to
                                        him
                                        or
                                        her, the email address
                                        is saved.</span>
                                </div>
                            </div>
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Delete chat data automatically
                                    @php
                                    $delete_chat_data_automatically = getChatSetting('delete_chat_data_automatically')
                                    @endphp
                                    <input type="checkbox" name="delete_chat_data_automatically" @if($delete_chat_data_automatically) checked @endif>
                                    <span class="checkmark"></span>
                                </label>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>You can choose to automatically delete chat conversations from
                                        Kundo
                                        after
                                        a certain time. Conversations that are deleted by this option
                                        can
                                        not be
                                        restored. Existing conversations that are older than the time
                                        limit
                                        will
                                        be
                                        deleted too.
                                    </span>
                                </div>
                            </div>
                            <!-- <div class="dev-input-group dev-input-group-input-info">
                                <label>The chat assistant shows suggestions from:</label>
                                @php
                                $chat_assistant_show_suggestion_form = getChatSetting('chat_assistant_show_suggestion_form')
                                @endphp
                                <div class="dev-custom-select">
                                    <select name="chat_assistant_show_suggestion_form">
                                        <option value="Yes" @if($chat_assistant_show_suggestion_form?->value == 'Yes') selected @endif>Yes</option>
                                        <option value="No" @if($chat_assistant_show_suggestion_form?->value == 'No') selected @endif>No</option>
                                    </select>
                                </div>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Users get suggested replies from the chat assistant before
                                        they
                                        start
                                        a
                                        chat. The chat code must be entered in the forum or knowledge
                                        base.</span>
                                </div>
                            </div> -->
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Delay for automatic deletion</label>
                                @php
                                $delay_for_automatic_deletion = getChatSetting('delay_for_automatic_deletion')
                                @endphp
                                <input type="number" name="delay_for_automatic_deletion" placeholder="Type here..." value="{{$delay_for_automatic_deletion->value ?? '' }}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>The number of days a conversation should be stored in Kundo
                                        until
                                        it
                                        is
                                        automatically deleted (if automatic deletion is enabled).</span>
                                </div>
                            </div>
                        </div>
                </div>
                    <button type="submit" class="dev-form-submit-btn">Save Changes</button>
                    </form>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-display">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Display Rules</h2>
                    <p>Here you can specify which pages the chat should be visible on, and if the chat
                        should start automatically or not.</p>
                </div>
                <div class="dev-title-copy">
                    <h2>When do you want to have notifications via email? </h2>
                    @foreach($display_chats as $display_chat)
                    <div class="dev-title-copy-inner">
                        <p>
                            Display chat when on
                            @php
                            $decode_data = json_decode($display_chat->value)
                            @endphp
                            <a href="#">
                                {{$decode_data->path}}
                            </a>
                        </p>
                        <div class="dev-thumbnail-wrapper">
                            <div class="dev-thumbnail dev-thumbnail1 ">
                                <img src="{{ asset('images/editt.svg') }}" alt="">
                            </div>
                            <div class="dev-thumbnail dev-thumbnail2">
                                <a class="delete-display-chat" href="{{ route('delete.display.chat', $display_chat->id) }}"><img src="{{ asset('images/binn-white.svg') }}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

            </div>
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Display chat when on</h2>
                </div>
                <div class="dev-content-inner">
                    <form method="POST" action="{{ route('store.display.chat') }}">
                        @csrf
                        <div class="col col-left">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Path</label>
                                <input type="text" placeholder="Type here..." name="path" required>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>http://example.com/* - means all subpages to example.com
                                    </span>
                                </div>
                            </div>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Automatically start the chat after:</label>
                                <div class="dev-custom-select">
                                    <select name="start_chat_after" required>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>The chat will open automatically after the specified time. The
                                        clock starts ticking when the visitor goes to that specific
                                        page.
                                    </span>
                                </div>
                            </div>
                            <button type="submit" class="dev-form-submit-btn">Save</button>
                        </div>
                        <div class="col col-right">
                            <div class="dev-input-info-fill">
                                <img src="{{ asset('images/green-infoo.svg') }}" alt="info">
                                <span>Example</span>
                                <p>www.example.com/*<br>Show the chat on all pages on your
                                    website <br><br>www.example.com/<br>Only show the chat of the start
                                    page.<br><br>www.example.com/support/*<br>Show the chat on page
                                    "support" and all
                                    subpages.
                                </p>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Hide chat when on</h2>
                    <p>Specify pages/domains where the chat widget should not be shown. An ongoing chat
                        follows the visitor even to pages when the chat widget
                        should not be shown.</p>
                </div>
                <div class="dev-content-inner">
                    <form method="POST" action="{{ route('store.hide.chat') }}">
                        @csrf
                        <div class="col col-left">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Path</label>
                                <input type="text" placeholder="Type here..." name="hide_chat_path" required value="{{$hide_chats->value ?? ''}}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>http://example.com/* - means all subpages to example.com
                                    </span>
                                </div>
                            </div>
                            <button type="submit" class="dev-form-submit-btn">Save</button>
                        </div>
                        <div class="col col-right">
                            <div class="dev-input-info-fill">
                                <img src="{{ asset('images/green-infoo.svg') }}" alt="info">
                                <span>Example</span>
                                <p>www.example.com/jobs/*<br>Hide the chat on page "jobs" and all
                                    subpages.
                                </p>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-text">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Texts</h2>
                </div>
                <div class="dev-content-inner">
                    <form>
                        <div class="col col-left">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Internal name of chat flow</label>
                                @php
                                $internal_name = getChatSetting('internal_name')
                                @endphp
                                <input type="text" placeholder="Chat" name="internal_name" class="internal_name" value="{{ $internal_name->value ?? '' }}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Internal name that only editors see.</span>
                                </div>
                            </div>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Company name</label>
                                @php
                                $companyId = getSelectedCompany();
                                $company = \App\Models\Company::find($companyId);
                                @endphp
                                <input type="text" placeholder="Type here" value="{{ $company->name }}" readonly>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Or other official sender. This name is displayed in e-mails
                                        sent
                                        to the visitor from the chat (if sending of chat history is
                                        enabled)</span>
                                </div>
                            </div>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Welcome text</label>
                                @php
                                $wellcome_text = getChatSetting('wellcome_text')
                                @endphp
                                <textarea rows="6" name="wellcome_text" class="wellcome_text">{{$wellcome_text->value ?? ''}}</textarea>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Displayed when the chat is opened and there is a user in the
                                        queue
                                        for the chat.</span>
                                </div>
                            </div>
                        </div>
                        <div class="col col-right">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Public name of chat flow</label>
                                @php
                                $public_name = getChatSetting('public_name')
                                @endphp
                                <input type="text" placeholder="Limon Media" name="public_name" class="public_name" value="{{$public_name->value ?? ''}}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Internal name that only editors see.</span>
                                </div>
                            </div>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Welcome text at the queue</label>
                                @php
                                $wellcome_text_at_queue = getChatSetting('wellcome_text_at_queue')
                                @endphp
                                <textarea
                                    rows="6" name="wellcome_text_at_queue" class="wellcome_text_at_queue">{{$wellcome_text_at_queue->value ?? ''}}</textarea>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Displayed when the chat is opened.</span>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="dev-input-group dev-input-group-input-info">
                        <label>Message when the chat is closed</label>
                        @php
                        $message_when_chat_is_closed = getChatSetting('message_when_chat_is_closed')
                        @endphp
                        <div class="input-box-row">
                            <div class="ui card inbox-send-message-card w-100">
                                <div class="content input-options bg-dark-green-color">
                                </div>
                                <div
                                    class="content d-flex flex-column message-writing-content-area">
                                    <textarea rows="10" id="editor1" name="message_when_chat_is_closed" placeholder="Your Message"
                                        class="form-control input-reply-textarea message_when_chat_is_closed">{!! $message_when_chat_is_closed->value ?? '' !!}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="dev-input-info">
                            <img src="{{ asset('images/info.svg') }}" alt="info">
                            <span>Shown when no editor is online in the chat system. </span>
                        </div>
                    </div>
                    <form>
                        <div class="col col-left">
                            <!--<div class="dev-input-group dev-input-group-input-info">-->
                            <!--    <label>Test in the answer box</label>-->
                                @php
                                $test_in_answer_box = getChatSetting('test_in_answer_box')
                                @endphp
                                <input type="hidden" placeholder="What can i help you with!" name="test_in_answer_box" class="test_in_answer_box" value="{{$test_in_answer_box->value ?? ''}}">
                            <!--</div>-->
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Start message</label>
                                @php
                                $start_message = getChatSetting('start_message')
                                @endphp
                                <input type="text" placeholder="What can i help you with!" name="start_message" class="start_message" value="{{$start_message->value ?? ''}}">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>Message that is automatically sent as the first message when
                                        starting a chat.</span>
                                </div>
                            </div>
                        </div>
                        <div class="col col-right"></div>
                    </form>
                    <!--<div class="dev-input-group dev-input-group-input-info dev-spacer">-->
                    <!--    <label>Message when the chat is closed</label>-->
                    <!--    <div class="input-box-row">-->
                    <!--        <div class="ui card inbox-send-message-card w-100">-->
                    <!--            <div class="content input-options bg-dark-green-color">-->
                    <!--                <div class="input-option-row ">-->
                    <!--                    <img src="{{ asset('images/icons/B.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/I.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (5).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (6).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (8).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/drive.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (5).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (6).png') }}" alt="">-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--            <div-->
                    <!--                class="content d-flex align-items-end flex-column message-writing-content-area">-->
                    <!--                <textarea rows="7" placeholder="Feel free to send a masseage"-->
                    <!--                    class="form-control input-reply-textarea"></textarea>-->
                    <!--            </div>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div class="dev-input-group dev-input-group-input-info dev-spacer">-->
                    <!--    <label>Message when the chat is closed</label>-->
                    <!--    <div class="input-box-row">-->
                    <!--        <div class="ui card inbox-send-message-card w-100">-->
                    <!--            <div class="content input-options bg-dark-green-color">-->
                    <!--                <div class="input-option-row ">-->
                    <!--                    <img src="{{ asset('images/icons/B.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/I.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (5).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (6).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (8).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/drive.png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (5).png') }}" alt="">-->
                    <!--                    <img src="{{ asset('images/icons/Vector (6).png') }}" alt="">-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--            <div-->
                    <!--                class="content d-flex align-items-end flex-column message-writing-content-area">-->
                    <!--                <textarea rows="7" placeholder="Thank you for your message!"-->
                    <!--                    class="form-control input-reply-textarea"></textarea>-->
                    <!--            </div>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <button type="button" class="dev-form-submit-btn submit-text">Save</button>
                </div>

            </div>
        </div>
        <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
        <script>
            //CKEDITOR.replace('editor1');
        </script>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-style">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Style</h2>
                </div>
                <div class="dev-content-inner">
                    <form method="POST" action="{{ route('store.style') }}">
                        @csrf
                        <div class="col-left">
                            <div class="dev-box">
                                <h3>Text theme color</h3>
                                @php
                                $text_theme_color = getChatSetting('text_theme_color');
                                $text_theme_color_value = $text_theme_color->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="text_theme_color" readonly placeholder="#020400" value="{{ $text_theme_color_value }}">
                                    <span style="background-color: {{ $text_theme_color_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background theme color</h3>
                                @php
                                $background_theme_color = getChatSetting('background_theme_color');
                                $background_theme_color_value = $background_theme_color->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="background_theme_color" readonly placeholder="#020400" value="{{$background_theme_color_value}}">
                                    <span style="background-color: {{ $background_theme_color_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color for sent messages</h3>
                                @php
                                $text_color_for_sent_message = getChatSetting('text_color_for_sent_message');
                                $text_color_for_sent_message_value = $text_color_for_sent_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="text_color_for_sent_message" readonly placeholder="#020400" value="{{$text_color_for_sent_message_value}}">
                                    <span style="background-color: {{ $text_color_for_sent_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background color of sent messages</h3>
                                @php
                                $background_color_of_sent_message = getChatSetting('background_color_of_sent_message');
                                $background_color_of_sent_message_value = $background_color_of_sent_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="background_color_of_sent_message" readonly placeholder="#020400" value="{{$background_color_of_sent_message_value}}">
                                    <span style="background-color: {{ $background_color_of_sent_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background color of received messages</h3>
                                @php
                                $background_color_of_received_message = getChatSetting('background_color_of_received_message');
                                $background_color_of_received_message_value = $background_color_of_received_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="background_color_of_received_message" readonly placeholder="#020400" value="{{$background_color_of_received_message_value}}">
                                    <span style="background-color: {{ $background_color_of_received_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color of received messages</h3>
                                @php
                                $text_color_of_received_message = getChatSetting('text_color_of_received_message');
                                $text_color_of_received_message_value = $text_color_of_received_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="text_color_of_received_message" readonly placeholder="#020400" value="{{$text_color_of_received_message_value}}">
                                    <span style="background-color: {{ $text_color_of_received_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color of notification icon</h3>
                                @php
                                $text_color_of_notification = getChatSetting('text_color_of_notification');
                                $text_color_of_notification_value = $text_color_of_notification->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="text_color_of_notification" readonly placeholder="#020400" value="{{$text_color_of_notification_value}}">
                                    <span style="background-color: {{ $text_color_of_notification_value }};"></span>
                                </div>
                            </div>
                            <button type="submit" class="dev-form-submit-btn">Save</button>
                        </div>
                        <div class="col-right">
                            <div class="dev-box">
                                <h3>Text color of error messages</h3>
                                @php
                                $text_color_of_error_message = getChatSetting('text_color_of_error_message');
                                $text_color_of_error_message_value = $text_color_of_error_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="text_color_of_error_message" readonly placeholder="#020400" value="{{$text_color_of_error_message_value}}">
                                    <span style="background-color: {{ $text_color_of_error_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background color of error messages</h3>
                                @php
                                $background_color_of_error_message = getChatSetting('background_color_of_error_message');
                                $background_color_of_error_message_value = $background_color_of_error_message->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="background_color_of_error_message" readonly placeholder="#020400" value="{{$background_color_of_error_message_value}}">
                                    <span style="background-color: {{ $background_color_of_error_message_value }};"></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Link color</h3>
                                @php
                                $link_color = getChatSetting('link_color');
                                $link_color_value = $link_color->value ?? '#020400';
                                @endphp
                                <div class="dev-box-inner">
                                    <input type="color" name="link_color" readonly placeholder="#020400" value="{{$link_color_value}}">
                                    <span style="background-color: {{ $link_color_value }};"></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-abuse">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Show the chat on your website</h2>
                    <p>Here you can block IP addresses if you are experiencing problems with users who
                        do
                        not follow the rules.</p>
                </div>
                <div class="dev-content-inner">
                    <h2>Block IP addresses</h2>
                    <form method="POST" action="{{ route('block.ip.addresses') }}">
                    @csrf
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>IP address *</label>
                            <input type="text" name="ip_addresses" placeholder="Enter here">
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>A full or partial IP address. E.g. 127.0.0.1 or 127.0.0</span>
                            </div>
                        </div>
                        <!--<div class="dev-input-group">-->
                        <!--    <label class="dev-checkbox-wrapper">Delete-->
                        <!--        <input type="checkbox">-->
                        <!--        <span class="checkmark"></span>-->
                        <!--    </label>-->
                        <!--</div>-->
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </form>
                </div>
            </div>
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Canned responses</h2>
                    <div class="dev-users-boxs">
                    @if(count($abuses) > 0)
                    @foreach($abuses as $index => $value)
                    
                    <div class="dev-users-box">
                        <div class="dev-box">
                            <h3>{{ $value->value }}</h3>
                        </div>
                        <!--<div class="dev-icon">-->
                        <!--    <img src="{{ asset('images/settingss.svg') }}" alt="">-->
                        <!--</div>-->
                        <div class="dev-icon">
                            <a style="cursor:pointer;" href="{{ route('delete.block.ip.addresses', $value->id) }}" class="delete-display-chat"><img src="{{ asset('images/binn.svg') }}" alt=""></a>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-canned">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Create a new canned response</h2>
                </div>
                <div class="dev-content-inner">
                    <form method="POST" action="{{ route('store.chat.canned.responses') }}">
                        @csrf
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Name</label>
                            <input type="text" placeholder="Type here" name="name" required>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Text</label>
                            <textarea rows="6" name="text" required></textarea>
                        </div>
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </form>
                </div>

            </div>
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Canned responses</h2>
                    <div class="dev-users-boxs">
                    @if(count($canned_responses) > 0)
                    @foreach($canned_responses as $index => $value)
                    
                    @php
                    
                    $result = json_decode($value->value);
                    
                    @endphp
                    
                    <div class="dev-users-box">
                        <div class="dev-box">
                            <h3>{{ $result->name }}</h3>
                            <span>{{ $result->text }}</span>
                        </div>
                        <!--<div class="dev-icon">-->
                        <!--    <img src="{{ asset('images/settingss.svg') }}" alt="">-->
                        <!--</div>-->
                        <div class="dev-icon">
                            <a style="cursor:pointer;" href="{{ route('delete.chat.canned.responses', $value->id) }}" class="delete-display-chat"><img src="{{ asset('images/binn.svg') }}" alt=""></a>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-policy">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Personal data & policy</h2>
                </div>
                <div class="dev-content-inner">
                    <h2>Approval of processing of personal data</h2>
                    <p>Select if users must click on a checkbox to approve policy before they can
                        contact
                        you.</p>
                    <form style="max-width: none;" method="POST" action="{{ route('store.personal.data') }}">
                        @csrf
                        <div class="dev-input-group">
                            <label class="dev-checkbox-wrapper">Require active approval (check box)
                            @php
                            $active_approval = getChatSetting('active_approval')
                            @endphp
                                <input type="checkbox" name="active_approval" @if($active_approval) checked @endif>
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Text</label>
                            @php
                            $name = getChatSetting('name')
                            @endphp
                            <input type="text" placeholder="Type here" name="name" required value="{{ $name->value ?? '' }}">
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Link text</label>
                            @php
                            $link_text = '';
                            if(getChatSetting('link_text')){
                                $link_text = getChatSetting('link_text')->value;
                                }
                            @endphp
                            <textarea name="link_text" id="text_editor" rows="10" placeholder="Your Message"
                                            class="form-control input-reply-textarea" required>{!! $link_text ?? '' !!}</textarea>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Preview</label>
                            <a style="text-decoration: none;" href="{{ route('company.terms.conditions', getSelectedCompany()) }}" target="_blank">Terms & Conditions</a>
                        </div>
                        <!--<div class="dev-input-group dev-input-group-input-info dev-custom-input-group">-->
                        <!--    <label>Policy for personal data</label>-->
                        <!--    <p>Custom policy</p>-->
                        <!--    <button type="button" class="dev-form-submit-btn">Edit</button>-->
                        <!--</div>-->
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </form>
                </div>

            </div>
        </div>
        
        <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
        <script>
            CKEDITOR.replace('text_editor');
        </script>
        <!--  -->
        <!--<div class="dev-tabcontent dev-tabcontent-tags">-->
        <!--    <div class="dev-tabcontent-outers">-->
        <!--        <div class="dev-title-row">-->
        <!--            <h2>Tags</h2>-->
        <!--        </div>-->
        <!--        <div class="dev-content-inner">-->
        <!--            <form method="POST" action="{{ route('store.tags') }}">-->
                        @csrf
        <!--                <div class="dev-input-group">-->
        <!--                    <label class="dev-checkbox-wrapper">Allow new tags to be created when-->
        <!--                        tagging-->
                           @php
                           $new_tags_to_be_created_when_tagging = getChatSetting('new_tags_to_be_created_when_tagging')
                            @endphp
        <!--                        <input type="checkbox" name="new_tags_to_be_created_when_tagging" @if($new_tags_to_be_created_when_tagging) checked @endif>-->
        <!--                        <span class="checkmark"></span>-->
        <!--                    </label>-->
        <!--                </div>-->
        <!--                <button type="submit" class="dev-form-submit-btn">Save</button>-->
        <!--            </form>-->
        <!--        </div>-->

        <!--    </div>-->
        <!--</div>-->
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-chats">
            <!--<div class="dev-tabcontent-outers">-->
            <!--    <div class="dev-title-row">-->
            <!--        <h2>Settings for all chats</h2>-->
            <!--    </div>-->
            <!--    <div class="dev-content-inner">-->
            <!--        <form method="POST" action="{{ route('setting.all.chat') }}">-->
               @csrf
            <!--            <div class="dev-input-group dev-input-group-input-info">-->
            <!--                <label>Heading when selecting chat flow</label>-->
                           @php
                        $heading_for_chat_flow = getChatSetting('heading_for_chat_flow');
                    @endphp
            <!--                <textarea rows="6" required name="heading_for_chat_flow">{{$heading_for_chat_flow->value ?? ''}}</textarea>-->
            <!--                <div class="dev-input-info">-->
            <!--                    <img src="{{ asset('images/info.svg') }}" alt="info">-->
            <!--                    <span>Displayed when the visitor can choose between different chat-->
            <!--                        flows.</span>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <button type="submit" class="dev-form-submit-btn">Save</button>-->
            <!--        </form>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <div>
                        <h2>Show the chat on your website</h2>
                        <p>Copy the following code and add on your website so visitors can chat with
                            you.
                        </p>
                    </div>
                    
                    <?php
                    
                    $comp = get_company('id',getSelectedCompany());
                    
                    ?>
                    
                    
                    <a href="{{route('chat.demo')}}?aw_domain={{$comp->domain}}" type="button" class="dev-form-submit-btn">DEMO <img
                            src="{{ asset('images/Arrow_right_stop.svg') }}" alt=""></a>
                </div>
                <div class="dev-content-inner">
                    <h2>Add the code to your website</h2>
                    <p>The following code should be placed at the bottom of the html-code, right
                        before body-tag, on all
                        pages where the chat should be visible.</p>
                    <form>
                        <div class="dev-input-group dev-input-group-input-info">
                            <textarea readonly rows="11"><link rel="stylesheet"  href="https://chat.rapidev.tech/chat/chat.css">
  <div id="aw-root-chat" data-company="{{getSelectedCompany()}}"></div>
    <script  src="https://chat.rapidev.tech/chat/chat.js"></script> </textarea>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>Displayed when the visitor can choose between different chat
                                    flows.</span>
                            </div>
                        </div>
                    </form>
                    <!--<h2>Customized chat</h2>-->
                    <!--<p>It's possible to customize how the chat works on your website. The code below can-->
                    <!--    be-->
                    <!--    used to automatically-->
                    <!--    fill out the users name and email when the chat is started. It can be added-->
                    <!--    anywhere-->
                    <!--    on the page where the chat is loaded.-->
                    <!--</p>-->
                    <!--<form>-->
                    <!--    <div class="dev-input-group dev-input-group-input-info">-->
                    <!--        <textarea rows="6"> window.$kundo_chat=window.$kundo_chat-->
                    <!--        ||{};window.$kundo_chat.user={-->
                    <!--            "name": "Användare Användarsson","email":-->
                    <!--             "anvandare@example.com",};-->
                    <!--        </textarea>-->
                    <!--    </div>-->
                    <!--</form>-->
                </div>
            </div>
        </div>













        <!-- <div class="dev-tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>

    <div class="dev-tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div> -->

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Store Text Route-->
<script>
$(document).ready(function() {
    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    $('.submit-text').on('click', function() {
        console.log('test')
        
        // Collect data from inputs
        const public_name = $('.public_name').val();
        const internal_name = $('.internal_name').val();
        const wellcome_text = $('.wellcome_text').val();
        const wellcome_text_at_queue = $('.wellcome_text_at_queue').val();
        const start_message = $('.start_message').val();
        const test_in_answer_box = $('.test_in_answer_box').val();
        // Get the value from CKEditor
        const message_when_chat_is_closed = $('#editor1').val();// CKEDITOR.instances.editor1.getData();
        
        $.ajax({
            url: '/store/text',
            type: 'POST',
            headers: {
                        'X-CSRF-TOKEN': csrfToken // Correct CSRF token syntax
                    },
            data: {
                public_name: public_name,
                internal_name: internal_name,
                wellcome_text: wellcome_text,
                wellcome_text_at_queue: wellcome_text_at_queue,
                start_message: start_message,
                test_in_answer_box: test_in_answer_box,
                message_when_chat_is_closed: message_when_chat_is_closed
            },
            success: function(response) {
                if(response.success) {
                    toastr.success('Chat Setting Updated Successfully');
                } else {
                    toastr.error('Failed To Update: ' + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                toastr.error('Failed To Update: ' + errorThrown);
            }
        });
    });
});
</script>
<script defer>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteLinks = document.querySelectorAll('.delete-display-chat');

        deleteLinks.forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault(); // Prevent the default link click behavior

                const url = this.href;

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // If the user confirms, redirect to the delete URL
                        window.location.href = url;
                    }
                });
            });
        });
    });
</script>

@endsection