@extends('admin.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">

        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <h3>Chat History to: {{$message->course_name}} Course</h3>
                </div>
            </div>
            <div class="card-body">
                <!----------------- new ----------------->
                <div class="messages_content">
                    <div class="day text-center">
                        <span>{{date('d M', strtotime($message->created_at))}}</span>
                    </div>
                    <div class="l_msg">
                        <div class="cont">
                            <h6 class="user_name text-right">{{$message->user_name}}</h6>
                            <div class="msg_cnt">{{$message->message}}</div>
                        </div>
                        <img class="user_img" src="{{asset($message->user_photo ?? 'uploads/avatar.png')}}" alt="">
                    </div>
                    @if($message->message_file)
                        <div class="l_msg">
                            <img class="msg_img" src="{{asset($message->message_file)}}" alt="">
                        </div>
                    @endif

                    @foreach($replies as $reply)
                        @if($reply->user_id == $message->user_id)
                            <div class="l_msg">
                                <h6 class="user_name text-right">{{$reply->user_name}}</h6>
                                <div class="msg_cnt">{{$reply->message}}</div>
                                <img class="user_img" src="{{asset($reply->user_photo ?? 'uploads/avatar.png')}}" alt="">
                            </div>
                            @if($reply->message_file)
                                <div class="l_msg">
                                    <img class="msg_img" src="{{asset($reply->message_file)}}" alt="">
                                </div>
                            @endif
                        @else
                            <div class="r_msg">
                                <img class="user_img" src="{{asset($reply->user_photo ?? 'uploads/avatar.png')}}" alt="">
                                <div class="cont">
                                    <h6 class="user_name text-left">{{$reply->user_name}}</h6>
                                    <div class="msg_cnt">{{$reply->message}}</div>
                                </div>
                            </div>
                            @if($reply->message_file)
                                <div class="r_msg">
                                <!--<h6 class="user_name text-left">{{$reply->user_name}}</h6>-->
                                    <img class="msg_img" src="{{asset($reply->message_file)}}" alt="">
                                </div>
                            @endif
                        @endif

                    @endforeach
                </div>

                @if($message->send_to == 'admin')
                    <div class="replay_btn text-center">
                        <a href="#0" class="butn" data-target="#replay_msg" data-toggle="modal"><span>رد على الرسائل </span></a>
                    </div>
                    <div class="modal fade reply_message_model" id="replay_msg" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="n_msg">
                                        <form class="form-row add_reply_message_form">
                                            @csrf()
                                            <input type="hidden" name="users_message_id">
                                            <div class="form-group col-lg-12">
                                                <label>رد</label>
                                                <textarea name="message" class="form-control" rows="6" placeholder="تفاصيل الرساله"></textarea>
                                            </div>

                                            <div class="row col-12 balign">
                                                {{--Start image container--}}
                                                <div class="form-group col-lg-4 text-center mb-0">
                                                    <label>{{__('users.upload_image')}}</label>
                                                    <input id="reply_message_file_image_thumbnail" class="reply_message_file_image_thumbnail" type="hidden" name="message_file" value="{{old("reply_message_file")}}"/>

                                                    <div class="photos reply_message_file_main_photo {{ old('reply_message_file') ? ' wow fadeInUp' : 'hide' }}">
                                                        <div class="col-lg-12">
                                                            <div class="items mb-1">
                                                                <div class="img">
                                                                    <a href="#" id="lfm" data-input=".reply_message_file_image_thumbnail" data-preview=".reply_message_file_image_holder" class="lfm" data-hide=".reply_message_file_pick_button">
                                                                        <img src="{{asset(old('reply_message_file'))}} "  id="reply_message_file_image_holder" class="reply_message_file_image_holder"/>
                                                                    </a>
                                                                </div>
                                                                <a href="#" class="showHide resetImage close" data-empty=".reply_message_file_image_thumbnail" data-hide=".reply_message_file_main_photo" data-show=".reply_message_file_pick_button"><i class="fas fa-times"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="clearfix"></div>
                                                    <span class="input-group-btn pick_button {{ old('reply_message_file') ? 'hide' : '' }} ">
                                                    <a id="lfm" data-input=".reply_message_file_image_thumbnail" data-preview=".reply_message_file_image_holder" data-show=".reply_message_file_main_photo" data-hide=".reply_message_file_pick_button" class="lfm btn btn-primary text-light">
                                                        <i class="fas fa-camera-retro"></i> أختر صورة
                                                    </a>
                                                </span>
                                                </div>
                                                {{--End image container--}}
                                                <div class="form-group col-lg-8 mb-0">
                                                    <div class="row">
                                                        <div class="col-lg-12 text-right">
                                                            <button type="reset" class="butn" data-dismiss="modal"><span> <i class="far fa-times-circle"></i> ألغاء</span></button>
                                                            <button type="submit" class="butn color add_reply_message_button"><span> <i class="far fa-paper-plane"></i> أرسال</span></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

    </div>

@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>
        let addReplyMessageRote = "{{route('usersMessages.addReplyMessage')}}",
            users_message_id = "{{$message->id}}";

        $(document).on('click', '.add_reply_message_button', async function (e) {
            e.preventDefault();
            let form = $('.add_reply_message_form'),
                data = new FormData(form[0]),
                url = addReplyMessageRote,
                method = 'post';

            data.append('users_message_id', users_message_id);

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }
            if (response.message) {
                toasterSuccess(response.message);
                $('.add_reply_message_form').trigger('reset');
                $('#replyUploadImg').addClass('d-none');
                $('.reply_message_model').modal('hide');
                setTimeout(function () {
                    window.location.reload()
                }, 100);
            }
        });

    </script>

@endsection