@extends('frontend.layouts.app')

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

@section('content')
@php $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/')); @endphp
@include('frontend.layouts.breadcrumb', ['title' => 'Project Details'])

<section class="project-details space bg-light">
    <div class="container">
        <div class="row gy-30">
            <div class="col-xl-4 col-lg-4">
                <div class="project-sidebar">
                    <div class="sidebar-widget">
                        <div class="widget-box project-details-box">
                            <h4 class="title">Project Details</h4>
                            <div class="content">
                                <ul>
                                    <li><strong>Clients :</strong> {{ $project->client ?: 'N/A' }}</li>
                                    <li><strong>Start Date :</strong> {{ $project->start_date?->format('d F, Y') ?: 'N/A' }}</li>
                                    <li><strong>End Date :</strong> {{ $project->end_date?->format('d F, Y') ?: 'N/A' }}</li>
                                    <li><strong>Tags :</strong> {{ $project->department?->name ?? 'Project' }}</li>
                                    <li><strong>Duration :</strong> {{ $project->duration_days ? $project->duration_days . ' days' : 'N/A' }}</li>
                                    @if($project->client_website)
                                        <li><strong>Client Website :</strong> <a href="{{ $project->client_website }}" target="_blank" rel="noopener">{{ $project->client_website }}</a></li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="widget-box consulting-box bg-dark">
                            <div class="bg image"><img src="{{ $assetPath('images/project/details-bg.webp') }}" alt=""></div>
                            <div class="inner-box">
                                <div class="icon"><img src="{{ $assetPath('images/project/details-icon.webp') }}" alt=""></div>
                                <h4 class="title">Need any Project? Contact Us</h4>
                                <p class="text">Talk to Ndarama Technologies about a reliable digital platform for your organization.</p>
                                <a href="{{ route('frontend.contact') }}" class="theme-btn mt-40 br-30">Contact with Us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-8 col-lg-8">
                <div class="project-details__content">
                    <div class="details-image br-10 overflow-hidden mb-30 overlay-anim4 cms-frame cms-frame--project-detail">
                        <img class="cms-img-cover" src="{{ $project->featured_image ? asset('storage/' . $project->featured_image) : $assetPath('images/project/details-img01.webp') }}" alt="{{ $project->title }}" width="872" height="520">
                    </div>
                    <h3 class="title">{{ $project->title }}</h3>
                        <div class="cms-rich-content">
                            {!! $project->content ?: '<p>'.e($project->description ?: 'Project details will be added from the admin side.').'</p>' !!}
                        </div>
                        @unless(\Illuminate\Support\Str::contains((string) $project->content, '<ul'))
                        <h3 class="title">Project Benefits</h3>
                        <p class="mb-25">Each project is shaped around practical operations, secure data handling, and measurable improvements for the client team.</p>
                        <div class="featured-list mb-35">
                            <ul class="list-style-1">
                                <li>Clear workflows for users and administrators.</li>
                                <li>Reliable data capture, reporting, and accountability.</li>
                                <li>Scalable modules that can grow with the organization.</li>
                                <li>Ongoing support for rollout, adoption, and improvement.</li>
                            </ul>
                        </div>
                        @endunless
                        <div class="row gy-30 align-items-center mb-50">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="details-image-box overlay-anim1">
                                    <div class="cms-frame cms-frame--project-detail-small">
                                        <img class="img1 cms-img-cover" src="{{ $assetPath('images/project/details-img02.webp') }}" alt="" width="416" height="320">
                                    </div>
                                    <h5 class="title">Workflow Discovery</h5>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="details-image-box overlay-anim1">
                                    <div class="cms-frame cms-frame--project-detail-small">
                                        <img class="img1 cms-img-cover" src="{{ $assetPath('images/project/details-img03.webp') }}" alt="" width="416" height="320">
                                    </div>
                                    <h5 class="title">Delivery Planning</h5>
                                </div>
                            </div>
                        </div>
                        <div class="project-details__bottom">
                            <div class="project-details__tags">
                                <span>Tags:</span>
                                <ul class="project-details__tags">
                                    <li>{{ strtolower($project->department?->name ?? 'project') }}</li>
                                    <li>{{ strtolower($project->status_label ?? 'active') }}</li>
                                </ul>
                            </div>
                            <div class="project-details__social-list">
                                <span>Share:</span>
                                <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a>
                                <a href="https://www.pinterest.com/"><i class="fa-brands fa-pinterest-p"></i></a>
                            </div>
                        </div>
                        <div class="details__pagination-box">
                            <ul class="details__pagination">
                                <li class="previous">
                                    <a href="{{ route('frontend.projects.index') }}" aria-label="Previous"><i class="fa-light fa-arrow-left-long"></i><span>Previous Projects</span></a>
                                </li>
                                <li class="next">
                                    <a href="{{ route('frontend.projects.index') }}" aria-label="Next"><span>Next Projects</span><i class="fa-light fa-arrow-right-long"></i></a>
                                </li>
                            </ul>
                        </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if($relatedProjects->count() > 0)
    <section class="tv-project-section inner pb-80 bg-light">
        <div class="container">
            <div class="row gy-40">
                @foreach($relatedProjects as $relatedProject)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-project-single-box">
                            <div class="image-wrapper cms-frame cms-frame--project">
                                <img class="cms-img-cover" src="{{ $relatedProject->featured_image ? asset('storage/' . $relatedProject->featured_image) : $assetPath('images/project/hm1-img02.webp') }}" alt="{{ $relatedProject->title }}" width="432" height="520">
                            </div>
                            <div class="project-info">
                                <span class="tag">{{ strtoupper($relatedProject->department?->name ?? 'PROJECT') }}</span>
                                <h3 class="title"><a href="{{ route('frontend.projects.show', $relatedProject->slug) }}">{{ $relatedProject->title }}</a></h3>
                                <div class="icon-box">
                                    <a href="{{ route('frontend.projects.show', $relatedProject->slug) }}" class="hover-icon"><i class="fa-regular fa-arrow-up-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif
@include('frontend.partials.newsletter')
@endsection