@extends('layouts.master')
@section('title',trans('dashboard.users'))
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_assets/app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_asstes/app-assets/vendors/css/forms/selects/select2.min.css')}}">
    <style>
        .overflow-y{
            overflow-y:auto !important;
        }
        #chat3 .form-control {
            border-color: transparent;
        }

        #chat3 .form-control:focus {
            border-color: transparent;
            box-shadow: inset 0px 0px 0px 1px transparent;
        }
        #chat-section{
            height: 120vh;
        }
        .left-chat{
            height: 100vh;
            position: relative;

        }
    </style>
        @if(\Illuminate\Support\Facades\App::getLocale()=='ar')

       <style>
           .badge-dot {
               border-radius: 50%;
               height: 10px;
               width: 10px;
               margin-left: 2.9rem;
               margin-top: -.75rem;
           }

       </style>

        @else

        <style>
            .badge-dot {
                border-radius: 50%;
                height: 10px;
                width: 10px;
                margin-left: 2.9rem;
                margin-top: -.75rem;
            }
        </style>
        @endif
@endsection
@section('page-content')

    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                    <h3 class="content-header-title mb-0 d-inline-block">@lang('dashboard.users')</h3>
                    <div class="row breadcrumbs-top d-inline-block">
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">@lang('dashboard.users')</a>
                                </li>
                                <li class="breadcrumb-item"><a href="{{route('admin.showChats',$primary_user->id)}}">@lang('dashboard.users_t_chatted_with_them')</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- File export table -->
                <section id="file-export">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h3>@lang('dashboard.show_chat')</h3>

                                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                    <div class="heading-elements">
                                        <ul class="list-inline mb-0">
                                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                                        </ul>
                                    </div>


                                </div>

                                <div class="card-content collapse show">
                                    <div class="card-body card-dashboard">
                                        <section  class="bg-gray-white" id="chat-section">
                                            <div class="container py-5 full-height ">

                                                <div class="row full-height">
                                                    <div class="col-md-12 full-height">

                                                        <div class="card full-height shadow" id="chat3" style="border-radius: 15px;">
                                                            <div class="card-body full-height">

                                                                <div class="row">

                                                                    <div class="col-12">

                                                                        <div class="pt-3 pe-3 overflow-y left-chat" data-mdb-perfect-scrollbar="true">

                                                                            @foreach($messages as $message)
                                                                                @if($message->rid == $primary_user->id)
                                                                                    <div class="d-flex flex-row justify-content-start">
                                                                                        <img src="{{asset($message->send_user->pic)}}"
                                                                                             alt="avatar 1" style="width: 45px;height: 8vh;border-radius: 50%">
                                                                                        <div>

                                                                                            @if($message->mtype =='AUDIO')
                                                                                                <audio controls>
                                                                                                    <source src="{{asset($message->image)}}" type="audio/ogg">
                                                                                                    <source src="{{asset($message->image)}}" type="audio/mpeg">
                                                                                                    <source src="{{asset($message->image)}}" type="audio/mp3">

                                                                                                    Your browser does not support the audio element.
                                                                                                </audio>

                                                                                            @elseif($message->mtype =='IMAGE')
                                                                                                <div style="width: 100%;height: 20vh;">
                                                                                                    <img src="{{asset($message->image)}}" style="width: 100%;max-width: 100%;height: 100%;max-height: 100%">
                                                                                                </div>

                                                                                            @else
                                                                                                <p class=" p-2 ms-3 mb-1 rounded-3 bg-info bg-accent-1">
                                                                                                    {{$message->msg}}
                                                                                                </p>
                                                                                            @endif
                                                                                            <p class="small ms-3 mb-3 rounded-3 text-muted float-end">
                                                                                               {{date('Y/m/d h:i a', strtotime($message->date))}}
                                                                                            </p>
                                                                                        </div>
                                                                                    </div>
                                                                                @else
                                                                                    <div class="d-flex flex-row justify-content-end">
                                                                                        <div>
                                                                                            @if($message->mtype =='AUDIO')
                                                                                                <audio controls>
                                                                                                    <source src="{{asset($message->image)}}" type="audio/ogg">
                                                                                                    <source src="{{asset($message->image)}}" type="audio/mpeg">
                                                                                                    <source src="{{asset($message->image)}}" type="audio/mp3">

                                                                                                    Your browser does not support the audio element.
                                                                                                </audio>

                                                                                            @elseif($message->mtype =='IMAGE')
                                                                                                <div style="width: 100%;height: 20vh;">
                                                                                                    <img src="{{asset($message->image)}}" style="width: 100%;max-width: 100%;height: 100%;max-height: 100%">
                                                                                                </div>

                                                                                            @else
                                                                                                <p class=" p-2 ms-3 mb-1 rounded-3 bg-info white-color">
                                                                                                    {{$message->msg}}
                                                                                                </p>
                                                                                            @endif
                                                                                            <p class="small me-3 mb-3 rounded-3 text-muted">
                                                                                                {{date('Y/m/d h:i a', strtotime($message->date))}}
                                                                                            </p>
                                                                                        </div>
                                                                                        <img src="{{asset($message->send_user->pic)}}"
                                                                                             alt="avatar 1" style="width: 45px; height: 8vh;border-radius: 50%">
                                                                                    </div>
                                                                                @endif
                                                                            @endforeach


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

                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>

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

@endsection
@section('js')
    <!-- BEGIN VENDOR JS-->
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/vendors.min.js')}}" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/datatable/datatables.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js')}}"
            type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/buttons.flash.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/jszip.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/pdfmake.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/vfs_fonts.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/buttons.html5.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/vendors/js/tables/buttons.print.min.js')}}" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <!-- BEGIN MODERN JS-->
    <script src="{{asset('dashboard_assets/app-assets/js/core/app-menu.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/js/core/app.js')}}" type="text/javascript"></script>
    <script src="{{asset('dashboard_assets/app-assets/js/scripts/customizer.js')}}" type="text/javascript"></script>
    <!-- END MODERN JS-->
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="{{asset('dashboard_assets/app-assets/js/scripts/tables/datatables/datatable-advanced.js')}}"
            type="text/javascript"></script>
    <!-- END PAGE LEVEL JS-->
@endsection