@extends('admin.layout.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/css-rtl/core/colors/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/css-rtl/pages/app-user.css')}}">
    <style>
        .card{
            display:flex;
            flex-direction: column;
            max-height: 500px;
            overflow-x:auto
        }

        .card::-webkit-scrollbar {
            background-color: transparent;
            width: 15px;
        }
        .card::-webkit-scrollbar-track {
            background-color: transparent;
        }
        .card::-webkit-scrollbar-thumb {
            border-radius: 20px;
            border: 4px solid transparent;
            background-color: #C2C6DC ;
            background-clip: content-box;
        }
        .message{
            width: fit-content;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0
        }
        .message {
            background: #262c49;
            color:#EBEEFD
        }
        .message.left{
            background: #C2C6DC;
            color: #262c49;
            align-self: end;
        }
        .time{
            text-align:left;
        }
    </style>
@endsection

@section('content')

    <div class="content-body">

        <!-- page users view start -->
        <section class="page-users-view">
            <h6 class="text-center mb-2"> {{ awtTrans('محادثة بين العميل و مقدم الخدمة') }} </h6>
            <div class="row">

                <!-- information start -->
                <div class="col-md-12 col-12 ">
                    <div class="card  p-1">
                        @if($room)
                            @foreach($room->messages as $message)
                                @if($room->userone_id == $message->sender_id)
                                    <div  class="message">
                                        <div> {{ $message->content}} </div>
                                        <div class="time">{{ date('h:i A', strtotime($message->created_at)) }} </div>
                                    </div>

                                @else
                                    <div   class="message left">
                                        <div> {{ $message->content}} </div>
                                        <div class="time"> {{ date('h:i A', strtotime($message->created_at)) }} </div>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <h6 class="text-center mb-2"> {{  awtTrans('لا يوجد رسائل بعد') }} </h6>
                        @endif
                    </div>
                </div>



            </div>
        </section>
        <!-- page users view end -->

    </div>
    <!-- END: Content-->
@endsection


@section('js')


@endsection