@extends('layouts.app')

@section('content')
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
    <!--begin::Card-->
    <div class="card">
        <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
                <span class="card-label fw-bolder fs-3 mb-1">{{ $ticket->subject}}</span>
            </h3>
        </div>
        <div class="card-body py-4">
            <!--begin::Card body-->
            <div class="card-body" id="kt_drawer_chat_messenger_body">
                <!--begin::Messages-->
                <div class="scroll-y me-n5 pe-5" data-kt-element="messages" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer" data-kt-scroll-wrappers="#kt_drawer_chat_messenger_body" data-kt-scroll-offset="0px">
                    <!--begin::Message(in)-->
                    @foreach ($messageList as $message)
                        @if ($message->client_id != 0)
                            <!--begin::Message(out)-->
                            <div class="d-flex justify-content-end mb-10">
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-column align-items-end">
                                    <!--begin::User-->
                                    <div class="d-flex align-items-center mb-2">
                                        <!--begin::Details-->
                                        <div class="me-3">
                                            <span class="text-muted fs-7 mb-1">{{$message->time}}</span>
                                            <a class="fs-5 fw-bold text-gray-900 text-hover-primary ms-1">{{$user->name}}</a>
                                        </div>
                                        <!--end::Details-->
                                    </div>
                                    <!--end::User-->
                                    <!--begin::Text-->
                                    <div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text">{{$message->message}}</div>
                                    <!--end::Text-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Message(out)-->
                        @else
                        <!--begin::Message(in)-->
                            <div class="d-flex justify-content-start mb-10">
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-column align-items-start">
                                    <!--begin::User-->
                                    <div class="d-flex align-items-center mb-2">
                                        
                                        <!--begin::Details-->
                                        <div class="ms-3">
                                            <a class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">Support manager</a>
                                            <span class="text-muted fs-7 mb-1">{{$message->time}}</span>
                                        </div>
                                        <!--end::Details-->
                                    </div>
                                    <!--end::User-->
                                    <!--begin::Text-->
                                    <div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">{{$message->message}}</div>
                                    <!--end::Text-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Message(in)-->                         
                        @endif
                    @endforeach
                    
                </div>
                <!--end::Messages-->
            </div>
            <!--end::Card body-->

            <div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
                <form action="{{route('tickets.sendMessage')}}"  method="POST">
                <!--begin::Input-->
                <input type="hidden" name="ticket_id" value="{{$ticket->ticket_id}}">
                <textarea class="form-control form-control-flush mb-3" rows="2" data-kt-element="input" placeholder="Type a message" name="message"></textarea>
                <!--end::Input-->
                <!--begin:Toolbar-->
                <div class="d-flex flex-stack">
                    <!--begin::Send-->
                    <button class="btn btn-primary btn-sm" type="submit" data-kt-element="send">Send</button>
                    <!--end::Send-->
                </div>
                <!--end::Toolbar-->
                </form>
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
</div>
<!--end::Content container-->

@endsection