You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.0 KiB
77 lines
3.0 KiB
@extends('layouts.app')
|
|
|
|
@section('title', __('outlet.detail'))
|
|
|
|
@section('content')
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">{{ __('outlet.detail') }}</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm">
|
|
<tbody>
|
|
<tr><td>{{ __('outlet.name') }}</td><td>{{ $outlet->name }}</td></tr>
|
|
<tr><td>{{ __('outlet.address') }}</td><td>{{ $outlet->address }}</td></tr>
|
|
<tr><td>{{ __('outlet.latitude') }}</td><td>{{ $outlet->latitude }}</td></tr>
|
|
<tr><td>{{ __('outlet.longitude') }}</td><td>{{ $outlet->longitude }}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer">
|
|
@can('update', $outlet)
|
|
<a href="{{ route('outlets.edit', $outlet) }}" id="edit-outlet-{{ $outlet->id }}" class="btn btn-warning">{{ __('outlet.edit') }}</a>
|
|
@endcan
|
|
<a href="{{ route('outlets.index') }}" class="btn btn-link">{{ __('outlet.back_to_index') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">{{ trans('outlet.location') }}</div>
|
|
@if ($outlet->coordinate)
|
|
<div class="card-body" id="mapid"></div>
|
|
@else
|
|
<div class="card-body">{{ __('outlet.no_coordinate') }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
|
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
|
crossorigin=""/>
|
|
|
|
<style>
|
|
#mapid { height: 400px; }
|
|
.popup-content-row { margin: 6px 0; }
|
|
</style>
|
|
@endsection
|
|
@push('scripts')
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
|
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
|
crossorigin=""></script>
|
|
|
|
<script>
|
|
var map = L.map('mapid').setView([{{ $outlet->latitude }}, {{ $outlet->longitude }}], 16);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
var myIcon = L.icon({
|
|
iconUrl: "{{ url('images/marker-icon-green.png') }}",
|
|
shadowUrl: "{{ url('images/marker-shadow.png') }}",
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41],
|
|
className: "marker-icon-green",
|
|
});
|
|
|
|
L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}], { icon: myIcon }).addTo(map)
|
|
.bindPopup('{!! $outlet->map_popup_content !!}');
|
|
</script>
|
|
@endpush
|