@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">User</button>
            <button type="button">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-users">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Add a new user</h2>
                </div>
                <form>
                    <div class="dev-input-group">
                        <label for="name">Name</label>
                        <input type="text" placeholder="Enter your name">
                    </div>
                    <div class="dev-input-group">
                        <label for="name">Language</label>
                        <div class="dev-custom-select">
                            <select>
                                <option value="0">Select your language</option>
                                <option value="1">Audi</option>
                                <option value="2">BMW</option>
                            </select>
                        </div>
                    </div>
                    <div class="dev-input-group">
                        <label for="email">Email</label>
                        <input type="email" placeholder="Enter your email">
                    </div>
                    <button type="submit">Send Activation Email </button>
                </form>
                <div class="dev-title-row">
                    <h2>Users</h2>
                </div>
                <div class="dev-users-boxs">
                    <div class="dev-users-box">
                        <img src="{{ asset('images/Avatar.png') }}">
                        <div class="dev-box">
                            <h3>Leslie Alexander</h3>
                            <span>user1@gmail.com</span>
                        </div>
                        <div class="dev-icon">
                            <img src="{{ asset('images/settingss.svg') }}" alt="">
                        </div>
                        <div class="dev-icon">
                            <img src="{{ asset('images/binn.svg') }}" alt="">
                        </div>
                    </div>
                    <div class="dev-users-box">
                        <img src="{{ asset('images/Avatar.png') }}">
                        <div class="dev-box">
                            <h3>Leslie Alexander</h3>
                            <span>user1@gmail.com</span>
                        </div>
                        <div class="dev-icon">
                            <img src="{{ asset('images/settingss.svg') }}" alt="">
                        </div>
                        <div class="dev-icon">
                            <img src="{{ asset('images/binn.svg') }}" alt="">
                        </div>
                    </div>

                </div>
            </div>
        </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>
                        <div class="col col-left">
                            <div class="dev-input-group">
                                <label class="dev-checkbox-wrapper"> Show profile image of editors
                                    <input type="checkbox" checked="checked">
                                    <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
                                    <input type="checkbox">
                                    <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.
                                    <input type="checkbox">
                                    <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
                                    <input type="checkbox" checked="checked">
                                    <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</label>
                                <input type="email" placeholder="Please enter your email">
                            </div>



                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Max number of chats per editor</label>
                                <input type="text" placeholder="Type here...">
                                <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>
                                <div class="dev-custom-select">
                                    <select>
                                        <option value="0">Never</option>
                                        <option value="1">Audi</option>
                                        <option value="2">BMW</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
                                    <input type="checkbox">
                                    <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
                                    <input type="checkbox">
                                    <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
                                    <input type="checkbox">
                                    <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
                                    <input type="checkbox" checked="checked">
                                    <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
                                    <input type="checkbox" checked="checked">
                                    <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>
                                <div class="dev-custom-select">
                                    <select>
                                        <option value="0">None</option>
                                        <option value="1">Audi</option>
                                        <option value="2">BMW</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>
                                <input type="text" placeholder="Type here...">
                                <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>
                    </form>
                    <button type="submit" class="dev-form-submit-btn">Save Changes</button>
                </div>
            </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>
                    <div class="dev-title-copy-inner">
                        <p>
                            Display chat when on
                            <a href="#">
                                chat.kundo.se/chat/demo/chat-y9oc0g5n/
                            </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">
                                <img src="{{ asset('images/binn-white.svg') }}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="dev-title-copy-inner">
                        <p>
                            Display chat when on
                            <a href="#">
                                chat.kundo.se/chat/demo/chat-y9oc0g5n/
                            </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">
                                <img src="{{ asset('images/binn-white.svg') }}" alt="">
                            </div>
                        </div>
                    </div>
                </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>
                        <div class="col col-left">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Path</label>
                                <input type="text" placeholder="Type here...">
                                <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>
                                        <option value="0">Never</option>
                                        <option value="1">Audi</option>
                                        <option value="2">BMW</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="button" 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>
                        <div class="col col-left">
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Path</label>
                                <input type="text" placeholder="Type here...">
                                <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="button" 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>
                                <input type="text" placeholder="Chat">
                                <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>
                                <input type="text" placeholder="Type here">
                                <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>
                                <textarea rows="6">Hi! Feel free to contact us via chat if you are wondering about anything.
                            </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>
                                <input type="text" placeholder="Limon Media">
                                <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>
                                <textarea
                                    rows="6">Hi! We will be chatting with you soon, but there are some people in front of you in the queue. </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>
                        <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="5" placeholder="Your Message"
                                        class="form-control input-reply-textarea"></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>
                                <input type="text" placeholder="What can i help you with!">
                            </div>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Start message</label>
                                <input type="text" placeholder="What can i help you with!">
                                <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">Save</button>
                </div>

            </div>
        </div>
        <!--  -->
        <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>
                        <div class="col-left">
                            <div class="dev-box">
                                <h3>Text theme color</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background theme color</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color for sent messages</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background color of sent messages</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color of received messages</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Text color of notification icon</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <button type="button" class="dev-form-submit-btn">Save</button>
                        </div>
                        <div class="col-right">
                            <div class="dev-box">
                                <h3>Text color of error messages</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Background color of error messages</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></span>
                                </div>
                            </div>
                            <div class="dev-box">
                                <h3>Link color</h3>
                                <div class="dev-box-inner">
                                    <input type="text" readonly placeholder="#020400">
                                    <span></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>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>IP address *</label>
                            <input type="text" 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="button" class="dev-form-submit-btn">Save</button>
                    </form>
                </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>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Name</label>
                            <input type="text" placeholder="Type here">
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Text</label>
                            <textarea rows="6">Hi! Feel free to contact us via chat if you are wondering about anything.
                        </textarea>
                        </div>
                        <button type="button" class="dev-form-submit-btn">Save</button>
                    </form>
                </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>
                        <div class="dev-input-group">
                            <label class="dev-checkbox-wrapper">Require active approval (check box)
                                <input type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Text</label>
                            <input type="text" placeholder="Type here">
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Link text</label>
                            <input type="text" placeholder="Type here">
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Preview</label>
                            <input type="text">
                        </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="button" class="dev-form-submit-btn">Save</button>
                    </form>
                </div>

            </div>
        </div>
        <!--  -->
        <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>
                        <div class="dev-input-group">
                            <label class="dev-checkbox-wrapper">Allow new tags to be created when
                                tagging
                                <input type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <button type="button" 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>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Heading when selecting chat flow</label>
                            <textarea rows="6">
                        </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="button" 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>
                    <button type="button" class="dev-form-submit-btn">DEMO <img
                            src="{{ asset('images/Arrow_right_stop.svg') }}" alt=""></button>
                </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 rows="11"> &lt;script&gt;
            (function (w) {
                w.$kundo_chat = w.$kundo_chat || {};
                w.$kundo_chat.custom_texts = {
                    START_TEXT: 'Chat with us',
                };
            }(this));
                        &lt;/script&gt;
                        &lt;script src="https://static-chat.kundo.se/chat-js/org/1779/widget.js" async defer&gt;&lt;/script&gt;
                        </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>

@endsection