@extends('layouts.app-admin')
@section('content')
<!--begin::Content-->
<!--begin::Layout-->
<div class="d-flex flex-column flex-lg-row">
	<!--begin::Sidebar-->
	<div class="flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10 mb-lg-0">
		<!--begin::Contacts-->
		<div class="card card-flush">
			<!--begin::Card header-->
			<div class="card-header pt-7" id="kt_chat_contacts_header">
				<h3>Chats</h3>
			</div>
			<!--end::Card header-->
			<!--begin::Card body-->
			<div class="card-body pt-5" id="kt_chat_contacts_body">
				<!--begin::List-->
				<div class="scroll-y me-n5 pe-5 h-200px h-lg-auto" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header" data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body" data-kt-scroll-offset="5px">
					<!--begin::User-->
					<div class="d-flex flex-stack py-4">
						<!--begin::Details-->
						<div class="d-flex align-items-center">
							<!--begin::Avatar-->
							<div class="symbol symbol-45px symbol-circle">
								<span class="symbol-label bg-light-danger text-danger fs-6 fw-bolder">J</span>
							</div>
							<!--end::Avatar-->
							<!--begin::Details-->
							<div class="ms-5">
								<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">John Doe</a>
								<div class="fw-bold text-muted">Tom</div>
							</div>
							<!--end::Details-->
						</div>
						<!--end::Details-->
						<!--begin::Lat seen-->
						<div class="d-flex flex-column align-items-end ms-2">
							<span class="text-muted fs-7 mb-1">2024-07-04</span>
						</div>
						<!--end::Lat seen-->
					</div>
					<!--end::User-->
					<!--begin::Separator-->
					<div class="separator separator-dashed d-none"></div>
					<!--end::Separator-->
					<!--begin::User-->
					<div class="d-flex flex-stack py-4">
						<!--begin::Details-->
						<div class="d-flex align-items-center">
							<!--begin::Avatar-->
							<div class="symbol symbol-45px symbol-circle">
								<span class="symbol-label bg-light-warning text-warning fs-6 fw-bolder">J</span>
							</div>
							<!--end::Avatar-->
							<!--begin::Details-->
							<div class="ms-5">
								<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">John Doe</a>
								<div class="fw-bold text-muted">David Lee</div>
							</div>
							<!--end::Details-->
						</div>
						<!--end::Details-->
						<!--begin::Lat seen-->
						<div class="d-flex flex-column align-items-end ms-2">
							<span class="text-muted fs-7 mb-1">2024-07-01</span>
						</div>
						<!--end::Lat seen-->
					</div>
					<!--end::User-->
					<!--begin::Separator-->
					<div class="separator separator-dashed d-none"></div>
					<!--end::Separator-->
				</div>
				<!--end::List-->
			</div>
			<!--end::Card body-->
		</div>
		<!--end::Contacts-->
	</div>
	<!--end::Sidebar-->
	<!--begin::Content-->
	<div class="flex-lg-row-fluid ms-lg-7 ms-xl-10">
		<!--begin::Messenger-->
		<div class="card" id="kt_chat_messenger">
			<!--begin::Card header-->
			<div class="card-header" id="kt_chat_messenger_header">
				<!--begin::Title-->
				<div class="card-title">
					<!--begin::User-->
					<div class="d-flex justify-content-center flex-column me-3">
						<a href="#" class="fs-4 fw-bolder text-gray-900 text-hover-primary me-1 mb-2 lh-1">John Doe | Tom</a>
						<!--begin::Info-->
						<div class="mb-0 lh-1">
							<span class="badge badge-success badge-circle w-10px h-10px me-1"></span>
							<span class="fs-7 fw-bold text-muted">Initiated: 2024-07-04</span>
						</div>
						<!--end::Info-->
					</div>
					<!--end::User-->
				</div>
				<!--end::Title-->
			</div>
			<!--end::Card header-->
			<!--begin::Card body-->
			<div class="card-body" id="kt_chat_messenger_body">
				<!--begin::Messages-->
				<div class="scroll-y me-n5 pe-5 h-300px h-lg-auto" data-kt-element="messages" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_messenger_header, #kt_chat_messenger_footer" data-kt-scroll-wrappers="#kt_content, #kt_chat_messenger_body" data-kt-scroll-offset="5px">
					<!--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::Avatar-->
								<div class="symbol symbol-35px symbol-circle">
									<img alt="Pic" src="assets/media/avatars/300-25.jpg" />
								</div>
								<!--end::Avatar-->
								<!--begin::Details-->
								<div class="ms-3">
									<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">John Doe</a>
									<span class="text-muted fs-7 mb-1">2024-07-04 14:00:17</span>
								</div>
								<!--end::Details-->
							</div>
							<!--end::User-->
							<!--begin::Text-->
							<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">
								<p class="mb-0">
                                    Hello, I'm interested in renting your property <a href="http://localhost/thouse/public/property-detail?id=6" target="_blank">Luxury Villa in Los Angeles</a>
                                </p>
							</div>
							<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start mt-1" data-kt-element="message-text">
								<p class="mb-0">
                                    Need it for a month
                                </p>
							</div>
							<!--end::Text-->
						</div>
						<!--end::Wrapper-->
					</div>
					<!--end::Message(in)-->
					<!--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">2024-07-04 16:00:17</span>
									<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">Tom</a>
								</div>
								<!--end::Details-->
								<!--begin::Avatar-->
								<div class="symbol symbol-35px symbol-circle">
									<img alt="Pic" src="assets/media/avatars/300-1.jpg" />
								</div>
								<!--end::Avatar-->
							</div>
							<!--end::User-->
							<!--begin::Text-->
							<div class="p-5 rounded bg-light-primary text-dark fw-bold mw-lg-400px text-end" data-kt-element="message-text">Hey there, we’re just writing to let you know that this property is currently unavailable.</div>
							<!--end::Text-->
						</div>
						<!--end::Wrapper-->
					</div>
					<!--end::Message(out)-->
				</div>
				<!--end::Messages-->
			</div>
			<!--end::Card body-->
		</div>
		<!--end::Messenger-->
	</div>
	<!--end::Content-->
</div>
<!--end::Layout-->
@endsection