@extends('clients.layouts.master')

@section('page-title', 'Conversation')

@section('subheader')
<!--begin::Subheader-->
<div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader">
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Messages</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <!-- <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item">
                        <a href="" class="text-muted">Manage</a>
                    </li>

                </ul> -->
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        <!--end::Info-->
        <!--begin::Toolbar-->
        <div class="d-flex align-items-center">
            <!--begin::Actions-->
            <!-- <a href="{{route('admin.clients.create')}}" class="btn btn-light-primary font-weight-bolder btn-sm"><i class="fa fa-plus" aria-hidden="true"></i>Create New User</a> -->
            <!--end::Actions-->

        </div>
        <!--end::Toolbar-->
    </div>
</div>
<!--end::Subheader-->
@endsection


@section('content')

    @include('admin.layouts.flash_messages')

    <div class="container" id="messagesRoot">
        <div class="d-flex flex-row">

            <!-- ================= LEFT SIDEBAR ================= -->
            <div class="flex-row-auto offcanvas-mobile w-350px w-xl-400px" id="kt_chat_aside">
                <div class="card card-custom">
                    <div class="card-body">

                        <!-- Search -->
                        <div class="input-group input-group-solid mb-5">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <span class="svg-icon svg-icon-lg">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                            <path d="M14.2929,16.7071 C13.9024,16.3166 13.9024,15.6834 14.2929,15.2929 L19.7071,19.7071 C20.0976,20.0976 20.0976,20.7308 19.7071,21.1213 C19.3166,21.5118 18.6834,21.5118 18.2929,21.1213 L14.2929,16.7071 Z" opacity="0.3"/>
                                            <path d="M11,16 C13.7614,16 16,13.7614 16,11 C16,8.2386 13.7614,6 11,6 C8.2386,6 6,8.2386 6,11 C6,13.7614 8.2386,16 11,16 Z"/>
                                        </svg>
                                    </span>
                                </span>
                            </div>
                            <input type="text" id="search_field" class="form-control py-4 h-auto"
                                placeholder="Number" @keyup="loadUsers">
                        </div>

                        <!-- Users -->
                        <div class="scroll scroll-pull mt-7">

                            <div v-if="usersLength === 0" class="text-muted font-weight-bold font-size-sm">
                                No Record Found
                            </div>

                            <div v-else>
                                <div v-for="user in users" :key="user.user_number"
                                    class="d-flex align-items-center justify-content-between mb-5">

                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-circle symbol-50 mr-3">
                                            <img src="{{ asset('assets/media/users/default.jpg') }}" alt="Pic">
                                        </div>

                                        <div class="d-flex flex-column">
                                            <a @click="goto_route(user.usrPhone_twPhone)"
                                            :id="user.user_number == '{{ $id }}' ? 'ActiveContact' : null"
                                            class="font-weight-bold font-size-lg text-hover-primary"
                                            style="cursor:pointer;">
                                                @{{ user.user_name || user.user_number }}
                                            </a>

                                            <span class="text-muted font-size-sm">
                                                @{{ user.user_name ? user.user_number : user.last_message }}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="d-flex flex-column align-items-end">
                                        <span class="text-muted font-size-sm">@{{ user.time }}</span>

                                        <!-- <a href="#" @click.prevent="markChat(user.user_number)"
                                        class="btn btn-icon btn-xs text-hover-warning">
                                            <i :class="user.marked ? 'flaticon-star text-warning' : 'flaticon-star text-muted'"></i>
                                        </a> -->

                                        <span v-if="user.user_count" class="label label-sm label-danger">
                                            @{{ user.user_count }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- ================= CHAT CONTENT ================= -->
            <div class="flex-row-fluid ml-lg-8">
                <div class="card card-custom">

                    <!-- Header -->
                    <div class="card-header align-items-center px-4 py-3">
                        <div class="text-center flex-grow-1">
                            <div class="font-weight-bold font-size-h5 text-dark-75">
                                {{ $id ? ($messages[0]->user_number) : 'No chat selected' }}
                            </div>
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="card-body">
                        <div class="scroll scroll-pull messageBody" style="overflow:auto; max-height: calc(100vh - 38.3rem);">

                            @if(count($messages))
                            <div class="messages">
                                <input type="hidden" id="user_id" value="{{ $messages[0]->user_number }}">
                                <input type="hidden" id="twilio_number" value="{{ $messages[0]->twilio_number }}">
                                <input type="hidden" id="user_number" value="{{ $messages[0]->user_number }}">

                                <div v-for="message in messages" :key="message.id">

                                    <!-- Outbound -->
                                    <div v-if="message.direction === 'Outbound'"
                                        class="d-flex flex-column mb-5 align-items-end">
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <span class="text-muted font-size-sm">@{{ message.shortDateTime }}</span>
                                                <div class="font-weight-bold font-size-h6">
                                                    @{{ message.twilio_number }}
                                                </div>
                                            </div>
                                            <div class="symbol symbol-circle symbol-40 ml-3">
                                                <img src="{{ asset('assets/media/users/default.jpg') }}">
                                            </div>
                                        </div>
                                        <div class="mt-2 rounded p-5 bg-light-primary font-weight-bold max-w-400px text-right">
                                            @{{ message.text_message }}
                                        </div>
                                    </div>

                                    <!-- Inbound -->
                                    <div v-else
                                        class="d-flex flex-column mb-5 align-items-start">
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-circle symbol-40 mr-3">
                                                <img src="{{ asset('assets/media/users/default.jpg') }}">
                                            </div>
                                            <div>
                                                <div class="font-weight-bold font-size-h6">
                                                    @{{ message.user_number }}
                                                </div>
                                                <span class="text-muted font-size-sm">@{{ message.shortDateTime }}</span>
                                            </div>
                                        </div>
                                        <div class="mt-2 rounded p-5 bg-light-success font-weight-bold max-w-400px">
                                            @{{ message.text_message }}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            @endif

                        </div>
                    </div>

                    <!-- Footer -->
                    @if(count($messages))
                    <div class="card-footer">
                        <textarea id="message_body"
                                class="form-control border-0 p-0"
                                rows="2"
                                placeholder="Type a message"
                                @keydown="onEnter"></textarea>

                        <div class="d-flex justify-content-end mt-4">
                            <button class="btn btn-primary" @click="sendMsg">Send</button>
                        </div>
                    </div>
                    @endif

                </div>
            </div>

        </div>
    </div>

@endsection



@section('page_scripts')
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="{{ asset('assets/v-switch.min.js') }}"></script> -->
<script src="{{ asset('assets/js/pages/custom/chat/chat.js') }}"></script>

<script>
    Vue.use(VSwitch)

    new Vue({
        el: '#messagesRoot',

        data: {
            messages: [],
            users: [],
            message: '',
            userId: null,
            usersLength: 0,
            autoScroll: true,
        },

        mounted() {
            this.userId = document.getElementById('user_id')?.value || null;
            this.loadUsers();
            this.loadMessages(true);

            setInterval(this.loadMessages, 5000);
            setInterval(this.loadUsers, 5000);

            this.scrollActiveContact();
        },

        methods: {

            /* --------------------
            ROUTING
            -------------------- */
            goto_route(id) {
                let route = '{{ route("client.conversation.index", ["id" => "__ID__"]) }}';
                window.location.href = route.replace('__ID__', id);
            },

            /* --------------------
            USERS
            -------------------- */
            getSearchRoute(number) {
                if (!number) {
                    return '{{ route("client.conversation.users") }}';
                }
                let route = '{{ route("client.conversation.users", "__NUM__") }}';
                return route.replace('__NUM__', number);
            },

            loadUsers() {
                axios.get(this.getSearchRoute($('#search_field').val()))
                    .then(res => {
                        this.users = res.data.users || [];
                        this.usersLength = this.users.length;
                    });
            },

            /* --------------------
            MESSAGES
            -------------------- */
            loadMessages(firstLoad = false) {
                if (!this.userId) return;

                axios.get("{{ route('client.conversation.messages.get', $usrPhone_twPhone) }}")
                    .then(res => {
                        this.messages = res.data || [];
                        if (this.autoScroll || firstLoad) {
                            this.$nextTick(this.scrollToBottom);
                            this.autoScroll = false;
                        }
                    });
            },

            sendMsg() {

                //alert($('#message_body').val());
                
                this.message = $('#message_body').val();

                if (!this.message.trim()) return;

                let from = $('#twilio_number').val();
                let to   = $('#user_number').val();

                axios.post("{{ route('client.conversation.send') }}", {
                    csrf_token: "{{ csrf_token() }}",
                    from_number: from,
                    to_number: to,
                    message: this.message
                }).then(() => {
                    this.message = '';
                    $('#message_body').val('');
                    this.autoScroll = true;
                    this.loadMessages();
                });
            },

            onEnter(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    this.message = $('#message_body').val();
                    this.sendMsg();
                }
            },

            /* --------------------
            STAR / MARK CHAT
            -------------------- */
            markChat(userNumber) {
                axios.post("{{ route('client.conversation.mark') }}", {
                    csrf_token: "{{ csrf_token() }}",
                    userNumber
                }).then(() => {
                    this.loadUsers();
                });
            },

            /* --------------------
            SCROLL HELPERS
            -------------------- */
            scrollToBottom() {
                let box = document.querySelector('.messageBody');
                if (box) box.scrollTop = box.scrollHeight;
            },

            scrollActiveContact() {
                this.$nextTick(() => {
                    let el = document.getElementById('ActiveContact');
                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                });
            }
        }
    });
    </script>

@endsection