@extends('layouts.user')
@section('page-title', 'Message')
@section('page-title-body', 'Message')
@section('active-link-6', 'active-link')

@section('main-theme')

<div id="chat-list-user">
  @foreach($messages as $data)
  <article class="btnread {{$data->status == 0 ? 'unreaded' : 'readed'}}" data-id="{{$data->id}}" data-names="{{$data->name}}" data-phone="{{$data->phone}}" data-email="{{$data->email}}" data-region="{{$data->region}}" data-message="{{$data->message}}" data-type="{{$data->types}}">
    <section class="user-img-avatar"><img src="{{ asset('media/images/user.png')}}"></section>
    <section class="user-name-log">
        <h2>{{$data->name}}</h2>
        <p>{{Str::limit($data->message, 40)}}</p>
        <h6 class="conv-time">{{date_format(date_create($data->created_at), 'd M Y')}}</h6>
    </section>
  </article>
  @endforeach
</div>

<div id="default-chat-container">
    <div class="default-chat-container" id="no-chat-area">
        <img src="{{ asset('media/images/user.png')}}">
        <h2>{{Auth::user()->name}}</h2>
        <h4>Please select a query to start read messages.</h4>
    </div>

    <div class="default-chat-container-msg display-none" id="chat-area">
            <div class="user-bar">
                <section class="avatar">
                    <img src="{{asset("media/images/user.png")}}" alt="Avatar">
                </section>
                <section class="user-chat-details">
                    <h2>User name goes here</h2>
                    <h3 class='user-details-email'>Email</h3>
                    <h3 class='user-details-phone'>phone number</h3>
                    <h4>message type</h4>
                </section>
                <section class="user-chat-details-mean">
                    <h3 class='user-details-date'>12 Jan 2022</h3>
                    <h4 class='user-details-region'>Kigoma</h4>
                </section>
            </div>
            <div class="conversation-container">

            </div>
        </div>
    </div>
</div>

@endsection

<!-- js script -->
@push('scripts')
<script>
    $(function(){

        //add-testmonial
        //

        $(document).on('click', '.btnread', function(){

            let id = $(this).data('id');
            let message = $(this).data('message');
            let phone = $(this).data('phone');
            let email = $(this).data('email');
            let dates = $(this).data('dates');
            let names = $(this).data('names');
            let region = $(this).data('region');
            let types = $(this).data('type');

            $('.default-chat-container-msg .user-chat-details h2').text(names);
            $('.default-chat-container-msg .user-chat-details h4').text(types);
            $('.default-chat-container-msg .user-chat-details .user-details-email').text(email);
            $('.default-chat-container-msg .user-chat-details .user-details-phone').text(phone);

            $('.default-chat-container-msg .user-chat-details h3').text(dates);
            $('.default-chat-container-msg .user-chat-details h4').text(region);

            $('.default-chat-container-msg .conversation-container').text(message);

            $('.default-chat-container').css({"display":"none"});
            $('.default-chat-container-msg').css({"display":"block"});
            
            $(this).addClass('readed');

            $.ajax({
                url:"../../readed-message/"+id,
                dataType:"text",
                success:function(data){
                    console.log(data);
                }
            });
        });

    });

</script>
@endpush