@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">{{__('texte.objects_arr.show.show_object')}}</h3>
                    <div class="pull-right">
                        <a class="btn btn-warning" href="{{route('objects.edit',$object->id)}}" @cannot('edit_objects') disabled="disabled" @endcannot>{{__('texte.objects_arr.show.edit')}}</a>
                        <a type="button" class="btn btn-primary back-btn" href="{{route('objects.index')}}" @cannot('list_objects') disabled="disabled" @endcannot>{{__('texte.objects_arr.show.objects')}}</a>
                    </div>
                </div>

                <div class="panel-body">

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.client')}}: </strong>
                            <a class="btn btn-info btn-xs" href="{{ route('clients.show', $object->client_id) }}">{{ $object->client->name }}</a>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.object_name')}}: </strong>
                            {{ $object->name}}
                        </div>
                    </div>
                    
                    @if($object->user_id!=0)                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.user')}}: </strong>
                            <a class="btn btn-info btn-xs" href="{{ route('users.show',$object->user_id)}}">{{ $object->user->name}}</a>
                        </div>
                    </div>                    

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.email')}}: </strong>
                            {{ $object->email }}
                        </div>
                    </div>
                    @endif

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.contact_person')}}: </strong>
                            {{ $object->pic }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.country')}}: </strong>
                            {{ $object->location->area->country->name }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.area')}}: </strong>
                            {{ $object->location->area->name }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.location')}}: </strong>
                            {{ $object->location->name }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.delivery_address')}}: </strong>
                            {{ $object->address }}
                        </div>
                        <div id="map" style="width:100%;height:300px;"></div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12" style="margin-top:20px;">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.cellphone')}}: </strong>
                            {{ $object->mobile }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.phone')}}: </strong>
                            {{ $object->phone }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.note')}}: </strong>
                            {{ $object->note }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.type')}}: </strong>
                            {{ $object->subtype->type->name }}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.subtype')}}: </strong>
                            {{ $object->subtype->name }}
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>{{__('texte.objects_arr.show.active')}}: </strong>
                            {{ $object->active==1 ? __('texte.objects_arr.show.yes') : __('texte.objects_arr.show.no')}}
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                    
                    @foreach($filters as $filter)
                    
                        @if(isset($object->filters[$filter->name]))
                            <div class="form-group">
                                <strong>{{ $filter->title }}: </strong>
                                
                                @if ($filter->type == 0)
                                    {{ $object->filters[$filter->name] ?? '' }}
                                @else
                                    @foreach ($filter->options as $option)
                                        @if($filter->type==2)
                                        {{ isset($object->filters[$filter->name]) && in_array($option->id, $object->filters[$filter->name]) ? $option->title.', ' : ""}}
                                        @else
                                        {{ isset($object->filters[$filter->name]) && $option->id==$object->filters[$filter->name] ? $option->title : ""}}
                                        @endif
                                    @endforeach                                
                                @endif
                            </div>
                        @endif
                    @endforeach
                    </div>

                    @foreach ($object->images as $image)
                    <div class="col-xs-2 col-sm-2 col-md-2" style="width:15%;margin-right:15px;">
                        <img src="{{asset('/images/objects/thumbs/'.$image->name)}}" alt="{{$image->title}}">
                    </div>
                    @endforeach 
                </div>
                <div class="panel-footer"></div>                
                
            </div>
        </div>
    </div>
</div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrU5w4OnkGgneaQOGDKJzcv2wpYRZo7Bk&callback=initMap&libraries=places&v=weekly" defer></script>

<script type="text/javascript" charset="utf-8">
    var map;
    var marker;
    
    $(document).ready(function(){       
        initMap();    
    });
    
    
    function initMap() {
        var lat = {!! $object->gps_lat !!}, lng = {!! $object->gps_lng !!};
        
        var options = {
            zoom: 17,
            center: new google.maps.LatLng(lat, lng),
            mapTypeControlOptions: { mapTypeIds: [] },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            draggableCursor:'crosshair',
            draggingCursor: 'move'
        }
        
        map = new google.maps.Map(document.getElementById('map'), options);
        
        const card = document.getElementById("pac-card");
        const input = document.getElementById("pac-input");
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
        const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.

        autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

        autocomplete.setFields([
          "address_components",
          "geometry",
          "icon",
          "name",
        ]);
        
        marker = new google.maps.Marker({position: {lat: lat, lng: lng}, map: map});
    }
</script>
@endsection