@extends('layouts.admin')

@section('style')
    @parent
    <link rel="stylesheet" href="{{ mix('css/admin/chat.css') }}">
@endSection

@php
$page_title = $recipient['mobile'] ?? 'User';
@endphp

@section('content')
    <div class="container-fluid px-4">
        <div class="row">
            {{-- left --}}
            <div class="col-lg-4 col-md-5 col-12">
                {{-- user profile --}}
                <div class="card card-outline bg-white user-profile">
                    <div class="card-header">
                        <h3 class="card-title">{{ __('headings.txt_user_profile') }}</h3>
                        <span class="d-none"><span class="small text-black-50 float-right info-user-guid-secondary"></span></span>
                    </div>
                    <div class="card-body p-0">
                        <div class="p-3 d-flex justify-content-between">
                            <div class="font-weight-bold info-name pl-1">...</div>
                            <div class="info flex-shrink-0">
                                <span class="info-mobile badge badge-btn badge-info">{{ __('headings.txt_mobile') }}</span>
                                <span class="info-email  badge badge-btn badge-info d-none">{{ __('headings.txt_email') }}</span>
                            </div>
{{--                            <div>--}}
{{--                                <div class="text-muted">--}}
{{--                                    <span>{{ __('headings.txt_num_workflows') }}:&nbsp;</span>--}}
{{--                                    <span class="info-workflow">...</span>--}}
{{--                                </div>--}}
{{--                                <div class="text-muted">--}}
{{--                                    <span>{{ __('headings.txt_last_user_interaction') }}:&nbsp;</span>--}}
{{--                                    <span class="info-last-interact">...</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                        <div class="w-100 table-responsive">
                            <table class="table table-sm small">
                                <tbody></tbody>
                            </table>
                        </div>

                        </div>
                    </div>

                {{-- flow history --}}
{{--                <div class="card card-outline shadow col-12 bg-white flow-history">--}}
{{--                    <div class="card-body px-2">--}}
{{--                        <div class="pb-3 font-weight-bold">{{ __('headings.txt_flow_history') }}</div>--}}
{{--                        <div class="items">--}}
{{--                            <div class="loading">{{ __('headings.txt_loading') }}</div>--}}
{{--                            <div class="no-item d-none">{{ __('headings.txt_no_item_display') }}</div>--}}
{{--                        </div>--}}
{{--                        <template class="d-none">--}}
{{--                            <div class="row">--}}
{{--                                <span class="col-6 info-title txt-nowrap">...</span>--}}
{{--                                <span class="col-6 info-date text-muted txt-nowrap">...</span>--}}
{{--                            </div>--}}
{{--                        </template>--}}
{{--                    </div>--}}
{{--                </div>--}}

                {{-- channel variable --}}
{{--                <div class="card card-outline shadow col-12 bg-white custom-variable">--}}
{{--                    <div class="card-body px-2">--}}
{{--                        <div class="pb-3 font-weight-bold">{{ __('headings.txt_custom_variables') }}</div>--}}
{{--                        <div class="items">--}}
{{--                            <div class="loading">{{ __('headings.txt_loading') }}</div>--}}
{{--                            <div class="no-item d-none">{{ __('headings.txt_no_item_display') }}</div>--}}
{{--                        </div>--}}
{{--                        <template class="d-none">--}}
{{--                            <span>...</span>--}}
{{--                        </template>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>

            {{-- right --}}
            <div class="col-lg-8 col-md-7 col-12">
                <div class="card card-outline overflow-hidden chat-card">
                    <div class="card-header">
                        <h3 class="card-title">{{ __('headings.txt_user_conversation') }}</h3>
                        <span class="small d-none ml-2 text-muted"><span>Last Active:</span><i class="fas fa-sm fa-circle mx-1 info-chat-active"></i><span class="info-last-interact">01/01/2022 12:00AM</span></span>
                    </div>
                    <div class="card-body bg-gradient-info w-100 p-0">
                        {{-- chat content --}}
                        <div class="chat-content items">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="spinner-border text-light" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <template class="d-none tpl-talk-bubble text-dark">
                        {{-- btm-left-in / btm-right-in --}}
                        <div class="talk-bubble tri-right text-dark border border-white round">
                            <div class="talktext">
                                <div class="img-wrap d-none">
                                    <a class="btn w-100" target="_blank" href="javascript:void(0);">
                                        <img src="" />
                                    </a>
                                </div>

                                <div class="attach-wrap d-none">
                                    <a class="btn w-100" target="_blank" href="javascript:void(0);">
                                        <i class="fas fa-file mr-2"></i>
                                        <span></span>
                                        <i class="fas fa-download"></i>
                                    </a>
                                </div>

                                <p class="header-group text-bold d-none"></p>

                                <p class="text-group d-none"></p>

                                <p class="footer-group text-muted d-none">..</p>

                                <div class="btn-group flex-wrap w-100 d-none">
                                    <button class="btn btn-default mb-0 mx-0 w-100 round" href="javascript:void(0);"></button>
                                </div>
                                <div class="section-group flex-wrap w-100 d-none">
                                    <button class="btn btn-default mb-0 mx-0 w-100 round" href="javascript:void(0);"></button>
                                </div>

                                <div class="cta-group flex-wrap w-100 d-none">
                                    <button class="btn btn-default mb-0 mx-0 w-100 round" href="javascript:void(0);"></button>
                                </div>
                            </div>

                            <div class="read-receipt text-muted">
                                <span>...</span>&nbsp;
                                <i class="fas fa-check icon icon-send"></i>
                                <i class="fas fa-check-double icon icon-sent"></i>
                                <i class="fas fa-trash icon icon-trash"></i>
                                <i class="fas fa-exclamation icon icon-failed"></i>
                            </div>
                        </div>
                    </template>

                    <template class="d-none tpl-workflow">
                        <div class="talk-workflow text-light w-100">
                            <small>
                                <label>{{ __('headings.txt_workflow') }}:</label>&nbsp;
                                <span>...</span>
                            </small>
                        </div>
                    </template>

                    <template class="d-none tpl-datetime">
                        <div class="talk-date w-100">
                            <span class="bg-dark text-light small">...</span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @parent
    <script src="{{ mix('js/admin/chat_history/index.js') }}"></script>
    <script>
        $(() => sKaleChatView.show({{ $recipient['id'] ?: 0 }}, @json($msgStatuses)));
    </script>
@endSection