@extends('layouts.frontend')

@section('title', $project->title . ' – Skyline International')
@section('meta_description', $project->meta_description ?: strip_tags($project->short_description))

@section('content')
    <section class="project-detail-hero">
        <img class="" src="{{ \App\Services\FileUploadService::url($project->featured_image) }}" alt="{{ $project->title }}" onerror="this.src='{{ asset('images/projects/canteen.jpg') }}'">
        <div class="project-detail-overlay"></div>
        <div class="container project-detail-heading">
            <p class="eyebrow light-eyebrow">{{ $project->category->name }}</p>
            <h1>{{ $project->title }}</h1>
            <p>{{ $project->client }} · {{ $project->location }}</p>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="project-detail-grid">
                <div class="project-narrative">
                    <p class="eyebrow">Project Overview</p>
                    <h2>{{ $project->title }}</h2>
                    <p>{!! nl2br(e($project->full_description ?: $project->short_description)) !!}</p>
                </div>
                <div class="project-facts">
                    @if($project->client)<div><span>Client</span><strong>{{ $project->client }}</strong></div>@endif
                    @if($project->location)<div><span>Location</span><strong>{{ $project->location }}</strong></div>@endif
                    @if($project->project_value)<div><span>Value</span><strong>{{ $project->project_value }}</strong></div>@endif
                    @if($project->duration)<div><span>Duration</span><strong>{{ $project->duration }}</strong></div>@endif
                </div>
            </div>

            @if($project->images->count())
                <div class="mt-5">
                    <p class="eyebrow">Gallery</p>
                    <div class="projects-grid" style="grid-template-columns:repeat(2,1fr)">
                        @foreach($project->images as $image)
                            <a class="project-card" href="{{ \App\Services\FileUploadService::url($image->image) }}" target="_blank">
                                <div class="project-image-wrap">
                                    <img src="{{ \App\Services\FileUploadService::url($image->image) }}" alt="{{ $image->caption ?: $project->title }}">
                                </div>
                                @if($image->caption)<div class="project-card-body"><p>{{ $image->caption }}</p></div>@endif
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="container section-action" style="margin-top:60px">
                <a class="button button-dark" href="{{ route('projects') }}">View All Projects</a>
            </div>
        </div>
    </section>
@endsection
