@extends('app-main')

@section('title', 'Property Management | ' . $property->address)
@section('description', 'Property Management | TrialTask | ' . $property->address)
@section('ogimage', asset('/content/image/base/og-image.jpg') )

@section('canonical', route('properties.show', ['property' => $property->id]))

@section('head')

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Place",
        "name": "{{ $property->address }}",
        "description": "{{ $property->description }}",
        "address": {
            "@type": "Address",
            "streetAddress": "{{ $property->address }}",
            "addressLocality": "{{ $property->town }}",
            "addressRegion": "{{ $property->county }}",
            "addressCountry": "{{ $property->country }}"
        },
        "geo": {
            "@type": "GeoCoordinates",
            "longitude": "{{ $property->longitude }}",
            "latitude": "{{ $property->latitude }}"
        },
        "numberOfRooms": "{{ $property->num_bedrooms }}",
        "numberOfBathroomsTotal": "{{ $property->num_bathrooms }}",
        "price": "{{ $property->price }}",
        "priceCurrency": "USD",
        "propertyType": "{{ $property->property_type_id }}",
        "availability": "{{ $property->status }}"
    }
    </script>

@endsection

@section('content')

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col col-md-6"><h2>Property Details</h2></div>
            <div class="col col-md-6">
                <a href="{{ route('home') }}" class="btn btn-primary btn-sm float-end" title="View All">View All</a>
            </div>
        </div>
    </div>
    <div class="card-body row">
        <div class="col-9 pr-8">
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>County</b></label>
                <div class="col-sm-10">
                    {{ $property->county }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Country</b></label>
                <div class="col-sm-10">
                    {{ $property->country }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Town</b></label>
                <div class="col-sm-10">
                    {{ $property->town }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Description</b></label>
                <div class="col-sm-10">
                    {{ $property->description }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Address</b></label>
                <div class="col-sm-10">
                    {{ $property->address }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Image</b></label>
                <div class="col-sm-10">
                    <picture>
                        <img data-src="{{ $property->image_full }}" width="250" height="100" class="img-thumbnail lazyload" alt="{{ $property->address }}" />
                    </picture>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Thumbnail Image</b></label>
                <div class="col-sm-10">
                    <picture>
                        <img data-src="{{ $property->image_thumbnail }}" width="100" height="100" class="img-thumbnail lazyload"  alt="{{ $property->address }}" />
                    </picture>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Latitude</b></label>
                <div class="col-sm-10">
                    {{ $property->latitude }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Longitude</b></label>
                <div class="col-sm-10">
                    {{ $property->longitude }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Number of Bedrooms</b></label>
                <div class="col-sm-10">
                    {{ $property->num_bedrooms }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Number of Bathrooms</b></label>
                <div class="col-sm-10">
                    {{ $property->num_bathrooms }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Price</b></label>
                <div class="col-sm-10">
                    {{ $property->price }} USD
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Property Type ID</b></label>
                <div class="col-sm-10">
                    {{ $property->property_type_id }}
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-label-form"><b>Status</b></label>
                <div class="col-sm-10">
                    <td>{{ ucfirst(str_replace('_', ' ', $property->status)) }}</td>
                </div>
            </div>
        </div>
        <div class="col">
            <h5>Contact Form</h5>
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <form action="{{ route('contact.submit') }}" method="POST" id="contactForm">
                @csrf

                <div class="mb-1">
                    <label for="name" class="form-label"></label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Name">
                </div>

                <div class="mb-1">
                    <label for="email" class="form-label"></label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                </div>

                <div class="mb-1">
                    <label for="message" class="form-label"></label>
                    <textarea class="form-control" id="message" name="message" rows="4" placeholder="Messsage"></textarea>
                </div>

                <button type="submit" class="btn btn-primary" title="Send">Send</button>
            </form>
            <div class="d-flex flex-column mt-5">
                <a href="#" id="more-details" class="text-primary" title="More details">More details</a>
                <a href="tel:0036301112222" id="phoneNumber" data-tag="phone" title="Phone number">+36 30 111 2222</a>
            </div>
        </div>
    </div>
</div>

<div class="text-center mt-3">
    <a href="/public" class="btn btn-secondary" title="Back">Back</a>
</div>

@endsection