@extends('layout.front.master')

@section('title', ($project->title ?? 'Proyecto') . ' | ' . config('site.modules.projects.page_header.title', 'Proyectos'))
@section('description', strip_tags(\Illuminate\Support\Str::limit($project->description ?? config('site.seo.description'), 160)))
@section('keywords', config('site.seo.keywords') . ', ' . strtolower($project->title ?? 'proyecto'))

{{-- Open Graph Meta Tags --}}
@php
    $projectImage = $project->image ? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image)) : brand_og_image();
    $projectsModuleName = config('site.modules.projects.page_header.title', __('Proyectos'));
    $projectOgDesc = strip_tags(\Illuminate\Support\Str::limit($project->description ?? config('site.seo.description', ''), 200));
@endphp
@section('og_title', ($project->title ?? 'Proyecto') . ' | ' . $projectsModuleName . ' | ' . config('site.name'))
@section('og_description', $projectOgDesc)
@section('og_image', $projectImage)
@section('og_type', 'article')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', ($project->title ?? 'Proyecto') . ' | ' . $projectsModuleName . ' | ' . config('site.name'))
@section('twitter_description', $projectOgDesc)
@section('twitter_image', $projectImage)

@section('content')

<div role="main" class="main">
    {{-- Dynamic Header --}}
    @include('modules.projects.frontend.partials.dynamic-header')

    {{-- Main Content Section --}}
    <section class="section pt-4 pt-lg-5 section-height-auto py-5 bg-color-grey-scale-1 border-0 m-0">
        <div class="container container-xl-custom">
            <div class="row">
                {{-- Main Content Area --}}
                <div class="col-lg-8 order-2 order-lg-1">
                    {{-- Project Image Hero - Mobile First --}}
                    @if($project->image)
                        <div class="mb-4 mb-md-5 appear-animation project-hero-image-wrapper" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">
                            <div class="position-relative overflow-hidden shadow-modern">
                                <img src="{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}"
                                     alt="{{ $project->title }}"
                                     class="img-fluid w-100 project-hero-image">
                            </div>
                        </div>
                    @endif

                    {{-- Project Title - Mobile Optimized --}}
                    <div class="mb-4 mb-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
                        <h1 class="text-color-dark font-weight-bold project-title mb-3">{{ $project->title ?? 'Proyecto' }}</h1>

                        {{-- Quick Info Bar - Mobile --}}
                        <div class="d-flex flex-wrap align-items-center gap-3 mb-3 project-quick-info">
                            @if($project->created_at)
                                <div class="d-flex align-items-center text-color-grey">
                                    <i class="fas fa-calendar-alt text-primary me-2"></i>
                                    <span class="text-3">{{ $project->created_at->format('M Y') }}</span>
                                </div>
                            @endif
                            <div class="d-flex align-items-center text-color-grey">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <span class="text-3">Completado</span>
                            </div>
                        </div>

                        {{-- Project Meta Info (Categories & Tags) - Mobile Optimized --}}
                        @if($project->categories && $project->categories->count() > 0 || $project->tags && $project->tags->count() > 0)
                            <div class="project-meta-info">
                                @if($project->categories && $project->categories->count() > 0)
                                    <div class="mb-2">
                                        <span class="text-color-grey font-weight-semibold text-3 d-block mb-2">Categorías:</span>
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach($project->categories as $category)
                                                <a href="{{ route('frontend.projects.category', $category->slug) }}"
                                                   class="badge bg-color-grey-scale-2 text-color-dark px-3 py-2 text-decoration-none project-badge-detail">
                                                    {{ $category->name }}
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                @if($project->tags && $project->tags->count() > 0)
                                    <div>
                                        <span class="text-color-grey font-weight-semibold text-3 d-block mb-2">Tags:</span>
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach($project->tags as $tag)
                                                <a href="{{ route('frontend.projects.tag', $tag->slug) }}"
                                                   class="badge bg-color-grey-scale-2 text-color-dark px-3 py-2 text-decoration-none project-tag-detail">
                                                    {{ $tag->name }}
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- Project Description --}}
                    <div class="mb-4 mb-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500">
                        <h2 class="text-color-dark font-weight-bold project-description-title mb-3">Descripción del Proyecto</h2>
                        @if($project->description)
                            <div class="text-color-grey project-description-content">
                                {!! nl2br(e($project->description)) !!}
                            </div>
                        @else
                            <p class="text-color-grey text-3-5">Descripción detallada disponible próximamente.</p>
                        @endif
                    </div>

                    {{-- Antes y Después (opt-in por datos: solo renderiza si el proyecto tiene pares cargados) --}}
                    @if($project->beforeAfterPairs && $project->beforeAfterPairs->count() > 0)
                        <div class="mb-4 mb-md-5 appear-animation project-before-after" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="550">
                            <h2 class="text-color-dark font-weight-bold project-ba-title mb-3">{{ __('Antes y Después') }}</h2>
                            @foreach($project->beforeAfterPairs as $pair)
                                @php
                                    $beforeUrl = filter_var($pair->before_image, FILTER_VALIDATE_URL) ? $pair->before_image : asset($pair->before_image);
                                    $afterUrl  = filter_var($pair->after_image,  FILTER_VALIDATE_URL) ? $pair->after_image  : asset($pair->after_image);
                                @endphp
                                <figure class="ba-pair">
                                    <img-comparison-slider class="ba-slider" hover="false">
                                        <img slot="first"  src="{{ $beforeUrl }}" alt="{{ ($pair->label ? $pair->label . ' — ' : '') . __('Antes') }}"   loading="lazy">
                                        <img slot="second" src="{{ $afterUrl }}"  alt="{{ ($pair->label ? $pair->label . ' — ' : '') . __('Después') }}" loading="lazy">
                                    </img-comparison-slider>
                                    @if($pair->label)
                                        <figcaption class="text-center mt-2 text-3-5">{{ $pair->label }}</figcaption>
                                    @endif
                                </figure>
                            @endforeach
                        </div>

                        {{--
                            El layout front usa @yield('scripts') (no @stack), así que
                            inlineamos el script del web component. El @push('styles') sí
                            funciona porque master.blade.php tiene @stack('styles').
                        --}}
                        <link rel="stylesheet" href="{{ asset('template/vendor/img-comparison-slider/styles.css') }}">
                        <link rel="stylesheet" href="{{ asset('template/css/modules/projects-before-after.css') }}">
                        <script defer src="{{ asset('template/vendor/img-comparison-slider/index.js') }}"></script>
                    @endif

                    {{-- JOINN Video (YouTube) --}}
                    @php
                        $isJoinnProject = isset($project)
                            && \Illuminate\Support\Str::contains(
                                \Illuminate\Support\Str::lower($project->title ?? ''),
                                'joinn'
                            );
                    @endphp
                    @if($isJoinnProject)
                        <div class="mb-4 mb-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
                            <h2 class="text-color-dark font-weight-bold mb-3">JOINN – Video Presentación</h2>
                            <div class="ratio ratio-16x9 rounded shadow-lg overflow-hidden">
                                <iframe 
                                    src="https://www.youtube.com/embed/w6lxye0yyGI" 
                                    title="JOINN" 
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    @endif

                    {{-- External Link if available --}}
                    @if($project->url)
                        <div class="mb-4 mb-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800">
                            <div class="card border-0 shadow-modern project-external-link-card">
                                <div class="card-body p-4 p-md-5 text-center">
                                    <i class="fas fa-external-link-alt text-primary text-5 mb-3"></i>
                                    <h4 class="text-color-dark font-weight-bold mb-3">Visita el Proyecto</h4>
                                    <p class="text-color-grey mb-4">Este proyecto está disponible en línea</p>
                                    <a href="{{ $project->url }}"
                                       target="_blank"
                                       class="btn btn-primary btn-modern px-5 py-3 font-weight-bold">
                                        <i class="fas fa-external-link-alt me-2"></i>Ver Proyecto en Vivo
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Sidebar - Desktop Only, Mobile Hidden --}}
                <div class="col-lg-4 order-1 order-lg-2">
                    <div class="project-sidebar-sticky">
                        {{-- Project Info Card - Desktop Only --}}
                        <div class="card border-0 shadow-modern project-info-card mb-4 appear-animation d-none d-lg-block" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                            <div class="card-header bg-color-grey-scale-1 border-bottom border-color-grey-scale-2 p-4">
                                <h5 class="mb-0 text-color-dark font-weight-bold">
                                    <i class="fas fa-info-circle text-color-grey me-2"></i>
                                    Información del Proyecto
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <ul class="list list-unstyled mb-0">
                                    <li class="mb-3 pb-3 border-bottom border-color-grey-scale-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-color-grey font-weight-semibold">Código:</span>
                                            <span class="badge bg-color-grey-scale-2 text-color-dark px-3 py-2 font-weight-semibold">
                                                #{{ str_pad($project->id, 4, '0', STR_PAD_LEFT) }}
                                            </span>
                                        </div>
                                    </li>
                                    <li class="mb-3 pb-3 border-bottom border-color-grey-scale-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-color-grey font-weight-semibold">Estado:</span>
                                            <span class="badge bg-success text-white">
                                                <i class="fas fa-check-circle me-1"></i>Completado
                                            </span>
                                        </div>
                                    </li>
                                    <li class="mb-3 pb-3 border-bottom border-color-grey-scale-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-color-grey font-weight-semibold">Fecha:</span>
                                            <span class="text-color-dark font-weight-semibold">{{ $project->created_at->format('d/m/Y') }}</span>
                                        </div>
                                    </li>
                                    @if($project->categories && $project->categories->count() > 0)
                                        <li class="mb-0">
                                            <div>
                                                <span class="text-color-grey font-weight-semibold d-block mb-2">Categorías:</span>
                                                <div class="d-flex flex-wrap gap-2">
                                                    @foreach($project->categories as $category)
                                                        <a href="{{ route('frontend.projects.category', $category->slug) }}"
                                                           class="badge bg-color-grey-scale-2 text-color-dark text-decoration-none project-badge-detail">
                                                            {{ $category->name }}
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        {{-- Quick Contact Card --}}
                        {{-- <div class="card border-0 shadow-modern rounded-lg bg-color-primary text-white mb-4 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="300">
                            <div class="card-body p-4">
                                <h4 class="text-color-light font-weight-bold mb-3">
                                    <i class="fas fa-phone-alt me-2"></i>¿Te Interesa?
                                </h4>
                                <p class="text-color-light opacity-8 mb-4">
                                    Contacta con nosotros para más información sobre este proyecto
                                </p>
                                <div class="d-grid gap-3">
                                    <a href="https://wa.me/5493813674900?text=Hola! Me interesa obtener información sobre: {{ urlencode($project->title ?? 'Proyecto') }}"
                                       target="_blank"
                                       class="btn btn-success btn-modern py-3 font-weight-semibold">
                                        <i class="fab fa-whatsapp me-2"></i>WhatsApp
                                    </a>
                                    <a href="{{ route('front.contact') }}"
                                       class="btn btn-light btn-modern py-3 font-weight-semibold">
                                        <i class="fas fa-envelope me-2"></i>Contactar
                                    </a>
                                    <a href="tel:{{ config('site.contact.phone.number', '+5493816731210') }}"
                                       class="btn btn-outline-light btn-modern py-2 font-weight-semibold">
                                        <i class="fas fa-phone me-2"></i>{{ config('site.contact.phone.number', '+54 381 673-1210') }}
                                    </a>
                                </div>
                            </div>
                        </div> --}}
                        {{-- Share Project Card - Desktop Only --}}
                        <div class="card border-0 shadow-modern project-share-card appear-animation d-none d-lg-block" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="700">
                            <div class="card-header bg-color-grey-scale-1 border-bottom border-color-grey-scale-2 p-4">
                                <h5 class="mb-0 text-color-dark font-weight-bold">
                                    <i class="fas fa-share-alt text-color-grey me-2"></i>
                                    Compartir Proyecto
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="d-flex gap-2">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-facebook flex-fill">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($project->title) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-twitter flex-fill">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-linkedin flex-fill">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                    <button onclick="navigator.clipboard.writeText('{{ request()->url() }}')"
                                            class="btn btn-share-social btn-share-copy flex-fill"
                                            title="Copiar enlace">
                                        <i class="fas fa-link"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Share Section - Mobile Only --}}
                <div class="col-12 order-3 d-lg-none mb-4">
                    <div class="card border-0 shadow-modern project-share-card">
                        <div class="card-header bg-color-grey-scale-1 border-bottom border-color-grey-scale-2 p-3">
                            <h6 class="mb-0 text-color-dark font-weight-bold">
                                <i class="fas fa-share-alt text-color-grey me-2"></i>
                                Compartir
                            </h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-2">
                                <div class="col-3">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-facebook w-100">
                                        <i class="fab fa-facebook-f"></i>
                                        <span class="d-block mt-1">Facebook</span>
                                    </a>
                                </div>
                                <div class="col-3">
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($project->title) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-twitter w-100">
                                        <i class="fab fa-twitter"></i>
                                        <span class="d-block mt-1">Twitter</span>
                                    </a>
                                </div>
                                <div class="col-3">
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}"
                                       target="_blank"
                                       class="btn btn-share-social btn-share-linkedin w-100">
                                        <i class="fab fa-linkedin-in"></i>
                                        <span class="d-block mt-1">LinkedIn</span>
                                    </a>
                                </div>
                                <div class="col-3">
                                    <button onclick="navigator.clipboard.writeText('{{ request()->url() }}')"
                                            class="btn btn-share-social btn-share-copy w-100"
                                            title="Copiar enlace">
                                        <i class="fas fa-link"></i>
                                        <span class="d-block mt-1">Copiar</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Related Projects Section - Carousel --}}
    @if($relatedProjects && $relatedProjects->count() > 0)
        <section class="section bg-color-grey-scale-1 border-0 m-0 related-projects-section">
            <div class="container container-xl-custom py-5 my-5">
                <div class="row justify-content-center text-center mb-4 mb-md-5">
                    <div class="col-lg-8">
                        <h2 class="text-color-dark font-weight-bold related-projects-title mb-3 appear-animation" data-appear-animation="fadeInUpShorterPlus">
                            Otros Proyectos Relacionados
                        </h2>
                        <p class="text-color-grey related-projects-subtitle appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">
                            Descubre más de nuestros trabajos y desarrollos
                        </p>
                    </div>
                </div>

                {{-- Related Projects Carousel --}}
                <div class="owl-carousel owl-theme nav-style-diamond nav-with-transparency nav-dark nav-sm nav-font-size-sm mb-4 related-projects-carousel"
                     data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 2, 'nav': true, 'dots': false}, '992': {'items': 3, 'nav': true, 'dots': false}, '1200': {'items': 3, 'nav': true, 'dots': false}}, 'loop': false, 'nav': true, 'dots': false, 'autoplay': false, 'autoplayTimeout': 5000, 'margin': 30, 'stagePadding': 0}">
                    @foreach($relatedProjects as $index => $relatedProject)
                        <div class="related-project-item">
                            <div class="card border-0 shadow-modern h-100 related-project-card">
                                @if($relatedProject->image)
                                    <div class="card-img-top position-relative overflow-hidden related-project-image-wrapper">
                                        <a href="{{ route('frontend.projects.show', $relatedProject->slug) }}">
                                            <img src="{{ filter_var($relatedProject->image, FILTER_VALIDATE_URL) ? $relatedProject->image : asset($relatedProject->image) }}"
                                                 alt="{{ $relatedProject->title }}"
                                                 class="img-fluid w-100 h-100 related-project-image">
                                        </a>
                                    </div>
                                @endif
                                <div class="card-body p-4">
                                    <h5 class="card-title font-weight-bold text-color-dark mb-3 related-project-title">
                                        <a href="{{ route('frontend.projects.show', $relatedProject->slug) }}"
                                           class="text-decoration-none text-color-dark hover-text-primary">
                                            {{ $relatedProject->title }}
                                        </a>
                                    </h5>
                                    @if($relatedProject->description)
                                        <p class="text-color-grey mb-3 text-3-5 related-project-description">{{ \Illuminate\Support\Str::limit($relatedProject->description, 100) }}</p>
                                    @endif
                                    @if($relatedProject->categories && $relatedProject->categories->count() > 0)
                                        <div class="mb-3">
                                            @foreach($relatedProject->categories->take(2) as $category)
                                                <a href="{{ route('frontend.projects.category', $category->slug) }}" class="badge bg-color-grey-scale-2 text-color-dark me-1 text-decoration-none project-badge">{{ $category->name }}</a>
                                            @endforeach
                                        </div>
                                    @endif
                                    <a href="{{ route('frontend.projects.show', $relatedProject->slug) }}"
                                       class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-primary text-decoration-none">
                                        Ver Proyecto
                                        <i class="fas fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row mt-4">
                    <div class="col-12 text-center appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="700">
                        <a href="{{ route('frontend.projects.index') }}"
                           class="btn btn-primary btn-modern px-5 py-3 font-weight-bold">
                            <i class="fas fa-project-diagram me-2"></i>Ver Todos los Proyectos
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif
</div>

{{-- Custom CSS moved to demo-construction.css --}}

{{-- Scripts --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Porto animations
    if (typeof theme !== 'undefined' && theme.PluginAnimateViewport) {
        theme.PluginAnimateViewport.initialize();
    }

    // Copy link feedback
    const copyBtns = document.querySelectorAll('[onclick*="clipboard"]');
    copyBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const originalHTML = this.innerHTML;
            this.innerHTML = '<i class="fas fa-check"></i>';
            if (this.querySelector('span')) {
                this.querySelector('span').textContent = 'Copiado';
            }
            this.classList.add('btn-success');
            this.classList.remove('btn-share-copy');
            setTimeout(() => {
                this.innerHTML = originalHTML;
                this.classList.remove('btn-success');
                this.classList.add('btn-share-copy');
            }, 2000);
        });
    });

    // Initialize Related Projects Carousel
    if (typeof theme !== 'undefined' && theme.PluginOwlCarousel) {
        const relatedCarousel = document.querySelector('.related-projects-carousel');
        if (relatedCarousel) {
            theme.PluginOwlCarousel.initialize();
        }
    }
});
</script>
@endpush

@endsection