@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@section('content')

@push('custom-css')
<style>
    /* Keep "Read More" pinned to the bottom of every card, regardless of how much
       content a given project has, so buttons stay aligned across a row. */
    .page-blog .post-item { height: 100%; display: flex; flex-direction: column; }
    .page-blog .post-item-body { display: flex; flex-direction: column; flex: 1 1 auto; }
    .page-blog .post-item-content { flex: 1 1 auto; }
    .page-blog .post-item-btn { margin-top: auto; }
</style>
@endpush
    <!--begin::Content-->

    <div class="main-container">
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <section class="container-fluid" style="background-color: #F0F9DC;padding-top: 50px">
            <div class="row">
                <div class="col-md-10 m-auto ">
                    <div class="row align-items-stretch">
                        <div class="col-md-12 d-flex flex-column justify-content-center text-center">
                            <div style="color: #BA744A;font-size: 34px;text-align: center;font-weight: bold;">{!! $page->title !!}</div>

                        </div>
                        <!-- Rigt column with text + image -->
                        <div class="col-md-12 d-flex">
                            <div class="mt-3">
                                <div style="color:#FF5757;line-height: 1.3;" class="mb-3">
                                    <div style="font-size: 20px;color: #232323 ;text-align: center;">

                                        {!! $page->body !!}

                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- Right column with long text -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Page Blog Start -->
        <div class="page-blog mt-3">
            <div class="container">
                <div class="row">

                    @foreach($projects as $project)
                        <div class="col-xl-4 col-md-6">
                            <!-- Post Item Start -->
                            <div class="post-item wow fadeInUp">

                                <!-- Post Featured Image Start-->
                                <div class="post-featured-image">
                                    <a href="{{ route('projects.show', $project->slug) }}" data-cursor-text="View">
                                        <figure class="image-anime" style="height: 260px; overflow: hidden; border-radius: 12px;">
                                            <img src="{{ $project->image_url }}"
                                                alt="{{ $project->project_name }}"
                                                loading="lazy" decoding="async"
                                                style="width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 12px;"
                                                onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                                        </figure>
                                    </a>

                                    <div class="post-item-tags">
                                        @if($project->program)
                                            <a href="{{ route('programs.show', $project->program->slug) }}">
                                                {{ $project->program->icon }} {{ $project->program->title }}
                                            </a>
                                        @else
                                            <a href="{{ route('projects.show',$project->slug) }}">Project</a>
                                        @endif
                                    </div>
                                </div>
                                <!-- Post Featured Image End -->

                                <!-- Post Item Body Start -->
                                <div class="post-item-body">
                                    <div class="post-item-content">
                                        <h2>
                                            <a href="{{ route('projects.show',$project->slug) }}">
                                                {{ $project->project_name }}
                                            </a>
                                        </h2>
                                    </div>

                                    <div class="post-item-btn mb-3">
                                        <a href="{{ route('projects.show',$project->slug) }}" class="readmore-btn subscribe">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                                <!-- Post Item Body End -->

                            </div>
                            <!-- Post Item End -->
                        </div>
                    @endforeach

                    <div class="col-lg-12">
                        <!-- Page Pagination Start -->
                        <div class="page-pagination wow fadeInUp" data-wow-delay="0.4s">
                            {{ $projects->links('vendor.pagination.default') }}
                        </div>
                        <!-- Page Pagination End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Blog End -->

    </div>
    <!--end::Content-->
@endsection