@extends('layouts.admin')

@section('page-title', 'Project Detail')

@section('title', $project->title ?? 'Project Details')

@section('content')
    <!-- Single Project Hero -->
    <section class="single-product">
        @if(!empty($project->featured_img))
            <img src="{{ asset('uploads/projects/featured/'.$project->featured_img) }}" class="img-fluid w-100" alt="{{ $project->title }}">
        @else
            <img src="{{ asset('images/default-banner.jpg') }}" class="img-fluid w-100" alt="Default Project Image">
        @endif
    </section>

    <div data-aos="fade-up">
        <section class="structure py-5">
            <div class="container text-center">
                
                <!-- Project Title -->
                <h2 class="main-title">{{ $project->title }}</h2>   

                <!-- Location -->
                @if(!empty($project->location))
                    <p class="main-para">{{ $project->location }}</p>
                @endif

                <!-- Download Brochure Button -->
                @if(!empty($project->brochure))
                    <a href="{{ asset('uploads/projects/brochures/'.$project->brochure) }}" target="_blank" class="download btn">
                        <i class="bi bi-download"></i> Download Brochure
                    </a>
                @endif

                <!-- About the Project -->
                @if(!empty($project->content))
                    <div class="row py-5">
                        <h4>About the Project</h4>
                        <p class="sec-para">{!! $project->content !!}</p>
                    </div>
                @endif

                <!-- Project Info Cards -->
                <div class="row us-info text-start text-md-center">
                    
                    <!-- Location -->
                    @if(!empty($project->location))
                        <div class="col-md-4 mb-4 mb-md-0">
                            <div class="info-box">
                                <h6><i class="bi bi-geo-alt"></i> Location</h6>
                                <p class="main-para">{{ $project->location }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Duration -->
                    @if(!empty($project->start_date) || !empty($project->end_date))
                        <div class="col-md-4 mb-4 mb-md-0">
                            <div class="info-box">
                                <h6><i class="bi bi-stopwatch"></i> Duration</h6>
                                <p class="main-para">
                                    @if(!empty($project->start_date))
                                        {{ \Carbon\Carbon::parse($project->start_date)->format('F Y') }}
                                    @endif
                                    @if(!empty($project->start_date) && !empty($project->end_date))
                                        - 
                                    @endif
                                    @if(!empty($project->end_date))
                                        {{ \Carbon\Carbon::parse($project->end_date)->format('F Y') }}
                                    @endif
                                </p>
                            </div>
                        </div>
                    @endif

                    <!-- Client -->
                    @if(!empty($project->client_name))
                        <div class="col-md-4">
                            <div class="info-box">
                                <h6><i class="bi bi-person"></i> Client</h6>
                                <p class="main-para">{{ $project->client_name }}</p>
                            </div>
                        </div>
                    @endif
                    
                </div>

                <!-- Key Features Section -->
                @if(!empty($project->project_desc))
                    <div class="row">
                        <h4>Key Features</h4>
                        <div class="text-start">
                            @php
                                // Split description into features (assuming each feature is separated by double line breaks)
                                $features = preg_split('/\n\s*\n|\r\n\r\n/', trim(strip_tags($project->project_desc)));
                            @endphp

                            @foreach($features as $feature)
                                @php
                                    // Split each feature into title and description
                                    $lines = explode("\n", trim($feature));
                                    $featureTitle = trim($lines[0] ?? '');
                                    $featureDesc = trim(implode(' ', array_slice($lines, 1)));
                                @endphp

                                @if(!empty($featureTitle))
                                    <div class="feature-item">
                                        <h6>{{ $featureTitle }}</h6>
                                        @if(!empty($featureDesc))
                                            <p class="main-para">{{ $featureDesc }}</p>
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Behind the Build -->
                @if(!empty($project->drawings_img))
                    @php
                        $images = is_array($project->drawings_img) ? $project->drawings_img : json_decode($project->drawings_img, true);
                    @endphp
                    
                    @if(!empty($images) && is_array($images))
                        <div class="row">
                            <h4>Behind the Build</h4>
                            @foreach($images as $index => $img)
                                <div class="col-lg-4 col-md-6 mb-3">
                                    <img src="{{ asset('uploads/projects/drawings/'.$img) }}" class="img-fluid rounded shadow-sm" alt="Behind Build {{ $index + 1 }}">
                                </div>
                            @endforeach
                        </div>
                    @endif
                @endif

            </div>
        </section>
    </div>

    <!-- See More Projects Section -->
    @if(isset($relatedProjects) && $relatedProjects->count() > 0)
        <div data-aos="fade-up">
            <section class="projects-section text-center py-5">
                <div class="container">
                    <!-- Section Title -->
                    <div class="mb-4 see-pro">
                        <h4>See More Projects</h4>
                    </div>

                    <!-- Project Cards -->
                    <div class="row g-4">
                        @foreach($relatedProjects->take(3) as $relatedProject)
                            <div class="col-lg-4 col-md-6">
                                <div class="card shadow-sm position-relative">
                                    @if(!empty($relatedProject->location))
                                        <div class="location-badge">
                                            <i class="bi bi-geo-alt-fill"></i> {{ $relatedProject->location }}
                                        </div>
                                    @endif
                                    
                                    @if(!empty($relatedProject->featured_img))
                                        <img src="{{ asset('uploads/projects/featured/'.$relatedProject->featured_img) }}" class="card-img-top" alt="{{ $relatedProject->title }}">
                                    @else
                                        <img src="{{ asset('images/default-project.jpg') }}" class="card-img-top" alt="Default Project">
                                    @endif
                                    
                                    <div class="card-body text-start">
                                        <h5 class="card-title">{{ $relatedProject->title }}</h5>
                                        <p class="card-text">
                                            {{ Str::limit(strip_tags($relatedProject->content ?? $relatedProject->project_desc), 60) }}
                                        </p>
                                        <a href="{{ route('projects.show', $relatedProject->id) }}" class="discover-link">
                                            <i class="bi bi-arrow-right-circle-fill"></i> DISCOVER MORE
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        </div>
    @endif


        </section>
    </div>

    <!-- Back Button -->
    <div class="text-start ms-4 mb-5">
        <a href="{{ route('page_projects.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Projects
        </a>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
    function initAOS() {
        if (window.innerWidth > 768) {
            AOS.init({
                duration: 1200,
                once: true
            });
        } else {
            AOS.refreshHard();
            document.querySelectorAll('[data-aos]').forEach(el => {
                el.removeAttribute('data-aos');
            });
        }
    }

    // Run on load
    initAOS();

    // Run on resize
    window.addEventListener('resize', () => {
        initAOS();
    });
</script>
@endpush