@extends('layout.front.master')

@section('content')

{{-- Properties 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-home me-3"></i>Propiedades en Tucumán
                </h1>
                <p class="text-color-light opacity-8 text-4 mb-0">
                    Descubre las mejores oportunidades inmobiliarias en la provincia
                </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">Propiedades</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- Shop Section usando 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 Optimizado con Componente --}}
            <div class="col-lg-3 order-lg-1">
                <x-property-filters
                    :propertyTypes="$propertyTypes"
                    :operationTypes="$operationTypes"
                    :locationId="$locationId"
                    :location="$location" />
            </div>

            {{-- Products Grid usando Porto shop products --}}
            <div class="col-lg-9 order-lg-2">
                @if(isset($message))
                    {{-- Error 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-exclamation-triangle text-primary" style="font-size: 4rem;"></i>
                                    <h4 class="font-weight-semibold mt-3 mb-3 text-color-dark">{{ $message }}</h4>
                                    <p class="text-color-grey mb-4">
                                        Verifica la configuración de la API de Tokko o intenta más tarde.
                                    </p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern">
                                        <i class="fas fa-phone me-2"></i>Contactar Soporte
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @elseif(isset($data['objects']) && count($data['objects']) > 0)
                    {{-- Properties Grid Optimizado con Componentes --}}
                    <div class="shop">
                        <div class="products row">
                            @foreach($data['objects'] as $index => $property)
                                <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">
                                    <x-property-card :property="$property" />
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Pagination usando Porto pagination --}}
                    @php
                        $totalProperties = $data['meta']['total_count'];
                        $perPage = 12;
                        $lastPage = ceil($totalProperties / $perPage);
                    @endphp

                    @if($lastPage > 1)
                        <div class="row">
                            <div class="col text-center mt-4">
                                <nav aria-label="Navegación de propiedades">
                                    <ul class="pagination pagination-rounded pagination-md justify-content-center">
                                        @if ($currentPage > 1)
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="{{ route('filtrar_propiedades', array_merge(request()->all(), ['offset' => ($currentPage - 2) * $perPage])) }}">
                                                    <i class="fas fa-chevron-left"></i>
                                                </a>
                                            </li>
                                        @endif

                                        @for ($i = max(1, $currentPage - 2); $i <= min($currentPage + 2, $lastPage); $i++)
                                            <li class="page-item {{ $i == $currentPage ? 'active' : '' }}">
                                                <a class="page-link"
                                                   href="{{ route('filtrar_propiedades', array_merge(request()->all(), ['offset' => ($i - 1) * $perPage])) }}">
                                                    {{ $i }}
                                                </a>
                                            </li>
                                        @endfor

                                        @if ($currentPage < $lastPage)
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="{{ route('filtrar_propiedades', array_merge(request()->all(), ['offset' => $currentPage * $perPage])) }}">
                                                    <i class="fas fa-chevron-right"></i>
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    @endif
                @else
                    {{-- No Properties 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-search text-primary" style="font-size: 4rem;"></i>
                                    <h4 class="font-weight-semibold mt-3 mb-3 text-color-dark">No se encontraron propiedades</h4>
                                    <p class="text-color-grey mb-4">
                                        Lo sentimos, no hay propiedades que coincidan con tus criterios de búsqueda.
                                        Intenta ajustar los filtros o explorar otras opciones.
                                    </p>
                                    <div class="d-flex flex-column flex-md-row justify-content-center gap-3">
                                        <a href="{{ route('properties') }}" class="btn btn-primary btn-modern">
                                            <i class="fas fa-times me-2"></i>Limpiar Filtros
                                        </a>
                                        <a href="{{ route('front.contact') }}" class="btn btn-outline-primary btn-modern">
                                            <i class="fas fa-phone me-2"></i>Contactar Asesor
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when filters change
    const filterForm = document.getElementById('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();
        });
    });
});
</script>
@endsection