@extends('portal::layouts.customer')
@section('title', __('portal::lang.communications'))
@section('content')
<section class="portal-page-header">
    <h1>@lang('portal::lang.communications')</h1>
    <p>@lang('portal::lang.communications_help')</p>
</section>
<section class="content">
    @if($specialists->isEmpty())
        <div class="box box-primary">
            <div class="box-body text-center text-muted">
                <p>@lang('portal::lang.no_specialist_assigned')</p>
                @if(!empty($support_phone))
                    <a href="tel:{{ preg_replace('/\s+/', '', $support_phone) }}" class="btn btn-primary btn-lg portal-contact-btn">
                        <i class="fas fa-phone"></i> @lang('portal::lang.call_support')
                    </a>
                @endif
            </div>
        </div>
    @else
        @if(!empty($presenceEnabled) && $onlineSpecialists->isNotEmpty())
            <div class="portal-online-section">
                <h4 class="portal-section-title">
                    <span class="portal-presence-dot online"></span>
                    @lang('portal::lang.online_specialists')
                    <span class="badge bg-green">{{ $onlineSpecialists->count() }}</span>
                </h4>
                <div class="portal-specialist-list" id="portal-online-specialists">
                    @foreach($onlineSpecialists as $specialist)
                        @include('portal::customer.communications.partials.specialist_card', compact('specialist', 'chatEnabled', 'presenceEnabled'))
                    @endforeach
                </div>
            </div>
        @endif

        <h4 class="portal-section-title">@lang('portal::lang.all_specialists')</h4>
        <div class="portal-specialist-list" id="portal-all-specialists">
            @foreach($specialists as $specialist)
                @include('portal::customer.communications.partials.specialist_card', compact('specialist', 'chatEnabled', 'presenceEnabled'))
            @endforeach
        </div>
    @endif

    @if(!empty($support_phone) && $specialists->isNotEmpty())
        <div class="box box-default">
            <div class="box-body text-center">
                <p class="text-muted">@lang('portal::lang.general_support_line')</p>
                <a href="tel:{{ preg_replace('/\s+/', '', $support_phone) }}" class="btn btn-link">
                    <i class="fas fa-phone"></i> {{ $support_phone }}
                </a>
            </div>
        </div>
    @endif
</section>
@endsection

@if(!empty($presenceEnabled) && $specialists->isNotEmpty())
@section('javascript')
<script>
(function () {
    var presenceUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'presence']) }}';
    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 token = $('meta[name="csrf-token"]').attr('content');

    function updateCard($card, isOnline) {
        $card.toggleClass('portal-specialist-online', isOnline);
        $card.find('.portal-presence-dot')
            .toggleClass('online', isOnline)
            .toggleClass('offline', !isOnline);
        $card.find('.portal-presence-label')
            .toggleClass('text-success', isOnline)
            .toggleClass('text-muted', !isOnline)
            .text(isOnline ? onlineLabel : offlineLabel);
    }

    function refreshPresence() {
        $.get(presenceUrl, function (items) {
            var onlineCount = 0;
            items.forEach(function (s) {
                if (s.is_online) onlineCount++;
                updateCard($('.portal-specialist-card[data-specialist-id="' + s.id + '"]'), s.is_online);
            });
            var $sectionWrap = $('.portal-online-section');
            if ($sectionWrap.length) {
                $sectionWrap.toggle(onlineCount > 0);
                $sectionWrap.find('.badge').text(onlineCount);
            }
        });
        $.post(heartbeatUrl, {_token: token});
    }

    setInterval(refreshPresence, 20000);
    setInterval(function () { $.post(heartbeatUrl, {_token: token}); }, 60000);
})();
</script>
@endsection
@endif