@extends('frontend.layouts.master')

@section('title', $portfolio->title . ' - Novalynk')

@section('styles')
<style>
.portfolio-gallery {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.portfolio-gallery .carousel-item img {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.portfolio-gallery .carousel-caption {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 1rem 1.25rem;
    text-align: left;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 64, 175, 0.6));
    backdrop-filter: blur(10px);
}

.portfolio-gallery .carousel-indicators {
    margin-bottom: 1rem;
}

.portfolio-gallery .carousel-indicators [data-bs-target] {
    width: 42px;
    height: 4px;
    border: 0;
    border-radius: 999px;
}

.portfolio-gallery .carousel-control-prev,
.portfolio-gallery .carousel-control-next {
    width: 12%;
}

.portfolio-gallery .carousel-control-prev-icon,
.portfolio-gallery .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.48);
    background-size: 42% 42%;
}

@media (max-width: 767px) {
    .portfolio-gallery .carousel-item img {
        height: 320px;
    }

    .portfolio-gallery .carousel-caption {
        position: static;
        margin: 0.75rem;
    }
}
</style>
@endsection

@section('content')
@php
    $gallerySlides = collect();

    if ($portfolio->thumbnail) {
        $gallerySlides->push([
            'src' => $portfolio->primary_image_url,
            'caption' => $portfolio->title,
        ]);
    }

    foreach ($portfolio->galleries as $gallery) {
        $gallerySlides->push([
            'src' => \Illuminate\Support\Str::startsWith($gallery->image, ['http://', 'https://'])
                ? $gallery->image
                : \Illuminate\Support\Facades\Storage::url($gallery->image),
            'caption' => $gallery->caption ?: $portfolio->title,
        ]);
    }

    $gallerySlides = $gallerySlides->unique('src')->values();

    if ($gallerySlides->isEmpty()) {
        $gallerySlides->push([
            'src' => $portfolio->primary_image_url,
            'caption' => $portfolio->title,
        ]);
    }
@endphp

<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">{{ __('ui.home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('portfolio') }}" class="text-decoration-none">{{ __('ui.portfolio') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $portfolio->title }}</li>
            </ol>
        </nav>
        <div class="row mt-3">
            <div class="col-lg-8">
                <h1 class="section-title">{{ $portfolio->title }}</h1>
                <p class="text-muted">{{ $portfolio->client_name }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Project Detail -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8" data-aos="fade-up">
                <div id="portfolioGalleryCarousel" class="carousel slide portfolio-gallery mb-4" data-bs-ride="false">
                    @if($gallerySlides->count() > 1)
                    <div class="carousel-indicators">
                        @foreach($gallerySlides as $index => $slide)
                        <button type="button" data-bs-target="#portfolioGalleryCarousel" data-bs-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
                        @endforeach
                    </div>
                    @endif

                    <div class="carousel-inner">
                        @foreach($gallerySlides as $index => $slide)
                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                            <img src="{{ $slide['src'] }}" alt="{{ $portfolio->title }} slide {{ $index + 1 }}">
                            @if($gallerySlides->count() > 1)
                            <div class="carousel-caption">
                                <strong>{{ $portfolio->title }}</strong>
                                <div class="small text-white-50 mt-1">{{ $slide['caption'] }}</div>
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>

                    @if($gallerySlides->count() > 1)
                    <button class="carousel-control-prev" type="button" data-bs-target="#portfolioGalleryCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">{{ __('front.common.previous') }}</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#portfolioGalleryCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">{{ __('front.common.next') }}</span>
                    </button>
                    @endif
                </div>
                
                <div class="card-custom p-5">
                    <h3 class="mb-4">{{ __('front.portfolio_detail.project_description') }}</h3>
                    <p style="color: var(--gray-600);">{{ $portfolio->short_description }}</p>
                    
                    @if($portfolio->description)
                    <div class="mt-4">
                        {!! $portfolio->description !!}
                    </div>
                    @endif
                </div>
            </div>
            
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="card-custom p-4 mb-4">
                    <h5 class="mb-4">{{ __('front.portfolio_detail.project_details') }}</h5>
                    <div class="mb-3 pb-3 border-bottom">
                        <small class="text-muted d-block mb-1">{{ __('front.portfolio_detail.client') }}</small>
                        <strong>{{ $portfolio->client_name }}</strong>
                    </div>
                    <div class="mb-3 pb-3 border-bottom">
                        <small class="text-muted d-block mb-1">{{ __('front.portfolio_detail.completion_date') }}</small>
                        <strong>{{ \Carbon\Carbon::parse($portfolio->completion_date)->format('d M Y') }}</strong>
                    </div>
                    <div class="mb-3 pb-3 border-bottom">
                        <small class="text-muted d-block mb-1">{{ __('front.portfolio_detail.images_count') }}</small>
                        <strong>{{ $gallerySlides->count() }}</strong>
                    </div>
                    @if($portfolio->tech_stack)
                    <div class="mb-3 pb-3 border-bottom">
                        <small class="text-muted d-block mb-2">{{ __('front.portfolio_detail.technologies') }}</small>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach(explode(',', $portfolio->tech_stack) as $tech)
                            <span class="badge bg-primary">{{ trim($tech) }}</span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    @if($portfolio->link_demo)
                    <a href="{{ $portfolio->link_demo }}" target="_blank" class="btn btn-primary-custom w-100">
                        <i class="fa-solid fa-external-link me-2"></i> {{ __('front.common.view_demo') }}
                    </a>
                    @endif
                </div>
                
                <div class="card-custom p-4" style="background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));">
                    <h4 class="text-white mb-3">{{ __('front.portfolio_detail.similar_project_title') }}</h4>
                    <p class="text-white-50 mb-4">{{ __('front.portfolio_detail.similar_project_desc') }}</p>
                    <a href="{{ route('contact') }}" class="btn btn-light w-100">{{ __('front.common.contact_us') }}</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Related Projects -->
@if(count($portfolios = \App\Models\Portfolio::with('galleries')->where('is_active', true)->where('id', '!=', $portfolio->id)->take(3)->get()) > 0)
<section class="section-padding bg-light-custom">
    <div class="container">
        <h2 class="mb-4">{{ __('front.portfolio_detail.related_projects') }}</h2>
        <div class="row g-4">
            @foreach($portfolios as $related)
            <div class="col-md-4">
                <div class="portfolio-card">
                    <img src="{{ $related->primary_image_url }}" alt="{{ $related->title }}">
                    <div class="portfolio-overlay">
                        <h4 class="portfolio-title">{{ $related->title }}</h4>
                        <p class="portfolio-client">{{ $related->client_name }}</p>
                        <a href="{{ route('portfolio.detail', $related->slug) }}" class="btn btn-sm btn-light mt-2">{{ __('front.common.view_detail') }}</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection