@extends('web.layouts.app')

@push('styles')
    <style>
        .table tbody tr.selected td {
            background: #ccc;
        }
        @media (min-width: 992px) {

            #chat-conversation {
                overflow-y: auto;
            }
        }
        .chat-conversation .conversation-list {
            max-width: 67%;
        }
        #msg_history {
            border-radius: 10px;
        }
        .chat-conversation .conversation-list video, .chat-conversation .conversation-list audio {
            max-width: 100%;
        }
        .conversation-closed td {
            color: #7a7f9a !important;
            opacity: 0.7;
        }
        #date-range {
            background-color: #fff;
            border: 1px solid #aaa;
        }
        .flex-center { 
            display: flex !important;
            align-items: center!important;
            justify-content: center!important;
        }
        .chat-conversation::-webkit-scrollbar-track, .main-chat-container::-webkit-scrollbar-track, .agents_and_teams::-webkit-scrollbar-track, .quick-replies::-webkit-scrollbar-track {background-color:#fff}
        .chat-conversation::-webkit-scrollbar, .main-chat-container::-webkit-scrollbar, .agents_and_teams::-webkit-scrollbar, .quick-replies::-webkit-scrollbar {width:8px;background-color:#fff}
        .chat-conversation::-webkit-scrollbar-thumb, .main-chat-container::-webkit-scrollbar-thumb, .agents_and_teams::-webkit-scrollbar-thumb, .quick-replies::-webkit-scrollbar-thumb {background-color:#a2adb7; border-radius: 7px;}

        .main-chat-container {
            border-radius: 0px;
            box-shadow: none;
            background: transparent;
        }
        #bulk-actions-container { 
            height: 40px; 
            position: sticky; 
            bottom:0%;
            width:100%;
            background-color: #fff;
            /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
            box-shadow: 0 4px 4px 6px rgba(15,34,58,.12);
            border-radius: 15px;
        }
        .bulk-actions.disabled, .assigned-to.disabled {
            opacity: 0.3;
        }
        .agents_and_teams {
            max-height: 300px;
            overflow-y: auto;
        }
        .agent_or_team {
            cursor: pointer;
        }
        .agent_or_team:hover {
            background-color: #fafafa;
        }
    </style>
@endpush

@section('content')
  <div class="row w-100 border-top m-0">
    <div class="col-md-8 main-chat-container overflow-y-scroll ms-0">
        <div class="p-0 pt-2 mb-0">
            <ul class="nav nav-pills bg-Light mb-3 flex-center">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page">@lang('user.all_chats')</a>
                </li>
                <li class="nav-item">
                   <a class="nav-link {{ Route::is('web.conversations.messages') ? 'active' : '' }}" href="{{ route('web.conversations.messages') }}">@lang('user.messages')</a>
               </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="chats">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="card">
                                <div class="card-header" style="display: flex;justify-content: space-between;">
                                    <h4 class="card-title">@lang('user.all_chats')</h4>
                                </div>
                                <div class="card-body">
                                    <form method="get" action="">
                                        <div class="row">
                                            <div class="col-md-6 mb-2">
                                                <input type="text" class="form-control" name="keyword" value="{{ request()->input('keyword') }}" placeholder="@lang('user.search')...">
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('agents[]', $agents->pluck('name', 'id')->toArray(), request()->input('agents'), ['class' => 'form-control select2', 'data-placeholder' => __('user.agents'), 'multiple']) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('teams[]', $teams->pluck('name', 'id')->toArray(), request()->input('teams'), ['class' => 'form-control select2', 'data-placeholder' => __('user.teams'), 'multiple']) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('unread', ['' => __('user.read_status'), '0' => __('user.read'), '1' => __('user.unread')], request()->input('unread'), ['class' => 'form-control select2', 'data-placeholder' => __('user.read_status')]) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('unresponded', ['' => __('user.response_status'), '0' => __('user.responded'), '1' => __('user.unresponded')], request()->input('unresponded'), ['class' => 'form-control select2', 'data-placeholder' => __('user.response_status')]) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('assignment_status', ['' => __('user.assignment_status'), '0' => __('user.unassigned'), '1' => __('user.assigned'), '2' => __('user.closed_chat')], request()->input('assignment_status'), ['class' => 'form-control select2', 'data-placeholder' => __('user.assignment_status')]) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('channel', ['' => __('user.channel')] + \App\Models\Conversation::$channelNames , request()->input('channel'), ['class' => 'form-control select2', 'data-placeholder' => __('user.channel')]) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('tags[]', $tags, request()->input('tags'), ['class' => 'form-control ' . ($tagsCount > 100 ? 'tagsFilter' : 'select2'), 'data-placeholder' => __('user.tags'), 'multiple']) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                <input type="text" class="form-control" id="date-range" name="date_range" value="{{ request()->input('date_range') }}" placeholder="@lang('user.time_of_last_activity')" readonly>
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                <input type="submit" class="btn btn-primary w-100" value="@lang('user.search')" />
                                            </div>
                                            @if (request()->has('keyword'))
                                                <div class="col-md-3 mb-2">
                                                    <a href="{{ route('web.conversations.chats') }}" class="btn btn-light w-100">@lang('user.clear_filters')</a>
                                                </div>
                                            @endif
                                        </div>
                                    </form>
                                    <div class="table-responsive">
                                        <table class="table table-responsive-md ">
                                            <thead class="table-info">
                                                <tr>
                                                    <th width="10">&nbsp;</th>
                                                    <th>@lang('user.contact')</th>
                                                    <th>&nbsp;</th>
                                                    <th>@lang('user.assigned_to')</th>
                                                    <th>@lang('user.tags')</th>
                                                    <th>@lang('user.last_message_date')</th>
                                                    <th>@lang('user.actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($conversations as $conversation)
                                                    <tr id="conversation-{{ $conversation->id }}"
                                                        class="@if($conversation->assignment_status == '2') conversation-closed @endif" 
                                                        onclick="openConversation({{ $conversation->id }})">
                                                        <td>
                                                            <input type="checkbox" class="select-conversation" value="{{ $conversation->id }}" />
                                                        </td>
                                                        <td>
                                                            <div class="float-start me-2">
                                                                <img width="24" src="{{ $conversation->contact->image_url ?? '' }}" class="mt-2" />
                                                            </div>
                                                            <div class="float-start">
                                                                {{ $conversation->contact->name }}<br>
                                                                {{ $conversation->contact->mobile }}
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <i class="ri-mail-unread-line text-danger unread" 
                                                                title="@lang('user.unread')"
                                                                @if (!$conversation->is_unread) style="display: none;" @endif></i>
                                                        </td>
                                                        <td>
                                                            @if ($conversation->assignedTo)
                                                                <img width="24" src="{{ $conversation->assignedTo->image_url ?? '' }}" />
                                                                {{ $conversation->assignedTo->name ?? '' }}
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @foreach ($conversation->contact->tags()->get() as $tag)
                                                                <span class="badge bg-secondary">{{ $tag->name }}</span>
                                                            @endforeach
                                                        </td>
                                                        <td>{{ $conversation->last_message_datetime ? $conversation->last_message_datetime->format('d M y h:i A') : '' }}</td>
                                                        <td>
                                                                @if ($conversation->contact->channel == 1)
                                                                    <button type="button" title="@lang('user.go_to_chat')"
                                                                        onclick="location.href='{{ route('web.conversations.new', $conversation->contact->id) }}';"
                                                                        class="btn btn-primary py-1 px-2 row-actions"
                                                                        data-action="go-to-chat">
                                                                        <i class="fa fa-message"></i></button>
                                                                @endif

                                                                
                                                                <button type="button" title="@lang('user.mark_as_read')"
                                                                    class="btn btn-success py-1 px-2 row-actions mark_as_read" 
                                                                    data-action="mark-read" data-conversation-id="{{ $conversation->id }}"
                                                                    @if (!$conversation->is_unread) style="display: none;" @endif>
                                                                    <i class="fa fa-envelope"></i></button>
                                                                <button type="button" title="@lang('user.mark_as_unread')"
                                                                    class="btn btn-warning py-1 px-2 row-actions mark_as_unread" 
                                                                    data-action="mark-unread" data-conversation-id="{{ $conversation->id }}"
                                                                    @if ($conversation->is_unread) style="display: none;" @endif>
                                                                    <i class="fa fa-envelope-open"></i></button>
                                                                
                                                                @if($conversation->assignment_status != '2')
                                                                    <button type="button" title="@lang('user.close_chat')"
                                                                        class="btn btn-secondary py-1 px-2 row-actions mark_as_closed"
                                                                        data-action="mark-closed" data-conversation-id="{{ $conversation->id }}">
                                                                        <i class="fa fa-times-circle"></i></button>
                                                                @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        {{ $conversations->links('vendor.pagination.custom') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bulk-actions-container" class="row m-0 border-top">
            <div class="col-md-5" id="select-to-activate">
                @lang('user.select_a_chat_to_activate_options')
            </div>
            <div class="col-md-7">
                <ul class="list-inline user-chat-nav text-start mb-0">    
                    <li class="list-inline-item">
                        <div class="dropdown">
                            <button class="btn dropdown-toggle assigned-to p-1 disabled" title="@lang('user.assign')" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-user-plus"></i>
                            </button>
                            <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-md" style="min-width: 360px;">
                                <div class="search-box p-2">
                                    <input type="text" id="seach_agents_input" class="form-control bg-light border-0" placeholder="@lang('user.search').." onkeyup="searchAgents()">
                                </div>
                                <div class="row border-bottom px-3">
                                    <div class="col pb-2 border-primary border-bottom assign-to" rel="all">{{ __('user.all') }} <span class="badge text-bg-secondary">{{ count($agents ?? []) + count($teams ?? []) }}</span></div>
                                    <div class="col pb-2 border-primary assign-to" rel="agents">{{ __('user.agents') }} <span class="badge text-bg-secondary">{{ count($agents ?? []) }}</span></div>
                                    <div class="col pb-2 border-primary assign-to" rel="teams">{{ __('user.teams') }} <span class="badge text-bg-secondary">{{ count($teams ?? []) }}</span></div>
                                </div>
                                <div class="agents_and_teams">
                                    @foreach ($agents as $agent)
                                        <div class="agent_or_team agent-row p-2" 
                                            rel="{{ $agent->id }}" data-type="user_id">
                                            <img width="32" height="32" class="rounded-circle" src="{{ $agent->image_url }}" /> {{ $agent->name }}
                                        </div>
                                    @endforeach
                                    @foreach ($teams as $team)
                                        <div class="agent_or_team team-row p-2" 
                                            rel="{{ $team->id }}" data-type="team_id">
                                            <img width="32" height="32" class="rounded-circle" src="{{ $team->image_url }}" /> {{ $team->name }} 
                                            <span class="badge text-bg-primary float-end">@lang('user.team')</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                        <a class="btn bulk-actions disabled" title="@lang('user.mark_as_read')" data-type="is_unread" rel="0"><i class="fa fa-envelope"></i></a>
                    </li>
                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                        <a class="btn bulk-actions disabled" title="@lang('user.mark_as_unread')" data-type="is_unread" rel="1"><i class="fa fa-envelope-open"></i></a>
                    </li>
                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                        <a class="btn bulk-actions disabled" title="@lang('user.close_chat')" data-type="assignment_status" rel="2"><i class="fa fa-times-circle"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-4 p-0 bg-white" id="msg_history">
        
    </div>
    <!-- end  layout wrapper -->
  </div>
@endsection

@push('scripts')
    <script>
        var assignTo = 'all';
        var spinner = `<div class="flex-center h-100">
                <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>`;
        
        function openConversation(id)
        {
            $('#chats table tbody tr').removeClass('selected');
            $('#conversation-' + id).addClass('selected');
            $('#msg_history').html(spinner);
            $.getJSON('{{url("conversations")}}/' + id + '/1', function(data){
                $('#msg_history').html(data.content);
                document.getElementById('chat-conversation').scrollTop = document.getElementById('chat-conversation').scrollHeight;
            });
        }

        function markAsClosed(conversationId)
        {
            $.ajax({
                url: "{{ route('web.conversations.markAsClosed') }}",
                type: 'POST',
                data: {
                    conversation_id: conversationId
                },
                dataType: "JSON",
                success: function (result2)
                {
                    if (result2.success == true) {
                        $('#conversation-' + conversationId + ' .mark_as_closed').hide();
                        $('#conversation-' + conversationId).addClass('conversation-closed');
                        toastr.success(result2.message);
                    } else {
                    }
                }
            });
        }
        
        function changeReadStatus(conversationId, isUnread)
        {
            $.ajax({
                url: "{{ route('web.conversations.changeReadStatus') }}",
                type: 'POST',
                data: {
                    conversation_id: conversationId,
                    read_status: isUnread
                },
                dataType: "JSON",
                success: function (result2)
                {
                    if (result2.success == true) {
                        if (isUnread == '1') {
                            $('#conversation-' + conversationId + ' .mark_as_unread').hide();
                            $('#conversation-' + conversationId + ' .unread').show();
                            $('#conversation-' + conversationId + ' .mark_as_read').show();
                        } else {
                            $('#conversation-' + conversationId + ' .mark_as_read').hide();
                            $('#conversation-' + conversationId + ' .unread').hide();
                            $('#conversation-' + conversationId + ' .mark_as_unread').show();
                        }
                        $('#conversation-' + conversationId).addClass('conversation-closed');
                        toastr.success(result2.message);
                    } else {
                    }
                }
            });
        }

        function searchAgents()
        {
            var input = document.getElementById("seach_agents_input");
            var filter = input.value.toLowerCase();
            var nodes = 'agent_or_team';
            if (assignTo == 'agents') {
                var nodes = document.getElementsByClassName('agent-row');
            } else if (assignTo == 'teams') {
                var nodes = document.getElementsByClassName('team-row');
            } else {
                var nodes = document.getElementsByClassName('agent_or_team');
            }

            for (i = 0; i < nodes.length; i++) {
                if (nodes[i].innerText.toLowerCase().includes(filter)) {
                    nodes[i].style.display = "block";
                } else {
                    nodes[i].style.display = "none";
                }
            }
        }

        function bulkChange(field, value)
        {
            conversationIds = $.map($('.select-conversation:checked'), function(c){return c.value; });
            
            $.ajax({
                url: "{{ route('web.conversations.bulkChange') }}",
                type: 'POST',
                data: {
                    ids: conversationIds,
                    field: field,
                    value: value
                },
                dataType: "JSON",
                success: function (result2)
                {
                    if (result2.success == true) {
                        location.reload();
                    } else {
                    }
                }
            });
        }

        $(function() {
            $('.select2').select2({allowClear: true});

            $('.tagsFilter').select2({
                allowClear: true,
                delay: 250,
                minimumInputLength: 3,
                ajax: {
                    url: "{{ url('api/search-tags-dropdown') }}",
                    data: function (params) {
                        var query = {
                            keyword: params.term,
                            business_id: "{{ $business->id }}"
                        }

                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    }
                }
            });

            $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format('DD/MM/YYYY h:mm A'));
            });

            $('.row-actions').click(function(e) {
                e.stopPropagation();
                var action = $(this).attr('data-action');
                var conversationId = $(this).attr('data-conversation-id');
                if (action == 'mark-read') {
                    changeReadStatus(conversationId, '0');
                } else if (action == 'mark-unread') {
                    changeReadStatus(conversationId, '1');
                } else if (action == 'mark-closed') {
                    markAsClosed(conversationId);
                }
            });
            $('.select-conversation').click(function(e) {
                e.stopPropagation();
                selectedConversationsCount = $('.select-conversation').filter(':checked').length;
                if (selectedConversationsCount == 0) {
                    $('#select-to-activate').text("{{ __('user.select_a_chat_to_activate_options') }}");
                    $('.bulk-actions, .assigned-to').addClass('disabled');
                } else {
                    clearButton = `<a class="btn" id="clear-selection" title="{{ __('user.clear_selection') }}"><i class="fa fa-minus"></i></a>`;
                    $('#select-to-activate').html(clearButton + " " + selectedConversationsCount + " {{ __('user.selected') }}");
                    $('.bulk-actions, .assigned-to').removeClass('disabled');
                }
            });
            
            $(document).on('click', '#clear-selection', function() {
                $('.select-conversation').prop('checked', false);
                $('#select-to-activate').text("{{ __('user.select_a_chat_to_activate_options') }}");
                $('.bulk-actions, .assigned-to').addClass('disabled');
            });

            $(document).on('click', '.assign-to', function() {
                assignTo = $(this).attr('rel');
                $('.assign-to').removeClass('border-bottom');
                $(this).addClass('border-bottom');
                if (assignTo == 'all') {
                    $('.agent-row').show();
                    $('.team-row').show();
                } else if (assignTo == 'agents') {
                    $('.agent-row').show();
                    $('.team-row').hide();
                } else if (assignTo == 'teams') {
                    $('.agent-row').hide();
                    $('.team-row').show();
                }
            });

            $(document).on('click', '.agent_or_team, .bulk-actions', function() {
                bulkChange($(this).attr('data-type'), $(this).attr('rel'));
            });

            @if (isset($conversations[0]->id))
                openConversation({{ $conversations[0]->id }});
            @endif
        });
    </script>
@endpush