@extends('layouts.app')
@section('title')
    {{ 'Direct Message ' }}
@endsection
@push('styles')
<style>
    .archive_div_show{
        display: none;
    }
    .main-nav-line-chat .nav-link.active {
      width: 50%;
    }
    .main-nav-line-chat .nav-link {
        width: 50%;
    }
    .archive-count{
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        font-size: 9px;
        font-weight: 500;
        color: #fff;
        background-color: #ee335e;
        box-shadow: 0 0 0 2px #fff;
        align-items: center;
    }
</style>
@endpush
@section('content')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto" id="js-my-auto-{{ $currentUser['id'] }}">
            <h4 class="page-title">Direct Message </h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Direct Message </li>
            </ol>
        </div>

    </div>
    <div class="row row-sm mb-4">
        @if (request('subscription_table_can_access_chat') !== null &&
                request('subscription_table_can_access_chat') === '0' &&
                $isFreeTrial == 'no')
            <div class="row row-sm">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Subscription Update Required</h5>
                            <p class="card-text">Sorry, you are not currently allowed to access this feature. Please
                                consider updating your subscription plan to access this feature.</p>
                            <a href="{{ route('subscription') }}" class="btn btn-primary">Update Subscription</a>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="col-xl-12">
                <div class="row">
                    <div class="col-xl-3 col-lg-12">
                        <div class="card">
                            <div class="main-content-app">
                                <div class="main-content-left main-content-left-chat overflow-hidden">
                                    @if($showChatMenu == 'yes' && $showArchiveMenu == 'yes')
                                    <nav class="nav main-nav-line main-nav-line-chat">
                                        @if($showChatMenu == 'yes')
                                            <a class="nav-link active" data-bs-toggle="tab" href="" data-value="0">Chat</a>
                                        @endif
                                        @if($showArchiveMenu == 'yes')
                                            <a class="nav-link {{$showChatMenu == 'no' ? 'active' : ''}}" data-bs-toggle="tab" href="" data-value="1">Archive&nbsp;&nbsp;
                                                @if ($unreadArchiveMsgCount > 0)
                                                    <span class="archive-count">{{$unreadArchiveMsgCount}}</span>
                                                @endif
                                            </a>
                                        @endif
                                    </nav>
                                    @else
                                        <nav class="nav main-nav-line main-nav-line-chat">
                                            @if($showChatMenu == 'yes')
                                                <a class="nav-link active" data-bs-toggle="tab" href="" data-value="0" style="width:100%">Chat</a>
                                            @elseif($showArchiveMenu == 'yes')
                                                <a class="nav-link {{$showChatMenu == 'no' ? 'active' : ''}}" data-bs-toggle="tab" href="" data-value="1" style="width:100%">Archive&nbsp;&nbsp;
                                                    @if ($unreadArchiveMsgCount > 0)
                                                        <span class="archive-count">{{$unreadArchiveMsgCount}}</span>
                                                    @endif
                                                </a>
                                            @endif
                                        </nav>
                                    @endif
                                    <div class="main-chat-list" id="ChatList">
                                        <ul id="ul-chat-order"
                                            class="main-chat-list-{{ $currentUser['id'] }} js-chat-order">
                                            @if ($users)
                                                @foreach ($users as $user)
                                                    <li class="chat-{{ $currentUser['id'] }}-{{ $user['id'] }}"
                                                        data-id="{{ $user['id'] }}" id="chat-with-me">
                                                        <div class="media new">
                                                            @if (Cache::has('is_online' . $user->id))
                                                                <div
                                                                    class="main-img-user online {{ $user->id }}-is-online">
                                                                @else
                                                                    <div
                                                                        class="main-img-user offline {{ $user->id }}-is-online">
                                                            @endif
                                                            <img alt="" src="{{ $user['profile_img_url'] }}">
                                                            @if ($user['unread_count'] <= 0)
                                                                <span
                                                                    id="unread-{{ $currentUser['id'] }}-msg-{{ $user['id'] }}-count"
                                                                    style="display:none">{{ $user['unread_count'] }}</span>
                                                            @else
                                                                <span
                                                                    id="unread-{{ $currentUser['id'] }}-msg-{{ $user['id'] }}-count">{{ $user['unread_count'] }}</span>
                                                            @endif
                                                        </div>
                                                        <div class="media-body">
                                                            <div class="media-contact-name">
                                                                <span>{{ $user['first_name'] . ' ' . $user['last_name'] }}</span>
                                                                <span></span>
                                                                @if ($user->last_msg->is_archive == '0')
                                                                    <a class="nav-link archive_chat"
                                                                         href=""
                                                                        title="Archive Chat" data-value = "{{$user['id']}}"
                                                                        data-status = "1"
                                                                        {{-- data-bs-original-title="Archive Chat" --}}
                                                                        aria-label="Archive Chat"><i
                                                                            class="fa fa-download"
                                                                            style="font-size:20px"></i></a>
                                                                @else
                                                                    <a class="nav-link archive_chat"
                                                                         href=""
                                                                        title="Unarchive Chat" data-status = "0"
                                                                        data-value = "{{$user['id']}}"
                                                                        {{-- data-bs-original-title="Unarchive Chat" --}}
                                                                        aria-label="Unarchive Chat"><i
                                                                            class="fa fa-upload"
                                                                            style="font-size:20px"></i></a>
                                                                @endif
                                                            </div>
                                                            @if (!empty($user->last_msg))
                                                                @if ($user->last_msg->message_type == '0')
                                                                    <p
                                                                        class="display-msg-{{ $currentUser['id'] }}-{{ $user['id'] }}">
                                                                        {{ $user->last_msg->message }}</p>
                                                                @else
                                                                    <p
                                                                        class="display-msg-{{ $currentUser['id'] }}-{{ $user['id'] }}">
                                                                        <i class="far fa-file">
                                                                            {{ $user->last_msg->file_name }}</i></p>
                                                                @endif
                                                            @else
                                                                <p
                                                                    class="display-msg-{{ $currentUser['id'] }}-{{ $user['id'] }}">
                                                                </p>
                                                            @endif

                                                        </div>
                                    </div>
                                    </li>
        @endforeach
        @endif
        </ul>
    </div><!-- main-chat-list -->
    </div>
    </div>
    </div>
    </div>
    <div class="col-lg-12 col-xl-9">
        <div class="card overflow-hidden">
            <div id="chat-global-loader" style="display: none;">
                <img src="{{ asset('assets/images/svgicons/loader.svg') }}" class="loader-img" alt="Loader">
            </div>
            <div class="main-content-app">
                <a class="main-header-arrow" href="" id="ChatBodyHide"><i class="icon ion-md-arrow-back"></i></a>
                <div class="main-content-body main-content-body-chat">
                    <div class="main-chat-header">
                        <div class="main-img-user offline"><img alt="img"
                                src="{{ asset('images/chat/common/nouserimage.png') }}" id="chat-with-img"></div>
                        <div class="main-chat-msg-name">
                            <h6></h6><small></small>
                        </div>
                        <nav class="nav" style="display: none;">
                            <a class="nav-link" href=""><i class="icon ion-md-more"></i></a>
                            <a class="nav-link" data-bs-toggle="tooltip" href="" title="Call"><i
                                    class="fe fe-star"></i></a>
                            <a class="nav-link" data-bs-toggle="tooltip" href="" title="Trash"><i
                                    class="fe fe-trash"></i></a>
                            <a class="nav-link" data-bs-toggle="tooltip" href="" title="View Info"><i
                                    class="fe fe-alert-circle"></i></a>

                        </nav>
                    </div><!-- main-chat-header -->
                    <div class="main-chat-body" id="ChatBody">
                        <div class="content-inner chat-detail">
                            <!-- <label class="main-chat-time"><span>3 days ago</span></label> -->

                        </div>
                        <div class=" content-inner is-typing">

                        </div>
                        <div class="content-inner d-flex  justify-content-center preview-upload-img-body preview-hide">
                            <img src="" id="preview-upload-img">
                            <label for="preview-upload-img" class="preview-upload-label preview-hide">You are uploading
                                file</label>
                            <video id="preview-upload-video-body" controls class="preview-hide">
                            </video>
                            <span class="preview-show-close"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
                        </div>
                    </div>
                    <div class="main-chat-footer ">
                        <nav class="nav">
                        </nav>
                        <form action="#" method="post" id="message_form" class="d-flex"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="text" class="form-control" name="user_id" id="user_id" hidden>

                            <input type="text" class="form-control" id="message" name="message"
                                placeholder="Type something here..." autocomplete="off">

                            <div class="d-none d-sm-inline-block chat-features">
                                <div class="element">
                                    <i class="fe fe-paperclip" id="send-image-video"></i>
                                    <input type="file" class="form-control" name="file" id="chat-image-video">
                                </div>
                            </div>
                            <button id="send_message"class="fe fe-send main-msg-send" disabled> </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    @endif
    </div>

    <div id="lightbox">
        <div class="close">x</div>
        <img class="lightbox-image-viewer" src="#" style="display: none">
        <a href="" download
            class="download-button lightbox-image-viewer lightbox-download-button fa fa-download"></a>
        <video controls class="lightbox-video-viewer" style="display: none">
            <source src="">
        </video>
    </div>
@endsection
@push('scripts')
    <script>
        const video = "video";
        var chat_order = @json($messages);
        var readCountUpdate = @json(route('msg-count-update'));
        var authUserId = "{{ $currentUser['id'] }}";
    </script>
    <script src="{{ asset('assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweet-alert/jquery.sweet-alert.js') }}"></script>

    <!-- Sweet-alert js  -->
    <script src="{{ asset('assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
    <script>
        $(document).ready(function() {
            function triggerFirstChat() {
                $("#ul-chat-order li:first").trigger('click');
            }
            setTimeout(function() {
                triggerFirstChat();
            }, 500);
            // get chat on scroll
            $(".main-chat-list").scroll(function(e) {
                e.preventDefault();
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(this).prop("scrollHeight");
                var clientHeight = $(this).prop("clientHeight");

                if (scrollTop + clientHeight >= scrollHeight - 1) {
                    // Perform AJAX request here
                    var ul = document.getElementById("ul-chat-order");
                    var lis = ul.getElementsByTagName("li");
                    var lastLi = lis[lis.length - 1];
                    var lastLiId = lastLi.getAttribute("data-id");

                    $.ajax({
                        method: "GET",
                        dataType: "json",
                        url: "chat/get-chat-scroll",
                        data: {
                            id: lastLiId,
                        },
                        success: function(response) {
                            if (response.success == "true") {
                                $("#ul-chat-order").append(response.html);
                            }
                            return false;
                        },
                        error: function(xhr, status, error) {
                            return false;
                        },
                    });
                }
            });



            $(".main-chat-body").scroll(function() {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(this).prop("scrollHeight");
                var clientHeight = $(this).prop("clientHeight");

                if (scrollTop == 0) {
                    // Perform AJAX request here
                    var last_msg_id = $('.chat-detail > #last-msg').attr('data-id');
                    var chat_user = $('.main-chat-msg-name h6').attr('data-id');

                    if (last_msg_id == "undefined" || last_msg_id == "" || last_msg_id == null) {
                        return false;
                    }

                    $.ajax({
                        method: "GET",
                        dataType: "json",
                        url: "chat/get-chat-msg-scroll",
                        data: {
                            msg_id: last_msg_id,
                            chat_user: chat_user
                        },
                        success: function(data) {
                            if (data.status == true) {
                                $("#user_id").val(data.c_w_user.id);
                                $(".main-chat-msg-name h6").attr("data-id", data.c_w_user.id);
                                $(".main-chat-msg-name h6").text(data.c_w_user.first_name+' '+data.c_w_user.last_name);
                                $(".main-chat-header > .main-img-user").addClass(
                                    data.c_w_user.id + `-is-online`
                                );

                                if (
                                    data.online_status == "offline" &&
                                    data.c_w_user.last_seen != "" &&
                                    data.c_w_user.last_seen != null
                                ) {
                                    $(".main-chat-header > .main-img-user").removeClass(
                                        "online");
                                    $(".main-chat-msg-name small").text(`Last seen: ` + data
                                        .c_w_user.last_seen);
                                    $(`.` + data.c_w_user.id + `-is-online`).removeClass(
                                        "online");
                                } else if (data.online_status == "online") {
                                    $(".main-chat-header > .main-img-user").removeClass(
                                        "offline");
                                    $(`.` + data.c_w_user.id + `-is-online`).removeClass(
                                        "offline");
                                    $(".main-chat-msg-name small").text("online");

                                } else {
                                    $(".main-chat-header > .main-img-user").removeClass(
                                        "offline");
                                    $(`.` + data.c_w_user.id + `-is-online`).removeClass(
                                        "offline");
                                    $(`.` + data.c_w_user.id + `-is-online`).removeClass(
                                        "online");
                                    $(".main-chat-header > .main-img-user").removeClass(
                                        "online");
                                    $(".main-chat-msg-name small").text("");

                                }

                                $(`.` + data.c_w_user.id + `-is-online`).addClass(data
                                    .online_status);

                                $("#chat-with-img").attr("src", data.c_w_user.profile_img_url);
                                $(".chat-detail").attr("id", `messages-` + data.c_user + `-` +
                                    data.c_w_user.id);
                                $(data.messages).insertBefore('.chat-detail > #last-msg');
                                $(".is-typing").attr("id", `is-typing-` + data.c_user + `-` +
                                    data.c_w_user.id
                                );

                                let scrollTop =
                                    $(".main-chat-body").prop("scrollTop");
                                $(".main-chat-body").scrollTop(scrollTop);
                            } else {
                                return false;
                            }
                        },
                        error: function(xhr, status, error) {
                            return false;
                        },
                    });
                }
            });
        });

        $(document).on("click", ".open-lighbox", function(event, obj) {

            //get mime type
            var mediaType = $(this).attr('data-mime-type');
            var imgVid = mediaType.split("/")[0];

            if (imgVid != "") {
                if (imgVid == "image") {
                    $('.lightbox-image-viewer').css('display', 'block');
                    $('#lightbox').css('display', 'flex');
                    $(this).addClass('active');

                    //set image
                    var src = $(this).attr('data-url');
                    $('.lightbox-image-viewer').attr('src', src);
                    $('.lightbox-download-button').attr('href', src);
                } else if (imgVid == "video") {
                    $('.lightbox-video-viewer').css('display', 'block');
                    $('#lightbox').css('display', 'flex');
                    $(this).addClass('active');

                    //set video
                    var src = $(this).find('source').attr('src');
                    $('.lightbox-video-viewer').attr('src', src);
                    $('.lightbox-video-viewer')[0].play();
                }
            }


        });

        $(document).on("click", ".close", function(event) {
            $('span').removeClass('active');

            $('.lightbox-image-viewer').css('display', 'none');
            $('.lightbox-video-viewer').css('display', 'none');
            $('.lightbox-video-viewer')[0].pause();
            $('#lightbox').hide();
        });

        $(document).on("click", ".archive_chat", function(event) {
            var recieverId = $(this).data('value');
            var archivestatus = $(this).data('status');
        
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "chat/archive-chat",
                data: {
                    recieverId: recieverId,
                    status: archivestatus
                },
                success: function(data) {
                    if (data.status == true) {
                        getChatStatusWise(archivestatus);
                    } else {
                        return false;
                    }
                },
                error: function(xhr, status, error) {
                    return false;
                },
            });
        });
        
        $(document).on("click", ".nav-link", function(event) {
            var status = $(this).data('value');
            getChatStatusWise(status);
        });

        function getChatStatusWise(status)
        {
            $.ajax({
                method: "POST",
                dataType: "json",
                url: "chat/chat-status-wise",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: {
                    status: status,
                },
                success: function(data) {
                    if (data.status == true) {
                        $('#ChatList').html('');
                        if(data.html == ''){
                            if(data.unArchiveCount > 0){
                                var navLinkSelector = '.main-nav-line-chat .nav-link[data-value="0"]';
                                if ($(navLinkSelector).length === 0) {
                                    var navLinkHtml = '<a class="nav-link" data-bs-toggle="tab" href="" data-value="0">Chat</a>';
                                    $('.main-nav-line-chat').prepend(navLinkHtml);
                                }
                            }else{
                                // Remove the 'Chat' nav-link
                                $('.main-nav-line-chat .nav-link[data-value="0"]').remove();
                                $('.main-nav-line-chat .nav-link[data-value="0"]').removeClass('active');
                            }
                            if(data.archiveCount > 0){
                                var navLinkSelector = '.main-nav-line-chat .nav-link[data-value="1"]';
                                if ($(navLinkSelector).length === 0) {
                                    var navLinkHtml = '<a class="nav-link" data-bs-toggle="tab" href="" data-value="1">Archive&nbsp;&nbsp';
                                    if(data.unreadArchiveMsgCount > 0){
                                        navLinkHtml+= '<span class="archive-count">'+data.unreadArchiveMsgCount+'</span></a>';
                                    }
                                    $('.main-nav-line-chat').append(navLinkHtml);
                                }
                            }else{
                                // Remove the 'Archive' nav-link
                                $('.main-nav-line-chat .nav-link[data-value="1"]').remove();
                                $('.main-nav-line-chat .nav-link[data-value="1"]').removeClass('active');
                            }
                            // Add 'active' class to the nav-link with the corresponding data-value
                            $('.main-nav-line-chat .nav-link[data-value="' + status + '"]').addClass('active');
                        }else{
                            $('#ChatList').html(data.html);
                            // Remove 'active' class from all nav-links
                            $('.main-nav-line-chat .nav-link').removeClass('active');
                            if(data.unArchiveCount > 0){
                                var navLinkSelector = '.main-nav-line-chat .nav-link[data-value="0"]';
                                if ($(navLinkSelector).length === 0) {
                                    var navLinkHtml = '<a class="nav-link" data-bs-toggle="tab" href="" data-value="0">Chat</a>';
                                    $('.main-nav-line-chat').prepend(navLinkHtml);
                                }
                            }else{
                                // Remove the 'Chat' nav-link
                                $('.main-nav-line-chat .nav-link[data-value="0"]').remove();
                                $('.main-nav-line-chat .nav-link[data-value="0"]').removeClass('active');
                            }
                            if(data.archiveCount > 0){
                                var navLinkSelector = '.main-nav-line-chat .nav-link[data-value="1"]';
                                if ($(navLinkSelector).length === 0) {
                                    var navLinkHtml = '<a class="nav-link" data-bs-toggle="tab" href="" data-value="1">Archive&nbsp;&nbsp';
                                    if(data.unreadArchiveMsgCount > 0){
                                        navLinkHtml+= '<span class="archive-count">'+data.unreadArchiveMsgCount+'</span></a>';
                                    }
                                    $('.main-nav-line-chat').append(navLinkHtml);
                                }
                            }else{
                                // Remove the 'Archive' nav-link
                                $('.main-nav-line-chat .nav-link[data-value="1"]').remove();
                                $('.main-nav-line-chat .nav-link[data-value="1"]').removeClass('active');
                            }
                            // Add 'active' class to the nav-link with the corresponding data-value
                            $('.main-nav-line-chat .nav-link[data-value="' + status + '"]').addClass('active');
                        }
                        var navLinkCount = $(".main-nav-line-chat .nav-link").length;
                        console.log("nav length", navLinkCount);

                        if (navLinkCount == 2) {
                            $(".main-nav-line-chat .nav-link.active").css("width", "50%");
                            $(".main-nav-line-chat .nav-link").css("width", "50%");
                        } else {
                            $(".main-nav-line-chat .nav-link.active").css("width", "100%");
                            $(".main-nav-line-chat .nav-link").css("width", "100%");
                        }
                    } else {
                        return false;
                    }
                },
                error: function(xhr, status, error) {
                    return false;
                },
            });
        }
    </script>
    @vite(['resources/js/chat.js'])
@endpush