@extends('layouts.master')

@section('content')
    <!--begin::Content-->
    <div class="main-container">

        <!-- Page Header Section Start -->
        <div class="mt-3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="page-header-box">

                            @if($project->program)
                                <a href="{{ route('programs.show', $project->program->slug) }}" class="blog-detail-cat wow fadeInUp">
                                    {{ $project->program->icon }} {{ $project->program->title }}
                                </a>
                            @endif

                            <h1 class="text-anime-style-3" data-cursor="-opaque">
                                {{ $project->project_name }}
                            </h1>

                            @if($project->subtitle)
                                <p class="project-hero-subtitle wow fadeInUp">{{ $project->subtitle }}</p>
                            @endif

                            @if($project->metrics->isNotEmpty())
                                <div class="project-hero-stats wow fadeInUp">
                                    @foreach($project->metrics->take(3) as $m)
                                        <div class="project-hero-stat">
                                            <div class="project-hero-stat-value">{{ $m->value }}</div>
                                            <div class="project-hero-stat-label">{{ $m->metric }}</div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            <div class="post-single-meta wow fadeInUp">
                                <ol class="breadcrumb">
                                    <li>
                                        <i class="fa-regular fa-clock"></i>
                                        {{ \Carbon\Carbon::parse($project->created_at)->format('d M, Y') }}
                                    </li>
                                    @if($project->program)
                                        <li>
                                            <i class="fa-solid fa-layer-group"></i>
                                            Part of <a href="{{ route('programs.show', $project->program->slug) }}">{{ $project->program->title }}</a>
                                        </li>
                                    @endif
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header Section End -->

        <!-- Page Single Post Start -->
        <div class="page-single-post">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- Post Featured Image Start -->
                        <div class="post-image">
                            <figure class="image-anime">
                                <img src="{{ $project->image_url }}"
                                    alt="{{ $project->project_name }}"
                                    loading="lazy" decoding="async"
                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                            </figure>
                        </div>
                        <!-- Post Featured Image End -->
                    </div>

                    <div class="col-lg-8">
                        <!-- Post Single Content Start -->
                        <div class="post-content">

                            <!-- Post Entry Start -->
                            <div class="post-entry">

                                {!! $project->project_description !!}

                            </div>
                            <!-- Post Entry End -->

                            <!-- Post Tag Links Start -->
                            <div class="post-tag-links">
                                <div class="row align-items-center">

                                    <div class="col-lg-8">
                                        <div class="post-tags wow fadeInUp" data-wow-delay="0.5s">
                                            <span class="tag-links">
                                                Tags:
                                                <a href="#">
                                                    {{ $project->project_name ?? 'Projects' }}
                                                </a>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="post-social-sharing wow fadeInUp" data-wow-delay="0.5s">
                                            <ul>
                                                <li>
                                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}">
                                                        <i class="fa-brands fa-facebook-f"></i>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ url()->current() }}">
                                                        <i class="fa-brands fa-linkedin-in"></i>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}">
                                                        <i class="fa-brands fa-x-twitter"></i>
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- Post Tag Links End -->

                        </div>
                        <!-- Post Single Content End -->

                    </div>

                    <!-- Sticky Project Metrics sidebar -->
                    <div class="col-lg-4">
                        @if($project->metrics->isNotEmpty())
                            <aside class="proj-metrics-card">
                                <h3>Project Metrics</h3>
                                @foreach($project->metrics as $m)
                                    <div class="proj-metric">
                                        <div class="proj-metric-icon"><i class="fa-solid {{ $m->icon ?: 'fa-leaf' }}"></i></div>
                                        <div class="proj-metric-body">
                                            <div class="proj-metric-label">{{ $m->metric }}</div>
                                            <div class="proj-metric-value">{{ $m->value }}</div>
                                            @if($m->detail)<div class="proj-metric-detail">{{ $m->detail }}</div>@endif
                                        </div>
                                    </div>
                                @endforeach

                                @if($project->verification_standard)
                                    <div class="proj-metric-verification">
                                        <div class="proj-metric-verif-label">Verification Standard</div>
                                        <div class="proj-metric-verif-value">{{ $project->verification_standard }}</div>
                                    </div>
                                @endif
                            </aside>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Single Post End -->

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