@extends('layouts.app')

@section('title', $city->title_seo)
@section('description', $city->description_seo)

@section('styles')
    <style>
        img {
            max-width: 600px;
            max-height: 600px;
            width: 100%;
            height: 100%;
        }
    </style>
@endsection

@section('content')

    <div class="container" style="margin: 20px auto;">
        <div class="breadcrumbs">
            <a href="{{ route('lands.welcome') }}">Inicio</a>
            <span class="slash">/</span>
            <a href="{{ route('lands.welcome') }}">Terrenos</a>
            <span class="slash">/</span>
            <a href="{{ route('ciudades.show', $city->slug) }}">{{ $city->name }}</a>
        </div>
    </div>
    <div class="container">
        {!! $city->content !!}
    </div>


    @if (count($lands) > 0)
        <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>
                            <button class="btn-show">Ver más <i class="fa-solid fa-angles-right"></i></button>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    @else
        <div class="container">
            <div style="margin-top: 50px; font-size: 15px; color:gray; text-align: center;">No hay terrenos</div>
        </div>
    @endif

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