@php

    $blog_view              = HelpDesk::getPostMeta(optional($blog)->id,'blog_view') ?? 0;
    $total_post_views       = $blog_start_view + $blog_view;

    $blog_options           = ThemeOption::GetBlogOptionById(optional($blog)->id);

    $website_url = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'website_url',optional($blog)->id);
    $start_date = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'start_date',optional($blog)->id);
    $end_date = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'end_date',optional($blog)->id);
    $gallery_section_title = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'gallery_section_title',optional($blog)->id);
    $gallery_section_description = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'gallery_section_description',optional($blog)->id);
    $portfolio_gallery = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'portfolio_gallery',optional($blog)->id);
    $portfolio_gallery_images = explode(',', $portfolio_gallery);
    $cpt_category = optional($blog)->blog_categories->pluck('slug')->implode(',');

@endphp

<div class="main-banner overflow-hidden z-0 h-full">
	<div class="container-full">
		<div class="relative after:content-[''] after:absolute after:-bottom-200 after:left-0 after:w-700 after:h-700 after:bg-black after:blur-[308px]">
			<div class="sm:min-h-600 max-h-screen">
				<img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img" class="size-full object-cover sm:min-h-600 min-h-300 duration-1000 scale-200 image-zoom">
			</div>
		</div>
	</div>
</div>
<!-- Section description -->	
<section class="lg:pt-133 pt-10">
	<div class="container">
		<div class="grid grid-cols-12">
			<div class="lg:col-span-7 col-span-12">
				<h3 class="text-[31px]/[65px] font-semibold capitalize">Description</h3>
				<p class="text-xl font-normal mb-20">{!! $blog->content !!}</p>
			</div>
			<div class="lg:col-span-5 sm:col-span-8 col-span-12">
				<div class="sm:p-40 p-20 sm:pb-64 dark:bg-white/10 bg-black/10 rounded-2lg xl:ml-170 lg:ml-50 max-lg:mt-20 mb-40">
					<h3 class="text-2xl/35 font-semibold capitalize dark:text-white text-black mb-27">Project Details</h3>
					<ul >
						<li>
							<ul class="flex items-center border-b border-black/10 dark:border-white/10 py-10 ">
								<li class="capitalize text-base font-medium w-1/2 dark:text-white">Category</li>
								<li class="text-base font-normal dark:text-white/50 text-[#333] text-left w-1/2">{{ $cpt_category ? $cpt_category : 'Not Available'}}</li>
							</ul>
							<ul class="flex items-center border-b border-black/10 dark:border-white/10 py-10">
								<li class="capitalize text-base font-medium w-1/2 dark:text-white">Website</li>
								<li class="text-base overflow-hidden text-ellipsis font-normal dark:text-white/50 text-[#333] text-left w-1/2">
									<a href="{{ @$website_url }}">{{ @$website_url }}</a>
								</li>
							</ul>
							<ul class="flex items-center border-b border-black/10 dark:border-white/10 py-10">
								<li class="capitalize text-base font-medium w-1/2 dark:text-white">Start Date</li>
								<li class="text-base font-normal dark:text-white/50 text-[#333] text-left w-1/2">{{ @$start_date }}</li>
							</ul>
							<ul class="flex items-center border-b border-black/10 dark:border-white/10 py-10">
								<li class="capitalize text-base font-medium w-1/2 dark:text-white">End Date</li>
								<li class="text-base font-normal dark:text-white/50 text-[#333] text-left w-1/2">{{ @$end_date }}</li>
							</ul>
							
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Section description End -->	

<!-- section Design -->
<section class="xxl:pb-120 sm:pb-50 pb-30">
	<div class="container">
		<div class="mb-40">
			<h1 class="md:text-5xl text-4xl font-semibold sm:mb-35 mb-15">{{ @$gallery_section_title }}</h1>
			<p class="text-lg font-normal max-w-800">{{ @$gallery_section_description }}</p>
		</div>	
		<div class="masonry-grid row" id="lightgallery">
			<div class="grid-sizer w-1/2"></div>
			@foreach ($portfolio_gallery_images as $image)	
			<div class="card-container w-1/2 mb-30">
				<div class="relative overflow-hidden group dlab-img-overlay1">
					<a href="javascript:void(0);">
						<img src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$image) }}" class="size-full object-cover rounded-2lg" alt="/">
					</a>
					<div class="absolute left-0 bottom-0 size-full text-center z-10 lg:opacity-0 lg:invisible duration-[0.2s] group-hover:opacity-100 group-hover:visible">
						<div class="text-white text-3xl absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
							<a href="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$image) }}" data-src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$image) }}" class="mfp-link lg-item">
								<i class="fa-solid fa-arrows-up-down-left-right"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
			@endforeach
		</div>
	</div>
</section>
<!-- section Design End -->
