<style>
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.chat{
        transform: translate(15px, 1px);
    font-size: 17px;
    font-weight: 500;
}
.in_setting{
     display: none !important;
  
}
@media screen and (max-width: 767px) {
    div.inbox-content-wrapper>.inbox-inner-wrapper>.user-box {
        width: 90px;
        display: none !important;
    }
}

@media only screen and (max-width: 420px) {
  .logout {
    display: none !important;
  }
  .in_setting{
     display: block !important;
    margin-left:12px;
}
@media only screen and (max-width: 348px) {
header .nav-links {
    gap: 17px;
}
.chat {
    transform: translate(7px, 1px) !important;
    font-size: 17px;
    font-weight: 500;
}
}
@media only screen and (max-width: 525px) {
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message {
    max-width: 100% !important;
    width: 100% !important;;
}
}

@media only screen and (max-width: 315px) {
header .nav-links {
    gap: 15px;
}
.chat {
    transform: translate(7px, 1px) !important;
    font-size: 17px;
    font-weight: 500;
}
}
.logout_form {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 10px;
}

.logout_form .nav-btn {
    border: none;
    outline: none;
    border-radius: 6.26px;
    height: 38px;
    width: 126.89px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .content-area header .row .col-sm-8 {
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
    }
}
.single-message-chat {
    width: 100%;
    height: -webkit-fill-available !important;
}
</style>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<header>
    <div class="row">
        <div class="col-sm-4 user-name-nav-area d-flex align-content-center">
            <div class="dev-toggle-sidebar">
                <img src="https://kundesone.no/images/logo_cropped.png">
            </div>
            <h2 class="d-flex align-items-center">Hello {{auth()->user()->name}} <span>👋🏼</span>,</h2>
        </div>
        <div class="col-sm-8 d-flex justify-content-end align-items-center">
            <div class="search-box d-flex align-items-center">
                <img src="{{ asset('images/icons/search 1.png') }}" alt="">
                <input type="text" class="color-dark-green" placeholder="Search...">
            </div>
            <div class="nav-links d-flex align-items-center">
                <span class="chat">Chat </span>
                <label class="switch">
                  <input type="checkbox" id="toggleSwitch" @if(auth()->user()->is_available == 1) checked @endif>
                  <span class="slider round">
                </label>
                <form class="logout" method="POST" action="{{route('logout')}}">
                @csrf
                    <button class="nav-btn bg-dark-green-color">
                        <img height="25" width="50" src="{{ asset('images/logout.png') }}" alt="">
                    </button>
                </form>
                <a href="{{ route('chat.setting') }}" class="nav-btn bg-dark-green-color">
                    <img src="{{ asset('images/icons/Message_alt_fill.png') }}" alt="">
                </a>
                <a href="{{ route('inbox.setting') }}" class="nav-btn bell-btn bg-dark-green-color">
                    <img src="{{ asset('images/icons/notification.svg') }}" alt="">
                </a>
                <div class="ui dropdown options-widget-wrapper">
                    <div class="text">
                        <button class="nav-btn bg-dark-green-color chat-setting-btn">
                            <img src="{{ asset('images/icons/Group 32.png') }}" alt="">
                        </button>
                    </div>
                    <div class="menu chat-setting nav-bar-menu mt-2">
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/Vector (3).png') }}" alt="">
                                <span class="action-label text-white">Inbox</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    href="{{ route('inbox.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/chat-round-white.svg') }}" alt="">
                                <span class="action-label text-white">Chats</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                href="{{ route('chat.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/Group 133630.svg') }}" alt="">
                                <span class="action-label text-white">Help Center</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <i class="external link square alternate icon  color-dark-green"></i>
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
                                <span class="action-label text-white">Forum</span>
                            </p>
                            <div
                                class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
                                <i class="external link square alternate icon color-dark-green"></i>
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                           
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
                                <span class="action-label text-white">Profile</span>
                            </p>
                            <div
                                class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
                                <i class="external link square alternate icon color-dark-green"></i>
                                <!--<a class="ui secondary basic button tag-btn shadow-none">Tags</a>-->
                                <a href="{{ route('profile') }}"
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div> <hr >
                            
                             <div class="logout_form">
                                        <form class="in_setting"  method="POST" action="https://kundesone.no/logout">
                <input type="hidden" name="_token" value="18hlNz76CXQJdP55j8LVsnhIf8KpaEi5MXKu9EFV" autocomplete="off">                    <button class="nav-btn bg-dark-green-color">
                        <img height="25" width="50" src="https://kundesone.no/images/logout.png" alt="">
                    </button>
                </form>
                             </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</header>
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<style>
    
    .cke_notification.cke_notification_warning{
        display:none!important;
    }
    
</style>
<script>
    document.getElementById('toggleButton').addEventListener('click', function() {
        this.classList.toggle('btn-success');
        this.classList.toggle('btn-primary');
        this.textContent = this.classList.contains('btn-success') ? 'On' : 'Off';
    });
</script>

<!--chat avialability ajax-->
<script>
$(document).ready(function() {
    $('#toggleSwitch').off('change').on('change', function(e) {
        // Prevent default form submission if the toggle is inside a form
        e.preventDefault();

        const isChecked = $(this).is(':checked');
        let status = isChecked ? 'on' : 'off';

        // Disable the checkbox to avoid multiple clicks during the AJAX call
        $(this).prop('disabled', true);

        $.ajax({
            url: 'update/chat-availability',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            data: {
                status: status
            },
            success: function(response) {
                if(response.success) {
                    toastr.success('Chat Availability Updated Successfully');
                }
                // Enable the checkbox again after the AJAX call completes
                $('#toggleSwitch').prop('disabled', false);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $('#toggleSwitch').prop('disabled', false);
            }
        });
    });
});



</script>

<style>
    
    @media screen and (max-width: 767px) {
    .content-area header .row .col-sm-8 {
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
    }
}
</style>

