@extends('layouts.client')
@section('title', 'Chat')

@push('styles')
<style>
    .chat-container {
        display: flex;
        flex-direction: column; /* Default to column (mobile) */
        height: calc(100vh - 150px);
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }

    @media (min-width: 768px) {
        .chat-container {
            flex-direction: row;
        }
    }

    .chat-list {
        width: 100%;
        border-right: 1px solid #e0e0e0;
        overflow-y: auto;
    }

    @media (min-width: 768px) {
        .chat-list {
            width: 30%;
        }
    }

    .chat-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    @media (min-width: 768px) {
        .chat-content {
            width: 70%;
        }
    }

    .chat-header {
        padding: 15px;
        border-bottom: 1px solid #e0e0e0;
        font-weight: bold;
        background: #f8f9fa;
    }

    .chat-item {
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        display: flex;
        column-gap: 10px;
    }

    .chat-item.active {
        background-color: #e3f2fd;
    }
    .chat-item img {
        min-width: 48px;
        width: 48px;
        height: 48px;
    }
    .chat-preview {
        font-size: 0.9em;
        color: #666;
        margin-top: 5px;
    }

    .chat-date {
        font-size: 0.8em;
        color: #999;
    }

    .message-area {
        flex-grow: 1;
        padding: 15px;
        overflow-y: auto;
        background-color: #f5f5f5;
    }

    .message-input {
        padding: 10px;
        border-top: 1px solid #e0e0e0;
        background-color: white;
        position: sticky;
        bottom: 0;
        width: 100%;
        z-index: 2;
    }

    .message {
        margin-bottom: 10px;
    }

    .message-content {
        background-color: #ffffff;
        padding: 10px 15px;
        border-radius: 10px;
        display: inline-block;
        max-width: 85%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .message-time {
        font-size: 0.75em;
        color: #999;
        margin-top: 3px;
    }

    .telegram-chat {
        margin-bottom: 20px;
    }

    .telegram-link {
        color: #0088cc;
        text-decoration: none;
        display: block;
    }
</style>
@endpush

@section('content')
<div class="container py-4">
    <h2 class="mb-4">Chats</h2>

    {{-- Telegram Chats --}}
    <div class="telegram-chat">
        <h4>Chats in Telegram</h4>
        <div class="card">
            <div class="card-body">
                <div class="chat-item">
                    <img src="{{ asset('front_assets/img/telegram.png') }}" alt="" width="32">
                    <a href="https://t.me/nutrition_chat" class="telegram-link" target="_blank">
                        <strong>Nutritional science</strong>
                        <div class="chat-preview">Nutrition, diet, recipes</div>
                    </a>
                </div>
                <div class="chat-item">
                    <img src="{{ asset('front_assets/img/telegram.png') }}" alt="" width="32">
                    <a href="https://t.me/training_chat" class="telegram-link" target="_blank">
                        <strong>Training</strong>
                        <div class="chat-preview">Training, technique, exercises</div>
                    </a>
                </div>
                <div class="chat-item">
                    <img src="{{ asset('front_assets/img/telegram.png') }}" alt="" width="32">
                    <a href="https://t.me/psychology_chat" class="telegram-link" target="_blank">
                        <strong>Chat for the soul. Psychologist</strong>
                        <div class="chat-preview">Tips, Stories, Exercises</div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Chat Container --}}
    <div class="chat-container">
        {{-- Chat List --}}
        <div class="chat-list">
            <div class="chat-header">My messages</div>
            <div class="chat-item active" onclick="openChat('trainer', event)">
                <strong>Trainer</strong>
                <div class="chat-date">{{ $latestMessages['trainer']?->created_at?->format('d.m.Y') ?? '-' }}</div>
        <div class="chat-preview">{{ $latestMessages['trainer']?->message ? Str::limit($latestMessages['trainer']->message, 40) : 'No messages yet' }}</div>
    </div>
            
        </div>

        {{-- Chat Content --}}
        <div class="chat-content">
            <div class="chat-header" id="current-chat-title">Trainer</div>
            <div class="message-area" id="message-area">
                <div class="message incoming">
                    <div class="message-content">Good day! Half of the course has already passed, how are you?</div>
                    <div class="message-time">21.11.2022 14:30</div>
                </div>
            </div>

            <div class="message-input">
                <div class="input-group">
                    <input type="text" class="form-control" id="message-input-field" placeholder="Type your message...">
                    <button class="btn btn-primary" id="send-btn">Send</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Footer Help Message --}}
    <div class="mt-4 text-muted text-center small">
        <p>If you have any questions about nutrition, write to us and we will be happy to help you!</p>
    </div>
</div>
@endsection
@push('scripts')
<script>
    let currentChat = 'trainer';
    let pollingInterval = null;

    function loadMessages(chatType, scroll = true) {
        currentChat = chatType;

        fetch(`/chat/messages/${chatType}`)
            .then(res => res.json())
            .then(data => {
                const messageArea = document.getElementById('message-area');
                messageArea.innerHTML = '';

                data.forEach(msg => {
                    const isTrainer = msg.sender_type === 'admin'; // or 'trainer'
                    const senderName = isTrainer ? 'Trainer' : 'You';
                    const bgColor = isTrainer ? '#000' : '#e4e2e2';
                    const textColor = isTrainer ? '#fff' : '#333';

                    const tickColor = msg.is_read ? 'green' : 'gray';
                    const tickSymbol = msg.is_read
                        ? '<i class="fa fa-check" aria-hidden="true"></i><i class="fa fa-check" aria-hidden="true"></i>'
                        : '<i class="fa fa-check" aria-hidden="true"></i>';

                        messageArea.innerHTML += `
                    <div class="d-flex ${isTrainer ? 'justify-content-end' : 'justify-content-start'} mb-2">
                        <div class="message ${isTrainer ? 'incoming trainer' : 'incoming'}">
                            <div class="message-content" 
                                style="background-color: ${bgColor}; color: ${textColor}; padding: 12px 15px; border-radius: 10px; max-width: 70%;">
                                <strong>${senderName}:</strong><br>${msg.message}
                                <div class="message-time">
                                    ${new Date(msg.created_at).toLocaleString()}
                                    <span style="color: ${tickColor}; font-weight: bold; padding-left: 10px;">${tickSymbol}</span>
                                </div>
                            </div>
                        </div>
                    </div>`;

                });

                if (scroll) {
                    messageArea.scrollTop = messageArea.scrollHeight;
                }

                document.getElementById('current-chat-title').textContent = chatType.charAt(0).toUpperCase() + chatType.slice(1);
            });
    }

    function startPolling(chatType) {
        if (pollingInterval) clearInterval(pollingInterval);

        pollingInterval = setInterval(() => {
            loadMessages(chatType, false);
        }, 5000); // 5 seconds
    }

    function sendMessage() {
        const messageInput = document.querySelector('#message-input-field');
        const message = messageInput.value.trim();
        if (!message) return;

        fetch('{{ route('chat.send') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                chat_type: currentChat,
                message: message
            })
        })
        .then(res => res.json())
        .then(data => {
            const msg = data.message;

            const isTrainer = false;
            const senderName = 'You';
            const bgColor = '#e4e2e2';
            const textColor = '#333';
            const messageArea = document.getElementById('message-area');

            const messageBubble = `
                <div class="message incoming">
                    <div class="message-content" style="background-color: ${bgColor}; color: ${textColor}; padding: 12px 15px; border-radius: 10px;">
                        <strong>${senderName}:</strong><br>${msg.message}
                        <div class="message-time">
                            ${new Date(msg.created_at).toLocaleString()}
                            <span style="color: gray; font-weight: bold; padding-left: 10px;">
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </span>
                        </div>
                    </div>
                </div>`;

            messageArea.innerHTML += messageBubble;
            messageArea.scrollTop = messageArea.scrollHeight;
            messageInput.value = '';
        });
    }

    function openChat(chatType, event) {
        document.querySelectorAll('.chat-item').forEach(item => {
            item.classList.remove('active');
        });

        event.currentTarget.classList.add('active');
        loadMessages(chatType);
        startPolling(chatType);
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadMessages(currentChat);
        startPolling(currentChat);

        document.querySelectorAll('.chat-item').forEach(item => {
            item.addEventListener('click', function () {
                const type = this.getAttribute('data-chat-type');
                currentChat = type;
                openChat(type, event);
            });
        });

        document.getElementById('send-btn').addEventListener('click', sendMessage);
    });
</script>
@endpush