@extends('layouts.back-end.app')

@section('title',\App\CPU\translate('Chatting Page'))

@section('content')
    <div class="content container-fluid">
        <!-- Page Title -->
        <div class="mb-3">
            <h2 class="h1 mb-0 text-capitalize d-flex align-items-center gap-2">
                <img src="{{asset('/public/assets/back-end/img/support-ticket.png')}}" alt="">
                {{\App\CPU\translate('Chatting_List')}}
            </h2>
        </div>
        <!-- End Page Title -->

        <!-- Page Content-->
        <div class="row">
            @if(isset($chattings_user))
                <div class="col-xl-3 col-lg-4 chatSel">
                    <div class="card card-body px-0 h-100">
                        <div class="media align-items-center px-3 gap-3 mb-4">
                            <div class="avatar avatar-sm avatar-circle">
                                <img class="avatar-img" onerror="this.src='{{ asset('public/assets/front-end/img/image-place-holder.png') }}'" src="{{asset('storage/app/public/seller/')}}/{{auth('admin')->user()->image}}" alt="Image Description">
                                <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                            </div>
                            <div class="media-body">
                                <h5 class="profile-name mb-1">{{ auth('admin')->user()->name }}</h5>
                                <span class="fz-12">{{\App\CPU\translate('super_admin')}}</span>
                            </div>
                        </div>

                        <div class="inbox_people">
                            <form class="search-form px-3" id="chat-search-form">
                                <div class="search-input-group">
                                    <i class="tio-search search-icon" aria-hidden="true"></i>
                                    <input
                                        class=""
                                        id="myInput" type="text"
                                        placeholder="{{\App\CPU\translate('Search_delivery_man...')}}"
                                        aria-label="Search customers...">
                                </div>
                            </form>

                            <div class="inbox_chat d-flex flex-column mt-1">
                                @foreach($chattings_user as $key => $chatting)
                                    <div class="list_search">
                                        <div class="chat_list p-3 d-flex gap-2 user_{{$chatting->delivery_man_id}} seller-list @if ($key == 0) active @endif"
                                             id="{{$chatting->delivery_man_id}}" data-name="{{$chatting->f_name}} {{$chatting->l_name}}" data-phone="{{ $chatting->phone }}">
                                            <div class="chat_people media gap-10" id="chat_people">
                                                <div class="chat_img avatar avatar-sm avatar-circle">
                                                    <img src="{{ asset('storage/app/public/delivery-man/'.$chatting->image) }}" id="{{$chatting->delivery_man_id}}" onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'" class="avatar-img avatar-circle">
                                                    <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                                                </div>
                                                <div class="chat_ib media-body">
                                                    <h5 class="mb-1 seller @if($chatting->seen_by_admin)active-text @endif"
                                                        id="{{$chatting->delivery_man_id}}" data-name="{{$chatting->f_name}} {{$chatting->l_name}}" data-phone="{{ $chatting->phone }}">
                                                        {{$chatting->f_name}} {{$chatting->l_name}}
                                                        <br><span class="mt-2 font-weight-normal text-muted" id="{{$chatting->delivery_man_id}}" data-name="{{$chatting->f_name}} {{$chatting->l_name}}" data-phone="{{ $chatting->phone }}">{{ $chatting->phone }}</span>
                                                    </h5>
                                                </div>
                                            </div>

                                            @if($chatting->seen_by_admin == 0)
                                                <div class="message-status bg-danger" id="notif-alert-{{ $chatting->delivery_man_id }}"></div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <section class="col-xl-9 col-lg-8 mt-4 mt-lg-0">
                    <div class="card card-body card-chat justify-content-between Chat">
                        <!-- Inbox Message Header -->
                        <div class="inbox_msg_header d-flex flex-wrap gap-3 justify-content-between align-items-center border px-3 py-2 rounded mb-4">
                            <!-- Profile -->
                            <div class="media align-items-center gap-3">
                                <div class="avatar avatar-sm avatar-circle">
                                    <img class="avatar-img" id="profile_image" src="{{ asset('storage/app/public/delivery-man/'.$chattings_user[0]->image) }}" onerror="this.src='{{ asset('public/assets/front-end/img/image-place-holder.png') }}'" alt="Image Description">
                                    <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                                </div>
                                <div class="media-body">
                                    <h5 class="profile-name mb-1" id="profile_name">{{ $chattings_user[0]->f_name.' '.$chattings_user[0]->l_name }}</h5>
                                    <span class="fz-12" id="profile_phone">{{ $chattings_user[0]->phone }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- End Inbox Message Header -->

                        <div class="messaging">
                            <div class="inbox_msg">
                                <!-- Message Body -->
                                <div class="mesgs">
                                    <div class="msg_history d-flex flex-column-reverse" id="show_msg">
                                        @foreach($chattings as $key => $message)
                                                @if ( $message->sent_by_delivery_man)
                                                    <div class="incoming_msg">
                                                        <div class="received_msg">
                                                            <div class="received_withd_msg">
                                                                <p class="bg-chat rounded px-3 py-2 mb-1">
                                                                    {{$message->message}}
                                                                </p>
                                                                <span class="time_date fz-12"> {{$message->created_at->format('h:i A')}}    |    {{$message->created_at->format('M d')}} </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="outgoing_msg">
                                                        <div class="sent_msg">
                                                            <p class="bg-c1 text-white rounded px-3 py-2 mb-1">
                                                                {{$message->message}}
                                                            </p>
                                                            <span class="time_date fz-12 d-flex justify-content-end"> {{$message->created_at->format('h:i A')}}    |    {{$message->created_at->format('M d')}} </span>
                                                        </div>
                                                    </div>
                                            @endif
                                        @endForeach
                                    </div>
                                    <div class="type_msg">
                                        <div class="input_msg_write">
                                            <form class="mt-4" id="myForm">
                                                @csrf
                                                <input type="text" id="hidden_value" hidden
                                                       value="{{$last_chat->delivery_man_id}}" name="">

                                                <textarea
                                                    class="form-control h-120"
                                                    id="msgInputValue"
                                                    type="text" placeholder="{{\App\CPU\translate('Send a message')}}"
                                                    aria-label="Search"></textarea>
                                                <div class="mt-3 d-flex justify-content-end">
                                                    <button class="aSend btn btn--primary" type="submit" id="msgSendBtn">{{\App\CPU\translate('Send_Reply')}}</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Message Body -->
                            </div>
                        </div>
                    </div>

                </section>

            @else
                <div class="offset-md-1 col-md-10 d-flex justify-content-center align-items-center">
                    <p>{{\App\CPU\translate('No conversation found')}}</p>
                </div>
            @endif

        </div>


    </div>

@endsection

@push('script')
    <script>
        function messageGet(e){
            e.stopPropagation();
            user_id = e.target.id;
            let customer_name = $(e.target).attr('data-name');
            let customer_phone = $(e.target).attr('data-phone');
            let customer_image = $('#'+user_id).attr('src');

            $('#profile_name').text(customer_name)
            $('#profile_phone').text(customer_phone)
            $('#profile_image').attr("src", customer_image)

            //active when click on seller
            $('.chat_list.active').removeClass('active');
            $(`.user_${user_id}`).addClass("active");
            $('.seller').css('color', 'black');
            $(`.user_${user_id} h5`).css('color', '#377dff');

            let url ="{{ route('admin.delivery-man.ajax-message-by-delivery-man') }}" +"?delivery_man_id=" + user_id;

            $.ajax({
                type: "get",
                url: url,

                success: function (data) {
                    $('.msg_history').html('');
                    $('.chat_ib').find('#' + user_id).removeClass('active-text');
                    //$(".msg_history").stop().animate({scrollTop: $(".msg_history")[0].scrollHeight}, 1000);

                    if (data.length != 0) {
                        data.map((element, index) => {
                            let dateTime = new Date(element.created_at);
                            let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                            let time = dateTime.toLocaleTimeString().toLowerCase();
                            let date = month[dateTime.getMonth().toString()] + " " + dateTime.getDate().toString();

                            if (element.sent_by_admin) {
                                $(".msg_history").prepend(`
                                      <div class="outgoing_msg" id="outgoing_msg">
                                        <div class='sent_msg'>
                                          <p class="bg-c1 text-white rounded px-3 py-2 mb-1">${element.message}</p>
                                          <span class='time_date'> ${time}    |    ${date}</span>
                                        </div>
                                      </div>`
                                )

                            } else {
                                $(".msg_history").prepend(`
                                      <div class="incoming_msg" id="incoming_msg">
                                        <div class="incoming_msg_img" id="">
                                          <img src="${window.location.origin}/storage/app/public/profile/${element.image}" class="__rounded-10" alt="">
                                        </div>
                                        <div class="received_msg">
                                          <div class="received_withd_msg">
                                            <p class="bg-chat rounded px-3 py-2 mb-1" id="receive_msg">${element.message}</p>
                                          <span class="time_date fz-12"> ${time}    |    ${date}</span></div>
                                        </div>
                                      </div>`
                                )
                            }

                            $('#hidden_value').attr("value", user_id);
                            $('#notif-alert-'+user_id).hide();
                        })
                    } else {
                        $(".msg_history").html(`<p> {{\App\CPU\translate('No Message available')}} </p>`);
                        data = [];
                    }

                }
            });

            $('.type_msg').css('display', 'block');
        }

        $(document).ready(function () {
            var user_id;

            //$(".msg_history").stop().animate({scrollTop: $(".msg_history")[0].scrollHeight}, 1000);

            $(".seller").click(function (e) {
                messageGet(e);
            });
            $(".seller-list").click(function (e) {
                messageGet(e);
            });

            $("#myInput").on("keyup", function (e) {
                var value = $(this).val().toLowerCase();
                $(".list_search").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });

            //Chat Search Form
            $('#chat-search-form').on('submit', function(e) {
                e.preventDefault();
            });

            $("#msgSendBtn").click(function (e) {
                e.preventDefault();
                // get all the inputs into an array.
                var delivery_man_id = $('#hidden_value').val();
                var inputs = $('#myForm').find('#msgInputValue').val();

                let data = {
                    message: inputs,
                    delivery_man_id: delivery_man_id
                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });

                $.ajax({
                    type: "post",
                    url: "{{ route('admin.delivery-man.ajax-admin-message-store') }}",
                    data: data,
                    success: function (respons) {
                        let dateTime = new Date(respons.time);
                        let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                        let time = dateTime.toLocaleTimeString().toLowerCase();
                        let date = month[dateTime.getMonth().toString()] + " " + dateTime.getDate().toString();

                        $(".msg_history").prepend(`
                                  <div class="outgoing_msg" id="outgoing_msg">
                                    <div class='sent_msg'>
                                      <p class="bg-c1 text-white rounded px-3 py-2 mb-1"">${respons.message}</p>
                                      <span class='time_date'> now </span>
                                    </div>
                                  </div>`
                        )
                    }
                });
                //scrolling
                //$(".msg_history").stop().animate({scrollTop: $(".msg_history")[0].scrollHeight}, 200);
                //remove value from input box
                $('#myForm').find('#msgInputValue').val('');
            });
        });
    </script>

@endpush