@extends('layouts.chat')

@section('content')

@if(env('LIVE_CHAT'))
    <div id="chat-welcome-overlay">
        <div id="chat-welcome-overlay-text">Welcome to Live chat. <br />Please click anywhere to get started.</div>
    </div>


    <div class="container">
        <div class="row">
            <div class="col-12">
                <strong>Chats from the past 2 weeks</strong>
            </div>
        </div>
        @if(empty($old_chats))
        <div class="row">
            <div class="col-12">
                &nbsp; &nbsp;- No chats found
            </div>
        </div>
        @else
        <div class="row">
            <div class="col-12">

            @foreach($old_chats as $cid => $c)
                @php
                    if(!empty($c['user']->staff)){
                        continue; // Skip staff
                    }
                @endphp

                <div class="panel-collapse" data-panel="old_chat-{{ $cid }}">
                        <i>{!! $c['latest_message_time']->format('jS M Y h:i') !!}</i>
                        @if(!empty($c['user']->lead))
                            <a href="/customer/{{ $c['user']->lead->id }}" target="_blank">
                        @endif
                        <strong>{{ $c['name'] }}</strong>
                        @if(!empty($c['user']->lead))
                            </a>
                        @endif
                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
                </div>
                <div class="panel-body" id="old_chat-{{ $cid }}" style="display: none;">
                    @foreach($c['messages'] as $m)
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-11">
                            @if(!empty($m->recipient))
                            <strong>staff reply: </strong>
                            @endif
                            {{ $m->message }}
                            <br />
                            <span style="font-size: 0.7rem;">{!! $m->created_at->format('jS M Y h:i') !!}</span>
                            <br />-
                        </div>
                    </div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </div>
    @endif
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <chat-info :active_recipient="active_recipient">
                </chat-info>
            </div>
        </div>
    </div>

    <div class="container chats">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="card card-default">
                    <div class="card-header">
                        <strong>Messages</strong>
                    </div>

                    <div class="card-body" v-if="active_recipient.id == 0">
                        <p>Select a room to chat.</p>
                    </div>
                    <div class="card-body" v-chat-scroll v-else>
                        <widget-messages
                            :messages="channels[getActiveChannelName()].messages"
                            :user="{{ auth_or_guest() }}"
                            :sending="sending"
                            :preview_msg="preview_msg">
                        </widget-messages>
                    </div>

                    <div class="card-footer">
                        <chat-form
                                @messagesent="addMessage"
                                :user="{{ auth()->user() }}"
                                :sending="sending"
                                :preview_msg="preview_msg">
                        </chat-form>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <chat-rooms :chats="channels" :active_recipient="active_recipient">
                </chat-rooms>
            </div>
        </div>
    </div>

@else
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3>Live chat is currently disabled by the website administrator.</h3>
            </div>
        </div>
    </div>
@endif

@endsection

@section('script')
    <script>
        function showChatWelcome() {
            document.getElementById("chat-welcome-overlay").style.display = "block";
        }

        function hideChatWelcome() {
            document.getElementById("chat-welcome-overlay").style.display = "none";
        }

        window.onload = function() {
            showChatWelcome();
            document.getElementById("chat-welcome-overlay").onclick = function() {
                playNotification();
                hideChatWelcome();
            };
            document.getElementById("chat-welcome-overlay-text").onclick = function() {
                hideChatWelcome();
            };
        };
    </script>
@endsection