@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.css">
@endsection

@section('content')
    <div style="margin-bottom: 100px !important;">

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


        <div class="container" style="margin-top: 0px;">
            <div class="contenedor-muestra">

                <div class="f-carousel" id="myCarousel">

                    @foreach ($land->images as $index => $image)
                        <div class="f-carousel__slide" data-thumb-src="{{ asset($image->full_name ?? 'img/default.jpg') }}">
                            <a href="{{ asset($image->full_name ?? 'img/default.jpg') }}" data-fancybox="gallery">
                                <img alt="{{ $land->title }}"
                                    data-lazy-src="{{ asset($image->full_name ?? 'img/default.jpg') }}" />
                            </a>
                        </div>
                    @endforeach


                </div>

                <div class="all_info" style="padding: 20px;">

                    <div>
                        <div class="precio">
                            {{ $land->price }}
                        </div>
                        
                        <div class="ubicacion"> <strong>Tamaño de terreno</strong> {{ $land->lot_size }}m2</div>
    
                        <div class="ubicacion">
                            <i class="fa-solid fa-location-dot"></i> {{ $land->colonia }}, {{ $land->city->name }}
                        </div>
    
                        <div class="title">
                            <h1>{{ $land->title }}</h1>
                        </div>
    
                        <div class="caracteristicas">
                            {!! $land->description !!}
                        </div>
                    </div>

                    <form action="{{ route('contactos.store') }}" method="post">
                        @csrf
                        
                        <input type="hidden" name="user_id" value="{{ $land->user_id }}">
                        <input type="hidden" name="land_id" value="{{ $land->id }}">

                        <div class="title">
                            Solicitar Más Información
                        </div>
                        
                        <div class="input">
                            <label for="name">Nombre</label>
                            <input type="text" placeholder="Nombre" name="name" value="{{ old('name') }}" id="name" required>
                        </div>

                        <div class="input">
                            <label for="email">Correo electrónico</label>
                            <input type="email" placeholder="Correo electrónico" name="email" value="{{ old('email') }}" id="email" required>
                        </div>

                        <div class="input">
                            <label for="tel">Teléfono</label>
                            <input type="tel" placeholder="Teléfono" name="tel" value="{{ old('tel') }}" id="tel">
                        </div>


                        <div class="input">
                            <label for="comentary">Comentario</label>
                            <textarea name="comentary" id="comentary" placeholder="Comentario" required style="text-indent: 5px; border: solid 1px #ccc; font-size: 15px; border-radius: 5px"></textarea>
                        </div>

                        <button type="submit"> Contactar <i class="fa-regular fa-paper-plane"></i></button>
                    </form>

                </div>
            </div>
        </div>


        @if ($relateds->count() > 0)
            <div class="container" style="margin-top: 60px;">
                <h3 class="titutlo_terrenos">Terrenos relacionados</h3>
            </div>
            <div class="terrenos container" style="margin-bottom: 50px;">

                @foreach ($relateds 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>
                                <h4 class="ubicacion"><i class="fa-solid fa-location-dot"></i>{{ $land->colonia }}, {{ $land->city->name }}
                                </h4>
                            </div>
                        </div>
                    </a>
                @endforeach
        @endif


    </div>
@endsection


@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.umd.js"></script>

    <script>
        const container = document.getElementById("myCarousel");
        const options = {
            Dots: false
        };

        new Carousel(container, options, {
            Thumbs
        });

        Fancybox.bind("[data-fancybox]", {
            // Your custom options
        });
    </script>
@endsection