@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="portada">
            <div class="img"
                style="background-image: url('{{ asset($setting->file_path ? $setting->file_path : 'img/default.jpg') }}');">
            </div>

            <div class="item">
                <h1 class="title_page">
                    {{ $setting->title }}
                </h1>
                <p class="subtitle_page">{{ $setting->subtitle }}</p>
            </div>
        </div>
    </div>

    <div class="container">
        <form action="" method="GET" class="buscador">
            <input type="text" name="q" placeholder="Busca terrenos" value="{{ request('q') }}">
            <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
        </form>

        @if ($cities->count() > 0)
            <div class="ciudades_links">
                <div class="title">Filtrar por ciudades: </div>
                @foreach ($cities as $city)
                    <button><a href="{{ route('ciudades.show', $city->slug) }}">{{ $city->name }}
                            ({{ $city->lands->count() }})
                        </a></button>
                @endforeach
            </div>
        @endif

    </div>

    <div class="container">
        @if (request('q'))
            <span>Resultados de la búsqueda: {{ request('q') }}</span>
        @endif
    </div>

    @if (!request('q'))
        @foreach ($groups as $group)
            @if (count($group->lands()) > 0)
                <div class="container">
                    <div style="margin-bottom: 10px;">
                        {!! $group->content !!}
                    </div>
                </div>

                <div class="terrenos container">
                    @foreach ($group->lands() as $land)
                        <a href="{{ route('lands.show', $land->slug) }}">
                            <div class="terreno">
                                <div class="img"
                                    style="background-image: url('{{ asset($land->file_name ? $land->file_name : 'img/default.jpg') }}');">
                                </div>
                                <div class="item">
                                    <h3 class="titulo">{{ $land->title }}</h3>
                                    <div class="pricio">{{ $land->price }}</div>
                                    <div class="descripcion">{!! $land->description !!}</div>
                                    <div class="ubicacion"><i class="fa-solid fa-location-dot"></i> {{ $land->colonia }},
                                        {{ $land->city->name }}
                                    </div>
                                    <h4 class="ubicacion"> <strong>Tamaño de terreno</strong> {{ $land->lot_size }}m2</h4>
                                    <button class="btn-show">Ver más <i class="fa-solid fa-angles-right"></i></button>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="container" style="text-align: right;">
                    <a href="{{ route('grupos.show', $group->slug) }}"><button class="btn-show-more">Ver más <i
                                class="fa-solid fa-angles-right"></i></button></a>
                </div>
            @endif
        @endforeach
    @endif

    @if ($lands->count() > 0)
        <div class="container">
            <div style="margin-bottom: 10px;">
                {!! $setting->body !!}
            </div>
        </div>

        <div class="terrenos container">
            @foreach ($lands as $land)
                <a href="{{ route('lands.show', $land->slug) }}">
                    <div class="terreno">
                        <div class="img"
                            style="background-image: url('{{ asset($land->file_name ? $land->file_name : 'img/default.jpg') }}');">
                        </div>
                        <div class="item">
                            <h3 class="titulo">{{ $land->title }}</h3>
                            <div class="pricio">{{ $land->price }}</div>
                            <div class="descripcion">{!! $land->description !!}</div>
                            <div class="ubicacion"><i class="fa-solid fa-location-dot"></i> {{ $land->colonia }},
                                {{ $land->city->name }}</div>
                            <h4 class="ubicacion"> <strong>Tamaño de terreno</strong> {{ $land->lot_size }}m2</h4>
                        </div>
                    </div>
                </a>
            @endforeach

            {{ $lands->links('pagination::bootstrap-5') }}
        </div>
    @endif
@endsection