@php $titlePage = __('lang.messages') @endphp
@extends('dashboard.layouts.master')
@section('title')
    {{ $titlePage }}
@stop
@section('content')
    <div class="page-content-wrapper stores">
        <div class="page-content">
            <div class="page-head">
                <div class="page-title">
                    <h1>{{ $titlePage }}</h1>
                </div>
            </div>
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">{{ __('lang.dashboard') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.drivers') }}">{{ __('lang.drivers') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.drivers.show', $data->id) }}">{{ $data->username }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span class="active">{{ $titlePage }}</span>
                </li>
            </ul>
            <div class="row">
                <div class="col-md-12">
                    {{-- Include Messages Flash --}}
                    @include('includes.flash_msg')
                    <div class="row">
                        <div class="col-md-12">
                            <div class="portlet light bordered">
                                <div class="portlet-title tabbable-line">
                                    <div class="caption caption-md">
                                        <i class="icon-globe theme-font hide"></i>
                                        <span class="caption-subject font-blue-madison bold uppercase">{{ $titlePage }}</span>
                                    </div>
                                </div>
                                <div class="portlet-body form">
                                    <div style="padding: 0;" class="form-body form_add form_product">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="messaging">
                                                    <div class="inbox_msg">
                                                        <div class="mesgs">
                                                            <div class="msg_history">
                                                                <div class="reverse_rotate">
                                                                    @forelse($messages as $get)
                                                                        @if($get->fromDriver())
                                                                            <div class="incoming_msg">
                                                                                <div class="incoming_msg_img">
                                                                                    <img src="{{ asset($get->driver->image ?? 'images/user.png') }}" alt="{{ $get->driver->username }}">
                                                                                </div>
                                                                                <div class="received_msg">
                                                                                    <div class="received_withd_msg">
                                                                                        <p>{!! nl2br($get->message) !!}</p>
                                                                                        <span class="time_date">{{ $get->created_at->diffForHumans() }}</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @else
                                                                            <div class="outgoing_msg">
                                                                                <div class="sent_msg">
                                                                                    <p>{!! nl2br($get->message) !!}</p>
                                                                                    <span class="time_date">{{ $get->created_at->diffForHumans() }}</span>
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @empty
                                                                        <div class="no_messages">{{ __('lang.no_messages') }}</div>
                                                                    @endforelse
                                                                </div>
                                                            </div>
                                                            <div class="type_msg">
                                                                <div class="input_msg_write">
                                                                    <textarea class="write_msg" id="writeMessage" placeholder="Type a message"></textarea>
{{--                                                                    <button class="msg_send_btn" hidden type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>--}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('css')
    <link rel="stylesheet" href="{{ asset('admin/assets/css/chat.css') }}">
@stop

@section('js')
    <script>
        scrollingChatBox();

        let writeMessage = $('#writeMessage');
        $(document).on('keyup bind change', '#writeMessage', function (e) {
            let Self = $(this);
            if($(this).val().trim().length) {
                // Display Send Button
                $('.msg_send_btn').attr('hidden', false);
                // Check if clicked on enter key only not enter and shift key
                if (e.keyCode == 13 && !e.shiftKey) {
                    let Message = Self.val();
                    // Append Message
                    $('.reverse_rotate').append('<div class="outgoing_msg"><div class="sent_msg">' +
                        '<p>' + nl2br(Self.val().trim()) + '</p>' +
                        '<span class="time_date">الأن</span>' +
                        '</div></div>');
                    // Empty This
                    Self.val('');
                    $.ajax({
                        url: '{{ route('dashboard.drivers.messages.store', $data->id) }}',
                        type: 'post',
                        dataType: 'json',
                        data: {'message': Message, _token: '{{ csrf_token() }}'},
                        success: function (res) {
                            if(res.status === true) {
                                // Callback Fn Scrolling
                                scrollingChatBox();
                            }
                        }
                    });
                }
            } else {
                $('.msg_send_btn').attr('hidden', true);
            }
        });


        function scrollingChatBox() {
            var element = $('.reverse_rotate');
            $('.msg_history').scrollTop(element.height());
        }

        function nl2br (str, is_xhtml) {
            if (typeof str === 'undefined' || str === null) {
                return '';
            }
            var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
            return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
        }
    </script>
@stop