@extends('portal::layouts.customer')
@section('title', __('portal::lang.chat_with_specialist'))
@section('content')
<section class="content portal-chat-page">
    <div class="portal-chat-header">
        <a href="{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'index']) }}" class="portal-chat-back">
            <i class="fas fa-arrow-right"></i>
        </a>
        <div class="portal-chat-title">
            <strong>{{ $specialist['name'] }}</strong>
            <small id="portal-chat-presence" class="{{ !empty($specialist['is_online']) ? 'text-success' : 'text-muted' }}">
                @if(!empty($presenceEnabled))
                    <span class="portal-presence-dot {{ !empty($specialist['is_online']) ? 'online' : 'offline' }}"></span>
                    {{ !empty($specialist['is_online']) ? __('portal::lang.online_now') : __('portal::lang.offline') }}
                @else
                    @lang('portal::lang.your_specialist')
                @endif
            </small>
        </div>
        @if(!empty($specialist['mobile']))
            <a href="tel:{{ preg_replace('/\s+/', '', $specialist['mobile']) }}" class="portal-chat-call">
                <i class="fas fa-phone"></i>
            </a>
        @endif
    </div>

    <div id="portal-chat-messages" class="portal-chat-messages" data-room-id="{{ $room_id }}"></div>

    <form id="portal-chat-form" class="portal-chat-form" data-send-url="{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'sendMessage'], [$room_id]) }}">
        @csrf
        <input type="text" id="portal-chat-input" class="form-control" placeholder="@lang('portal::lang.type_message')" maxlength="5000" autocomplete="off">
        <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i></button>
    </form>
</section>
@endsection

@section('javascript')
<script>
(function () {
    var roomId = {{ $room_id }};
    var messagesUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'messages'], [$room_id]) }}';
    var markReadUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'markRead'], [$room_id]) }}';
    var presenceUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'specialistPresence'], [$specialist['id']]) }}';
    var heartbeatUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'heartbeat']) }}';
    var onlineLabel = @json(__('portal::lang.online_now'));
    var offlineLabel = @json(__('portal::lang.offline'));
    var presenceEnabled = {{ !empty($presenceEnabled) ? 'true' : 'false' }};
    var $box = $('#portal-chat-messages');
    var lastCount = 0;

    function renderMessages(items) {
        var html = '';
        items.forEach(function (m) {
            html += '<div class="portal-chat-bubble ' + (m.is_mine ? 'mine' : 'theirs') + '">' +
                '<div class="portal-chat-body">' + $('<div>').text(m.body).html() + '</div>' +
                '<div class="portal-chat-time">' + (m.created_at || '') + '</div></div>';
        });
        $box.html(html);
        if (items.length !== lastCount) {
            $box.scrollTop($box[0].scrollHeight);
            lastCount = items.length;
        }
    }

    function loadMessages() {
        $.get(messagesUrl, function (data) {
            renderMessages(data);
        });
    }

    loadMessages();
    $.post(markReadUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
    setInterval(loadMessages, 8000);

    if (presenceEnabled) {
        function refreshPresence() {
            $.get(presenceUrl, function (data) {
                var $el = $('#portal-chat-presence');
                var online = !!data.is_online;
                $el.toggleClass('text-success', online).toggleClass('text-muted', !online);
                $el.find('.portal-presence-dot').toggleClass('online', online).toggleClass('offline', !online);
                $el.contents().filter(function () { return this.nodeType === 3; }).remove();
                $el.append(document.createTextNode(online ? onlineLabel : offlineLabel));
            });
            $.post(heartbeatUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
        }
        setInterval(refreshPresence, 20000);
        setInterval(function () {
            $.post(heartbeatUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
        }, 60000);
    }

    $('#portal-chat-form').on('submit', function (e) {
        e.preventDefault();
        var $input = $('#portal-chat-input');
        var body = $.trim($input.val());
        if (!body) return;
        $.post($(this).data('send-url'), {_token: $('meta[name="csrf-token"]').attr('content'), body: body}, function () {
            $input.val('');
            loadMessages();
        });
    });
})();
</script>
@endsection