@extends('layouts.admin')
@section('style')
    <style>
        .timeline-item .panel {
            border-radius: 10px !important;
        }

        .timeline-desk .panel {
            margin-bottom: 15px !important;
        }

        .timeline:before {
            display: none !important;
        }

        .timeline-icon {
            -webkit-border-radius: 50%;
            background: var(--tz-secondary-color);
            border-radius: 50%;
            color: #fff;
            display: inline-block;
            height: 20px;
            text-align: center;
            width: 20px;
        }

        .timeline-icon i {
            color: #fff;
            font-size: 13px;
            margin-top: 1px;
            right: 3px;

        }

        .box-img img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        .box-img {
            height: 50px;
        }


        .box-img-message img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        .box-img-message {
            height: 50px;
        }






        .box-img-modal img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        .box-img-modal {
            height: 500px;
        }
    </style>
@endsection
@section('content')
    {{--  <nav aria-label="breadcrumb">
        <ol class="breadcrumb  py-0">
            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('messages.Home') }}</a></li>
            <li class="breadcrumb-item" aria-current="page"><a
                    href="{{ route('admin.orders.index') }}">{{ __('messages.Orders') }}</a></li>
            <li class="breadcrumb-item" aria-current="page"><a
                    href="{{ route('admin.orders.show', $order->id) }}">{{ $order->order_num }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ __('messages.Offer Details') }}</li>
        </ol>
    </nav>  --}}
    <!-- Start Content-->
    <div class="container-fluid">



        {{--  End Parts Show  --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="div card-header bg-light-subtle ">

                        <div>
                            <h5 class="">{{ __('messages.Messages') }} </h5>
                        </div>

                        {{--  <div class="d-flex  justify-content-end">
                            <div class="div">
                                <span class="timeline-icon mt-1 mx-2"><i class="mdi mdi-record-circle-outline"></i></span>
                                <span>{{ __('messages.User') }}</span>
                            </div>
                            <div class="div">
                                <span class="timeline-icon bg-success  mt-1 mx-2"><i
                                        class="mdi mdi-record-circle-outline"></i></span>
                                <span>{{ __('messages.Doctor') }}</span>
                            </div>
                        </div>  --}}
                    </div>



                    <div class="card-body">
                        @if (!count($chat->messages))
                            <div class="text-center">
                                <img src="{{ asset('assets/images/empty_data.svg') }}" height="300" width="300">
                            </div>
                            <div class="text-center h3 text-dark">
                                {{ __('messages.There are no messages') }} :(
                            </div>
                        @else
                            <div class="timeline" dir="ltr">
                                @foreach ($chat->messages as $message)
                                    <article class="timeline-item @if ($message->user_id != $chat->customer_id) alt @endif  ">
                                        <div class="timeline-desk">
                                            <div class="panel">
                                                <div class="timeline-box">
                                                    <span
                                                        class="@if ($message->user_id != $chat->customer_id) arrow-alt @else arrow @endif"></span>
                                                    <span
                                                        class="timeline-icon @if ($message->user_id !=  $chat->customer_id) bg-success @endif  "><i
                                                            class="mdi mdi-record-circle-outline"></i></span>
                                                    <h4 class="fs-16 fw-semibold ">
                                                        {{ date('Y-m-d', strtotime($message->created_at)) }}</h4>
                                                    <p class="timeline-date text-muted">
                                                        <small>{{ date('H:i a', strtotime($message->created_at)) }}</small>
                                                    </p>
                                                    @if ($message->type == "prescription")
                                                        <p class="mb-1 text-danger">
                                                           <strong> {{ __("messages.A prescription added by the doctor") }}</strong>
                                                        </p>
                                                    @endif


                                                    @if ($message->type == 'text')
                                                        <p>{{ $message->message }}</p>
                                                      
                                                    @else
                                                    @php
                                                        $ext_file =  \App\Http\Helper\HelperApp::get_extension_file($message->message);
                                                    @endphp
                                                        <div class="border border-dark p-1" style="border-radius: 5px">
                                                            <div class="d-flex justify-content-between">
                                                                <div class="div">
                                                                    <a href="{{ $message->message }}" download="download">
                                                                        <img width="50px" height="50px"
                                                                            src="{{ asset('assets/images/download_icon.png') }}">
                                                                    </a>
                                                                </div>
                                                                <div class="div">
                                                                    @if ($ext_file=="docx")
                                                                        <img width="50px" height="50px"  src="{{ asset('assets/images/icon_chat_docx.png') }}">
                                                                    @elseif ($ext_file=="pdf")
                                                                        <img width="50px" height="50px"  src="{{ asset('assets/images/icon_chat_pdf.png') }}">
                                                                    @elseif ($ext_file=="m4a")
                                                                        <audio controls>
                                                                            {{--  <source src="horse.ogg" type="audio/ogg">  --}}
                                                                            <source src="{{ $message->message }}" type="audio/x-m4a">
                                                                            <source src="{{ $message->message }}" type="audio/x-m4a">
                                                                          Your browser does not support the audio element.
                                                                        </audio>

                                                                    @else
                                                                        <div class="box-img-message">
                                                                            <img   data-bs-toggle="modal"
                                                                            data-bs-target="#modal_imgae_size_large" style="cursor: pointer" class="image-part" src="{{ $message->message }}">
                                                                        </div>

                                                                    @endif


                                                                </div>

                                                            </div>

                                                        </div>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach

                            </div>
                            <!-- end timeline -->
                        @endif
                    </div>
                </div>
                <!-- end card -->
            </div>
        </div>
        <!-- end row -->

        <div class="modal fade" id="modal_imgae_size_large" tabindex="-1" role="dialog"
            aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 10px !important">
                    <div class="modal-header">
                        {{--  <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>  --}}
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="box-img-modal">
                            <img class="image-part-modal">
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    @endsection

    @section('script')
        <script>
            $(function() {
                $(".image-part").click(function() {
                    var img_src = $(this).attr("src");
                    $(".image-part-modal").attr("src", img_src)

                })

            })
        </script>
    @endsection