@extends('layouts.public')

@section('title') {{trans('seo.title.property', ['object' => $object->title, 'floor' => $floor->title, 'property' => $property->title])}} @endsection

@section('content')
<div class="sub-banner overview-bgi">
    <div class="overlay">
        <div class="container">
            <div class="breadcrumb-area">
                <h1>{{$property->title}}</h1>
                <ul class="breadcrumbs">
                    <li><a href="{{route('public.index')}}">{!!trans('references.page.subtitle')!!}</a></li>
                    <li class="active"><a href="{{route('public.object', $object)}}">{{$object->title}}</a></li>
                    <li class="active"><a href="{{route('public.floor', [$object, $floor])}}">{{$floor->title}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="properties-details-page content-area">
    <div class="container">
        <div class="row mb-50">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <div class="heading-properties clearfix sidebar-widget">
                    <div class="pull-left">
                        <h3>{{$property->title}}</h3>
                        <p>
                            <i class="fa fa-map-marker"></i>{{$property->object->title}}, {{$property->floor->title}}
                        </p>
                    </div>
                    <div class="pull-right">
                        <h3><span>{{number_format($property->price)}} €</span></h3>
                        <mark class="color" style="background: {{$property->status->color}}">{{$property->status->title}}</mark>
                    </div>
                </div>
                <div class="sidebar-widget mb-40">
                    @if($property->images->count())
                    <div class="properties-detail-slider simple-slider mb-40">
                        <div id="gallery" style="display: none;">
                            @foreach($property->images as $image)
                            <img src="{{asset($image->thumbnail)}}" alt="{{$object->title}}" data-image="{{asset($image->path)}}" data-description="{{$object->title}}">
                            @endforeach
                        </div>
                    </div>
                    @endif
                    <div class="properties-description mb-40 ">
                        <div class="main-title-2">
                            <h1><span>{!!trans('property.description')!!}</span></h1>
                        </div>
                        {!!$property->content!!}
                    </div>
                    <div class="properties-amenities">
                        <div class="main-title-2">
                            <h1><span>{!!trans('property.features')!!}</span></h1>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <ul class="amenities">
                                    <li>
                                        <i class="flaticon-square-layouting-with-black-square-in-east-area"></i>{{$property->surface}} m<sup>2</sup>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <ul class="amenities">
                                    <li>
                                        <i class="flaticon-bed"></i>{{$property->bedrooms}}
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <ul class="amenities">
                                    <li>
                                        <i class="flaticon-holidays"></i>{{$property->bathrooms}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="floor-plans sidebar-widget">
                    <div class="main-title-2">
                        <h1><span>{!!trans('property.rooms')!!}</span></h1>
                    </div>
                    <table class="table table-striped">
                        <thead>                            
                            <tr>
                                <th></th>
                                <th>{!!trans('property.room.surface')!!}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($property->rooms as $room)
                            <tr>
                                <td>{{$room->room_type->title}}</td>
                                <td>{{$room->surface}} m<sup>2</sup></td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>{!!trans('property.total')!!}</th>
                                <th>{{$property->surface}} m<sup>2</sup></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                @if($property->image)
                <div class="floor-plans sidebar-widget">
                    <div class="main-title-2">
                        <h1><span>{!!trans('property.floor-plan')!!}</span></h1>
                    </div>
                    <img src="{{asset($property->image)}}" alt="Kongrad Zadar - {{$property->title}}" class="img-responsive">
                </div>
                @endif
                @if($property->documents->count())
                <div class="sidebar-widget">
                    <div class="main-title-2">
                        <h1><span>{!!trans('global.documents')!!}</span></h1>
                    </div>
                    @foreach($property->documents as $document)
                    <p><a href="{{asset($document->path)}}" class="red" target="_blank"><i class="fa fa-download"></i> {{$document->name}}</a></p> 
                    @endforeach
                </div>
                @endif
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="sidebar right">
                    @include('include.aside')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link rel='stylesheet' href='/unitegallery/css/unite-gallery.css?v=2' type='text/css' />
<style type="text/css">
    .ug-gallery-wrapper .ug-slider-wrapper, .ug-gallery-wrapper .ug-strip-panel {
        background-color: white;
    }
</style>
@endsection

@section('scripts')
<script type='text/javascript' src='/unitegallery/js/unitegallery.min.js'></script>  
<script type='text/javascript' src='/unitegallery/themes/compact/ug-theme-compact.js'></script>
<script type="text/javascript">

    jQuery(document).ready(function(){

        jQuery("#gallery").unitegallery({
            gallery_theme: "compact",
            gallery_height: 600, 
            slider_scale_mode: "fit",
            slider_control_zoom: false,
            slider_fullscreen_button_align_hor: "right",
            slider_enable_play_button: false,
            slider_enable_zoom_panel: false,
            strippanel_enable_handle: false
        });

    });

</script>
@endsection