@extends('frontend.layout.site')

@section('title', $project->title)

@section('content')
<!-- Project Detail Start -->
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">

            {{-- <!-- Featured Image -->
            @if($project->featured_image)
            <div class="text-center mb-4 wow fadeIn" data-wow-delay=".2s">
                <img src="{{ asset('storage/' . $project->featured_image) }}" alt="{{ $project->title }}" class="img-fluid rounded shadow">
            </div>
            @endif --}}

            <!-- Title & Icon (optional) -->
            <div class="text-center mb-4 wow fadeIn" data-wow-delay=".4s">
                @if($project->icon)
                    <i class="{{ $project->icon }} fa-5x text-primary mb-3"></i>
                @endif
                <h1 class="display-5 fw-bold">{{ $project->title }}</h1>
                @if($project->short_description)
                    <p class="lead text-muted">{{ $project->short_description }}</p>
                @endif
            </div>

            <!-- Long Description -->
            <div class="project-description mb-5 wow fadeIn" data-wow-delay=".6s">
                {!! $project->long_description !!}
            </div>

            <!-- Related Projects -->
            @php
                $relatedProjects = \App\Models\Project::where('id', '!=', $project->id)
                                    ->orderBy('created_at', 'desc')
                                    ->take(4)
                                    ->get();
            @endphp

            @if($relatedProjects->count() > 0)
            <div class="text-center mb-4 wow fadeIn" data-wow-delay="1s">
                <h5 class="text-primary">Other Projects</h5>
                <h2>Explore More Projects</h2>
            </div>

            <div class="row g-4">
                @foreach($relatedProjects as $p)
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay=".{{ $loop->iteration }}s">
                    <div class="card h-100 shadow-sm">
                        {{-- @if($p->featured_image)
                            <img src="{{ asset('storage/' . $p->featured_image) }}" class="card-img-top" alt="{{ $p->title }}">
                        @endif --}}
                        <div class="card-body text-center">
                            @if($p->icon)
                                <i class="{{ $p->icon }} fa-3x text-primary mb-2"></i>
                            @endif
                            <h5 class="card-title mt-2">{{ $p->title }}</h5>
                            <p class="card-text">{{ Str::limit(strip_tags($p->short_description), 80) }}</p>
                            <a href="{{ route('projects.show', ['slug' => $p->slug]) }}" class="btn btn-primary btn-sm rounded-pill">Read More</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif

        </div>
    </div>
</div>
<!-- Project Detail End -->

@push('scripts')
<script src="/csstemplate/assets/frontend/lib/owlcarousel/owl.carousel.min.js"></script>
@endpush

@endsection