@extends('layouts.customer')
@section('title')
    {{ __('messages.conversations') }}
@endsection
@section('page_css')
    <link rel="stylesheet" href="{{ mix('assets/css/video-js.css') }}">
    <link rel="stylesheet" href="{{ mix('assets/css/new-conversation.css') }}">
@endsection
@section('content')
    <div class="page-container">
        <div class="chat-container chat">
            <div class="chat__inner">
                <!-- left section of chat area (chat person selection area) -->
                <div class="chat__people-wrapper chat__people-wrapper--responsive" style="display: none;">
                    
                    <div class="tab-content chat__tab-content" >
                        <div class="chat__people-body tab-pane fade in active show" id="chatPeopleBody">
                            <div id="infyLoader" class="infy-loader chat__people-body-loader">
                                @include('partials.infy-loader')
                            </div>
                            <div class="text-center no-conversation" style="display: none">
                                <div class="chat__no-conversation">
                                    <div class="text-center"><i class="fa fa-2x fa-commenting-o" aria-hidden="true"></i></div>
                                    {{ __('messages.no_conversation_found') }}
                                </div>
                            </div>
                            <div class="text-center no-conversation-yet" style="display: none">
                                <div class="chat__no-conversation">
                                    <div class="text-center"><i class="fa fa-2x fa-commenting-o" aria-hidden="true"></i></div>
                                    {{ __('messages.no_conversation_added_yet') }}
                                </div>
                            </div>
                            <div id="loadMoreConversationBtn" style="display: none">
                                <a href="javascript:void(0)" class="load-more-conversation">Load More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ left section of chat area -->
                <!-- right section of chat area (chat conversation area)-->
                <div class="chat__area-wrapper ms-lg-3">
                    @include('customer.chat.no-chat')
                </div>
                <!--/ right section of chat area-->
                <!-- profile section (chat profile section)-->
            @include('customer.chat.chat_profile')
            @include('customer.chat.msg_info')
            <!--/ profile section -->
            </div>
        </div>
        <!-- Modal -->
        <div id="addNewChat" class="modal fade" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered conversation-modal">
                <!-- Modal content-->
                <div class="modal-content modal-new-conversation">
                    <div class="modal-header border-0">
                        <h5 class="modal-title">
                            <i class="ti-user"></i>{{__('messages.group.new_conversations')}} @if($enableGroupSetting == 1) / {{__('messages.group.groups')}} @endif</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            &times;
                        </button>
                    </div>
                    <div class="modal-body">
                        <nav class="nav nav-pills flex-wrap" id="myTab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-my-contacts-tab" data-bs-toggle="tab"
                               href="#nav-my-contacts" role="tab" aria-controls="nav-my-contacts-tab"
                               aria-expanded="true"> <i class="ti-user"></i>{{ __('messages.my_contacts') }}
                            </a>
                            <a class="nav-item nav-link wrap-text" id="nav-users-tab" data-bs-toggle="tab"
                                    href="#nav-users" role="tab" aria-controls="nav-users" aria-expanded="true">
                                <i class="ti-user"></i>{{ __('messages.new_conversation') }}
                            </a>
                            @if($enableGroupSetting == 1)
                            <a class="nav-item nav-link" id="nav-groups-tab" data-bs-toggle="tab" href="#nav-groups"
                                    role="tab" aria-controls="nav-groups">{{ __('messages.group.groups') }}</a>
                            @endif
                                <a class="nav-item nav-link" id="nav-blocked-users-tab" data-bs-toggle="tab"
                                    href="#nav-blocked-users" role="tab"
                                    aria-controls="nav-blocked-users">{{ __('messages.blocked_users') }}</a>
                        </nav>

                        <div class="tab-content search-any-member mt-3" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-my-contacts" role="tabpanel"
                                 aria-labelledby="nav-my-contacts-tab">
                                @livewire('my-contacts-search', ['myContactIds' => $myContactIds, 'blockUserIds' => $blockUserIds])
                            </div>
                            <div class="tab-pane fade" id="nav-users" role="tabpanel" aria-labelledby="nav-users-tab">
                                @livewire('search-users', ['myContactIds' => $myContactIds, 'blockUserIds' => $blockUserIds])
                            </div>
                            @if($enableGroupSetting == 1)
                            <div class="tab-pane fade" id="nav-groups" role="tabpanel" aria-labelledby="nav-groups-tab">
                                @livewire('group-search')
                            </div>
                            @endif
                            <div class="tab-pane fade show" id="nav-blocked-users" role="tabpanel"
                                 aria-labelledby="nav-blocked-users-tab">
                                @livewire('blocked-user-search', ['blockedByMeUserIds' => $blockedByMeUserIds])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('customer.chat.group_modals')
        @include('customer.chat.edit_group_modals')
        @include('customer.chat.report_user_modal')
    </div>
    @include('customer.chat.templates.conversation-template')
    @include('customer.chat.templates.message')
    @include('customer.chat.templates.no-messages-yet')
    @include('customer.chat.templates.no-conversation')
    @include('customer.chat.templates.group_details')
    @include('customer.chat.templates.user_details')
    @include('customer.chat.templates.group_listing')
    @include('customer.chat.templates.group_members')
    @include('customer.chat.templates.single_group_member')
    @include('customer.chat.group_members_modal')
    @include('customer.chat.templates.blocked_users_list')
    @include('customer.chat.templates.add_chat_users_list')
    @include('customer.chat.templates.badge_message_template')
    @include('customer.chat.templates.member_options')
    @include('customer.chat.templates.single_message')
    @include('customer.chat.templates.contact_template')
    @include('customer.chat.templates.conversations_list')
    @include('customer.chat.templates.common_templates')
    @include('customer.chat.templates.my_contacts_listing')
    @include('customer.chat.templates.conversation-request')
    @include('customer.chat.copyImageModal')
@endsection
@section('page_js')
    <script src="{{ mix('assets/js/video.min.js') }}"></script>
@endsection
@section('scripts')
    <!--custom js-->
    <script>
        let userURL = '{{url('users')}}/'
        let userListURL = '{{url('users-list')}}' // not use in anywhere
        let chatSelected = false
        let csrfToken = '{{csrf_token()}}'
        let authUserName = '{{ getLoggedInUser()->name }}'
        let authImgURL = '{{ getLoggedInUser()->photo_url}}'
        let deleteConversationUrl = '{{url('conversations')}}/'
        let getUsers = '{{url('get-users')}}'  //not used in anywhere
        let appName = '{{ getAppName() }}'
        let conversationId = '{{ $conversationId }}'
        let enableGroupSetting = '{{ isGroupChatEnabled() }}'
        let authRole = "{{ Auth::user()->role_name }}"

        /** Icons URL */
        let pdfURL = '{{ asset('assets/icons/pdf.png') }}'
        let xlsURL = '{{ asset('assets/icons/xls.png') }}'
        let textURL = '{{ asset('assets/icons/text.png') }}';
        let docsURL = '{{ asset('assets/icons/docs.png') }}'
        let videoURL = '{{ asset('assets/icons/video.png') }}'
        let youtubeURL = '{{ asset('assets/icons/youtube.png') }}'
        let audioURL = '{{ asset('assets/icons/audio.png') }}'
        let zipURL = '{{ asset('assets/icons/zip.png') }}'
        let isUTCTimezone = '{{(config('app.timezone') == 'UTC') ? 1  :0 }}'
        let timeZone = '{{config('app.timezone')}}'
        let blockedUsersListObj = JSON.parse('{!! json_encode($blockUserIds) !!}')
        let myContactIdsObj = JSON.parse('{!! json_encode($myContactIds) !!}')
        let groupMembers = []
        let checkShowNameChat = "{{ checkShowNameChat() }}"
    </script>
    <script src="{{ mix('assets/js/chat.js') }}"></script>
@endsection