@extends('layout.frontend.master-layout')
@section('page-title')
    <title>
        {{ isset($mediaDetail->meta_title)  ? @$mediaDetail->meta_title . ' - '.  @$viewComposerSiteSetting->company_name : ucwords(@$mediaDetail->title) . ' - Golcha Green Energy' }}
    </title>
@endsection
@section('style')
@endsection
@section('main-content')
    <section>
        <div class="relative -mt-9">
            <div class="">
                <img class="max-xl:min-h-[450px] max-h-[768px] object-cover w-full" src="{{ asset(@$mediaDetail->image) }}"
                     alt="Blog Banner">
                <div
                    class="text-white z-1 absolute bottom-15 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full flex flex-col justify-center items-center">
                    <h1 class="max-xl:text-5xl max-lg:text-4xl max-sm:text-3xl h2 font-semibold mb-1 mx-30 max-md:mx-0 text-center">{{ ucwords(@$mediaDetail->title) }}</h1>
                </div>
            </div>
            <div class="absolute top-0 left-0 h-full w-full bg-black/30"></div>
        </div>
    </section>
    <section class="bg-black-dark py-24">
        <div class="container">
            <div class="mx-auto max-w-[768px]">
                <div class="flex justify-between pb-4">
                    <div class="text-light-5 text-sm">
                        {{ \Illuminate\Support\Carbon::parse(@$mediaDetail->post_date)->format('F d, Y') }}
                    </div>
                    {{--                    <div class="text-light-5 text-sm">News & Events</div>--}}
                </div>
                <div id="blogContent"
                     class="relative border-y border-y-brand-gray-1 pt-8 prose prose-invert w-full max-w-none py-12 pb-20 h-[650px] overflow-hidden transition-all duration-500">
                    {!! @$mediaDetail->description !!}
                    <div class="flex justify-center absolute bottom-8 left-0 w-full z-10">
                        <button id="readMoreBtn"
                                class="flex items-center gap-2 no-underline text-light-5 btn btn-primary btn-lg border-light-5">
                            Read Full Blog
                            <iconify-icon icon="mdi-light:arrow-down" class="text-xl"></iconify-icon>
                        </button>
                    </div>

                    <div id="gradientOverlay"
                         class="absolute bottom-0 left-0 h-80 w-full bg-gradient-to-t from-[#fff] to-transparent pointer-events-none transition-opacity duration-500"></div>

                </div>
            </div>
        </div>
    </section>
    @if(count($similarNews) > 0)
        <section class="py-20">
            <div class="container">
                <div class="flex items-center justify-between mb-8">
                    <h4 class="text-light-4 text-3xl font-medium max-sm:text-xl">Similar News</h4>
                    <a href="{{ route('frontend.media') }}"
                       class="flex items-center gap-2 no-underline text-light-5 btn btn-outline btn-lg border-light-5">
                        View All News
                        <iconify-icon icon="uit:arrow-up-right" class="text-xl"></iconify-icon>
                    </a>
                </div>
                <div class="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-10">
                    @forelse($similarNews as $news)
                        <div class="group overflow-hidden">
                            <a href="{{ route('frontend.mediaDetails',$news->slug) }}">
                                <img
                                    class="h-[300px] overflow-hidden object-cover max-md:h-[300px] transition-transform duration-500 ease-in-out group-hover:scale-110"
                                    src="{{ asset($news->image) }}" alt="Blog Image">
                            </a>
                            <div class="p-8 bg-brand-gray-2 space-y-2">
                                <a href="{{ route('frontend.mediaDetails',$news->slug) }}">
                                    <span class="text-sm font-semibold">{{ $news->mediaCategory->category }}</span>
                                </a>
                                <h5 class="text-xl font-semibold mt-2">
                                    <a href="{{ route('frontend.mediaDetails',$news->slug) }}">{{ $news->title }}</a>
                                </h5>
                                <span class="text-sm text-gray-400">
                         {{ \Illuminate\Support\Carbon::parse(@$news->post_date)->format('F d, Y') }}
                        </span>
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>
    @endif
@endsection
@section('script')
    @vite(['resources/js/frontend/pages/blogdetail.js'])
@endsection