@extends('layout.frontend.master-layout')
@section('page-title')
    <title>
        {{ isset($projectDetail->meta_title)  ? @$projectDetail->meta_title . ' - '.  @$viewComposerSiteSetting->company_name : ucwords(@$projectDetail->title) . ' - Golcha Green Energy' }}
    </title>
@endsection
@section('style')
@endsection

@section('main-content')
    <section class="relative min-h-[450px] rounded-2xl overflow-hidden m-2">
        <div class="absolute inset-0">
            <img class="w-full h-full object-cover" src="{{ asset(@$projectDetail->banner_image) }}" alt="">
        </div>

        <div class="absolute top-0 left-0 w-full h-full bg-brand-dark-1/30 pt-[10em]">
            <h1 class="text-center h1 text-brand-green-3 font-bold max-sm:text-4xl">
                {{ @$projectDetail->title }}
            </h1>
            <div class="text-center text-light-1 mt-4">
                <a href="{{ route('frontend.home') }}">Home</a> <span> > </span> <a
                    href="{{ route('frontend.project') }}">Projects</a> <span> > </span> {{ @$projectDetail->title }}
            </div>
        </div>
    </section>

    <section class="py-[120px] max-xl:py-[100px]">
        <div class="container">
            <div class="grid grid-cols-2 items-end max-lg:grid-cols-1 max-lg:gap-y-4">
                <div class="pr-10">
                    <h2 class="text-5xl font-semibold text-brand-dark-1 max-xl:text-4xl max-sm:text-3xl">
                        {{ @$projectDetail->title }}
                    </h2>
                </div>
                <p class="text-brand-dark-1">
                    {{ strip_tags(@$projectDetail->short_description) }}
                </p>
            </div>

            <div class="max-h-[500px] overflow-hidden mt-16 rounded-2xl group rounded-2xl">
                <img class="transition-transform duration-500 ease-in-out group-hover:scale-110"
                     src="{{ asset(@$projectDetail->image) }}" alt="">
            </div>
            @if(isset($projectDetail->highlights))
                <div class="mx-auto bg-brand-green-5 px-[120px] rounded-2xl mt-4 max-xl:px-10 max-sm:py-8">
                    <ul class="flex justify-between max-sm:flex-col">
                        @forelse(json_decode($projectDetail->highlights) as $highlight)
                            <li class="text-center py-10 max-sm:py-4">
                                <h4 class="text-4xl mb-3 font-bold text-brand-green-3 max-lg:text-2xl">{{ $highlight->title }}</h4>
                                <span class="text-white text-lg"> {{ $highlight->value }}</span>
                            </li>
                        @empty
                        @endforelse
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-2 max-lg:grid-cols-1 max-lg:gap-y-10 gap-x-20 mt-24">
                <div>
                    <h3 class="text-3xl font-semibold border-b border-b-brand-gray-1 mb-8 pb-4 max-md:text-2xl">Project Overview</h3>
                    <div>
                        {{ strip_tags(@$projectDetail->project_overview) }}
                    </div>
                </div>
                <div>
                    <img class="" src="{{ asset(@$projectDetail->side_image) }}" alt="">
                </div>
            </div>
        </div>
    </section>
    @if(count($projectDetail->projectGallery) > 0)
        <section>
            <div class="container">
                <h3 class="text-3xl font-semibold border-b border-b-brand-gray-1 mb-8 pb-4 text-center">Project Gallery</h3>
                <div class="grid gap-6 grid-cols-6 max-md:gap-4 max-lg:grid-cols-4 max-md:grid-cols-3">
                    @forelse($projectDetail->projectGallery as $key => $gallery)
                        <a href="{{ asset('assets/uploads/gallery_image/'.$gallery->gallery_image) }}"
                           data-fancybox="gallery"
                           data-caption="Caption #{{ $key+1 }}"
                           class="group"
                        >
                            <img class="h-full object-cover overflow-hidden rounded-xl transition-transform duration-500 ease-in-out group-hover:scale-105" src="{{ asset('assets/uploads/gallery_image/'.$gallery->gallery_image) }}"/>
                        </a>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>
    @endif
    @include('frontend.include._contact-bottom-part')
@endsection
@section('script')
    @vite(['resources/js/frontend/pages/project.js'])
@endsection