@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')


    <!-- Project Hero -->
    <section class="project-hero-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <img src="{{ $project->image ? Storage::url($project->image) : 'https://ui-avatars.com/api/?name=' . urlencode($project->title) }}"
                        alt="{{ $project->title }}" class="img-fluid rounded mb-4">
                    <div class="project-meta-bar">
                        <span class="project-category">{{ $project->category?->name }}</span>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="project-sidebar">
                        <h4>Project Overview</h4>
                        <div class="sidebar-info">
                            <div class="info-item">
                                <strong>Status:</strong>
                                <span class="badge bg-success">{{ ucfirst($project->status) }}</span>
                            </div>
                            <div class="info-item">
                                <strong>Duration:</strong>
                                <span>{{ $project->duration }}</span>
                            </div>
                            <div class="info-item">
                                <strong>Budget:</strong>
                                <span>৳{{ number_format($project->budget, 2) }}</span>
                            </div>
                            <div class="info-item">
                                <strong>Coordinator:</strong>
                                <span>{{ $project->coordinator }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Project Content -->
    <section class="project-content-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="content-block">
                        <h2>About the Project</h2>
                        <p class="text-justify">{{ $project->short_des }}</p>
                    </div>

                    <div class="content-block">

                        <h2>Project Details</h2>
                        <p class="text-justify">{{ $project->description }}</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    @if ($relatedProjects->isNotEmpty())
                        <div class="sidebar-widget">
                            <h4>Related Projects</h4>
                            @foreach ($relatedProjects as $related)
                                <div class="related-project">
                                    <img src="{{ $related->image ? Storage::url($related->image) : 'https://ui-avatars.com/api/?name=' . urlencode($related->title) }}"
                                        alt="Project" class="img-fluid">
                                    <h5>{{ $related->title }}</h5>
                                    <a
                                        href="{{ route('projects.detail', ['type' => $related->category->slug, 'slug' => $related->slug]) }}">Learn
                                        more →</a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <div class="sidebar-widget">
                        <h4>Share This Project</h4>
                        <div class="share-buttons">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                target="_blank" class="share-btn facebook"><i class="bi bi-facebook"></i></a>

                            <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($project->title) }}"
                                target="_blank" class="share-btn twitter"><i class="bi bi-twitter"></i></a>

                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}"
                                target="_blank" class="share-btn linkedin"><i class="bi bi-linkedin"></i></a>

                            <a href="https://api.whatsapp.com/send?text={{ urlencode($project->title . ' ' . request()->url()) }}"
                                target="_blank" class="share-btn whatsapp"><i class="bi bi-whatsapp"></i></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection