@extends('layout.front.master')

@section('content')

{{-- Emprendimientos Header usando Porto page-header --}}
<section class="page-header page-header-modern bg-color-primary border-0 m-0">
    <div class="container container-xl-custom">
        <div class="row text-center text-md-start py-4">
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                <h1 class="font-weight-bold text-color-light text-8 mb-2">
                    <i class="fas fa-project-diagram me-3"></i>Nuestros Proyectos
                </h1>
                <p class="text-color-light opacity-8 text-4 mb-0">
                    Descubre nuestros proyectos destacados y soluciones innovadoras
                </p>
            </div>
            <div class="col-md-4 order-1 order-md-2 align-self-center text-md-end">
                <ul class="breadcrumb breadcrumb-light d-block text-md-end text-4 mb-0">
                    <li><a href="{{ url('/') }}" class="text-decoration-none">Inicio</a></li>
                    <li class="text-uppercase active">Proyectos</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- Shop Section using Porto shop component --}}
<section class="section section-height-3 bg-color-grey-scale-1 m-0 border-0">
    <div class="container container-xl-custom">
        <div class="row">
            {{-- Sidebar Filters for Emprendimientos --}}
            <div class="col-lg-3 order-lg-1">
                <div class="card border-0 shadow-modern rounded-lg mb-4">
                    <div class="card-header bg-color-primary text-white border-0 p-4">
                        <h5 class="mb-0 font-weight-bold">
                            <i class="fas fa-filter me-2"></i>Filtros
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        {{-- Categories Filter --}}
                        @if(isset($categories) && $categories->count() > 0)
                            <div class="mb-4">
                                <h6 class="font-weight-semibold text-color-dark mb-3">Categorías</h6>
                                <ul class="list-unstyled mb-0">
                                    <li class="mb-2">
                                        <a href="{{ route('frontend.emprendimientos.index') }}" 
                                           class="text-decoration-none text-color-default {{ !request('category') ? 'text-color-primary font-weight-semibold' : '' }}">
                                            <i class="fas fa-th-large me-2"></i>Todas las categorías
                                            <span class="badge bg-secondary text-white ms-2 px-2 py-1 rounded-pill" style="font-size: 0.7rem;">
                                                {{ $emprendimientos->total() }}
                                            </span>
                                        </a>
                                    </li>
                                    @foreach($categories as $category)
                                        <li class="mb-2">
                                            <a href="{{ route('frontend.emprendimientos.category', ['id' => $category->id]) }}" 
                                               class="text-decoration-none text-color-default {{ request('category') == $category->id ? 'text-color-primary font-weight-semibold' : '' }}">
                                                <i class="fas fa-folder me-2"></i>{{ $category->name }}
                                                <span class="badge bg-primary text-white ms-2 px-2 py-1 rounded-pill" style="font-size: 0.7rem;">
                                                    {{ $category->projects_count ?? $category->projects->count() }}
                                                </span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Emprendimientos Grid --}}
            <div class="col-lg-9 order-lg-2">
                @if(isset($emprendimientos) && $emprendimientos->count() > 0)
                    {{-- Results Info Bar --}}
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center bg-color-light p-4 rounded">
                                <div>
                                    <h5 class="mb-1 text-color-dark">
                                        <i class="fas fa-building text-primary me-2"></i>
                                        Emprendimientos Disponibles
                                    </h5>
                                    <p class="mb-0 text-color-grey">
                                        {{ $emprendimientos->total() }} emprendimientos encontrados
                                    </p>
                                </div>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('frontend.emprendimientos.index') }}"
                                       class="btn btn-outline-primary btn-modern btn-sm">
                                        <i class="fas fa-tag me-1"></i>Ver Todos
                                    </a>
                                    <a href="{{ route('front.contact') }}"
                                       class="btn btn-outline-success btn-modern btn-sm">
                                        <i class="fas fa-chart-line me-1"></i>Consultar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Emprendimientos Grid Optimizado --}}
                    <div class="shop">
                        <div class="products row">
                            @foreach($emprendimientos as $index => $emprendimiento)
                                <div class="col-md-6 col-lg-4 mb-4 appear-animation"
                                     data-appear-animation="fadeInUpShorterPlus"
                                     data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                                     data-plugin-animate-viewport="true">
                                    <div class="card border-0 shadow-modern rounded-lg h-100">
                                        @if($emprendimiento->image)
                                            <div class="card-img-top position-relative overflow-hidden" style="height: 250px;">
                                                <img src="{{ filter_var($emprendimiento->image, FILTER_VALIDATE_URL) ? $emprendimiento->image : asset($emprendimiento->image) }}"
                                                     alt="{{ $emprendimiento->title }}"
                                                     class="img-fluid w-100 h-100"
                                                     style="object-fit: cover;">
                                            </div>
                                        @endif
                                        <div class="card-body p-4">
                                            <h5 class="card-title font-weight-bold text-color-dark mb-3" style="font-size: 1.1rem; line-height: 1.3;">
                                                <a href="{{ route('frontend.emprendimientos.show', ['id' => $emprendimiento->id]) }}" 
                                                   class="text-decoration-none text-color-dark hover-text-primary">
                                                    {{ $emprendimiento->title ?? 'Emprendimiento Inmobiliario' }}
                                                </a>
                                            </h5>
                                            @if($emprendimiento->description)
                                                <p class="text-color-grey mb-3">{{ Str::limit($emprendimiento->description, 120) }}</p>
                                            @endif
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    @if($emprendimiento->price_from)
                                                        <div class="text-primary font-weight-bold">
                                                            Desde ${{ number_format($emprendimiento->price_from, 0, ',', '.') }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <a href="{{ route('frontend.emprendimientos.show', ['id' => $emprendimiento->id]) }}" 
                                                   class="btn btn-primary btn-modern btn-sm">
                                                    <i class="fas fa-eye me-1"></i>Ver Detalles
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Pagination for Emprendimientos --}}
                    @if($emprendimientos->hasPages())
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="d-flex justify-content-center">
                                    {{ $emprendimientos->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    {{-- No Results State --}}
                    <div class="row">
                        <div class="col-12">
                            <div class="card border-0 shadow-modern rounded-lg">
                                <div class="card-body text-center py-5">
                                    <i class="fas fa-building text-primary" style="font-size: 4rem;"></i>
                                    <h4 class="font-weight-semibold mt-3 mb-3 text-color-dark">No hay emprendimientos disponibles</h4>
                                    <p class="text-color-grey mb-4">
                                        Próximamente tendremos nuevos emprendimientos para ti.
                                    </p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern">
                                        <i class="fas fa-phone me-2"></i>Contactar Asesor
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- Call to Action Section --}}
<section class="section bg-color-quaternary border-0 m-0">
    <div class="container container-xl-custom">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h3 class="font-weight-bold text-color-dark mb-3">
                    ¿No encontraste el proyecto que buscas?
                </h3>
                <p class="text-color-grey mb-4">
                    Nuestro equipo de expertos te ayudará a encontrar la solución perfecta para tu proyecto
                </p>
                <div class="d-flex flex-wrap justify-content-center gap-3">
                    <a href="https://wa.me/5493816731210?text=Hola! Busco información sobre emprendimientos inmobiliarios"
                       target="_blank"
                       class="btn btn-success btn-modern">
                        <i class="fab fa-whatsapp me-2"></i>Consultar por WhatsApp
                    </a>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern">
                        <i class="fas fa-envelope me-2"></i>Contactar Asesor
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when filters change
    const filterForm = document.getElementById('filterForm');
    if (filterForm) {
        const selects = filterForm.querySelectorAll('select');

        selects.forEach(select => {
            select.addEventListener('change', function() {
                // Add loading state
                const submitBtn = filterForm.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Filtrando...';
                submitBtn.disabled = true;

                // Submit form
                filterForm.submit();
            });
        });
    }

    // Initialize Porto animations if available
    if (typeof theme !== 'undefined' && theme.PluginAnimateViewport) {
        theme.PluginAnimateViewport.initialize();
    }
});
</script>

<style>
.hover-text-primary:hover {
    color: var(--primary) !important;
    transition: color 0.3s ease;
}
</style>
@endsection