@extends('user.layout')
@section('title', 'Page Title')
@section('content')
    <div class="container-fluid p-0">
        <div class="card border-0 rounded-0 overflow-hidden">
            <img class="card-img img-fluid rounded-0 w-100" src="{{ optimizedImageUrl('project-category', $category->image, 1600) }}" srcset="{{ optimizedImageSrcset('project-category', $category->image, 1600) }}" sizes="100vw" fetchpriority="high" decoding="async" alt="{{ $category->name }}" title="{{ $category->name }}" style="max-height: 100vh;" />

            <div class="card-img-overlay text-white d-flex flex-column justify-content-center px-lg-5" style="background: rgba(0, 0, 0, 0.5);">
                <p class="card-text mb-0">#{{ str_replace(' ', '', config('app.name')) }}</p>
                <h1 class="card-title h2">{{ $category->name }}</h1>
            </div>
        </div>
    </div>

    <div class="container-fluid container-md my-5">
        <p class="mb-1 fw-semibold secondary">LATEST DESIGN</p>
        <h3 class="mb-4 fw-bolder">Featured Projects</h3>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 justify-content-center g-4">
            @foreach ($projects as $p_key => $project)
                <div class="col">
                    <div class="card border-0 overflow-hidden h-100">
                        <div class="overflow-hidden">
                            <img class="card-img-top img-fluid w-100" src="{{ optimizedImageUrl('project', @$project->galleries->first()->image, 960) }}" srcset="{{ optimizedImageSrcset('project', @$project->galleries->first()->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $project->name }}" title="{{ $project->name }}" style="height: 200px;" />
                        </div>

                        <div class="card-body d-flex flex-column justify-content-between">
                            <div>
                                <h5 class="card-title text-justify secondary">{{ $project->name }}</h5>
                                <div class="text-justify">{!! excerpt($project->description, 250) !!}</div>
                            </div>
                            <a class="btn button-effect stretched-link" href="{{ route('project-details', [$project->projectCategory->slug, $project->slug]) }}" role="button">
                                <span>View Projects</span>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <hr class="container secondary opacity-100 border-3 scroll-reveal">

    <div class="container-fluid container-md px-2 px-lg-5 mt-4 mb-5 scroll-reveal">
        <p class="mb-0 fw-semibold primary">Powered by engineers</p>
        <h3 class="mb-4 fw-bolder">News & Blog:</h3>

        <div class="row row-cols-1 row-cols-lg-2 g-4">
            <div class="col">
                @foreach ($blogs->take(3) as $blog)
                    <div class="card border-0 overflow-hidden mb-3">
                        <div class="row row-cols-1 row-cols-md-2 g-0">
                            <div class="col">
                                <div class="overflow-hidden">
                                    <img class="card-img-top img-fluid" src="{{ optimizedImageUrl('blog', $blog->image, 960) }}" srcset="{{ optimizedImageSrcset('blog', $blog->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $blog->title }}" title="{{ $blog->title }}" style="max-height: 137px;" />
                                </div>
                            </div>

                            <div class="col">
                                <div class="card-body pb-1 pt-2">
                                    <p class="card-text mb-2 fs-small fw-semibold text-muted">{{ $blog->created_at->format('d/m/Y') }}</p>
                                    <h6 class="card-title text-justify secondary">{{ excerpt($blog->title, 70) }}</h6>
                                    <a class="btn button-effect stretched-link fw-semibold" href="{{ route('blog-details', $blog->slug) }}" role="button"><span>See More</span><span class="visually-hidden">: {{ $blog->title }}</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($blogs->count() >= 4)
                @php $lastBlog = $blogs[3]; @endphp

                <div class="col">
                    <div class="card border-0 overflow-hidden">
                        <div class="overflow-hidden">
                            <img class="card-img-top img-fluid" src="{{ optimizedImageUrl('blog', $lastBlog->image, 960) }}" srcset="{{ optimizedImageSrcset('blog', $lastBlog->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $lastBlog->title }}" title="{{ $lastBlog->title }}" style="max-height: 290px;" />
                        </div>

                        <div class="card-body">
                            <p class="card-text mb-2 fs-small fw-semibold text-muted">{{ $lastBlog->created_at->format('d/m/Y') }}</p>
                            <h5 class="card-title text-justify secondary">{{ $lastBlog->title }}</h5>
                            <a class="btn button-effect stretched-link fw-semibold" href="{{ route('blog-details', $lastBlog->slug) }}" role="button"><span>See More</span><span class="visually-hidden">: {{ $lastBlog->title }}</span></a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    @foreach ($projects as $project)
        <script type="application/ld+json">
            {
              "@context": "https://schema.org",
              "@type": "CreativeWork",
              "name": {!! json_encode($project->name) !!},
              "headline": {!! json_encode(Str::limit($project->name, 110)) !!},
              "description": {!! json_encode(strip_tags(Str::limit($project->description, 200))) !!},
              "url": "{{ route('project-details', [$project->projectCategory->slug, $project->slug]) }}",
              "image": "{{ asset('storage/project/' . @$project->firstGallery->image) }}",
              "author": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "url": "{{ route('about') }}"
              },
              "publisher": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "logo": {
                  "@type": "ImageObject",
                  "url": "{{ asset('images/Triangle-BD-Favicon.png') }}"
                }
              },
              "datePublished": "{{ $project->created_at->toW3cString() }}",
              "dateModified": "{{ $project->updated_at->toW3cString() }}",
              "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ route('project-details', [$project->projectCategory->slug, $project->slug]) }}"
              }
            }
        </script>
        
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "Article",
                "headline": {!! json_encode(Str::limit($project->name, 110)) !!},
                "description": {!! json_encode(strip_tags(Str::limit($project->description, 200))) !!},
                "image": "{{ asset('storage/project/' . @$project->firstGallery->image) }}",
                "author": {
                    "@type": "Organization",
                    "name": "{{ config('app.name') }}",
                    "url": "{{ route('about') }}"
                },
                "publisher": {
                    "@type": "Organization",
                    "name": "{{ config('app.name') }}",
                    "logo": {
                        "@type": "ImageObject",
                        "url": "{{ asset('images/Triangle-BD-Favicon.png') }}"
                    }
                },
                "datePublished": "{{ $project->created_at->toIso8601String() }}",
                "dateModified": "{{ $project->updated_at->toIso8601String() }}",
                "mainEntityOfPage": {
                    "@type": "WebPage",
                    "@id": "{{ route('project-details', [$project->projectCategory->slug, $project->slug]) }}"
                }
            }
        </script>
    @endforeach
@endpush