@extends('layouts.master')

@section('title')
    @lang('translation.Chat')
@endsection

@section('css')
    <style>
        /* Custom Scrollbar Styles */
        .chat-list.scroll {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 410px;
            scroll-behavior: smooth;
        }

        /* Webkit browsers (Chrome, Safari, Edge) */
        .chat-list.scroll::-webkit-scrollbar {
            width: 6px;
        }

        .chat-list.scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .chat-list.scroll::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
            transition: background 0.3s ease;
        }

        .chat-list.scroll::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        /* Firefox */
        .chat-list.scroll {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e0 #f1f1f1;
        }

        /* Conversation Item Styling */
        .conversation-item {
            padding: 0.5rem;
            border-bottom: 1px solid #f1f3f4;
            transition: background-color 0.2s ease;
        }

        .conversation-item:hover {
            background-color: #f8f9fa;
        }

        .conversation-item.active {
            background-color: #e3f2fd;
        }

        /* Message List Scroll */
        #messagesList {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 486px;
            scroll-behavior: smooth;
        }

        #messagesList::-webkit-scrollbar {
            width: 6px;
        }

        #messagesList::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        #messagesList::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
        }

        #messagesList::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        /* All Users List Scroll */
        .users-scroll {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 410px;
            scroll-behavior: smooth;
        }

        .users-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .users-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .users-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 10px;
        }

        .users-scroll::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        /* Chat Type Navigation */
        .chat-type-nav {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .chat-type-nav .btn {
            margin-right: 10px;
        }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Dashboard
        @endslot
        @slot('title')
            Support Chat
        @endslot
    @endcomponent

    <!-- Chat Type Navigation -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="chat-type-nav">
                <a href="{{ route('chat.live') }}" class="btn btn-primary">
                    <i class="bx bx-chat"></i> Live Chat
                </a>
                <a href="{{ route('chat.grievance') }}" class="btn btn-outline-danger">
                    <i class="bx bx-error"></i> Grievance Management
                </a>
            </div>
        </div>
    </div>

    <div class="d-lg-flex">
        <div class="chat-leftsidebar me-lg-4">
            <div class="">
                <div class="py-4 border-bottom">
                    <div class="d-flex">
                        <div class="flex-shrink-0 align-self-center me-3">
                            {{-- @if (Auth::user()->avatar)
                                <img src="{{ Auth::user()->avatar }}" class="avatar-xs rounded-circle" alt="">
                            @else --}}
                                <div class="avatar-xs">
                                    <span class="avatar-title rounded-circle bg-primary text-white">
                                        {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                                    </span>
                                </div>
                            {{-- @endif --}}
                        </div>

                        <div class="flex-grow-1">
                            <h5 class="font-size-15 mb-1">{{ Auth::user()->name }}</h5>
                            <p class="text-muted mb-0">
                                <i class="mdi mdi-circle text-success align-middle me-1"></i> Super Admin
                            </p>
                        </div>

                        <div>
                            <div class="dropdown chat-noti-dropdown active">
                                <button class="btn" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                    <i class="bx bx-bell bx-tada"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">View All Notifications</a>
                                    <a class="dropdown-item" href="#">Mark All as Read</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="search-box chat-search-box py-4">
                    <div class="position-relative">
                        <input type="text" id="searchConversations" class="form-control"
                            placeholder="Search conversations...">
                        <i class="bx bx-search-alt search-icon"></i>
                    </div>
                </div>

                <div class="chat-leftsidebar-nav">
                    <ul class="nav nav-pills nav-justified">
                        <li class="nav-item">
                            <a href="#chat" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                                <i class="bx bx-chat font-size-20 d-sm-none"></i>
                                <span class="d-none d-sm-block">Conversations</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#contacts" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                <i class="bx bx-book-content font-size-20 d-sm-none"></i>
                                <span class="d-none d-sm-block">All Users</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content py-4">
                        <div class="tab-pane show active" id="chat">
                            <div>
                                <h5 class="font-size-14 mb-3">Recent Conversations</h5>
                                <ul class="list-unstyled chat-list scroll" id="conversationsList">
                                    @forelse($conversations as $conversation)
                                        <li class="conversation-item" data-user-id="{{ $conversation->user_id }}">
                                            <a href="javascript:void(0);"
                                                onclick="loadConversation({{ $conversation->user_id }})">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 align-self-center me-3">
                                                        <i
                                                            class="mdi mdi-circle {{ $conversation->unread_count > 0 ? 'text-success' : '' }} font-size-10"></i>
                                                    </div>
                                                    <div class="flex-shrink-0 align-self-center me-3">
                                                        @if ($conversation->user->avatar)
                                                            <img src="{{ $conversation->user->avatar }}"
                                                                class="rounded-circle avatar-xs" alt="">
                                                        @else
                                                            <div class="avatar-xs">
                                                                <span
                                                                    class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                                                    {{ strtoupper(substr($conversation->user->name, 0, 1)) }}
                                                                </span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="text-truncate font-size-14 mb-1">
                                                            {{ $conversation->user->name }}</h5>
                                                        <p class="text-truncate mb-0">
                                                            {{ $conversation->latestMessage->message ?? 'No messages yet' }}
                                                        </p>
                                                    </div>
                                                    <div class="font-size-11">
                                                        {{ $conversation->last_message_at ? $conversation->last_message_at->diffForHumans() : '' }}
                                                        @if ($conversation->unread_count > 0)
                                                            <span
                                                                class="badge bg-danger rounded-pill ms-2">{{ $conversation->unread_count }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @empty
                                        <li class="text-center text-muted py-3">No conversations yet</li>
                                    @endforelse
                                </ul>
                            </div>
                        </div>

                        <div class="tab-pane" id="contacts">
                            <h5 class="font-size-14 mb-3">All Users</h5>
                            <div class="users-scroll">
                                <ul class="list-unstyled chat-list">
                                    @foreach ($users as $user)
                                        <li class="conversation-item">
                                            <a href="javascript:void(0);" onclick="loadConversation({{ $user->id }})">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0 me-3">
                                                        @if ($user->avatar)
                                                            <img src="{{ $user->avatar }}" class="rounded-circle avatar-xs"
                                                                alt="">
                                                        @else
                                                            <div class="avatar-xs">
                                                                <span
                                                                    class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                                                </span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h5 class="font-size-14 mb-0">{{ $user->name }}</h5>
                                                        <p class="text-muted mb-0 font-size-12">{{ $user->email }}</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-100 user-chat">
            <div class="card">
                <div class="p-4 border-bottom" id="chatHeader" style="display: none;">
                    <div class="row">
                        <div class="col-md-4 col-9">
                            <h5 class="font-size-15 mb-1" id="chatUserName">Select a conversation</h5>
                            <p class="text-muted mb-0" id="chatUserStatus"></p>
                        </div>
                        <div class="col-md-8 col-3">
                            <ul class="list-inline user-chat-nav text-end mb-0">
                                <li class="list-inline-item d-none d-sm-inline-block">
                                    <div class="dropdown">
                                        <button class="btn nav-btn dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-search-alt-2"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-md">
                                            <form class="p-3">
                                                <div class="form-group m-0">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control"
                                                            placeholder="Search messages...">
                                                        <button class="btn btn-primary" type="submit"><i
                                                                class="mdi mdi-magnify"></i></button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item d-none d-sm-inline-block">
                                    <div class="dropdown">
                                        <button class="btn nav-btn dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-cog"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="javascript:void(0);">View Profile</a>
                                            <a class="dropdown-item" href="javascript:void(0);"
                                                onclick="clearChat()">Clear Chat</a>
                                            <a class="dropdown-item" href="javascript:void(0);"
                                                onclick="deleteConversation()">Delete Conversation</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item">
                                    <div class="dropdown">
                                        <button class="btn nav-btn dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-dots-horizontal-rounded"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="javascript:void(0);">Export Chat</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Archive</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Block User</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="chat-conversation p-3">
                        <ul class="list-unstyled mb-0" id="messagesList">
                            <li class="text-center text-muted py-5">
                                <i class="bx bx-message-rounded-dots font-size-24 d-block mb-2"></i>
                                Select a conversation to start chatting
                            </li>
                        </ul>
                    </div>
                    <div class="p-3 chat-input-section border-top">
                        <form id="messageForm" style="display: none;">
                            @csrf
                            <input type="hidden" id="currentUserId" name="user_id">
                            <input type="hidden" name="type" value="chat">
                            <div class="row">
                                <div class="col">
                                    <div class="position-relative">
                                        <input type="text" id="messageInput" name="message"
                                            class="form-control chat-input" placeholder="Enter Message..." required
                                            autocomplete="off">
                                        <div class="chat-input-links" id="tooltip-container">
                                            <ul class="list-inline mb-0">
                                                <li class="list-inline-item">
                                                    <a href="javascript:void(0);" title="Emoji">
                                                        <i class="mdi mdi-emoticon-happy-outline"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item">
                                                    <a href="javascript:void(0);" title="Images">
                                                        <i class="mdi mdi-file-image-outline"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item">
                                                    <a href="javascript:void(0);" title="Add Files">
                                                        <i class="mdi mdi-file-document-outline"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <button type="submit"
                                        class="btn btn-primary btn-rounded chat-send w-md waves-effect waves-light">
                                        <span class="d-none d-sm-inline-block me-2">Send</span>
                                        <i class="mdi mdi-send"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <div id="emptyStateMessage" class="text-center text-muted py-3">
                            Select a conversation to send messages
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let currentUserId = null;
        let currentConversationId = null;
        let messageRefreshInterval = null;


        $(document).ready(function() {
            // Initialize
            console.log('Chat initialized');
        });


        function loadConversation(userId) {
            currentUserId = userId;
            $('#currentUserId').val(userId);


            // Clear any existing intervals
            if (messageRefreshInterval) {
                clearInterval(messageRefreshInterval);
            }


            // Mark as active
            $('.conversation-item').removeClass('active');
            $(`.conversation-item[data-user-id="${userId}"]`).addClass('active');


            $.ajax({
                url: `{{ url('/') }}/chat/conversation/${userId}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    currentConversationId = response.conversation ? response.conversation.id : null;


                    // Update header
                    $('#chatUserName').text(response.user.name);
                    $('#chatUserStatus').html(
                        '<i class="mdi mdi-circle text-success align-middle me-1"></i> Active now');
                    $('#chatHeader').show();
                    $('#messageForm').show();
                    $('#emptyStateMessage').hide();


                    // Display messages
                    displayMessages(response.messages);


                    // Scroll to bottom
                    scrollToBottom();


                    // Auto-refresh messages every 3 seconds
                    messageRefreshInterval = setInterval(function() {
                        refreshMessages(userId);
                    }, 3000);
                },
                error: function(xhr) {
                    console.error('Error loading conversation:', xhr);
                    alert('Error loading conversation. Please try again.');
                }
            });
        }


        function refreshMessages(userId) {
            if (!userId) return;


            $.ajax({
                url: `{{ url('/') }}/chat/conversation/${userId}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    displayMessages(response.messages);
                },
                error: function(xhr) {
                    console.error('Error refreshing messages:', xhr);
                }
            });
        }


        function displayMessages(messages) {
            let html = '';


            if (messages.length === 0) {
                html =
                    '<li class="text-center text-muted py-5"><i class="bx bx-message-rounded-dots font-size-24 d-block mb-2"></i>No messages yet. Start the conversation!</li>';
            } else {
                messages.forEach(function(message) {
                    const isCurrentUser = message.sender_id == {{ Auth::id() }};
                    const alignment = isCurrentUser ? 'right' : '';


                    html += `
                <li class="${alignment}">
                    <div class="conversation-list">


                        <div class="ctext-wrap">
                            <div class="conversation-name">${escapeHtml(message.sender.name)}</div>
                            <p>${escapeHtml(message.message)}</p>
                            <p class="chat-time mb-0">
                                <i class="bx bx-time-five align-middle me-1"></i>
                                ${formatTime(message.created_at)}
                            </p>
                        </div>
                    </div>
                </li>
            `;
                });
            }


            $('#messagesList').html(html);
        }


        $('#messageForm').on('submit', function(e) {
            e.preventDefault();


            const message = $('#messageInput').val().trim();
            if (!message || !currentUserId) return;


            $.ajax({
                url: '{{ route('chat.send') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    user_id: currentUserId,
                    message: message,
                    type: 'chat'
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#messageInput').val('');


                    // Add message to UI
                    const messageHtml = `
                <li class="right">
                    <div class="conversation-list">


                        <div class="ctext-wrap">
                            <div class="conversation-name">${escapeHtml(response.message.sender.name)}</div>
                            <p>${escapeHtml(response.message.message)}</p>
                            <p class="chat-time mb-0">
                                <i class="bx bx-time-five align-middle me-1"></i>
                                ${formatTime(response.message.created_at)}
                            </p>
                        </div>
                    </div>
                </li>
            `;


                    $('#messagesList').append(messageHtml);
                    scrollToBottom();


                    // Update conversation list
                    updateConversationList();
                },
                error: function(xhr) {
                    console.error('Error sending message:', xhr);
                    alert('Error sending message. Please try again.');
                }
            });
        });


        function scrollToBottom() {
            const messagesList = document.getElementById('messagesList');
            if (messagesList) {
                messagesList.scrollTop = messagesList.scrollHeight;
            }
        }


        function formatTime(datetime) {
            const date = new Date(datetime);
            return date.toLocaleTimeString('en-US', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });
        }


        function escapeHtml(text) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, m => map[m]);
        }


        function deleteConversation() {
            if (!currentConversationId || !confirm(
                    'Are you sure you want to delete this conversation? This action cannot be undone.')) {
                return;
            }


            $.ajax({
                url: `{{ url('/') }}/chat/${currentConversationId}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function() {
                    alert('Conversation deleted successfully');
                    location.reload();
                },
                error: function() {
                    alert('Error deleting conversation. Please try again.');
                }
            });
        }


        function clearChat() {
            if (!confirm('Are you sure you want to clear all messages in this conversation?')) {
                return;
            }


            $('#messagesList').html('<li class="text-center text-muted py-5">Chat cleared</li>');
        }


        function updateConversationList() {
            // Refresh the conversation list to show updated timestamps
            location.reload();
        }


        // Search functionality
        $('#searchConversations').on('keyup', function() {
            const value = $(this).val().toLowerCase();
            $('#conversationsList .conversation-item').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });


        // Allow Enter key to send messages
        $('#messageInput').on('keypress', function(e) {
            if (e.which === 13 && !e.shiftKey) {
                e.preventDefault();
                $('#messageForm').submit();
            }
        });


        // Clean up interval on page unload
        $(window).on('beforeunload', function() {
            if (messageRefreshInterval) {
                clearInterval(messageRefreshInterval);
            }
        });
    </script>
@endsection