@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 {background-color:#fff}
        .chat-conversation::-webkit-scrollbar, .main-chat-container::-webkit-scrollbar {width:8px;background-color:#fff}
        .chat-conversation::-webkit-scrollbar-thumb, .main-chat-container::-webkit-scrollbar-thumb {background-color:#a2adb7; border-radius: 7px;}

        .main-chat-container {
            border-radius: 0px;
            box-shadow: none;
            background: transparent;
        }
    </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" aria-current="page" href="{{ route('web.conversations.chats') }}">@lang('user.all_chats')</a>
                </li>
                <li class="nav-item">
                   <a class="nav-link active">@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.messages')</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('direction', ['' => __('user.direction'), '1' => __('user.outgoing'), '2' => __('user.incoming')], request()->input('direction'), ['class' => 'form-control select2', 'data-placeholder' => __('user.direction')]) !!}
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                {!! Form::select('type', ['' => __('user.message_type'), '0' => __('user.text'), '1' => __('user.image'), '2' => __('user.video'), '3' => __('user.document')], request()->input('type'), ['class' => 'form-control select2', 'data-placeholder' => __('user.message_type')]) !!}
                                            </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">
                                                <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.messages') }}" 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>@lang('user.contact')</th>
                                                    <th>@lang('user.message')</th>
                                                    <th>@lang('user.date')</th>
                                                    <th>@lang('user.actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($messages as $message)
                                                    <tr id="messages-{{ $message->id }}"
                                                        onclick="openConversation({{ $message->conversation_id }}, {{ $message->id }})">
                                                        <td>
                                                            <div class="float-start me-2">
                                                                <img width="24" src="{{ $message->conversation->contact->image_url ?? '' }}" class="mt-2" />
                                                            </div>
                                                            <div class="float-start">
                                                                {{ $message->conversation->contact->name }}<br>
                                                                {{ $message->conversation->contact->mobile }}
                                                            </div>
                                                        </td>
                                                        <td>{{ $message->message }}</td>
                                                        <td>{{ $message->datetime->format('d M y h:i A') ?? '' }}</td>
                                                        <td>
                                                            @if ($message->conversation->contact->channel == 1)
                                                                <button type="button" title="@lang('user.go_to_chat')"
                                                                    onclick="location.href='{{ route('web.conversations.new', $message->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
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        {{ $messages->links('vendor.pagination.custom') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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 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, messageId)
        {
            $('#chats table tbody tr').removeClass('selected');
            $('#messages-' + messageId).addClass('selected');
            $('#msg_history').html(spinner);
            $.getJSON('{{url("conversations")}}/' + id + '/1', function(data){
                $('#msg_history').html(data.content);
                document.getElementById('message-' + messageId).scrollIntoView();
            });
        }

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

            $('#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();
            });

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