@extends('Admin.layouts.master')
@section('style')
    <style>
        .active {
            color: #c18948 !important
        }
    </style>
@endsection
@section('title', 'Manage Chats')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <div class="chat-box">
                <div class="row max-w-100 h-100">
                    <div class="col-md-4 p-0 users_list h-100" style="height:45rem;overflow:auto">
                        <div class="card h-100">
                            <div class="card-header pt-5" id="kt_chat_contacts_header">
                                <form class="w-100 position-relative" autocomplete="off">
                                    <span
                                        class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y"
                                        style="margin-top:-5px;">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                                rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                            <path
                                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                                fill="currentColor" />
                                        </svg>
                                    </span>
                                    <input type="text" class="form-control form-control-solid px-15" name="search"
                                        value="" oninput="searchData(this.value)" id="search"
                                        placeholder="Search" />
                                </form>
                            </div>
                            <div class="card-body pt-5" id="kt_chat_contacts_body">
                                <div class="scroll-y me-n5 pe-5 h-lg-auto user_Detail" data-kt-scroll="true"
                                    data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                                    data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                    data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
                                    data-kt-scroll-offset="5px">
                                    {{-- @foreach ($use    overflow: scroll;overflow: scroll;rs as $user)
                                <div class="d-flex flex-stack py-4">
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-45px symbol-circle">
                                            @if ($user->profile_image)
                                            <?php
                                            $img = 'public/uploads/profile/img/' . $user->getAttributes()['profile_image'];
                                            ?>
                                            @else
                                            @php($img ='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png')
                                            @endif
                                            <img alt="Pic" src="{{$img}}" />
                                @if ($user->total_count)
                                <span class="symbol-badge badge badge-sm badge-circle badge-white badge-outline bg-danger start-100">{{$user->total_count}}</span>
                                @endif
                            </div>
                            <div class="ms-5">
                                <a href="javascript:void(0)" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2" onclick="getUser({{$user->id}})">{{$user->name}}</a>
                                <div class="fw-semibold text-muted">{{$user->email}}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5  p-0 chat_screen h-100">

                        <div class="card w-100 rounded-0 border-0" id="kt_drawer_chat_messenger"
                            style="overflow-x:hidden;background-color: #cccccc1a;position: relative;height: 100%;">
                            <div class="chat-msgs h-100">
                                <img src="{{ asset('/public/assets/media/FrontendImages/menu-logo.png') }}"/>
                                <p></p>
                            </div>
                            <div class="card-footer d-flex align-items-center me-2 p-0 d-none"
                                id="kt_drawer_chat_messenger_footer">
                                <textarea class="form-control form-control-flush resize-none" rows="1" data-kt-element="input" name="message"
                                    id="message" placeholder="Type a message" style="background-color: #dfdfdf;"></textarea>
                                <input type="hidden" name="user_id" id="user_id">
                                <div class="btn" data-kt-element="send"><i class="fa-solid fa-paper-plane" title="send"
                                        onclick="sendMsg()"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3  p-0 active_user_details show-user" style="background-color: #fff;height: 100%;overflow: scroll;">
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        $(function() {
            userList();
        })
        setInterval(function() {
            if ($('#user_id').val()) {
                // $(`#user_${$('#user_id').val()}`).addClass('active');
                getUser($('#user_id').val());
                // $('.spanName').each(function() {
                //     $(this).removeClass('active');
                // })
            }
        }, 4000);

        setInterval(function() {
            userList();
        }, 5000)

        function searchData(search) {
            // alert(search)
            $.ajax({
                url: "{{ route('search-user-data') }}",
                type: "GET",
                data: {
                    search: search
                },
                success: function(result) {
                    if (result) {
                        $('.user_Detail').html('').append(result);
                    } else {
                        $('.user_Detail').html('').append("No data found");
                    }
                }
            });
        }

        // sending message on click on enter
        $('#message').keyup(function(event) {
            if (event.keyCode === 13) {
                sendMsg();
            }
        });


        function sendMsg() {

            let msg = $('#message').val();

            let user_id = $('#user_id').val();
            // alert(user_id);

            $.ajaxSetup({

                headers: {

                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }

            });

            $.ajax({

                cache: false,

                url: "{{ route('send-admin-msg') }}",

                type: "POST",

                data: {

                    message: msg,

                    user_id: user_id

                },

                dataType: "json",

                success: function(result) {

                    if (result.status == 200) {

                        getUser($('#user_id').val());

                        $('#message').val('')

                    }

                    if (result.status == 400) {

                        toastr.warning(result.message);

                    }

                },

            });

        }

        function getUser(id) {
            $('.spanName').each(function() {
                $(this).removeClass('active');
            })
            $(`#user_${id}`).addClass('active');
            $('#user_id').val(id);


            $.ajax({

                url: "{{ route('get-user-for-chat') }}",

                type: "GET",

                data: {

                    id: id,

                },

                success: function(result) {

                    $('.show-user').html('');

                    $('.chat-msgs').html('');

                    $('.show-user').append(result.user);

                    $('.chat-msgs').append(result.chat);

                    $('#kt_drawer_chat_messenger_footer').removeClass('d-none');

                    if (result.status == 400) {

                        toastr.warning(result.message);

                    }

                },

            });

        }

        function userList() {
            let search = $('#search').val();
            if (search) {
                return;
            }
            $.ajax({
                url: "{{ route('get-user-list') }}",
                type: "GET",
                // dataType : 'json',
                success: function(result) {
                    if (result) {
                        $('.user_Detail').html('').append(result);
                    }
                },
            });
        }
    </script>

@endsection