@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection

@section('breadcrumb-title')
<h3>Chat</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Chat</li>
@endsection
<style>
    @media only screen and (max-width: 1660px) {
        .chat-box .chat-right-aside .chat .chat-msg-box {
            height: 350px !important;
        }

        .call-chat-body .chat-box {
            overflow: hidden;
            height: 520px !important;
        }
    }

    @media only screen and (max-width: 600px) {
        .status_icon_1 {
            top: 8% !important;
            left: 16% !important
        }

        .status_icon_2 {
            top: 2% !important;
            left: 18% !important
        }
    }

    /* .fancybox-content body{
        text-align: center !important;
    } */
</style>
@if (strtolower(Request::segment(1)) === 'client')
<style>
    @media only screen and (max-width: 600px) {
        .chat-box .chat-right-aside .chat .chat-msg-box {
            height: 131vw !important;
        }

        .call-chat-body .chat-box {
            overflow: hidden;
            height: 175vw !important;
        }
    }

    .chat-box .chat-right-aside .chat .chat-msg-box .other-message {
        border: 1px solid #dbdbdb;
    }
</style>
@else
<style>
    @media only screen and (max-width: 1660px) {
        .chat-box .people-list ul {
            max-height: 345px !important;
            overflow: auto;
        }

        .chat-left-aside .people-list {
            height: 424px !important;
        }

    }

    @media only screen and (max-width: 600px) {
        .chat-box .people-list ul {
            max-height: 100px !important;
        }

        .chat-left-aside .people-list {
            height: auto !important;
        }

    }
</style>
@endif
@section('content')
<div class="container-fluid">
    <div class="row">
        @if (strtolower(Request::segment(1)) !== 'client')
        <div class="col call-chat-sidebar col-sm-12">
            <div class="card">
                <div class="card-body chat-body">
                    <div class="chat-box">
                        <!-- Chat left side Start-->
                        <div class="chat-left-aside">
                            <div class="media">
                                <img class="rounded-circle user-image admin_section_img"
                                    @if (!empty($admin_active_status->image))
                                src="{{ asset('public/storage/uploads/'.$admin_active_status->image) }}"
                                @else
                                src="{{ asset('assets/dummy_person.jpg') }}"
                                @endif

                                alt="">
                                <div class="status-circle 
                                @if (Auth::guard('admin')->user()->active == 1)
                                online
                                @else
                                offline
                                @endif
                                
                                status_icon_1" id="admin_status" style="top:3%;left:20%"></div>
                                <div class="about">
                                    <div class="name f-w-600">Admin</div>
                                </div>
                                <div style="width: 100%;">
                                    <span class="fa 
                                    @if (Auth::guard('admin')->user()->active == 1)
                                    fa-toggle-on font-success
                                    @else
                                    fa-toggle-off font-danger
                                    @endif
                                    f-right" onclick="change_icon(this)" style="font-size: xx-large;"></span>
                                </div>
                            </div>
                            <div class="people-list" id="people-list">
                                <div class="search">
                                    <form class="theme-form">
                                        <div class="mb-3">
                                            <input class="form-control" type="text" placeholder="Search"><i class="fa fa-search"></i>
                                        </div>
                                    </form>
                                </div>
                                <ul class="list">
                                    @if (!empty($users))
                                    @php
                                    // Sort the chats by created_at or updated_at timestamp in descending order
                                    $latestChat = $chats->sortByDesc('created_at')->first();
                                    $latestUser = null;
                                    $displayedUsers = [];

                                    // Find the user related to the latest chat
                                    if ($latestChat) {
                                    $latestUser = $users->firstWhere('id', $latestChat->sender_id) ?: $users->firstWhere('id', $latestChat->receiver_id);
                                    }
                                    @endphp

                                    @if ($latestUser)
                                    @php
                                    // Add the latest user to the displayedUsers array to avoid duplication later
                                    $displayedUsers[] = $latestUser->id;
                                    @endphp
                                    <li class="clearfix" onclick="fetch_chats('{{ $latestUser->id }}','{{ $latestUser->fname }} {{$latestUser->lname }}','{{ $latestUser->image }}')">
                                        <img class="rounded-circle user-image"
                                            @if (!empty($latestUser->image))
                                        src="{{ asset('public/storage/uploads/'.$latestUser->image) }}"
                                        @else
                                        src="{{ asset('assets/dummy_person.jpg') }}"
                                        @endif
                                        alt="">
                                        <div class="about">
                                            <div class="name">{{ $latestUser->fname ." ". $latestUser->lname }}</div>
                                            <div class="status" id="message_{{$latestUser->id}}">
                                                @php
                                                $words = explode(' ', $latestChat->message);
                                                $shortMessage = count($words) > 3 ? implode(' ', array_slice($words, 0, 3)) . '...' : $latestChat->message;
                                                @endphp
                                                @if (empty($shortMessage) && !empty($latestChat->attachment))
                                                Sent an attachment...!
                                                @else
                                                {{$shortMessage}}
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                    @endif

                                    <!-- Display the rest of the users -->
                                    @foreach ($users as $user)
                                    @if (!in_array($user->id, $displayedUsers))
                                    <li class="clearfix" onclick="fetch_chats('{{ $user->id }}','{{ $user->fname }} {{$user->lname }}','{{ $user->image }}')">
                                        <img class="rounded-circle user-image"
                                            @if (!empty($user->image))
                                        src="{{ asset('public/storage/uploads/'.$user->image) }}"
                                        @else
                                        src="{{ asset('assets/dummy_person.jpg') }}"
                                        @endif
                                        alt="">
                                        <div class="about">
                                            <div class="name">{{ $user->fname ." ". $user->lname }}</div>
                                            <div class="status" id="message_{{$user->id}}">
                                                @php
                                                $userChat = $chats->first(function($chat) use ($user) {
                                                return $chat->sender_id == $user->id || $chat->receiver_id == $user->id;
                                                });
                                                $words = $userChat ? explode(' ', $userChat->message) : [];
                                                $shortMessage = count($words) > 3 ? implode(' ', array_slice($words, 0, 3)) . '...' : ($userChat ? $userChat->message : '');
                                                @endphp
                                                @if (empty($shortMessage) && !empty($userChat->attachment))
                                                Sent an attachment...!
                                                @else
                                                {{$shortMessage}}
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                    @endif
                                    @endforeach
                                    @endif
                                </ul>

                            </div>
                        </div>
                        <!-- Chat left side Ends-->
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="col call-chat-body">
            <div class="card">
                <div class="card-body p-0">
                    <div class="row chat-box" id="chat_box" @if (strtolower(Request::segment(1)) !=='client' ) style="display:none" @endif>
                        <!-- Chat right side start-->
                        <div class="col pe-0 chat-right-aside">
                            <!-- chat start-->
                            <div class="chat">
                                <!-- chat-header start-->
                                <div class="chat-header clearfix" style="justify-content: flex-start;">
                                    <img class="rounded-circle" id="chatter_img"
                                        @if (!empty($admin_active_status->image))
                                    src="{{ asset('public/storage/uploads/'.$admin_active_status->image) }}"
                                    @else
                                    src="{{ asset('assets/dummy_person.jpg') }}"
                                    @endif
                                    alt="">
                                    @if (strtolower(Request::segment(1)) === 'client')
                                    <div class="status-circle 
                                    @if ($admin_active_status->active == 1)
                                    online
                                    @else
                                    offline
                                    @endif
                                    status_icon_2" id="c_admin_status" style="top:3%;left:5.5%"></div>
                                    @endif
                                    <div class="about" style="width: 50%;">
                                        <div class="name" id="chatter_name">{{ $admin_active_status->fname ." ". $admin_active_status->lname }}<span class="font-primary f-12"></span></div>
                                        @if (strtolower(Request::segment(1)) === 'client')
                                        @if ($admin_active_status->active == 1)
                                        <div class="status" id="active_status">Active<span class="font-primary f-12"></span></div>
                                        @else
                                        <div class="status" id="active_status"><b>Offline</b> (Please comeback later or leave a message)<span class="font-primary f-12"></span></div>
                                        @endif
                                        @endif
                                        <input type="hidden" id="receiver_id" @if (strtolower(Request::segment(1))==='client' ) value="{{ Auth::guard('client')->user()->id }}" @endif>
                                    </div>
                                    @if (strtolower(Request::segment(1)) !== 'client')
                                    <div class="w-100 p-r-20" id="verified_stamp">

                                    </div>
                                    @endif
                                </div>
                                <!-- chat-header end-->
                                <div class="chat-history chat-msg-box custom-scrollbar">
                                    <ul @if (strtolower(Request::segment(1))==='client' ) data-id="client_side_{{ Auth::guard('client')->user()->id }}" @endif>
                                    </ul>
                                </div>
                                <!-- end chat-history-->
                                <div class="chat-message clearfix">
                                    <div class="row">
                                        <div class="col-xl-12 d-flex">
                                            <div class="input-group text-box">
                                                <button id="emoji-button" type="button" class="emoji-btn">😀</button>
                                                <input class="form-control input-txt-bx" id="message-to-send" type="text" name="message-to-send" placeholder="Type a message......">
                                                <input type="file" id="attachment" style="display:none;" name="attachment" accept=".png, .jpg, .jpeg, .pdf">
                                                <label for="attachment" type="button"><i class="fa fa-paperclip"
                                                        @if (strtolower(Request::segment(1))==='client' )
                                                        style="right: 10%;top: 23%;font-size: x-large;color: grey;z-index:999"
                                                        @else
                                                        style="right: 14%;top: 23%;font-size: x-large;color: grey;z-index:999"
                                                        @endif></i></label>
                                                <div id="file-info" style="display: none; position: absolute;width: 210px;height: 172px;bottom: 100%;right: 0%;">
                                                    <div id="file-preview" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border: 1px solid #ccc; box-sizing: border-box;">
                                                    </div>
                                                    <button type="button" id="remove-file" style="position: absolute;top: 0;right: 0;background: #c9c6c6;border: none;color: black;font-size: 20px;cursor: pointer;">&times;</button>
                                                </div>
                                                <button class="input-group-text btn btn-primary" type="button" onclick="send_msg()">SEND</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end chat-message-->
                                <!-- chat end-->
                                <!-- Chat right side ends-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var session_layout = '{{ session()->get('
    layout ') }}';
</script>
@endsection

@section('script')
<script>
    @if(strtolower(Request::segment(1)) === 'client')
    var user_id = "{{ Auth::guard('client')->user()->id }}";
    var person_name = "{{ Auth::guard('client')->user()->fname }}";
    var person_img = "{{ Auth::guard('client')->user()->image }}";
    var type = "{{ Auth::guard('client')->user()->type }}";
    @else
    var user_id = "{{ Auth::guard('admin')->user()->id }}";
    var get_id = "{{ request()->query('id') }}";
    var person_name = "{{ Auth::guard('admin')->user()->fname }}";
    var person_img = "{{ Auth::guard('admin')->user()->image }}";
    var type = "{{ Auth::guard('admin')->user()->type }}";
    if (type == 3) {
        user_id = 1
    }
    @endif

    function change_icon(obj) {
        var active = 0;
        if ($(obj).hasClass('fa-toggle-on')) {
            $(obj).removeClass('fa-toggle-on')
            $(obj).addClass('fa-toggle-off')
            $(obj).removeClass('font-success')
            $(obj).addClass('font-danger');
            $('#admin_status').removeClass('online')
            $('#admin_status').addClass('offline')
            active = 2;

        } else {
            $(obj).removeClass('fa-toggle-off')
            $(obj).addClass('fa-toggle-on')
            $(obj).removeClass('font-danger')
            $(obj).addClass('font-success');
            $('#admin_status').removeClass('offline')
            $('#admin_status').addClass('online')
            active = 1;
        }
        $.ajax({
            url: "{{ route('update.clients') }}",
            type: 'POST',
            data: {
                'id': user_id,
                'active': active
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {},
            error: function(xhr, status, error) {}
        });

    }

    function scrollToBottom() {
        var messageContainer = document.querySelector('.chat-history');
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }
    $(document).ready(function() {
        scrollToBottom()
        if (person_img != '') {
            var img = "{{ asset('public/storage/uploads/')}}/" + person_img;
        } else {
            var img = "{{ asset('assets/dummy_person.jpg')}}";
        }
        $('.admin_section_img').attr('src', img)
    });

    function send_msg() {
        var img = '';
        var receiver_id = $('#receiver_id').val();
        if (person_img != '') {
            var img = "{{ asset('public/storage/uploads/')}}/" + person_img;
        } else {
            var img = "{{ asset('assets/dummy_person.jpg')}}";
        }
        var msg = $('input[name="message-to-send"]').val().trim();
        var attachment = $('#attachment')[0].files[0];
        var formData = new FormData();
        if (attachment) {
            formData.append('attachment', attachment);
        }
        if (msg != '' || attachment) {
            var html = `<li class="clearfix">
                            <div class="message other-message pull-right">
                                <img class="rounded-circle float-end chat-user-img img-30" src="` + img + `" alt="">
                                    <div class="message-data">
                                            <span class="message-data-time">now</span>
                                    </div> ` + msg;
            if (attachment) {
                html += `<br><a href="#" class="attachment-link view-doc" onclick="preview_file(this)">${attachment.name}</a>`;
            }
            html += `
                        </div>
                    </li>`;
            formData.append('sender_id', user_id);
            formData.append('receiver_id', receiver_id);
            formData.append('message', msg);
            formData.append('sender_type', type);
            $.ajax({
                url: "{{ route('insert.chats') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('.chat-history ul').append(html);
                    var msg = $('input[name="message-to-send"]').val('');
                    $('#attachment').val('');
                    if (response) {
                        response = JSON.parse(response);
                        var lastLi = $('.chat-history ul li').last();
                        // lastLi.find('a').attr('href', '{{url("/storage/uploads/")}}' + response)
                        lastLi.find('a').attr('data-src', '{{url("/storage/uploads")}}/' + response)
                    }
                    scrollToBottom()
                }
            });
        }
    }

    function fetch_chats(id, name = null, image = null) {
        if (image == null || image == '') {
            image = "{{ asset('assets/dummy_person.jpg')}}";
        } else {
            image = "{{ asset('public/storage/uploads')}}/" + image;
        }
        var old_text = $('#message_' + id + ' b').text();
        if (old_text.length > 0) {
            $('#message_' + id).html(old_text)
        }
        $('#receiver_id').val(id);
        $('.chat-history ul').attr('id', "receiver_id_" + id)
        if (id != 1) {
            $('#chatter_img').attr('src', image);
        }
        if (name) {
            $('#chatter_name').html(name);
        }
        if (id == 1) {
            id = user_id
        }
        $.ajax({
            url: "{{ route('notifications.read') }}",
            type: 'GET',
            data: {
                notifiable_id: user_id,
                chat_user_id: id,
                chat_type: "App\\Notifications\\ChatNotifi",
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {}
        });
        $.ajax({
            url: "{{ route('fetch.chats') }}",
            type: 'POST',
            data: {
                id: id,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (image == null || image == '') {
                    image = "{{ asset('assets/dummy_person.jpg')}}";
                } else {
                    image = "{{ asset('public/storage/uploads')}}/" + image;
                }
                $('#chat_box').show();
                if (response && response != '') {
                    response = JSON.parse(response)
                    var html = '';
                    var verified = 0;
                    verified = response.verified['verified'];
                    $.each(response, function(i, v) {
                        if (v.sender_id) {
                            html += `<li class="clearfix"><div class="message other-message`
                            if (v.sender_id == user_id) {
                                html += ` pull-right `
                            }
                            html += ` "><img class="rounded-circle `
                            if (v.sender_id == user_id) {
                                html += ` float-end `
                            } else {
                                html += ` float-start `
                            }
                            html += ` chat-user-img img-30" src="{{ asset('assets/dummy_person.jpg') }}" alt="">
                        <div class="message-data"><span class="message-data-time`
                            if (v.sender_id == user_id) {} else {
                                html += ` text-end `
                            }
                            html += `">${new Date(v.created_at).toLocaleDateString() + " " + new Date(v.created_at).toLocaleTimeString()}</span></div>
                        ${v.message}`;
                            if (attachment) {
                                html += `<br><a href="#" class="attachment-link view-doc" data-src="{{url('/storage/uploads')}}/` + v.attachment + `" onclick="preview_file(this)">${v.attachment}</a><br>`;
                            }
                            html += `</div>
                        </li>`
                        }
                    })
                };
                var verified_html = '';
                if (verified == 2) {
                    verified_html = `<span class="badge badge-success f-right">Verified</span>`;
                } else {
                    verified_html = `<span class="badge badge-danger f-right">Unverified</span>`;
                }
                $('#verified_stamp').html(verified_html);
                $('.chat-history ul').html(html);
                scrollToBottom()
            }
        });
    }
    @if(strtolower(Request::segment(1)) === 'client')
    $(document).ready(function() {
        fetch_chats(1, "", "")

        $(document).ready(function() {
            $.ajax({
                url: "{{ route('notifications.read') }}",
                type: 'GET',
                data: {
                    user_id: user_id,
                    type: "App\\Notifications\\ChatNotifi",
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {}
            });
        });
    })
    @endif

    var pusher = new Pusher("596577f090b4e27e3d38", {
        cluster: "mt1",
        forceTLS: true
    });

    var channel = pusher.subscribe('public');

    channel.bind('chat', function(data) {
        if (data && data != '') {
            if (data.active_status == 1) {
                $('#c_admin_status').removeClass('offline').addClass('online');
                $('#active_status').html('Active');
            }
            if (data.active_status == 2) {
                $('#c_admin_status').removeClass('online').addClass('offline');
                $('#active_status').html(`<b>Offline</b> (Please comeback later or leave a message)`);
            }
            var html = `<li class="clearfix"><div class="message other-message`
            // if (data.sender_id == user_id) {
            //     html += ` pull-right `
            // }
            html += ` "><img class="rounded-circle `
            // if (data.sender_id == user_id) {
            //     html += ` float-end `
            // } else {
            html += ` float-start `
            // }
            html += ` chat-user-img img-30" src="{{ asset('assets/dummy_person.jpg') }}" alt="">
                        <div class="message-data"><span class="message-data-time`
            // if (data.sender_id == user_id) {} else {
            html += ` text-end `
            // }
            html += `">${new Date(data.created_at).toLocaleDateString() + " " + new Date(data.created_at).toLocaleTimeString()}</span></div> 
            ${data.message}`;
            if (data.attachment) {
                html += `<a href="#" class="attachment-link view-doc" data-src="{{url('/storage/uploads')}}/` + data.attachment + `" onclick="preview_file(this)">${data.attachment}</a><br>`;
            }
            html += `</div>
                        </li>`

            if (data.sender_type == 1 || data.sender_type == 3) {
                var chatHistoryUl = $('.chat-history').find('ul')
                if (chatHistoryUl.data('id') == 'client_side_' + data.receiver_id) {
                    chatHistoryUl.append(html);
                }
            } else {
                $('#receiver_id_' + data.user_id).append(html);
            }
            var fullMessage = `<b>${data.message} </b>`;
            var words = fullMessage.trim().split(' ');

            if (words.length > 3) {
                var shortMessage = words.slice(0, 3).join(' ') + '...';
                $('#message_' + data.user_id).html(shortMessage);
            } else {
                console.log(data.message.trim());
                if (data.message.trim() == '' && data.attachment) {
                    fullMessage = `<b>Sent an attachment...!</b>`;
                }
                $('#message_' + data.user_id).html(fullMessage);
            }
            moveUserToTop($('#message_' + data.user_id).closest('li'))
            scrollToBottom()
        }
    });
    $(document).ready(function() {
        $('#chat_notification').removeAttr('id')
        $('.onhover-dropdown .chat').removeClass('chat')
        $('#message-to-send').on('keydown', function(event) {
            if (event.key === 'Enter' || event.keyCode === 13) {
                event.preventDefault();
                send_msg();
            }
        });
        $('#attachment').on('change', function() {
            var file = this.files[0]; // Get the selected file
            if (file) {
                var fileType = file.type;

                // Display the file info div
                $('#file-info').show();

                // Handle image file types
                if (fileType.startsWith('image/')) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#file-preview').html('<img src="' + e.target.result + '" alt="Selected File" style="width: 100%; height: 100%; object-fit: cover;">');
                    }
                    reader.readAsDataURL(file);
                }
                // Handle PDF file type
                else if (fileType === 'application/pdf') {
                    $('#file-preview').html('<i class="fa fa-file-pdf-o" style="font-size: 60px; color: grey; display: block; margin: 20px auto;"></i>');
                } else {
                    $('#file-preview').html('<span>' + file.name + '</span>');
                }
            } else {
                $('#file-info').hide(); // Hide if no file is selected
            }
        });

        $('#remove-file').on('click', function() {
            $('#attachment').val(''); // Clear the input:file
            $('#file-info').hide(); // Hide the file info div
            $('#file-preview').html(''); // Clear the file preview
        });
    });

    function moveUserToTop(li) {
        li.prependTo('.list');
    }
    $(document).ready(function() {
        if (get_id) {
            $('#message_' + get_id).click()
        }
    })
</script>
<script>
    function preview_file(obj) {
        var fileUrl = $(obj).data('src');
        var fileExtension = fileUrl.split('.').pop().toLowerCase(); // Get the file extension

        var fancyboxType = 'image';

        if (fileExtension === 'pdf') {
            fancyboxType = 'iframe';
        } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(fileExtension) >= 0) {
            fancyboxType = 'image';
        } else {
            fancyboxType = 'html';
        }

        $.fancybox.open({
            src: fileUrl,
            type: fancyboxType,
            opts: {
                loop: true,
                buttons: [
                    'close'
                ],
                iframe: {
                    css: {
                        textAlign: 'center',
                        width: '90%',
                        height: '90%'
                    }
                }
            }
        });
    }
</script>
@endsection