@extends('layouts.app')
@section('title') {{'Business Chat'}} @endsection

@section('content')
<div class="breadcrumb-header justify-content-between">
    <div class="my-auto">
        <h4 class="page-title">Business Chat</h4>
        <ol class="breadcrumb">
        <li class="breadcrumb-item">
            @if(Auth::user()->role_id == 1)
            <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
            @else
            <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
            @endif
            </li>
            <li class="breadcrumb-item"><a href="{{ route('business.index')}}">Business</a></li>
            <li class="breadcrumb-item" aria-current="page"><a href="{{ route('business.detail',['id'=>$c_w_user->id])}}">Business Detail</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">Chat With {{$c_w_user->first_name?$c_w_user->first_name:""}}</a></li>
        </ol>
    </div>

</div>
<div class="row row-sm mb-4">
    <div class="col-xl-12">
        <div class="row ">
            @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-lg-12 col-xl-12">
                    <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 main-chat-list-{{Auth::user()->id}}">
                                <div class="main-chat-header">
                                    @if($online_status == "offline" && !empty($c_w_user->last_seen))    
                                    <div class="main-img-user {{$c_w_user->id}}-is-online offline">
                                            <img alt="img" src="{{$c_w_user->profile_img_url}}" id="chat-with-img">
                                        </div>
                                        <div class="main-chat-msg-name">
                                            <h6 data-id="{{$c_w_user->id}}">{{$c_w_user->first_name}}</h6><small id="online-status-text-{{$c_w_user->id}}">Last seen: {{$c_w_user->last_seen}}</small>
                                        </div>
                                    @elseif($online_status == "online")
                                    <div class="main-img-user online {{$c_w_user->id}}-is-online">
                                            <img alt="img" src="{{$c_w_user->profile_img_url}}" id="chat-with-img">
                                        </div>
                                        <div class="main-chat-msg-name">
                                            <h6 data-id="{{$c_w_user->id}}">{{$c_w_user->first_name}}</h6><small id="online-status-text-{{$c_w_user->id}}" >Online</small>
                                        </div>
                                    @else
                                    <div class="main-img-user offline {{$c_w_user->id}}-is-online">
                                        <img alt="img" src="{{$c_w_user->profile_img_url}}" id="chat-with-img"></div>
                                        <div class="main-chat-msg-name">
                                            <h6 data-id="{{$c_w_user->id}}">{{$c_w_user->first_name}}</h6><small id="online-status-text-{{$c_w_user->id}}" ></small>
                                        </div>
                                    @endif
                                        
                                    <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" id="messages-{{$c_user.'-'.$c_w_user->id}}">
                                        {!! $messages !!}
                                    </div>
                                    <div class=" content-inner is-typing" id="is-typing-{{$c_user.'-'.$c_w_user->id}}">

                                    </div>
                                    <div class="content-inner d-flex  justify-content-center  w-75 h-75 preview-upload-img-body preview-hide mt-5">
                                        <img src="" id="preview-upload-img" class="w-75 mt-5">
                                        <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 mt-5">
                                        </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"  value="{{$c_w_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"> </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="imgPreviewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">Upload Media</h5>
                <button type="button" id="img-with-message-close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row d-flex justify-content-center  form-group">
                        <img src="" id="preview-upload-img" style="width: 50%;">
                        <video id="preview-upload-video" width="320" height="240" controls style="display: none;">
                            <source src="">
                        </video>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-with-img" maxlength="9500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="img-with-message-close"
                    data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="img-with-message-submit">Send message</button>
            </div>
        </div>
    </div>
</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>
    var chat_order = @json($messages);
    var sendMsg = @json(route('business.send-message'));
    var isTyping = @json(route('business.is-typing'));
    var readCountUpdate = @json(route('business.msg-count-update'));
    const video = "video";

</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 () {



        $(".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: "{{route('business.get-chat-msg-onscroll')}}",
                    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);
                            $(".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];
        console.log(imgVid);

        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();
    });
</script>
    @vite(['resources/js/chat-with-me.js'])
@endpush