@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $currentDepartmentSlug = request('department', isset($department) ? $department->slug : null);
@endphp

@include('frontend.layouts.breadcrumb', ['title' => $pageProjectsTitle ?? 'Projects'])

<section class="tv-project-section inner space bg-light">
    <div class="container">
        <div class="title-wrap text-center">
            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>{{ $pageProjectsSubtitleLabel ?? 'Projects' }}</div>
            <h2 class="sec-title">{!! nl2br(e($pageProjectsHeading ?? 'Selected Case Studies')) !!}</h2>
            @if(!empty($pageProjectsIntro))
                <p class="mb-0">{{ $pageProjectsIntro }}</p>
            @endif
        </div>

        <div class="project-filter-buttons mb-40 mt-35">
            <div class="cms-project-filter-bar" aria-label="Project filters">
                <a class="cms-project-filter-button {{ $currentDepartmentSlug ? '' : 'active' }}" href="{{ route('frontend.projects.index', request()->except(['department', 'page'])) }}">
                    All Projects <span class="cms-project-filter-count">{{ $statistics['total_active'] ?? $projects->total() }}</span>
                </a>
                @foreach($departments as $department)
                    @php
                        $departmentQuery = array_merge(request()->except(['page']), ['department' => $department->slug]);
                    @endphp
                    <a class="cms-project-filter-button {{ $currentDepartmentSlug === $department->slug ? 'active' : '' }}" href="{{ route('frontend.projects.index', $departmentQuery) }}">
                        {{ $department->name }} <span class="cms-project-filter-count">{{ $department->projects_count }}</span>
                    </a>
                @endforeach
            </div>
        </div>

        <div class="row gy-40 image_load">
            @forelse($projects as $project)
                @php
                    $departmentClass = \Illuminate\Support\Str::slug($project->department?->name ?? 'business');
                    $fallbackImage = $assetPath('images/project/project0' . (($loop->iteration % 9) ?: 9) . '.webp');
                    $image = $project->featured_image ? asset('storage/' . $project->featured_image) : $fallbackImage;
                @endphp
                <div class="col-lg-4 col-md-6 col-sm-6 grid-item {{ $departmentClass }}">
                    <div class="project-single-box">
                        <div class="thumb cms-frame cms-frame--project-list">
                            <img class="img cms-img-cover" src="{{ $image }}" alt="{{ $project->title }}" width="416" height="320">
                        </div>
                        <div class="project-info">
                            <h4 class="title"><a href="{{ route('frontend.projects.show', $project->slug) }}">{{ $project->title }}</a></h4>
                            <div class="project-badge">
                                <span>{{ strtoupper($project->department?->name ?? $project->status_label ?? 'PROJECT') }}</span>
                                <span>{{ optional($project->updated_at)->format('d M, Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-lg-12">
                    <div class="cms-inotek-empty text-center">
                        <h3>No projects found</h3>
                        <p>Projects added from the admin side will appear here.</p>
                    </div>
                </div>
            @endforelse
        </div>

        <div class="cms-pagination">{{ $projects->appends(request()->query())->links() }}</div>
    </div>
</section>

@include('frontend.partials.newsletter')
@endsection