@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">Basic</button>
            <!--<button type="button">User</button>-->
            <button type="button">Send & Receive</button>
            <button type="button">Signature</button>
            <button type="button">Response</button>
            <button type="button">Canned Responses</button>
            <button type="button">Acknowledge</button>
            <!--<button type="button">Rules</button>-->
            <button type="button">Spam handling</button>
            <!--<button type="button">Tags</button>-->
            <!--<button type="button">Others</button>-->
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-basic">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Basic settings</h2>
                </div>
                <form method="POST" action="{{ route('inbox.basic.setting') }}">
                    @csrf
                    <div class="col col-left">
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Receiving email address </label>
                            <input name="company_email" type="email" value="{{ $company->email }}" placeholder="support@kundesone.no" readonly required>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>E.g. support@yourcompany.com</span>
                            </div>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Email address on Kundo</label>
                            <input name="kundo_email" readonly type="email" value="{{ $company->internal_email }}" placeholder="kundo.limonmedia.no@mailgun.kundesone.no" required>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>Your kundesone internal email address.</span>
                            </div>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Inbox name</label>
                            <input name="inbox_name" type="text" placeholder="Type here.." value="{{ $company->getMeta('inbox_name') ?? '' }}" required>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>Your internal name. I.e. the Inbox</span>
                            </div>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Sender name</label>
                                <input name="sender_name" type="text" placeholder="Type here.." value="{{ $company->getMeta('sender_name') ?? '' }}" required>
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>E.g. company name or department</span>
                                </div>
                        </div>
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </div>
                    <div class="col col-right">
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Language</label>
                            <div class="dev-custom-select">
                                <select name="language" required>
                                    <option value="">Select Language</option>
                                    @foreach($languages as $language)
                                    <option value="{{$language->value}}" @if(count($basic_setting) > 0 && $company->getMeta('language') == $language->value) selected @endif>{{$language->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Timezone</label>
                            <div class="dev-custom-select">
                                <select name="timezone" required>
                                    <option value="">Select your Timezone</option>
                                    @foreach($timezones as $timezone)
                                    <option value="{{$timezone->label}}" @if(count($basic_setting) > 0 && $company->getMeta('timezone') == $timezone->label) selected @endif>{{$timezone->label}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-exchange">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Send & receive email</h2>
                </div>
                <div class="dev-content-inner">
                    <h2>Use sender address</h2>
                    <p>
                        In order for the email to look like it comes directly from you and not from
                        Kundo, you must give your consent for Kundo to send email with one of your email
                        addresses.<br>
                        Give the information below to your IT department so they can make the required
                        settings. More information is available in this guide.<br>
                        Contact support@kundo.se if you have any questions.<br>
                        Whitelabel is correctly set up and outgoing email in Kundo will look like it
                        has been sent directly from you.<br>
                    </p>
                    <ul>
                        <li>
                            Adda <span>TXT-record</span> on <span>s1._domainkey.mgeu.limonmedia.no</span> with
                            the value <span>k=rsa</span>;
                            <span>p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCwTXxqokaO6Le6RfIVFFlgS+QsVmCxc5a+mqjBmuDiiB7S6sCaBNklXOkY6nTi54uHMQNW1wse/hrSDromw696skZ22KHMkEFNBeFmpj6nCVKXnxqCHi4LBcico95NBdogxYHE57JLZSQ2hpu7ExfosRl6/6C7vj8jB3m7ba1toQIDAQAB
                            </span>
                        </li>
                        <li>
                            Add a <span>TXT-record</span> on <span>mgeu.limonmedia.no</span> with the
                            value <span>v=spf1 include:mailgun.org</span> ~all
                        </li>
                        <li>
                            Add a <span>MX-record</span> on <span>mgeu.limonmedia.no</span> with the
                            value <span>mxa.eu.mailgun.org </span> with priority 10
                        </li>
                        <li>
                            Add a <span>MX-record</span> on <span>mgeu.limonmedia.no</span> with the
                            value <span>mxa.eu.mailgun.org </span> with priority 10
                        </li>

                    </ul>
                </div>
            </div>
            <!--<div class="dev-tabcontent-outers">-->
            <!--    <div class="dev-title-row">-->
            <!--        <h2>Send & receive email</h2>-->
            <!--    </div>-->
            <!--    <div class="dev-content-inner">-->
            <!--        <form>-->
            <!--            <div class="col col-left">-->
            <!--                <div class="dev-input-group dev-input-group-input-info">-->
            <!--                    <label>Client_id</label>-->
            <!--                    <input type="text" placeholder="Type here">-->
            <!--                </div>-->
            <!--                <div class="dev-input-group dev-input-group-input-info">-->
            <!--                    <label>Client secret</label>-->
            <!--                    <input type="text" placeholder="Type here">-->
            <!--                </div>-->
            <!--                <button type="button" class="dev-form-submit-btn">Save</button>-->
            <!--            </div>-->
            <!--            <div class="col col-right">-->
            <!--                <div class="dev-input-group dev-input-group-input-info">-->
            <!--                    <label>Tenant_id</label>-->
            <!--                    <input type="text" placeholder="Type here">-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </form>-->
            <!--    </div>-->
            <!--</div>-->
        </div>
        <!--  -->

        <div class="dev-tabcontent dev-tabcontent-sign">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Common email signature</h2>
                </div>
                <div class="dev-content-inner">
                    <form method="POST" action="{{ route('inbox.email.signature') }}" onsubmit="return validateSignatureForm()">
                        @csrf
                        <div class="dev-input-group dev-input-group-input-info">
                            <div class="input-box-row">
                                <div class="ui card inbox-send-message-card w-100">
                                    <div class="content input-options bg-dark-green-color">
                                        <!-- Your other icons here -->
                                    </div>
                                    <div class="content d-flex flex-column message-writing-content-area">
                                        <textarea name="email_signature" id="editor1" rows="10" placeholder="Your Message"
                                            class="form-control input-reply-textarea" required>{!! $email_signature->value ?? '' !!}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>This shared text is added at the bottom of all new emails and
                                    replies you send. Use {name} and {title} to insert your name and
                                    title.</span>
                            </div>
                        </div>
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </form>
                </div>
            </div>
        </div>
        <script>
            function validateSignatureForm() {
                var textarea = document.getElementById('editor1');
                if (textarea.value === '') {
                    toastr.error('Please enter a message in the textarea.');
                    return false;
                }
                return true;
            }
        </script>
        <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
        <script>
            CKEDITOR.replace('editor1');
        </script>

        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-responses">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Response Times</h2>
                    <p>In the statistics you can see your average response time and what percentage is
                        answered within the expected response time.
                        If you specify the days and times you work under Opening hours, the response
                        times will be calculated based on when you actually
                        had the possibility to respond.</p>
                </div>
                <form method="POST" action="{{ route('inbox.response.time') }}">
                    @csrf
                    <div class="dev-content-inner">
                        <h2>Opening times</h2>
                        <p>The days and times you work. Holidays are not taken into account.</p>
                        <div class="dev-content-schedule">
                            <h3>Monday</h3>
                            <div class="schedule-box">
                                @php
                                $monday_start_time = getResponse($company->id, 'monday_start_time', 'Response Time');
                                @endphp
                                <input id="monday_start_time" name="monday_start_time" type="time" @if(isset($monday_start_time) && !is_null($monday_start_time)) value="{{$monday_start_time->value}}" @endif placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            <div class="schedule-box">
                                @php
                                $monday_end_time = getResponse($company->id, 'monday_end_time', 'Response Time');
                                @endphp
                                <input id="monday_end_time" name="monday_end_time" type="time" @if(isset($monday_end_time) && !is_null($monday_end_time)) value="{{$monday_end_time->value}}" @endif placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                                @php
                                $monday_closed = getResponse($company->id, 'monday_closed', 'Response Time');
                                @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="monday_closed" name="monday_closed" @if(isset($monday_closed) && !is_null($monday_closed)) checked @endif type="checkbox" onclick="toggleClosed('monday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Tuesday</h3>
                            @php
                            $tuesday_start_time = getResponse($company->id, 'tuesday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="tuesday_start_time" name="tuesday_start_time" type="time" @if(isset($tuesday_start_time) && !is_null($tuesday_start_time)) value="{{$tuesday_start_time->value}}" @endif placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $tuesday_end_time = getResponse($company->id, 'tuesday_end_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="tuesday_end_time" name="tuesday_end_time" type="time" @if(isset($tuesday_end_time) && !is_null($tuesday_end_time)) value="{{$tuesday_end_time->value}}" @endif placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $tuesday_closed = getResponse($company->id, 'tuesday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="tuesday_closed" name="tuesday_closed" @if(isset($tuesday_closed) && !is_null($tuesday_closed)) checked @endif type="checkbox" onclick="toggleClosed('tuesday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Wednesday</h3>
                            @php
                            $wednesday_start_time = getResponse($company->id, 'wednesday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="wednesday_start_time" name="wednesday_start_time" @if(isset($wednesday_start_time) && !is_null($wednesday_start_time)) value="{{$wednesday_start_time->value}}" @endif type="time" placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $wednesday_end_time = getResponse($company->id, 'wednesday_end_time', 'Response Time');
                            @endphp                          
                            <div class="schedule-box">
                                <input id="wednesday_end_time" name="wednesday_end_time" @if(isset($wednesday_end_time) && !is_null($wednesday_end_time)) value="{{$wednesday_end_time->value}}" @endif type="time" placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $wednesday_closed = getResponse($company->id, 'wednesday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="wednesday_closed" name="wednesday_closed" @if(isset($wednesday_closed) && !is_null($wednesday_closed)) checked @endif type="checkbox" onclick="toggleClosed('wednesday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Thursday</h3>
                            @php
                            $thursday_start_time = getResponse($company->id, 'thursday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="thursday_start_time" name="thursday_start_time" @if(isset($thursday_start_time) && !is_null($thursday_start_time)) value="{{$thursday_start_time->value}}" @endif type="time" placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $thursday_end_time = getResponse($company->id, 'thursday_end_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="thursday_end_time" name="thursday_end_time" @if(isset($thursday_end_time) && !is_null($thursday_end_time)) value="{{$thursday_end_time->value}}" @endif type="time" placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $thursday_closed = getResponse($company->id, 'thursday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="thursday_closed" name="thursday_closed" @if(isset($thursday_closed) && !is_null($thursday_closed)) checked @endif type="checkbox" onclick="toggleClosed('thursday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Friday</h3>
                            @php
                            $friday_start_time = getResponse($company->id, 'friday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="friday_start_time" name="friday_start_time" @if(isset($friday_start_time) && !is_null($friday_start_time)) value="{{$friday_start_time->value}}" @endif type="time" placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $friday_end_time = getResponse($company->id, 'friday_end_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="friday_end_time" name="friday_end_time" @if(isset($friday_end_time) && !is_null($friday_end_time)) value="{{$friday_end_time->value}}" @endif type="time" placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $friday_closed = getResponse($company->id, 'friday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="friday_closed" name="friday_closed" @if(isset($friday_closed) && !is_null($friday_closed)) checked @endif type="checkbox" onclick="toggleClosed('friday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Saturday</h3>
                            @php
                            $saturday_start_time = getResponse($company->id, 'saturday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="saturday_start_time" name="saturday_start_time" @if(isset($saturday_start_time) && !is_null($saturday_start_time)) value="{{$saturday_start_time->value}}" @endif type="time" placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $saturday_end_time = getResponse($company->id, 'saturday_end_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="saturday_end_time" name="saturday_end_time" @if(isset($saturday_end_time) && !is_null($saturday_end_time)) value="{{$saturday_end_time->value}}" @endif type="time" placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $satureday_closed = getResponse($company->id, 'satureday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="saturday_closed" name="saturday_closed" @if(isset($saturday_closed) && !is_null($saturday_closed)) checked @endif type="checkbox" onclick="toggleClosed('saturday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class="dev-content-schedule">
                            <h3>Sunday</h3>
                            @php
                            $sunday_start_time = getResponse($company->id, 'sunday_start_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="sunday_start_time" name="sunday_start_time" @if(isset($sunday_start_time) && !is_null($sunday_start_time)) value="{{$sunday_start_time->value}}" @endif type="time" placeholder="08:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <span class="line"></span>
                            @php
                            $sunday_end_time = getResponse($company->id, 'sunday_end_time', 'Response Time');
                            @endphp
                            <div class="schedule-box">
                                <input id="sunday_end_time" name="sunday_end_time" @if(isset($sunday_end_time) && !is_null($sunday_end_time)) value="{{$sunday_end_time->value}}" @endif type="time" placeholder="16:00">
                                <!-- <img src="{{ asset('images/downn.svg') }}" alt=""> -->
                            </div>
                            <div class="dev-input-group">
                            @php
                            $sunday_closed = getResponse($company->id, 'sunday_closed', 'Response Time');
                            @endphp
                                <label class="dev-checkbox-wrapper">Closed
                                    <input id="sunday_closed" name="sunday_closed" @if(isset($sunday_closed) && !is_null($sunday_closed)) checked @endif type="checkbox" onclick="toggleClosed('sunday')">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <h2>Expected response time</h2>
                        <p>Your goal for when a response should be given.</p>
                        <form>
                            <div class="dev-input-group dev-input-group-input-info">
                                <label>Expected response time, in hours</label>
                                @php
                                $expected_response = getResponse($company->id, 'expected_response', 'Response Time');
                                @endphp
                                <input name="expected_response" type="text" @if(isset($expected_response) && !is_null($expected_response)) value="{{ $expected_response->value }}" @endif placeholder="8">
                                <div class="dev-input-info">
                                    <img src="{{ asset('images/info.svg') }}" alt="info">
                                    <span>With an expected response time of 4 hours, a response should be
                                        given
                                        within 4 hours during opening hours.</span>
                                </div>
                            </div>
                        </form>
                        <button type="submit" class="dev-form-submit-btn">Save</button>
                    </div>
                </form>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                days.forEach(day => {
                    const checkbox = document.getElementById(`${day}_closed`);
                    toggleDefaultClosed(day); // Initialize on page load
                    checkbox.addEventListener('change', () => toggleDefaultClosed(day));
                });
            });

            function toggleDefaultClosed(day) {
                const closed = document.getElementById(`${day}_closed`).checked;
                document.getElementById(`${day}_start_time`).readOnly = closed;
                document.getElementById(`${day}_end_time`).readOnly = closed;
            }
        </script>
        <script>
            function toggleClosed(day) {
                const startInput = document.getElementById(`${day}_start_time`);
                const endInput = document.getElementById(`${day}_end_time`);
                const checkbox = document.getElementById(`${day}_closed`);

                if (checkbox.checked) {
                    startInput.value = "";
                    startInput.readOnly = true;
                    endInput.value = "";
                    endInput.readOnly = true;
                } else {
                    startInput.readOnly = false;
                    endInput.readOnly = false;
                }
            }
        </script>
        <!--  -->
        <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('inbox.canned.response') }}">
                        @csrf
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Name</label>
                            <input name="name" type="text" placeholder="Type here" required>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Text</label>
                            <textarea name="text" required rows="6"></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_response) > 0)
                    @foreach($canned_response 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.canned.response', $value->id) }}" class="delete-user"><img src="{{ asset('images/binn.svg') }}" alt=""></a>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-ack">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Acknowledgement of receipt & ticket numbers</h2>
                </div>
                <h2>Delivery confirmation</h2>
                <p>You can choose to send an delivery confirmation to the customer to confirm that the
                    email was received.
                    The confirmation is only sent on completely new emails, not on replies to existing
                    conversations.</p>
                <form method="POST" action="{{ route('inbox.acknowledgement.receipt') }}">
                    @csrf
                    <div class="dev-input-group">
                        @php
                        $activate_delivery_confirmation = getResponse($company->id, 'activate_delivery_confirmation', 'Acknowledgement of Receipt')
                        @endphp
                        <label class="dev-checkbox-wrapper">Activate delivery confirmation
                            <input name="activate_delivery_confirmation" @if(isset($activate_delivery_confirmation) && !is_null($activate_delivery_confirmation)) checked @endif type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="dev-form-inner">
                        <div class="dev-input-group dev-input-group-input-info">
                            @php
                            $automatic_reply_subject = getResponse($company->id, 'automatic_reply_subject', 'Acknowledgement of Receipt')
                            @endphp
                            <label>Subject of the automatic reply</label>
                            <input name="automatic_reply_subject" type="text" @if(isset($automatic_reply_subject) && !is_null($automatic_reply_subject)) value="{{ $automatic_reply_subject->value }}" @endif placeholder="Type here">
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>You can write:<br>
                                    <ul>
                                        <li>
                                            {title} to add the subject from the customer's e-mail
                                        </li>
                                        <li>
                                            {ticket} to add the ticket number (be sure to enable ticket
                                            numbers below)
                                </span>
                                </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <div class="dev-input-group dev-input-group-input-info">
                            <label>Subject of the automatic reply</label>
                            <input type="text" placeholder="Type here">
                        </div> -->
                    </div>
                    <div class="dev-input-group dev-input-group-input-info">
                        <h3>Text in the automatic reply</h3>
                        <div class="input-box-row">
                            @php
                            $automatic_reply_text = getResponse($company->id, 'automatic_reply_text', 'Acknowledgement of Receipt')
                            @endphp
                            <div class="ui card inbox-send-message-card w-100">
                                <div class="content input-options bg-dark-green-color">
                                    <!-- Your other icons here -->
                                </div>
                                <div class="content d-flex flex-column message-writing-content-area">
                                    <textarea name="automatic_reply_text" id="editor2" rows="10" placeholder="Your Message"
                                        class="form-control input-reply-textarea">{!! $automatic_reply_text->value ?? '' !!}</textarea>
                                </div>
                            </div>
                        </div>
                        <script>
                            CKEDITOR.replace('editor2');
                        </script>
                        <div class="dev-input-info">
                            <img src="{{ asset('images/info.svg') }}" alt="info">
                            <span>Can contain, for example, opening times, expected response time, and
                                other contact information. You can write:<br>
                                <ul>
                                    <li>
                                        {title} to add to the subject line in a customer's email
                                    </li>
                                    <li>
                                        {text} to add a copy to a customer's email
                                    </li>
                                    <li>
                                        {ticket} to add a ticket number (activate ticket numbers below)
                                    </li>
                                    <li>
                                        {name} to add customer's name
                                    </li>
                                </ul>
                            </span>
                        </div>
                    </div>
                    <div class="dev-input-group">
                        @php
                        $confirmation_receipt = getResponse($company->id, 'confirmation_receipt', 'Acknowledgement of Receipt')
                        @endphp
                        <label class="dev-checkbox-wrapper">Only send confirmation of receipt outside
                            of business hours
                            <input name="confirmation_receipt" @if(isset($confirmation_receipt) && !is_null($confirmation_receipt)) checked @endif type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <h3>Ticket numbers</h3>
                    <p>When ticket numbers are activated all e-mail conversations get a random number, e.g.
                        #1234. This number is sent in the subject of all e-mails you send and receive. When
                        a customer contacts you through another channel and supply their ticket number you
                        can quickly find the conversation by searching for e.g. #1234 in the dashboard.
                    </p>
                    <div class="dev-input-group">
                        @php
                        $activate_ticket_number = getResponse($company->id, 'activate_ticket_number', 'Acknowledgement of Receipt')
                        @endphp
                        <label class="dev-checkbox-wrapper">Activate ticket numbers
                            <input name="activate_ticket_number" @if(isset($activate_ticket_number) && !is_null($activate_ticket_number)) checked @endif type="checkbox">
                            <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.<br> Conversations that are deleted by this option
                                can
                                not be restored. Existing conversations that are<br> older than the time
                                limit will be deleted too.</span>
                        </div>
                    </div>
                    <!--<div class="dev-input-group dev-input-group-input-info">-->
                    <!--    <label>Exceptions</label>-->
                    <!--    <legend>Don't send automatic replies to these email addresses</legend>-->
                    <!--    <textarea rows="6" name="exception_email_addresses">{{ $exception_email_addresses->value ?? '' }}-->
                    <!--    </textarea>-->
                    <!--    <div class="dev-input-info">-->
                    <!--        <img src="{{ asset('images/info.svg') }}" alt="info">-->
                    <!--        <span>Separate email addresses with commas or write *@example.com so as not-->
                    <!--            to send confirmations to any email addresses ending in-->
                    <!--            @example.com.</span>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <button type="submit" class="dev-form-submit-btn">Save</button>
                </form>
            </div>

        </div>
        <!--  -->
        <!--<div class="dev-tabcontent dev-tabcontent-rules">-->
        <!--    <div class="dev-tabcontent-outers">-->
        <!--        <div class="dev-title-row">-->
        <!--            <h2>Automatic rules</h2>-->
        <!--            <p>-->
        <!--                With automatic rules you can perform common tasks automatically, e.g. assign an-->
        <!--                e-mail to a specific person if the subject contains a certain word. Automatic-->
        <!--                rules consist of a filter and an effect.-->
        <!--            </p>-->
        <!--        </div>-->
        <!--        <h2>Create a new rule</h2>-->
        <!--        <form method="POST" action="{{ route('update.rule') }}">-->
        <!--            @csrf-->
        <!--            <div class="dev-input-group dev-input-group-input-info">-->
        <!--                <label>Name</label>-->
        <!--                <input name="name" type="text" placeholder="Type here.." value="{{$rule->name ?? ''}}">-->
        <!--                <div class="dev-input-info">-->
        <!--                    <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                    <span>Tag everything from the sales department</span>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        <h3>Filter</h3>-->
        <!--        <p>If you complete the From, To, and Subject fields, they must all match an email for-->
        <!--            the rule to be activated. Leave any field empty to avoid having to match that part.-->
        <!--            If you specify multiple email addresses in the same field, it's enough for one of-->
        <!--            them to match.-->
        <!--            If, for example, you fill in <a href="#">support@kundo.se</a> and <a-->
        <!--                href="#">info@kundo.se</a> in the From field,-->
        <!--            and "hello" in the subject field, all e-mails from <a href="#">support@kundo.se</a>-->
        <!--            OR <a href="#">info@kundo.se</a>-->
        <!--            that ALSO contains "hello" in the subject field will match.-->
        <!--            If you want to activate a rule for all emails that come from a group of email-->
        <!--            addresses, you can write *@kundo.se in the "from" field.-->
        <!--        </p>-->
        <!--            <div class="dev-form-inner">-->
        <!--                <div class="col-left">-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>From</label>-->
        <!--                        <input type="email" name="from" placeholder="Type here.." value="{{$rule->from ?? ''}}">-->
        <!--                        <div class="dev-input-info">-->
        <!--                            <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                            <span>E.g. example@example.com or *@example.com</span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>To</label>-->
        <!--                        <input type="email" name="to" placeholder="Type here.." value="{{$rule->to ?? ''}}">-->
        <!--                        <div class="dev-input-info">-->
        <!--                            <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                            <span>E.g. test@example.com</span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="col-right">-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>Subject Contains</label>-->
        <!--                        <input type="text" name="subject_contains" placeholder="Type here.." value="{{$rule->subject_contains ?? ''}}">-->
        <!--                        <div class="dev-input-info">-->
        <!--                            <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                            <span>E.g. Great deals!</span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>Text Contains</label>-->
        <!--                        <input type="text" name="text_contains" placeholder="Type here.." value="{{$rule->text_contains ?? ''}}">-->
        <!--                        <div class="dev-input-info">-->
        <!--                            <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                            <span>E.g. Great deals!</span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="dev-input-group">-->
        <!--                <label class="dev-checkbox-wrapper">All e-mails automatically marked as spam-->
        <!--                    <input name="all_emails_automatically_mark_as_spam" type="checkbox" @if($rule && !is_null($rule->all_emails_automatically_mark_as_spam)) checked @endif>-->
        <!--                    <span class="checkmark"></span>-->
        <!--                </label>-->
        <!--            </div>-->
        <!--        <h3>Exceptions</h3>-->
        <!--        <p>Email that matches the filter above but for which the rule should not be activated.-->
        <!--        </p>-->
        <!--            <div class="dev-form-inner">-->
        <!--                <div class="col-left">-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>Subject Contains</label>-->
        <!--                        <textarea rows="6" name="subject1_contains">{{$rule->subject1_contains ?? ''}}</textarea>-->
        <!--                        <div class="dev-input-info">-->
        <!--                            <img src="{{ asset('images/info.svg') }}" alt="info">-->
        <!--                            <span>Order Confirmation</span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
                        <!--<div class="col-right">-->
                        <!--    <div class="dev-input-group dev-input-group-input-info">-->
                        <!--        <label>Text Contains</label>-->
                        <!--        <textarea rows="6">Type here..</textarea>-->
                        <!--        <div class="dev-input-info">-->
                        <!--            <img src="{{ asset('images/info.svg') }}" alt="info">-->
                        <!--            <span>Your Order</span>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
        <!--            </div>-->
        <!--        <h3>Effect</h3>-->
        <!--        <p>The effect describes what should happen when the filter above matches. It happens-->
        <!--            automatically, before the e-mail shows up in-->
        <!--            the dashboard.</p>-->
        <!--            <div class="dev-content-schedule">-->
        <!--                <label>Assign To</label>-->
        <!--                <div class="schedule-box">-->
        <!--                    <select name="assign_to">-->
        <!--                        @foreach($company_users as $company_user)-->
        <!--                        <option value="{{$company_user->user->id}}" @if($rule && !is_null($rule->assign_to) && $rule->assign_to == $company_user->user->id) selected @endif>{{$company_user->user->name}}</option>-->
        <!--                        @endforeach-->
        <!--                    </select>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="dev-form-inner">-->
        <!--                <div class="col-left">-->
        <!--                    <div class="dev-input-group dev-input-group-input-info">-->
        <!--                        <label>Message to assigned editor</label>-->
        <!--                        <textarea rows="6" name="message_to_assigned_editor">{{$rule->message_to_assigned_editor ?? ''}}</textarea>-->
        <!--                    </div>-->
                            <!--<div class="dev-input-group">-->
                            <!--    <label class="dev-checkbox-wrapper">Remove and hide from the statistics -->
                            <!--        <input type="checkbox">-->
                            <!--        <span class="checkmark"></span>-->
                            <!--    </label>-->
                            <!--</div>-->
        <!--                </div>-->
        <!--                <div class="col-right">-->
        <!--                    <div class="dev-content-schedule">-->
        <!--                        <label>Add tags</label>-->
        <!--                        <div class="schedule-box">-->
        <!--                            <select name="tag_id">-->
        <!--                                @foreach($tags as $tag)-->
        <!--                                <option value="{{$tag->id}}" @if($rule && !is_null($rule->tag_id) && $rule->tag_id == $tag->id) selected @endif>{{$tag->name}}</option>-->
        <!--                                @endforeach-->
        <!--                            </select>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="checkbox-box">-->
        <!--                        <div class="dev-input-group">-->
        <!--                            <input type="radio" value="set as done" name="status" @if($rule && !is_null($rule->status) && $rule->status == 'set as done') checked @endif>-->
        <!--                            <label class="dev-checkbox-wrapper">Set as done</label>-->
        <!--                        </div>-->
        <!--                        <div class="dev-input-group">-->
        <!--                            <label class="dev-checkbox-wrapper">Set highest priority</label>-->
        <!--                            <input type="radio" value="Set highest priority" name="priority" @if($rule && !is_null($rule->priority) && $rule->priority == 'Set highest priority') checked @endif>-->
        <!--                        </div>-->
        <!--                        <div class="dev-input-group">-->
        <!--                            <label class="dev-checkbox-wrapper">Mark as spam</label>-->
        <!--                            <input type="radio" value="mask as spam" name="status" @if($rule && !is_null($rule->status) && $rule->status == 'mask as spam') checked @endif>-->
        <!--                        </div>-->
        <!--                        <div class="dev-input-group">-->
        <!--                            <label class="dev-checkbox-wrapper">Set lowest priority</label>-->
        <!--                            <input type="radio" value="Set lowest priority" name="priority" @if($rule && !is_null($rule->priority) && $rule->priority == 'Set lowest priority') checked @endif>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
                





        <!--        <button type="submit" class="dev-form-submit-btn">Save</button>-->
        <!--        </form>-->
        <!--    </div>-->

        <!--</div>-->
        <!--  -->
        <div class="dev-tabcontent dev-tabcontent-canned">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Spam handling</h2>
                    <p>Here is a list of email addresses that you have chosen to block because they were
                        used to send spam,
                        as well as email addresses that you never want to be marked as spam.</p>
                </div>
                <div class="dev-content-inner">
                    <h2>Add email address</h2>
                    <form method="POST" action="{{ route('inbox.spam.handling') }}">
                        @csrf
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Email</label>
                            <input type="email" placeholder="Type here" name="spam_email" required>
                            <div class="dev-input-info">
                                <img src="{{ asset('images/info.svg') }}" alt="info">
                                <span>E.g. support@yourcompany.com</span>
                            </div>
                        </div>
                        <div class="dev-input-group dev-input-group-input-info">
                            <label>Marking</label>
                            <label class="dev-radios">Block email address
                                <input type="radio" checked="checked" name="marking_radio" value="Block email address">
                                <span class="checkmark"></span>
                            </label>
                            <label class="dev-radios">Never mark as spam
                                <input type="radio" name="marking_radio" value="Never mark as spam">
                                <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>Email addresses that never should be marked as spam<br>
                        Blocked email addresses</h2>
                    <div class="dev-users-boxs">
                    @if(!is_null($spam_handling))
                    @foreach(json_decode($spam_handling->value) as $index => $values)
                    <div class="dev-users-box">
                        <div class="dev-box">
                            <h3>{{ $values->spam_email }}</h3>
                            <span>{{ $values->marking_radio }}</span>
                        </div>
                        <!--<div class="dev-icon">-->
                        <!--    <img src="{{ asset('images/settingss.svg') }}" alt="">-->
                        <!--</div>-->
                        <div class="dev-icon">
                            <a href="{{ route('delete.spam.handling', $index) }}" style="cursor:pointer;" class="delete-user"><img src="{{ asset('images/binn.svg') }}" alt=""></a>
                        </div>
                    </div>
                    @endforeach
                    @endif
                    </div>
                </div>
            </div>
        </div>
       
        <script defer>
            document.addEventListener('DOMContentLoaded', function () {
                const deleteLinks = document.querySelectorAll('.delete-user');
        
                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>


        <!--  -->
        <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>
                        <div class="dev-input-group">
                            <label class="dev-checkbox-wrapper">Tags are copied to forwarded e-mails
                                <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-others">
            <div class="dev-tabcontent-outers">
                <div class="dev-title-row">
                    <h2>Others</h2>
                </div>
                <div class="dev-content-inner">
                    <h2>Address Book</h2>
                    <p>Here are all the email addresses you have emailed in the past 30 days.</p>
                    <div class="dev-content-schedule">
                        <div class="schedule-box">
                            <input type="text" placeholder="Type here">
                            <button type="button">Search</button>
                        </div>
                    </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>
                    <h2>Personal data</h2>
                    <p>These are the settings you have chosen for how long personal data will be saved.
                        Contact Kundo if you want to change your settings.</p>
                    <div class="outer-info-box">
                        <p>
                            The time during which personal data will be stored. After that, the entire
                            conversation will be deleted from Kundo. You must ensure
                            that the conversations are deleted outside of Kundo. You can also choose not
                            to have personal data deleted automatically. In that ticket,
                            you need to implement your own routine for how the sorting of such data
                            takes place.<br>
                            Conversation removed after: <br>
                            Never
                        </p>
                    </div>
                    <h2>Integrations</h2>
                    <p>These are the settings you have chosen for how long personal data will be saved.
                        Contact Kundo if you want to change your settings.</p>
                    <div class="dev-content-schedule">
                        <label>Search and link to </label>
                        <div class="schedule-box">
                            <input type="text">
                            <img src="{{ asset('images/downn.svg') }}" alt="">
                        </div>
                        <p>Make it possible to search for forum posts or guides and insert a link to
                            them when responding to an email.</p>
                    </div>
                    <button type="button" class="dev-form-submit-btn">Save</button>
                    <h2>Smart Suggestion</h2>
                    <p>Use Smart Suggestions to get relevant guides and forum posts that you can
                        generate answers from or link to. Connect your
                        knowledge base or forum to use the feature.</p>
                    <div class="dev-input-group">
                        <label class="dev-checkbox-wrapper"><img src="{{ asset('images/Group 133611.svg') }}"
                                alt="">Forum
                            <input type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="dev-input-group">
                        <label class="dev-checkbox-wrapper"><img
                                src="{{ asset('images/help-square-svgrepo-com 1.svg') }}" alt="">Help Center
                            <input type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <button type="button" class="dev-form-submit-btn">Save</button>
                </div>

            </div>
        </div>
    </div>
    <!-- End -->

    <!-- Support and Chat Fixed Buttons -->
    <div class="chat-message-box position-fixed">


        <!-- Chat Drop Down -->
        <div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
            <img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">

            <div class="menu chat-menu">
                <div id="chat-feature-widget" class="ui transition chat-feature-widget">
                    <div class="header d-flex justify-content-between align-items-center text-white">
                        <p class="chat-popup-label text-light">Chats</p>
                        <img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}"
                            alt="Cross Chat Icon">
                    </div>
                    <div class="item open-inbox">
                        <div class="single-user-content d-flex">
                            <div class="chat-user-img-box">
                                <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                            </div>
                            <div class="user-message-detail">
                                <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                    adipiscing
                                    elit. In lorem est... </p>
                            </div>
                        </div>
                    </div>
                    <div class="item open-inbox">
                        <div class="single-user-content d-flex">
                            <div class="chat-user-img-box">
                                <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                            </div>
                            <div class="user-message-detail">
                                <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                    adipiscing
                                    elit. In lorem est... </p>
                            </div>
                        </div>
                    </div>
                    <div class="item open-inbox">
                        <div class="single-user-content d-flex">
                            <div class="chat-user-img-box">
                                <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                            </div>
                            <div class="user-message-detail">
                                <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                    adipiscing
                                    elit. In lorem est... </p>
                            </div>
                        </div>
                    </div>



                </div>

                <!-- User Inbox menu  -->
                <div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
                    <div class="header d-flex align-items-center">
                        <img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
                        <p class="chat-popup-label text-light">James</p>
                    </div>
                    <div class="scrollhint">
                        <div class="item">
                            <div class="single-user-content d-flex">
                                <div class="chat-user-img-box receiver-message-box d-flex">
                                    <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                    <p>👋 Hi there! How can I help?</p>
                                </div>
                            </div>
                        </div>
                        <div class="item d-flex justify-content-end">
                            <div class="sender-message-box text-white">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="single-user-content d-flex">
                                <div class="chat-user-img-box receiver-message-box d-flex">
                                    <img class="align-self-end" src="{{ asset('images/Avatar.png') }}"
                                        alt="Dummy User">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
                                        est,
                                        tincidunt at placerat ultricies, vehicula in erat. Donec vitae
                                        ante
                                        mollis, pretium augue vel, feugiat risus.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item d-flex justify-content-end">
                            <div class="sender-message-box text-white">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="single-user-content d-flex">
                                <div class="chat-user-img-box receiver-message-box d-flex">
                                    <img class="align-self-end" src="{{ asset('images/Avatar.png') }}"
                                        alt="Dummy User">
                                    <p>Typing...</p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="outer-message-input-box">
                        <div
                            class="inner-message-input d-flex align-items-center justify-content-between ">
                            <input type="text" class="border-0" placeholder="Type a reply">
                            <p class="input-action d-flex align-items-center ">
                                <img src="{{ asset('images/icons/gif.png') }}" alt="Gif">
                                <img src="{{ asset('images/icons/emoji.png') }}" alt="Gif">
                                <img src="{{ asset('images/icons/attachment.png') }}" alt="Gif">
                            </p>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!-- End -->



        <!-- Support Drop down -->
        <div class="ui floating bg-dark-green-color support-widget-wrapper  icon dropdown button ">
            <img src="{{ asset('images/icons/support.svg') }}" alt="Support Icon">
            <div class="menu support-widget">
                <div class="header support-header mt-0 text-center">
                    <h2 class="color-dark-green">Help & Support</h2>
                </div>
                <div class="support-facilities-box d-flex justify-content-between flex-wrap">
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/faq-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green">FAQ</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/laptop-minimalistic-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green">Using Kundo</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/launch-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green text-wrap">Launching Kundo</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/setting-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green text-wrap">Technical Settings</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/data-mapping-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green ">Integration</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/open-door-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green text-wrap">Privacy & Policy</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/news-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green text-wrap">News & Updates</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/graduate-cap-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green ">Training</p>
                    </div>
                </div>

                <div class="header contact-us-header text-center">
                    <h2 class="color-dark-green">Contact Us</h2>
                </div>

                <div class="contact-us-box d-flex justify-content-center">
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/email-14-svgrepo-com (1) 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green text-wrap">Technical Questions</p>
                    </div>
                    <div class="item text-center">
                        <div class="support-img-box align-content-center">
                            <img src="{{ asset('images/icons/about-filled-svgrepo-com 1.svg') }}" alt="">
                        </div>
                        <p class="color-dark-green">About Kundo</p>
                    </div>
                </div>


            </div>
        </div>
        <!-- End -->

    </div>
    <!-- End -->
</div>

@endsection