@extends('layouts.app')
@section('titlePage', 'Manage Page')
@section('content')
@push('script')
<script>
    document.getElementById("draz-12").classList.add("is-expanded");
    document.getElementById("dra-12").classList.add("active","is-expanded");
    document.getElementById("view-12").classList.add("active");
</script> 
@endpush
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="breadcrumb-header justify-content-between">
	<h4 class="text-primary font-weight-bold py-3 mb-0">BLOGS</h4>
		<div class="justify-content-center mt-2">
			<ol class="breadcrumb breadcrumb-style3">
				<li class="breadcrumb-item tx-15"><a href="{{ route('master.master-blogs.blogs.index')}}"><i class="feather icon-home"></i></a></li>
				<li class="breadcrumb-item active">View blogs</li>
			</ol>
		</div>
	</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	@php $img = $data['image_url']; @endphp
	<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
		<div class="card overflow-hidden">
			<div class="card-body">
				<div class="pd-x-0 pd-sm-x-80">
					<h2 class="mb-1">{{ucfirst($data['title'])}}</h2>
					<!-- <p class="tx-muted mb-0">Accusam diam ut no labore est sed invidunt kasd tempor accusam. Eos amet takimata dolores no, sit stet ipsum vero. Dolore tempor dolor vero invidunt lorem stet. Ipsum at duo erat aliquyam sadipscing, elitr lorem sed voluptua vero dolore sit.</p> -->
				</div>
				<div class="my-4">
					<img src="{{asset($img)}}" alt="img" class="cover-image radius-4 w-100 ht-300">
				</div>
				<div class="pd-x-0 pd-sm-x-80">
					<div class="d-sm-flex d-block align-items-center tx-muted mb-3">
						<div class="d-flex align-items-center me-4 mb-3 mb-sm-0">
							<!-- <span class="ms-2 tx-14">by <a href="javascript:void(0);" class="tx-inverse tx-italic">Kristie Morgan</a></span> -->
						</div>
						<span><i class="fe fe-calendar me-2 tx-14"></i>{{date_format($data['created_at'],"d-M-Y")}}</span>
					</div>
					<div class="mb-4">
						{!!$data['description']!!}
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="card">
			<div class="card-header">
				<div class="card-title">
					Comments
				</div>
			</div>
			<div class="card-body">
				<div class="d-block d-sm-flex pb-2 border-bottom-dashed">
					<img alt="avatar" class="avatar mg-b-10 mg-sm-b-0 rounded-circle" src="../assets/img/users/4.jpg">
					<div class="mg-sm-s-10 flex-1">
						<h6 class="mg-b-5 font-weight-semibold">Joanne Scott</h6>
						<p class="mb-0 tx-12 tx-muted">Amet sadipscing et et gubergren sit, at diam ipsum at duo sanctus.</p>
						<div class="mt-1">
							<div class="flex-between">
								<div class="btn-list">
									<a href="javascript:void(0);" class="btn btn-sm btn-primary-light btn-rounded"><i class="fe fe-corner-up-left me-1 tx-13 d-inline-block"></i>Reply</a>
									<a href="javascript:void(0);" class="btn btn-sm btn-warning-light tx-warning btn-rounded"><i class="fe fe-alert-triangle me-1 tx-13 d-inline-block"></i>Report</a>
								</div>
								<div class="btn-list d-flex align-items-center">
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="helpful"><i class="fe fe-thumbs-up"></i></a>
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="not helpful"><i class="fe fe-thumbs-down"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="d-block d-sm-flex pb-2 border-bottom-dashed mt-3">
					<img alt="avatar" class="avatar mg-b-10 mg-sm-b-0 rounded-circle" src="../assets/img/users/6.jpg">
					<div class="mg-sm-s-10 flex-1">
						<h6 class="mg-b-5 font-weight-semibold">Julia Max</h6>
						<p class="mb-0 tx-12 tx-muted">Labore sit no tempor rebum sanctus sea aliquyam. Amet sadipscing et et gubergren sit, at diam ipsum at duo sanctus.</p>
						<div class="mt-1">
							<div class="flex-between">
								<div class="btn-list">
									<a href="javascript:void(0);" class="btn btn-sm btn-primary-light btn-rounded"><i class="fe fe-corner-up-left me-1 tx-13 d-inline-block"></i>Reply</a>
									<a href="javascript:void(0);" class="btn btn-sm btn-warning-light tx-warning btn-rounded"><i class="fe fe-alert-triangle me-1 tx-13 d-inline-block"></i>Report</a>
								</div>
								<div class="btn-list d-flex align-items-center">
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="helpful"><i class="fe fe-thumbs-up"></i></a>
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="not helpful"><i class="fe fe-thumbs-down"></i></a>
								</div>
							</div>
							<div class="d-block d-sm-flex mg-t-10">
								<img alt="avatar" class="avatar mg-b-10 mg-sm-b-0 rounded-circle" src="../assets/img/users/11.jpg">
								<div class="mg-sm-s-10 flex-1">
									<h6 class="mg-b-5 font-weight-semibold">Socret Mals
										<span class="tx-14 ms-0" data-bs-toggle="tooltip" title="verified"><i class="fe fe-check-circle tx-success tx-12"></i></span>
									</h6>
									<p class="mb-0 tx-12 tx-muted">Et lorem sit vero sit. Vero magna dolores dolor duo. Eirmod sea diam.</p>
									<div class="mt-1">
										<div class="flex-between">
											<div class="btn-list">
												<a href="javascript:void(0);" class="btn btn-sm btn-primary-light btn-rounded"><i class="fe fe-corner-up-left me-1 tx-13 d-inline-block"></i>Reply</a>
												<a href="javascript:void(0);" class="btn btn-sm btn-warning-light tx-warning btn-rounded"><i class="fe fe-alert-triangle me-1 tx-13 d-inline-block"></i>Report</a>
											</div>
											<div class="btn-list d-flex align-items-center">
												<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="helpful"><i class="fe fe-thumbs-up"></i></a>
												<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="not helpful"><i class="fe fe-thumbs-down"></i></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="d-block d-sm-flex mt-3">
					<img alt="avatar" class="avatar mg-b-10 mg-sm-b-0 rounded-circle" src="../assets/img/users/8.jpg">
					<div class="mg-sm-s-10 flex-1">
						<h6 class="mg-b-5 font-weight-semibold">Samatha Fae</h6>
						<p class="mb-0 tx-12 tx-muted">Dolor sadipscing ut rebum dolores labore voluptua. Et erat dolor.</p>
						<div class="mt-1">
							<div class="flex-between">
								<div class="btn-list">
									<a href="javascript:void(0);" class="btn btn-sm btn-primary-light btn-rounded"><i class="fe fe-corner-up-left me-1 tx-13 d-inline-block"></i>Reply</a>
									<a href="javascript:void(0);" class="btn btn-sm btn-warning-light tx-warning btn-rounded"><i class="fe fe-alert-triangle me-1 tx-13 d-inline-block"></i>Report</a>
								</div>
								<div class="btn-list d-flex align-items-center">
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="helpful"><i class="fe fe-thumbs-up"></i></a>
									<a href="javascript:void(0);" class="p-2 tx-inverse" data-bs-toggle="tooltip" title="not helpful"><i class="fe fe-thumbs-down"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->

	</div>
	<!-- [ Main Content ] end -->
</div>
@endsection